/* „Maa kasutamise ülevaade" — stiil.
 *
 * Värvid ja paigutus on üle võetud Figma Make prototüübist
 * „Prototüüp_strateegiapaev_5". Ühtegi välist fonti ega CDN-i ei
 * kasutata, et leht avaneks ka otse failisüsteemist.
 */

:root {
  --navy:      #0b2f70;
  --navy-tume: #082454;
  --navy-hele: #2f6fd0;
  --eyebrow:   #9db4d8;

  --taust:  #f4f6f9;
  --pind:   #ffffff;
  --pind2:  #eef2f7;
  --tekst:  #16213a;
  --vaikne: #5b6880;
  --joon:   #d6dbe3;
  --joon2:  #b7c0ce;

  --sinine:    #1d4ed8;
  --sinine-t:  #dbeafe;
  --sinine-p:  #1e40af;
  --roheline:  #15803d;
  --roheline-t:#dcfce7;
  --punane:    #b91c1c;
  --punane-t:  #fee2e2;
  --oranz:     #b45309;
  --oranz-t:   #fef3c7;
  --lilla:     #7c3aed;
  --hall-t:    #eceef2;

  --nupp:      #5b8fd4;
  --nupp-hover:#4a7cc0;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

.jata-vahele {
  position: absolute; left: -9999px; top: 0; z-index: 9;
  background: var(--tekst); color: #fff; padding: 0.6rem 1rem;
}
.jata-vahele:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible { outline: 3px solid var(--sinine); outline-offset: 2px; }

.noscript {
  max-width: 44rem; margin: 3rem auto; padding: 1.5rem;
  background: var(--pind); border: 1px solid var(--joon); border-radius: 10px;
}

/* ---------------------------------------------------------------- */
/* Päis ja hero                                                     */
/* ---------------------------------------------------------------- */

.paine { background: var(--navy-tume); border-bottom: 1px solid rgba(255,255,255,0.12); }
.paine .piir { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1.5rem; }
.logo {
  width: 30px; height: 30px; flex: 0 0 30px;
  background: var(--navy-hele); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
}
.paine .nimi { color: #fff; font-weight: 700; font-size: 1rem; }

.hero { background: var(--navy); color: #fff; }
.hero .piir { padding: 1.4rem 1.5rem 1.7rem; }
.hero .eyebrow {
  margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--eyebrow);
}
.hero h1 { margin: 0 0 0.45rem; font-size: 1.6rem; letter-spacing: -0.01em; }
.hero .juhtlause { margin: 0; max-width: 48rem; color: #dce6f5; font-size: 0.95rem; }

.piir { max-width: 78rem; margin: 0 auto; }

/* ---------------------------------------------------------------- */
/* Sammuriba                                                        */
/* ---------------------------------------------------------------- */

.sammud {
  display: flex; margin: 0 0 1.1rem; padding: 0; list-style: none;
  background: var(--pind); border: 1px solid var(--tekst); border-radius: 10px;
  overflow: hidden;
}
.sammud li { flex: 1 1 0; display: flex; min-width: 0; }
.sammud li + li { border-left: 1px solid var(--tekst); }
.sammud button {
  flex: 1 1 auto; display: flex; align-items: center; gap: 0.55rem;
  /* Figmas jooksid sildid lahtrist välja ja katsid järgmise numbri.
     Siin on igal lahtril oma ruum ja tekst murdub. */
  min-width: 0; padding: 0.7rem 0.85rem;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 0.9rem; color: var(--vaikne); text-align: left;
}
.sammud button:hover:not(:disabled) { background: var(--pind2); }
.sammud button:disabled { cursor: not-allowed; opacity: 0.75; }
.sammud .number {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--joon2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700;
}
.sammud li.aktiivne button { background: var(--sinine-t); color: var(--navy); font-weight: 700; }
.sammud li.aktiivne .number { background: var(--navy); }
.sammud li.tehtud .number { background: var(--roheline); }

/* ---------------------------------------------------------------- */
/* Põhipaigutus                                                     */
/* ---------------------------------------------------------------- */

main { padding: 1.3rem 1.5rem 2.5rem; }

.kaks { display: grid; grid-template-columns: minmax(0, 22.5rem) minmax(0, 1fr); gap: 1.1rem; }
@media (max-width: 54rem) { .kaks { grid-template-columns: 1fr; } }

.paneel {
  background: var(--pind); border: 1px solid var(--joon);
  border-radius: 10px; padding: 1.1rem 1.15rem;
}
.paneel.tyhi { display: flex; align-items: center; justify-content: center;
  min-height: 24rem; color: var(--vaikne); text-align: center; }

.kaardiikoon {
  width: 34px; height: 34px; margin: 0 auto 0.7rem; border-radius: 6px;
  background: var(--joon); display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 3px; padding: 6px;
}
.kaardiikoon span { background: var(--pind); border-radius: 2px; }

/* Valikupillid */
.pillid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.pill {
  padding: 0.3rem 0.75rem; border-radius: 999px; cursor: pointer;
  background: var(--pind); border: 1px solid var(--joon2);
  font: inherit; font-size: 0.88rem; color: var(--tekst);
}
.pill:hover { background: var(--pind2); }
.pill[aria-pressed="true"] {
  background: var(--sinine-t); border-color: var(--sinine); color: var(--sinine-p); font-weight: 600;
}

/* Vorm */
.silt { display: block; font-weight: 700; font-size: 0.92rem; margin: 0 0 0.4rem; }
.otsirida { display: flex; gap: 0.5rem; }
.otsirida input {
  flex: 1 1 auto; min-width: 0; padding: 0.6rem 0.7rem;
  border: 1px solid var(--tekst); border-radius: 8px;
  font: inherit; background: var(--pind); color: var(--tekst);
}
.otsirida input::placeholder { color: #9aa5b6; }

.nupp {
  padding: 0.6rem 1.05rem; border-radius: 8px; cursor: pointer;
  background: var(--nupp); border: 1px solid var(--nupp); color: #fff;
  font: inherit; font-weight: 700;
}
.nupp:hover { background: var(--nupp-hover); border-color: var(--nupp-hover); }
.nupp.teine {
  background: var(--pind); color: var(--tekst); border: 1px solid var(--tekst); font-weight: 600;
}
.nupp.teine:hover { background: var(--pind2); }
.nupp.link {
  background: var(--pind); color: var(--sinine); border: 1px solid var(--sinine); font-weight: 700;
}
.nupp.link:hover { background: var(--sinine-t); }
.nupp:disabled { opacity: 0.5; cursor: not-allowed; }

.abitekst { margin: 0.45rem 0 0; font-size: 0.84rem; color: var(--vaikne); }
.vigatekst { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--punane); font-weight: 600; }

/* ---------------------------------------------------------------- */
/* Näidiskinnistud                                                  */
/* ---------------------------------------------------------------- */

.jaotis {
  margin: 1.6rem 0 0.8rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--vaikne);
}

.kinnistud { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.kinnistu {
  background: var(--pind); border: 1px solid var(--tekst); border-radius: 10px;
  padding: 0.75rem 0.9rem;
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
}
/* Klass on `kirje`, mitte `info`: `info` on sildi variandi nimi ja
   nende kokkupõrge venitas sildi üle kogu laiuse. */
.kinnistu .kirje { flex: 1 1 16rem; min-width: 0; }
.kinnistu .rida1 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kinnistu .aadress { font-weight: 700; }
.kinnistu .meta {
  margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--vaikne);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.kinnistu .teod { display: flex; gap: 0.4rem; flex: 0 0 auto; }

.silt-mark {
  font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 4px;
  background: var(--hall-t); color: var(--vaikne); border: 1px solid var(--joon2);
  /* Silt ei venitata kunagi: flex-konteineris jääb ta oma sisu laiusesse. */
  flex: 0 0 auto; align-self: center; white-space: nowrap;
}
.silt-mark.ok      { background: var(--roheline-t); color: var(--roheline); border-color: #a7e3bc; }
.silt-mark.info    { background: var(--sinine-t);   color: var(--sinine-p); border-color: #a9c6f7; }
.silt-mark.hoiatus { background: var(--punane-t);   color: var(--punane);  border-color: #f3b4b4; }
.silt-mark.teatis  { background: var(--oranz-t);    color: var(--oranz);   border-color: #f0d08a; }
.silt-mark.luba    { background: var(--sinine-t);   color: var(--sinine-p); border-color: #a9c6f7; }
.silt-mark.keelatud{ background: var(--punane-t);   color: var(--punane);  border-color: #f3b4b4; }

/* ---------------------------------------------------------------- */
/* Kaart                                                            */
/* ---------------------------------------------------------------- */

.kaart-svg { width: 100%; height: auto; display: block; border-radius: 8px; background: #f8fafc; }
.kaart-svg .krunt { fill: #ffffff; stroke: var(--tekst); stroke-width: 0.6; }
/* Aluskaardi peal peab krunt läbi paistma, muidu kaob kaart ära. */
/* 0,12 on katsetatud: väiksem ei erista krunti ümbrusest, suurem
   muudab aluskaardi mudaseks — eriti kui krundil on mitu kattuvat
   tsooni, nagu muinsuskaitse annab kaks. */
.kaart-svg .krunt-kaardil { fill: #ffffff; fill-opacity: 0.12; }
.kaart-svg .tsoon { fill-opacity: 0.22; stroke-width: 0.5; stroke-dasharray: 2 1.2; }
/* Kogu krunti katev tsoon: ääreriba, mitte pind. Vaata `kaart`
   kommentaari — pind kataks aluskaardi kinni ja ei ütleks midagi
   asukoha kohta. */
.kaart-svg .tsoon-aar { fill: none; stroke-opacity: 0.75; }
/* Krundi piirjoon tsoonide KOHAL. Peab olema täitmata, muidu katab
   tsoonid ära. Eraldi klass, sest SVG `fill="none"` atribuut jääb
   ülalolevale reeglile alla. */
.kaart-svg .krunt-piir { fill: none; stroke-width: 0.45; }
/* Mõõtkava ja põhjanool. Valge ääris, et need loeksid ka tumedal
   ortofotol. */
.kaart-svg .mootkava {
  fill: none; stroke: var(--tekst); stroke-width: 0.5;
  paint-order: stroke; stroke-linejoin: round;
}
.kaart-svg .pohjanool { fill: var(--tekst); stroke: #fff; stroke-width: 0.25; }
/* `font-size` TEADLIKULT PUUDU.
   Kaardi viewBox on meetrites ja krundi suurus muutub — 800 m² krundil
   ja 2 ha krundil annaks sama ühikuline suurus täiesti erineva kirja.
   Seepärast arvutab `kaart` kirjasuuruse viewBox'i laiusest ja seab
   selle atribuudina. CSS-reegel võidaks atribuudi ära, nii et siia
   seda panna ei tohi — sama lõks nagu `.krunt` `fill`-iga. */
.kaart-svg .molk {
  fill: var(--tekst); font-weight: 700;
  stroke: #fff; stroke-width: 0.6; paint-order: stroke;
}

.aluskaardirida { margin-top: 0.6rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.35rem; }
.aluskaardirida .silt { margin: 0 0.25rem 0 0; }
.aluskaardirida .nupp.aktiivne {
  background: var(--tedi-primary, #005aa3); color: #fff; border-radius: 4px;
}
.aluskaardirida .allikas { flex: 1 0 100%; margin: 0.3rem 0 0; }

.legend { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.legend li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; }
.legend .ruut {
  flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; margin-top: 0.2rem;
  border: 1px solid rgba(0,0,0,0.25);
}

/* ---------------------------------------------------------------- */
/* Kolm kaarti                                                      */
/* ---------------------------------------------------------------- */

.kolm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 62rem) { .kolm { grid-template-columns: 1fr; } }

.suurkaart {
  background: var(--pind); border: 1px solid var(--joon);
  border-top: 4px solid var(--joon2); border-radius: 10px;
  padding: 1rem 1.1rem 1.15rem;
}
.suurkaart.roheline { border-top-color: var(--roheline); }
.suurkaart.sinine   { border-top-color: var(--sinine); }
.suurkaart.oranz    { border-top-color: var(--oranz); }
.suurkaart h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.suurkaart .alapealkiri { margin: 0 0 0.85rem; font-size: 0.86rem; color: var(--vaikne); }

.tooloend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.tooloend li {
  padding: 0.55rem 0.65rem; border: 1px solid var(--joon);
  border-radius: 8px; background: var(--pind2);
}
.tooloend .rida1 { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.tooloend .nimi { font-weight: 700; font-size: 0.93rem; }
.tooloend .moot { font-size: 0.82rem; color: var(--vaikne); }
.tooloend .lisa { margin: 0.3rem 0 0; font-size: 0.84rem; }

.tingimusloend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.tingimus {
  padding: 0.6rem 0.7rem; border: 1px solid var(--joon); border-radius: 8px;
  border-left: 3px solid var(--joon2); background: var(--pind2);
}
.tingimus.mahub      { border-left-color: var(--roheline); }
.tingimus.ei_mahu    { border-left-color: var(--punane); }
.tingimus.kaalutlus  { border-left-color: var(--oranz); }
.tingimus.teadmata   { border-left-color: var(--joon2); }
.tingimus.asukohast  { border-left-color: var(--lilla); }
.tingimus.info       { border-left-color: var(--sinine); }
.tingimus .lause { font-weight: 600; font-size: 0.92rem; margin: 0 0 0.25rem; }
.tingimus .selg  { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--vaikne); }
.tingimus .allikas { margin: 0; font-size: 0.78rem; color: var(--vaikne); }
.tingimus details { margin-top: 0.35rem; font-size: 0.85rem; }
.tingimus summary { cursor: pointer; color: var(--sinine); font-weight: 600; }
.tingimus details p { margin: 0.4rem 0 0; }

.menetlus { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; counter-reset: s; }
.menetlus li {
  display: flex; gap: 0.55rem; font-size: 0.9rem;
}
.menetlus li::before {
  counter-increment: s; content: counter(s);
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--oranz-t); color: var(--oranz);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.76rem; font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* Lisaosad kolmandas sammus                                        */
/* ---------------------------------------------------------------- */

.kokkuvoteriba {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem;
  padding: 0; list-style: none;
}
.kokkuvoteriba li {
  background: var(--pind); border: 1px solid var(--joon); border-radius: 8px;
  padding: 0.5rem 0.75rem; font-size: 0.86rem;
}
.kokkuvoteriba strong { font-size: 1.05rem; }

.ajarida { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ajarida > li {
  background: var(--pind); border: 1px solid var(--joon);
  border-left: 3px solid var(--oranz); border-radius: 8px; padding: 0.7rem 0.8rem;
}
.ajarida .kp { font-weight: 700; font-size: 0.9rem; margin: 0 0 0.35rem; }
.ajarida ul { margin: 0; padding-left: 1.1rem; font-size: 0.87rem; }
.ajarida li { margin-bottom: 0.2rem; }

.lyngad { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.lyngad li {
  background: var(--sinine-t); border: 1px solid #a9c6f7;
  border-left: 3px solid var(--sinine); border-radius: 8px; padding: 0.6rem 0.75rem;
  font-size: 0.87rem;
}
.lyngad strong { display: block; margin-bottom: 0.15rem; }

.riba {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin: 0 0 1.1rem; padding: 0.7rem 0.85rem;
  background: var(--pind); border: 1px solid var(--joon); border-radius: 10px;
}
.riba label { font-size: 0.88rem; font-weight: 600; }
.riba input[type="date"] {
  padding: 0.35rem 0.5rem; border: 1px solid var(--joon2); border-radius: 6px;
  font: inherit; font-size: 0.88rem;
}
.riba .kasvav { flex: 1 1 auto; }

h2.osa { font-size: 1.1rem; margin: 1.8rem 0 0.8rem; }

/* ---------------------------------------------------------------- */
/* Jalus                                                            */
/* ---------------------------------------------------------------- */

footer { border-top: 1px solid var(--joon); background: var(--pind); }
footer .piir { padding: 1.4rem 1.5rem 2.4rem; font-size: 0.85rem; color: var(--vaikne); }
footer p { margin: 0 0 0.4rem; }
footer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em; background: var(--pind2); border: 1px solid var(--joon);
  border-radius: 3px; padding: 0.05em 0.32em;
}

@media print {
  .sammud, .pillid, .otsirida, .kinnistu .teod, .riba, .jata-vahele { display: none !important; }
  body { background: #fff; }
  .paneel, .suurkaart, .kinnistu { break-inside: avoid; }
}