:root {
  --taust: #f6f4ee;
  --kaart: #ffffff;
  --tekst: #1e1f1c;
  --hall: #5d6058;
  --joon: #dcd8cb;
  --rohe: #2f6b3a;
  --rohe-hele: #e7f0e4;
  --ring: #d62828;
  --joonis: #e6007e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--taust); color: var(--tekst);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
button { font: inherit; }
h1, h2 { line-height: 1.2; }

/* ---------- paigutus: vasakul küsimused, paremal kaart ---------- */
#app { display: grid; grid-template-columns: minmax(340px, 34%) 1fr; height: 100vh; height: 100dvh; }
.kaardike { overflow-y: auto; background: var(--taust); border-right: 1px solid var(--joon); -webkit-overflow-scrolling: touch; }
.kaart-ala { position: relative; min-width: 0; height: 100%; }
#kaart { position: absolute; inset: 0; background: #dfe3da; }
.tagasi-kys, .mobiil-kaart-nupp { display: none; }

@media (max-width: 819px) {
  #app { display: block; height: auto; }
  .kaardike { overflow: visible; border-right: 0; padding-bottom: 84px; }
  .kaart-ala { display: none; }
  body.kaardil { overflow: hidden; }
  body.kaardil .kaardike { display: none; }
  body.kaardil .kaart-ala { display: block; position: fixed; inset: 0; z-index: 1000; height: 100vh; height: 100dvh; }
  .tagasi-kys { display: block; position: absolute; z-index: 1100; top: 10px; left: 62px; right: 62px; max-width: 280px;
    min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid #b9b4a3; background: #fff; font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: pointer; text-align: left; }
  .mobiil-kaart-nupp { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(246,244,238,0), var(--taust) 35%); }
  .mobiil-kaart-nupp .nupp { width: 100%; }
}

/* ---------- küsimuste kaart ---------- */
.pais { padding: 14px 16px 4px; }
.pais-rida { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pais h1 { margin: 0; font-size: 1.45rem; }
.pais p { margin: 6px 0 10px; }
.ikoonnupp { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 1px solid #b9b4a3; background: #fff;
  font-size: 1.25rem; font-weight: 700; color: var(--hall); cursor: pointer; }
.alad { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; }
.ala-nupp { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border-radius: 22px; border: 1px solid #b9b4a3; background: #fff;
  cursor: pointer; white-space: nowrap; color: var(--tekst); }
.ala-nupp .loend { display: inline-block; min-width: 22px; margin-left: 6px; padding: 0 6px; border-radius: 11px; background: #ece9df;
  font-size: .8rem; text-align: center; color: var(--hall); }
.ala-nupp[aria-pressed="true"] { background: var(--rohe); border-color: var(--rohe); color: #fff; font-weight: 600; }
.ala-nupp[aria-pressed="true"] .loend { background: rgba(255,255,255,.25); color: #fff; }

.kysimused, .vastused, .legend { padding: 4px 16px 8px; }
.kysimused h2, .vastused h2, .legend h2 { font-size: 1.15rem; margin: 10px 0 4px; }
.ala-koht { margin: 0 0 6px; color: var(--hall); font-size: .9rem; }
.markus { margin: 0 0 8px; padding: 8px 10px; border-left: 4px solid var(--ring); background: #fff; border-radius: 6px; font-size: .92rem; }
.minunimi { display: block; font-weight: 600; font-size: .92rem; margin: 6px 0 10px; }
.valik { font-weight: 400; color: var(--hall); }
.minunimi input { display: block; width: 100%; margin-top: 4px; }
input[type=text], input[type=number], textarea { font: inherit; font-size: 16px; padding: 10px; border: 1px solid #b9b4a3; border-radius: 8px;
  background: #fff; color: var(--tekst); width: 100%; }
textarea { resize: vertical; min-height: 64px; }

.kys-list { list-style: none; margin: 0; padding: 0; counter-reset: k; }
.kys { background: var(--kaart); border: 1px solid var(--joon); border-radius: 12px; padding: 12px; margin: 0 0 10px; }
.kys-pealkiri { display: flex; gap: 10px; font-weight: 600; margin: 0 0 8px; }
.kys-nr { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--rohe); color: #fff; display: grid; place-items: center; font-size: .9rem; }
.kys-vihje { display: block; font-weight: 400; color: var(--hall); font-size: .88rem; }
.kys-nupud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kys-nupud .nupp { flex: 1 1 140px; }
.kys-arv { font-size: .82rem; color: var(--hall); margin-top: 6px; }

.nupp { border: 1px solid #b9b4a3; background: #fff; color: var(--tekst); border-radius: 10px; padding: 10px 14px; min-height: 46px; cursor: pointer; }
.nupp.pohi { background: var(--rohe); border-color: var(--rohe); color: #fff; font-weight: 600; }
.nupp.ohtlik { color: #a4161a; border-color: #e2b4b4; }
.nupp.lai { width: 100%; }
.nupp:disabled { opacity: .5; cursor: default; }
.nupp.vaike { min-height: 38px; padding: 6px 12px; font-size: .9rem; }

.vast-pais { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.arv { color: var(--hall); font-weight: 400; }
.lyliti { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; min-height: 44px; cursor: pointer; }
.lyliti input { width: 20px; height: 20px; }
.tyhi { color: var(--hall); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { background: var(--kaart); border: 1px solid var(--joon); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; display: flex; gap: 10px; }
.list li.kohaga { cursor: pointer; }
.list li.kohaga:hover, .list li:focus-visible { border-color: #8a8572; }
.list .ik { flex: 0 0 26px; }
.sisu { min-width: 0; flex: 1; }
.rida1 { font-weight: 600; }
.rida1 .lisa { font-weight: 400; color: var(--hall); }
.silt-k { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--rohe-hele); color: var(--rohe); margin-right: 4px; }
.tekst { white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0; }
.meta { font-size: .8rem; color: var(--hall); }
.oma { display: flex; gap: 8px; margin-top: 6px; }

.leg-tyybid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 10px; margin: 4px 0 8px; font-size: .9rem; }
.leg-tyybid span { display: inline-flex; align-items: center; gap: 6px; }
.leg-muu { list-style: none; padding: 0; margin: 0; font-size: .88rem; color: var(--hall); }
.leg-muu li { margin: 0 0 4px; }
.l-joon { display: inline-block; width: 24px; height: 0; border-top: 4px solid; vertical-align: middle; margin-right: 6px; }
.l-joon.ring { border-color: var(--ring); border-top-style: dashed; }
.l-joon.tous { border-color: #f77f00; }
.l-joon.lask { border-color: #00a6c7; }
.l-joon.joonis { border-color: var(--joonis); border-top-width: 6px; box-shadow: 0 0 0 1px #fff; }
.l-ring { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #222; vertical-align: middle; margin-right: 6px; }
.l-ring.kp { background: #ffd60a; }
.l-ring.muda { background: #6f4518; border-color: #fff; outline: 1px solid #6f4518; }
.l-ring.pealt { background: #2b9348; border-color: #fff; outline: 1px solid #2b9348; }
.l-kast { display: inline-block; width: 15px; height: 12px; border: 2px solid; vertical-align: middle; margin-right: 6px; }
.l-kast.depoo { border-color: #333; background: rgba(255,255,255,.6); }
.l-kast.vesi { border-color: #3c78d2; background: #3c78d2; }
.l-kast.ala { border-color: #fff; border-style: dashed; background: #777; }

.jalus { padding: 12px 16px 24px; font-size: .8rem; color: var(--hall); border-top: 1px solid var(--joon); margin-top: 8px; }
.jalus p { margin: 0 0 8px; }
.jalus a { color: var(--rohe); }

/* ---------- kaart ---------- */
.reziim { position: absolute; z-index: 1050; left: 50%; transform: translateX(-50%); bottom: 24px; width: min(560px, calc(100% - 24px));
  background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.3); padding: 10px 12px; border-top: 5px solid var(--joonis); }
.reziim-tekst { font-size: .95rem; margin-bottom: 8px; }
.reziim-nupud { display: flex; flex-wrap: wrap; gap: 8px; }
.reziim-nupud .nupp { flex: 1 1 auto; }
.teade { position: absolute; z-index: 1200; left: 50%; transform: translateX(-50%); top: 64px; max-width: calc(100% - 24px);
  background: #222; color: #fff; padding: 10px 14px; border-radius: 10px; font-size: .92rem; box-shadow: 0 4px 12px rgba(0,0,0,.3); }

.leht { position: absolute; z-index: 1150; right: 12px; bottom: 12px; width: 400px; max-width: calc(100% - 24px); max-height: calc(100% - 80px);
  overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.3); }
@media (max-width: 819px) {
  .leht { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 70vh; max-height: 70dvh;
    border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .reziim { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
.vorm { padding: 12px 16px 16px; }
.vorm-pais { display: flex; justify-content: space-between; align-items: center; }
.vorm h2 { margin: 0; font-size: 1.1rem; }
.vorm-kys { margin: 4px 0; font-size: .9rem; font-weight: 600; color: var(--rohe); }
.koht { margin: 2px 0 6px; font-size: .82rem; color: var(--hall); }
.vorm label { display: block; margin: 10px 0 0; font-weight: 600; font-size: .92rem; }
.vorm input, .vorm textarea { margin-top: 4px; display: block; }
.tyybid { border: 0; padding: 0; margin: 4px 0 0; }
.tyybid legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 6px; }
#tyybiNupud { display: flex; flex-wrap: wrap; gap: 6px; }
.tyyp { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; min-height: 44px; border: 1px solid #b9b4a3;
  border-radius: 22px; cursor: pointer; font-size: .9rem; background: #fff; user-select: none; }
.tyyp input { position: absolute; opacity: 0; pointer-events: none; }
.tyyp.valitud { border-color: #222; box-shadow: inset 0 0 0 1px #222; font-weight: 600; }
.tyyp.keelatud { opacity: .4; cursor: default; }
.mesi { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.viga { color: #b00020; margin: 8px 0 0; }
.vorm .nupp.lai { margin-top: 14px; }

/* Leaflet: suuremad puutealad */
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.leaflet-touch .leaflet-control-layers-toggle { width: 48px; height: 48px; }
.leaflet-control-layers-expanded { max-height: 70vh; overflow-y: auto; font-size: 14px; }
.leaflet-control-layers label { padding: 5px 0; }
.leaflet-control-layers-selector { width: 18px; height: 18px; vertical-align: middle; }
.kihid-viide { font-size: 11px; color: #555; max-width: 210px; border-top: 1px solid #ddd; padding-top: 6px; margin-top: 4px; }
.asukoht-nupp { font-size: 20px !important; }
.silt { background: rgba(255,255,255,.88); border: 0; border-radius: 4px; box-shadow: none; padding: 1px 4px; font-size: 11px; font-weight: 700; color: #222; }
.silt.ring { color: var(--ring); }
.silt::before { display: none; }
.silt.vaike { display: none; }
body.lahedal .silt.vaike { display: block; }
.pop { min-width: 180px; }
.pop .koord { font-size: 12px; color: #555; }
.pop .tekst { margin: 4px 0; }
.pop .oma { margin-top: 8px; }
.pop .nupp.vaike { min-height: 36px; }
.leaflet-popup-content { margin: 10px 12px; font-size: 14px; }

/* abi */
.abi { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.abi[hidden] { display: none; }
.abi-kaart { background: #fff; border-radius: 16px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 16px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.abi-kaart h2 { margin: 0 0 8px; }
.abi-kaart ol { padding-left: 20px; margin: 0 0 12px; }
.abi-kaart li { margin: 0 0 8px; }

/* lisad: küsimuste detailid, numbrid, mülgas */
.alampealkiri { font-size: 1.15rem; margin: 18px 0 2px; padding-top: 10px; border-top: 1px solid var(--joon); }
.kys details > summary { list-style: none; cursor: pointer; }
.kys details > summary::-webkit-details-marker { display: none; }
.kys details > summary::after { content: "▾"; margin-left: auto; color: var(--hall); }
.kys details:not([open]) > summary::after { content: "▸"; }
.kys details:not([open]) > summary { margin-bottom: 0; }
.kys-tekst { flex: 1; }
.kys-ok { display: inline-block; margin-left: 8px; font-size: .78rem; font-weight: 600; color: var(--rohe); background: var(--rohe-hele); padding: 1px 8px; border-radius: 10px; }
.kys-vihje { margin: 0 0 8px; color: var(--hall); font-size: .9rem; }
.kys-vorm select { font: inherit; font-size: 16px; padding: 9px 10px; border: 1px solid #b9b4a3; border-radius: 8px; background: #fff; min-height: 44px; width: 100%; margin-top: 4px; }
.kys-arvu { display: block; font-size: .88rem; font-weight: 600; margin: 6px 0 0; }
.kys-arvu input { margin-top: 4px; }
.arvud { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.mylka { border: 1px solid #d8c3a5; background: #fbf6ee; border-radius: 10px; padding: 8px 10px 10px; margin: 10px 0 0; }
.mylka legend { font-weight: 600; font-size: .92rem; padding: 0 4px; }
.mylka select, .vorm select { font: inherit; font-size: 16px; padding: 9px 10px; border: 1px solid #b9b4a3; border-radius: 8px; background: #fff; min-height: 44px; width: 100%; margin: 4px 0 6px; display: block; }
.mylgas-nupp { background: #6b3e14 !important; border-color: #6b3e14 !important; }
.mylgas-kontroll a { display: grid !important; place-items: center; }
.leg-grad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.grad-rida { display: inline-flex; align-items: center; gap: 6px; }
.grad { display: inline-block; width: 120px; height: 12px; border-radius: 6px; border: 1px solid #8a7a66; }

/* kaugel suumil ainult alade nimed */
body.kauge .silt:not(.ala-silt) { display: none; }

[hidden] { display: none !important; }