/* RuumiHuubi prototüübi stiil. Kohalik fail, väliseid sõltuvusi ei ole. */

:root {
  --taust: #f7f8f6;
  --pind: #ffffff;
  --pind2: #f1f3ef;
  --tekst: #1a1d18;
  --vaikne: #59635b;
  --joon: #d8ddd5;
  --joon2: #b7bfb6;

  --roheline: #2e7d32;
  --roheline-t: #e8f5e9;
  --sinine: #1565c0;
  --sinine-t: #e3f2fd;
  --punane: #b3261e;
  --punane-t: #fdecea;
  --kollane: #a06800;
  --kollane-t: #fff6e0;
  --lilla: #6a4c93;
  --lilla-t: #f1ecf8;

  --r: 6px;
  --laius: 78rem;
}

* { box-sizing: border-box; }

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

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.005em; }
p { margin: 0 0 0.75rem; }
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;
}

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

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

.noscript {
  max-width: 40rem; margin: 3rem auto; padding: 1.5rem;
  background: var(--kollane-t); border: 1px solid var(--joon); border-radius: var(--r);
}

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

.paise { background: var(--pind); border-bottom: 1px solid var(--joon); }

.paise-ylemine {
  max-width: var(--laius); margin: 0 auto; padding: 1.25rem 1.25rem 0.75rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: flex-start;
}
.paise h1 { font-size: 1.4rem; margin: 0 0 0.25rem; }
.paise .juhtlause { margin: 0; color: var(--vaikne); font-size: 0.92rem; max-width: 44rem; }
.paise-seis { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.ajamasin {
  padding: 0.75rem 1.25rem; display: flex; flex-wrap: wrap;
  gap: 1.25rem; align-items: flex-end;
  background: var(--lilla-t); border-top: 1px solid var(--joon);
  border-bottom: 1px solid var(--joon);
}
.ajamasin > * { flex: 0 0 auto; }
.ajamasin-plokk { display: flex; flex-direction: column; gap: 0.15rem; }
.ajamasin-plokk label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--lilla); }
.ajamasin-abi { font-size: 0.78rem; color: var(--vaikne); }
.ajamasin-kiired { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.valitud-planeering {
  max-width: var(--laius); margin: 0 auto;
  padding: 0.75rem 1.25rem; display: flex; gap: 0.6rem; align-items: center;
}
.valitud-planeering label { font-size: 0.82rem; font-weight: 600; color: var(--vaikne); }

/* ---------------- navigatsioon ---------------- */

.nav { background: var(--pind2); border-bottom: 1px solid var(--joon); }
.nav ul {
  max-width: var(--laius); margin: 0 auto; padding: 0 1.25rem;
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.1rem;
}
.nav-nupp {
  border: 0; background: none; cursor: pointer; font: inherit;
  padding: 0.7rem 0.85rem; color: var(--vaikne);
  border-bottom: 3px solid transparent; font-size: 0.9rem;
}
.nav-nupp:hover { color: var(--tekst); background: #e6e9e3; }
.nav-nupp.on-aktiivne {
  color: var(--tekst); font-weight: 600;
  background: var(--pind); border-bottom-color: var(--roheline);
}

/* ---------------- sisu ---------------- */

.sisu { max-width: var(--laius); margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.kaart {
  background: var(--pind); border: 1px solid var(--joon);
  border-radius: var(--r); padding: 1.1rem 1.2rem; margin-bottom: 1.25rem;
}
.kaart > h3 { margin: 0 0 0.75rem; font-size: 1.08rem; }
.kaart > :last-child { margin-bottom: 0; }

.tyhi { color: var(--vaikne); font-style: italic; margin: 0; }
.vaike { font-size: 0.85rem; color: var(--vaikne); }
.abi { font-size: 0.85rem; color: var(--vaikne); margin: 0.2rem 0 0.6rem; }
.hoiatus-rida { color: var(--punane); font-size: 0.88rem; }
.ok-rida { color: var(--roheline); font-weight: 600; }

.teatis {
  border: 1px solid var(--joon); border-left: 4px solid var(--joon2);
  border-radius: var(--r); padding: 0.85rem 1.1rem; margin-bottom: 1.25rem;
  font-size: 0.92rem;
}
.teatis-info { background: var(--sinine-t); border-left-color: var(--sinine); }
.teatis-uus  { background: var(--roheline-t); border-left-color: var(--roheline); }

.teade {
  max-width: var(--laius); margin: 0.75rem auto 0; padding: 0.7rem 1.1rem;
  border-radius: var(--r); font-size: 0.92rem; border: 1px solid;
}
.teade-ok   { background: var(--roheline-t); border-color: #a5d6a7; color: #1b5e20; }
.teade-viga { background: var(--punane-t);   border-color: #f2b8b5; color: #8c1d18; }

/* ---------------- märgised ---------------- */

.margis {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.03em; padding: 0.15rem 0.45rem; border-radius: 3px;
  border: 1px solid; white-space: nowrap; vertical-align: middle;
}
.m-ok, .m-vastab, .m-kehtestatud {
  background: var(--roheline-t); color: #1b5e20; border-color: #a5d6a7; }
.m-viga, .m-rikub, .m-kehtetu {
  background: var(--punane-t); color: #8c1d18; border-color: #f2b8b5; }
.m-hoiatus, .m-kontrollimata, .m-kooskolastamisel {
  background: var(--kollane-t); color: #8a5800; border-color: #ffd899; }
.m-info, .m-vastuvoetud {
  background: var(--sinine-t); color: #0d47a1; border-color: #90caf9; }
.m-soovitus, .m-eskiis {
  background: var(--lilla-t); color: #4a3369; border-color: #c8b6e2; }
.m-null, .m-algatatud {
  background: var(--pind2); color: var(--vaikne); border-color: var(--joon2); }
.m-kood {
  background: var(--pind2); color: var(--vaikne); border-color: var(--joon2);
  font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------------- nupud ---------------- */

.nupp {
  font: inherit; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--joon2); background: var(--pind); color: var(--tekst);
  padding: 0.5rem 0.9rem;
}
.nupp:hover { background: var(--pind2); }
.nupp-esile {
  background: var(--roheline); border-color: var(--roheline); color: #fff;
  font-weight: 600; }
.nupp-esile:hover { background: #256428; }
.nupp-vaike { padding: 0.32rem 0.6rem; font-size: 0.85rem; }
.nupp-vaike.on-aktiivne {
  background: var(--lilla); border-color: var(--lilla); color: #fff; }
.nupp-oht { color: #8c1d18; border-color: #e6a9a5; }
.nupp-oht:hover { background: var(--punane-t); }

/* ---------------- vormid ---------------- */

.vorm { display: block; }
.vorm-veerud {
  display: grid; gap: 0.85rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-bottom: 0.85rem;
}
.vorm-jalus { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.85rem; }

.valja { display: flex; flex-direction: column; gap: 0.2rem; }
.valja label { font-size: 0.85rem; font-weight: 600; }
.valja .noutud { color: var(--punane); }
.valja .yhik { font-weight: 400; color: var(--vaikne); }
.valja-lipp { flex-direction: row; align-items: center; gap: 0.5rem; }
.valja-lipp input { order: -1; }

input[type="text"], input[type="number"], input[type="date"],
input[type="datetime-local"], select, textarea {
  font: inherit; padding: 0.45rem 0.55rem;
  border: 1px solid var(--joon2); border-radius: 4px;
  background: var(--pind); color: var(--tekst); width: 100%;
}
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
textarea { resize: vertical; }

.rida-koos { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.rida-koos input, .rida-koos select { width: auto; min-width: 12rem; }

.atr-kast, .geo-kast {
  border: 1px dashed var(--joon2); border-radius: var(--r);
  padding: 0.85rem 1rem; margin: 0.85rem 0; background: var(--pind2);
}
.atr-kast h4, .geo-kast h4 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.geo-seis { font-size: 0.85rem; color: var(--vaikne); margin: 0.4rem 0; }

/* ---------------- tabelid ---------------- */

.tabeli-ymbris { overflow-x: auto; margin-bottom: 0.85rem; }
.tabel {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
  background: var(--pind); border: 1px solid var(--joon); border-radius: var(--r);
}
.tabel th, .tabel td {
  text-align: left; vertical-align: top; padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--joon);
}
.tabel thead th {
  background: var(--pind2); font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--vaikne); border-bottom: 1px solid var(--joon2);
  white-space: nowrap;
}
.tabel tbody tr:last-child th, .tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr.on-valitud { background: var(--roheline-t); }
.tabel tbody tr.rida-puudu { background: var(--punane-t); }
.tabel td .nupp { margin-right: 0.3rem; }
.tabel-tihe th, .tabel-tihe td { padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.logi-sisu { max-width: 34rem; word-break: break-word; }

/* ---------------- kaart (SVG) ---------------- */

.kaardi-ymbris {
  background: var(--pind); border: 1px solid var(--joon);
  border-radius: var(--r); overflow: hidden; margin-bottom: 0.6rem;
}
.kaart-vaike { max-width: 26rem; }
svg.kaart { display: block; width: 100%; height: auto; background: #fdfdfb; }
svg.kaart-joonistus { cursor: crosshair; }

.kaart-ruudustik .ruut { stroke: #e8ebe5; stroke-width: 0.3; }
.kaart-ruudustik .ruut-jaam { stroke: #d3d8cf; stroke-width: 0.5; }
.kaart-mootkava line { stroke: #55635b; stroke-width: 0.6; }
.kaart-mootkava text { fill: #55635b; font-size: 3.6px; }

/* Vaikevärv katab ka käitusajal lisatud objektiliigid — uus liik on kaardil
   kohe nähtav, ilma et siia tuleks reeglit lisada. */
.kuju polygon, .kuju polyline { stroke-width: 0.7; }
.kuju polygon { fill: #b0bec5; stroke: #455a64; fill-opacity: 0.42; }
.kuju polyline { fill: none; stroke: #455a64; stroke-width: 1.4; }
.kuju circle { stroke-width: 0.6; }

.kuju-kontekst polygon {
  fill: #6a4c93; fill-opacity: 0.07; stroke: #6a4c93;
  stroke-width: 0.6; stroke-dasharray: 3 2;
}
/* Ülemplaneeringu kontekstala: teine värv, sest see on võõra planeeringu
   tingimuse ulatus ja just tema tekitab ristplaneeringulise vastuolu. */
.kuju-kontekst-ylem polygon {
  fill: #e65100; fill-opacity: 0.06; stroke: #e65100;
  stroke-width: 0.8; stroke-dasharray: 5 2;
}
.kontekst-silt {
  font-size: 3.2px; fill: #6a4c93; font-weight: 600;
  paint-order: stroke; stroke: #fdfdfb; stroke-width: 0.9;
}

.kuju-liik-krunt polygon         { fill: #cfd8dc; stroke: #546e7a; }
.kuju-liik-hoonestusala polygon  { fill: #ef9a9a; stroke: #b3261e; }
.kuju-liik-haljastusala polygon  { fill: #a5d6a7; stroke: #2e7d32; }
.kuju-liik-parkimisala polygon   { fill: #ffe082; stroke: #a06800; }
.kuju-liik-kaitsevoond polygon   { fill: #b39ddb; stroke: #6a4c93; }
.kuju-liik-miljooala polygon     { fill: #ffcc80; stroke: #e65100; }
.kuju-liik-juurdepaasutee polyline { stroke: #37474f; }
.kuju circle { fill: #1565c0; stroke: #0d47a1; }

.kuju.on-valitud polygon, .kuju.on-valitud polyline {
  stroke-width: 1.6; stroke-dasharray: none; filter: none;
}
.kuju.on-valitud polygon { fill-opacity: 0.7; }
.kuju.on-kustutatud polygon, .kuju.on-kustutatud polyline {
  stroke-dasharray: 2 2; opacity: 0.4;
}
/* Vastuoluga objekt: kaart ja valideerimine on üks vaade, mitte kaks. */
.kuju.on-vastuolus polygon, .kuju.on-vastuolus polyline {
  stroke: #b3261e; stroke-width: 1.5; stroke-dasharray: 2.5 1.5;
}
.kuju.on-klikitav { cursor: pointer; }
.kuju.on-klikitav:hover polygon { fill-opacity: 0.65; }

.kuju-silt { font-size: 3.4px; fill: #1a1d18; paint-order: stroke;
  stroke: #fdfdfb; stroke-width: 0.9; }

.kuju-joonistus polygon { fill: #90caf9; fill-opacity: 0.4; stroke: #1565c0; }
.kuju-joonistus polyline { stroke: #1565c0; }
.kuju-joonistus circle { fill: #1565c0; }
.joonis .tipp { fill: #fff; stroke: #1565c0; stroke-width: 0.5; }
.joonis .tipp-nr { font-size: 3px; fill: #1565c0; }

.legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.85rem; }
.legend-kirje { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-varv {
  width: 0.9rem; height: 0.9rem; border-radius: 2px;
  border: 1px solid var(--joon2); display: inline-block;
}
.legend-varv.kuju-liik-krunt        { background: #cfd8dc; border-color: #546e7a; }
.legend-varv.kuju-liik-hoonestusala { background: #ef9a9a; border-color: #b3261e; }
.legend-varv.kuju-liik-haljastusala { background: #a5d6a7; border-color: #2e7d32; }
.legend-varv.kuju-liik-parkimisala  { background: #ffe082; border-color: #a06800; }
.legend-varv.kuju-liik-kaitsevoond  { background: #b39ddb; border-color: #6a4c93; }
.legend-varv.kuju-liik-miljooala    { background: #ffcc80; border-color: #e65100; }
.legend-varv.kuju-liik-juurdepaasutee { background: #37474f; border-color: #263238; }
.legend-varv.legend-kontekst {
  background: rgba(106, 76, 147, 0.12); border: 1px dashed #6a4c93; }
.legend-varv.legend-kontekst-ylem {
  background: rgba(230, 81, 0, 0.1); border: 1px dashed #e65100; }
.legend-varv.legend-vastuolu {
  background: transparent; border: 2px dashed #b3261e; }

/* ---------------- lause ---------------- */

.lause { font-weight: 600; }
.lause-suur { font-size: 1.1rem; margin: 0.3rem 0 0.6rem; }

.lause-eelvaade {
  background: var(--sinine-t); border: 1px solid #90caf9;
  border-radius: var(--r); padding: 0.9rem 1.05rem; margin: 0.85rem 0;
}
.lause-eelvaade h4 { margin: 0 0 0.25rem; font-size: 0.9rem; }

.lause-osad { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.lause-osa {
  font-size: 0.8rem; padding: 0.15rem 0.4rem; border-radius: 3px;
  border: 1px solid var(--joon2); background: var(--pind);
}
.osa-kontekst    { border-color: #c8b6e2; background: var(--lilla-t); }
.osa-siht        { border-color: #a5d6a7; background: var(--roheline-t); }
.osa-atribuut    { border-color: #90caf9; background: #fff; }
.osa-operaator   { border-color: #ffd899; background: var(--kollane-t); }
.osa-piirvaartus { border-color: #f2b8b5; background: var(--punane-t); }

.moju { margin: 0.3rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.moju li { margin-bottom: 0.2rem; }

/* ---------------- valideerimine ---------------- */

.kaart-valid { padding-top: 0.9rem; }
.valid-paise {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  justify-content: space-between; margin-bottom: 0.85rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--joon);
}
.valid-paise h3 { margin: 0; font-size: 1.05rem; }
.valid-arvud { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.leid {
  border: 1px solid var(--joon); border-left: 4px solid var(--joon2);
  border-radius: 4px; padding: 0.7rem 0.9rem; margin-bottom: 0.6rem;
  background: var(--pind);
}
.leid-viga    { border-left-color: var(--punane);   background: var(--punane-t); }
.leid-hoiatus { border-left-color: var(--kollane);  background: var(--kollane-t); }
.leid-info    { border-left-color: var(--sinine);   background: var(--sinine-t); }
.leid-paise { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 0.35rem; }
.leid p { margin: 0 0 0.35rem; font-size: 0.92rem; }
.leid-allikas { font-size: 0.82rem; color: var(--vaikne); font-style: italic; }

/* ---------------- seletuskiri ---------------- */

.dok-riba {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.dok-riba .abi { margin: 0; max-width: 46rem; }

.seletuskiri {
  background: var(--pind); border: 1px solid var(--joon);
  border-radius: var(--r); padding: 2rem 2.25rem; max-width: 48rem;
  font-size: 0.98rem;
}
.seletuskiri h2 { margin: 0 0 0.2rem; font-size: 1.5rem; }
.seletuskiri-alapealkiri { color: var(--vaikne); margin: 0 0 1.25rem; }
.seletuskiri h3 { margin: 1.75rem 0 0.6rem; font-size: 1.15rem;
  padding-bottom: 0.25rem; border-bottom: 1px solid var(--joon); }
.seletuskiri h4 { margin: 1.25rem 0 0.4rem; font-size: 1rem; }

.meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem;
  font-size: 0.88rem; margin: 0 0 1.25rem; padding: 0.8rem 1rem;
  background: var(--pind2); border-radius: 4px; }
.meta dt { font-weight: 600; color: var(--vaikne); }
.meta dd { margin: 0; }

.tingimus-plokk {
  margin: 0.6rem 0; padding: 0.7rem 1rem; border-left: 3px solid var(--roheline);
  background: var(--roheline-t); border-radius: 0 4px 4px 0;
}
.tingimus-plokk p { margin: 0 0 0.2rem; }
.tingimuste-loend li { margin-bottom: 0.5rem; }
.seletuskiri-jalus {
  margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--joon);
  font-size: 0.82rem; color: var(--vaikne);
}

.peatukk-halda {
  border: 1px solid var(--joon); border-radius: 4px;
  padding: 0.8rem 1rem; margin-bottom: 0.85rem; background: var(--pind2);
}
.peatukk-halda h4 { margin: 0 0 0.4rem; font-size: 0.98rem; }
.loigud { margin: 0 0 0.6rem; padding-left: 1.4rem; font-size: 0.9rem; }
.loigud li { margin-bottom: 0.25rem; }

.klass-plokk { border: 1px solid var(--joon); border-radius: 4px;
  padding: 0.6rem 0.9rem; margin-bottom: 0.5rem; background: var(--pind); }
.klass-plokk summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.klass-plokk[open] summary { margin-bottom: 0.6rem; }

.logi-kokku { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* ---------------- testid ---------------- */

.testi-kokku { margin: 0; font-size: 1.05rem; }
.test {
  border: 1px solid var(--joon); border-left: 4px solid var(--joon2);
  border-radius: var(--r); padding: 0.9rem 1.1rem; margin-bottom: 0.85rem;
  background: var(--pind);
}
.test-ok    { border-left-color: var(--roheline); }
.test-kukub { border-left-color: var(--punane); background: var(--punane-t); }
.test-paise { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 0.4rem; }
.test-miks { font-size: 0.86rem; color: var(--vaikne); font-style: italic; }
.test-samm {
  background: var(--pind2); border: 1px solid var(--joon); border-radius: 4px;
  padding: 0.6rem 0.8rem; font-size: 0.82rem; overflow-x: auto;
  white-space: pre-wrap; margin: 0.4rem 0 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ---------------- jalus ---------------- */

.jalus {
  max-width: var(--laius); margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem;
  border-top: 1px solid var(--joon); font-size: 0.84rem; color: var(--vaikne);
}
.jalus p { margin: 0 0 0.3rem; }

/* ---------------- print: ainult seletuskiri ---------------- */

@media print {
  .paise, .nav, .teade, .teatis, .dok-riba, .jalus,
  .peatukk-halda, .rida-koos, .ajamasin, .valitud-planeering { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .sisu { padding: 0; max-width: none; }
  .kaart { border: 0; padding: 0; margin: 0; }
  .kaart > h3 { display: none; }
  .seletuskiri { border: 0; padding: 0; max-width: none; }
  .seletuskiri h3, .tabel, .tingimus-plokk, .kaardi-ymbris { break-inside: avoid; }
}

@media (max-width: 40rem) {
  .paise h1 { font-size: 1.2rem; }
  .seletuskiri { padding: 1.25rem; }
  .ajamasin { gap: 0.75rem; }
}