/* Layout: a survey-sheet side rail (bottom sheet on phones) beside a full-bleed muted map.
   Signature: cadastral ids set like a КККР sheet label, and the open plot drawn with a
   red dashed regulation line, as on a ПУП drawing. */
:root {
  --paper: #f3f5f4;        /* cool survey paper */
  --panel: #fbfcfc;
  --ink: #16202a;          /* plan ink */
  --muted: #5d6a72;
  --faint: #8a969d;
  --line: #d9dfe2;
  --soft: #eaeef0;
  --accent: #0f6e8c;       /* survey teal: selection, links, active tab */
  --accent-ink: #ffffff;
  --reg: #d23c4b;          /* regulation red: the open plot */
  --fav: #c98a04;
  --danger: #b42318;
  --shadow: 0 1px 2px rgba(16, 28, 38, .06), 0 6px 20px rgba(16, 28, 38, .08);
  --f-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-display: "Unbounded", "Onest", system-ui, sans-serif;
  --panel-w: 384px;
  --sheet-h: 0px;
  --row-pad: 11px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1418; --panel: #131b20; --ink: #e6ecef; --muted: #98a6ad; --faint: #6e7c84;
    --line: #243038; --soft: #1b252b; --accent: #4fb6d3; --accent-ink: #062530; --reg: #ff6b78;
    --fav: #f2b632; --danger: #ff7b6e; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1418; --panel: #131b20; --ink: #e6ecef; --muted: #98a6ad; --faint: #6e7c84;
  --line: #243038; --soft: #1b252b; --accent: #4fb6d3; --accent-ink: #062530; --reg: #ff6b78;
  --fav: #f2b632; --danger: #ff7b6e; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  font: 14px/1.45 var(--f-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }

/* ---------- Cadastral id: 10135 · 5501 · 356 ---------- */
.cad { font-family: var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.cad .e { color: var(--faint); font-weight: 400; }
.cad .r { color: var(--muted); font-weight: 500; }
.cad .n { color: var(--ink); font-weight: 700; }
.cad .d { color: var(--faint); padding: 0 .08em; }
.num { font-family: var(--f-data); font-variant-numeric: tabular-nums; }

/* ---------- Panel ---------- */
#panel {
  width: var(--panel-w); flex: none; display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line);
  z-index: 800; min-height: 0; height: 100dvh;
}
#map { flex: 1; min-width: 0; height: 100dvh; position: relative; }
.sheet-handle { display: none; }

header { padding: 16px 16px 0; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
h1 { margin: 0; font: 700 18px/1 var(--f-display); letter-spacing: -.01em; }
h1 span { color: var(--accent); font-weight: 500; }
.stamp { margin: 0; font: 500 11px/1 var(--f-data); color: var(--faint); letter-spacing: .02em; }

.search-wrap { position: relative; }
.search-ico {
  position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
  fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
input[type=search], select {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
#search { width: 100%; padding: 10px 12px 10px 36px; font-size: 15px; background: var(--soft); border-color: transparent; }
#search:focus { background: var(--panel); border-color: var(--accent); outline: none; }
select { appearance: none; padding-right: 28px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  max-height: min(60vh, 460px); overflow-y: auto; padding: 4px 0;
}
.suggest h4 { margin: 10px 12px 4px; font: 600 10.5px/1 var(--f-body); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.suggest button {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%;
  padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer;
}
.suggest button:hover, .suggest button.hl { background: var(--soft); }
.suggest .s-name { font-weight: 600; min-width: 0; }
.suggest .s-meta { color: var(--muted); font-size: 12px; grid-column: 1 / 3; }
.suggest .s-n { color: var(--muted); font: 12px var(--f-data); }
.suggest mark { background: color-mix(in srgb, var(--fav) 35%, transparent); color: inherit; border-radius: 2px; }

.active-filter { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.active-filter .af-back { justify-self: start; border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.active-filter b { font-size: 15px; line-height: 1.3; }
.active-filter span { color: var(--muted); font-size: 12.5px; }

.tabs { display: flex; margin-top: 12px; }
.tabs button {
  flex: 1; padding: 10px 2px 11px; border: 0; background: none; cursor: pointer; color: var(--muted);
  border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabs .count { font: 500 11.5px var(--f-data); color: var(--faint); }

.views { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.view { display: none; padding: 0 16px 20px; }
.view.active { display: block; }
.group { padding: 14px 0 4px; }
.group + .group { border-top: 1px dashed var(--line); }
.view h3, .detail h3, .layers-pop h3 {
  margin: 0 0 8px; font: 600 10.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}

/* Presets and filter chips */
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.presets button {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  cursor: pointer; font-weight: 500; text-align: left;
}
.presets button:hover { border-color: var(--accent); }
.presets button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); cursor: pointer; font-size: 13px;
  user-select: none; -webkit-user-select: none;
}
.fchip i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; opacity: .35; }
.fchip .n { font: 500 11.5px var(--f-data); color: var(--faint); }
.fchip[aria-pressed="false"] { color: var(--muted); }
.fchip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c) 70%, var(--line)); background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
.fchip[aria-pressed="true"] i { opacity: 1; }
.explain { margin-top: 10px; font-size: 13px; }
.explain summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.explain dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 10px 0 0; }
.explain dt { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.explain dt i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.explain dd { margin: 0; color: var(--muted); }

.field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.field label, .field .label { color: var(--muted); font-size: 13px; }
.field select { width: 58%; }
.seg { display: inline-flex; gap: 4px; }
.seg button {
  border: 0; background: none; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font-size: 13px; color: var(--muted); font-weight: 500;
}
.seg button:hover { color: var(--ink); background: var(--soft); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.seg.base { display: flex; margin-bottom: 10px; }
.lchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; font-size: 13px; user-select: none; -webkit-user-select: none;
}
.lchip input { margin: 0; accent-color: var(--accent); }
.lchip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  cursor: pointer; font-size: 13px; white-space: nowrap; color: var(--ink); text-decoration: none;
}
.btn:hover { border-color: var(--accent); }
.btn.icon { padding: 7px 10px; }
.btn-text { border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--accent); font-weight: 500; font-size: 13px; }
.btn-text:hover { text-decoration: underline; }
.btn-text.danger { color: var(--danger); }
#reset-filters { margin-top: 14px; }
footer { margin-top: 14px; color: var(--faint); font-size: 11.5px; line-height: 1.5; }

/* ---------- Lists ---------- */
.list-head { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 12px 0 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid var(--line); }
.summary { margin: 0; color: var(--muted); font-size: 13px; }
.summary b { color: var(--ink); font-family: var(--f-data); font-weight: 600; }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
#owners-filter { width: 100%; margin: 8px 0; }
.list-mode { display: flex; margin: 10px 0 8px; }
.list-mode button { flex: 1; }
#owners-head .field { margin-top: 6px; }
.results li.empty { display: block; cursor: default; color: var(--muted); font-size: 13px; }
.active-filter .af-scope { justify-self: start; font-size: 13px; }
.results { list-style: none; margin: 0 -16px; padding: 0; }
.results li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center;
  padding: var(--row-pad) 10px var(--row-pad) 16px; border-bottom: 1px solid var(--line); cursor: pointer;
}
body.selecting .results li { grid-template-columns: 24px 1fr auto; }
.results li:hover { background: var(--soft); }
.results li.current { background: var(--soft); box-shadow: inset 3px 0 0 var(--reg); }
.results li.sel { box-shadow: inset 3px 0 0 var(--accent); }
.results .pick { display: none; width: 18px; height: 18px; accent-color: var(--accent); }
body.selecting .results .pick { display: block; align-self: start; margin-top: 2px; }
.results .main { min-width: 0; }
.results .line1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.results .id { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; min-width: 0; }
.results .id i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex: none; }
.results .area { font: 500 12.5px var(--f-data); color: var(--muted); white-space: nowrap; }
.results .owner {
  font-size: 13.5px; margin-top: 2px; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.results .owner.person { color: var(--muted); font-weight: 400; }
.results .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip-s {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 6px;
  font-size: 11.5px; background: var(--soft); color: var(--muted); white-space: nowrap;
}
.chip-s:not(.plain)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.chip-s.mono { font-family: var(--f-data); }
.results .note-line { font-size: 12px; color: var(--ink); font-style: italic; margin-top: 4px; }
.star {
  border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 6px;
  color: var(--faint); align-self: center;
}
.star.on { color: var(--fav); }
.results .more { display: block; color: var(--muted); cursor: default; }
.results .more:hover { background: none; }
#owner-results li { grid-template-columns: 1fr auto; }
#owner-results .oname { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
#owner-results .go { color: var(--faint); font-size: 20px; padding-left: 6px; }

/* ---------- Detail ---------- */
.detail-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; }
.back { border: 0; background: none; color: var(--accent); padding: 0; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.icon-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); cursor: pointer; color: var(--ink);
}
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.fav-on { color: var(--fav); border-color: var(--fav); }
.icon-btn.fav-on svg { fill: currentColor; }
.icon-btn.sel-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.detail .did { font-size: 20px; margin: 6px 0 2px; }
.detail .addr { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; background: var(--soft); color: var(--ink); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.bignum { display: flex; gap: 22px; margin: 14px 0 4px; }
.bignum div { display: grid; gap: 2px; }
.bignum b { font: 700 22px/1.1 var(--f-display); letter-spacing: -.02em; }
.bignum span { color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.owner-cards { display: grid; gap: 6px; margin: 12px 0 4px; }
.owner-card {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; text-align: left;
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); cursor: pointer;
}
.owner-card:hover { border-color: var(--accent); }
.owner-card .oc-name { font-weight: 600; grid-column: 1; line-height: 1.3; }
.owner-card .oc-meta { color: var(--muted); font-size: 12px; grid-column: 1; }
.owner-card .oc-go { grid-column: 2; grid-row: 1 / 3; color: var(--accent); font-weight: 600; font-size: 13px; white-space: nowrap; }
.owner-card.plain { cursor: default; display: grid; grid-template-columns: 1fr; }
.owner-card.plain:hover { border-color: var(--line); }
.facts { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 8px 14px; margin: 14px 0 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; overflow-wrap: break-word; }
.facts dd.num { font-size: 13px; }
.flags { display: flex; flex-wrap: wrap; gap: 4px; }
.flag { padding: 2px 8px; border-radius: 6px; font-size: 12px; background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.flag.warn { background: color-mix(in srgb, var(--fav) 18%, transparent); color: color-mix(in srgb, var(--fav) 70%, var(--ink)); }
.flag.ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: color-mix(in srgb, #16a34a 75%, var(--ink)); }
.note { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid var(--fav); background: var(--soft); border-radius: 0 8px 8px 0; font-size: 12.5px; }
.alt { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.links a, .links button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent); font: 500 13px var(--f-body); text-decoration: none; }
.links a:hover, .links button:hover { text-decoration: underline; }
.fav-note { width: 100%; min-height: 60px; margin-top: 10px; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; resize: vertical; }
.loading-text { color: var(--muted); font-size: 12.5px; }

/* ---------- Selection bar ---------- */
.selbar { border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--panel); }
.selinfo { font-size: 13px; margin-bottom: 8px; color: var(--muted); }
.selinfo b { color: var(--accent); }
.selactions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Map ---------- */
.leaflet-container { font-family: var(--f-body); background: var(--paper); }
.leaflet-tooltip { font: 12.5px/1.4 var(--f-body); border-radius: 8px; border: 0; box-shadow: var(--shadow); background: var(--panel); color: var(--ink); }
.leaflet-tooltip-top:before { border-top-color: var(--panel); }
.leaflet-bar a { background: var(--panel); color: var(--ink); border-color: var(--line); }
.leaflet-control-scale-line { background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--ink); border-color: var(--muted); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--panel) 80%, transparent) !important; color: var(--muted); }
.leaflet-control-attribution a { color: var(--muted); }

.layers-pop {
  position: absolute; z-index: 1001; width: 300px; max-width: calc(100% - 76px);
  display: grid; gap: 8px; padding: 12px 14px 14px; border-radius: 14px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
.layers-pop .lp-head { display: flex; align-items: center; justify-content: space-between; }
.layers-pop h3 { margin: 0; }
.layers-pop .lp-close { border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 6px; }
.layers-pop .label { margin-top: 4px; color: var(--muted); font-size: 13px; }
.layers-pop .seg.base { margin-bottom: 0; }
.layers-pop .seg { flex-wrap: wrap; }
.map-tools { display: grid; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.map-tools button {
  width: 40px; height: 40px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel);
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
}
.map-tools button:last-child { border-bottom: 0; }
.map-tools button:hover { color: var(--accent); }
.map-tools button.on { background: var(--accent); color: var(--accent-ink); }
.map-tools svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.legend {
  background: var(--panel); color: var(--ink); padding: 7px 10px; border-radius: 12px;
  box-shadow: var(--shadow); font-size: 12px; line-height: 1.6; max-width: 260px;
}
.legend .lg-toggle { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; font: 600 11.5px var(--f-body); color: var(--muted); }
.legend .lg-dots { display: inline-flex; gap: 3px; }
.legend .lg-dots i { width: 8px; height: 8px; border-radius: 2px; }
.legend.closed .lg-body { display: none; }
.legend:not(.closed) .lg-dots { display: none; }
.legend .lg-body { margin-top: 4px; }
.legend .lg-body div { display: flex; align-items: center; gap: 7px; }
.legend .lg-body i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.mode-banner {
  position: absolute; z-index: 1000; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 120px);
  background: var(--accent); color: var(--accent-ink); padding: 6px 6px 6px 14px; border-radius: 999px;
  box-shadow: var(--shadow); font-size: 13px; font-weight: 500;
}
.mode-banner .mb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-banner .mb-done { border: 0; background: var(--accent-ink); color: var(--accent); font-weight: 700; border-radius: 999px; padding: 5px 12px; cursor: pointer; flex: none; }
.zoom-hint {
  position: absolute; z-index: 999; bottom: calc(var(--sheet-h, 0px) + 34px); left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 7px 14px; border-radius: 999px; pointer-events: none;
  background: var(--panel); color: var(--muted); box-shadow: var(--shadow); font-size: 12.5px; white-space: nowrap;
}
.leaflet-bottom { bottom: var(--sheet-h); transition: bottom .2s; }
.drawing, .drawing * { cursor: crosshair !important; }

/* Thin progress line while data loads */
.map-loading { position: absolute; z-index: 900; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; pointer-events: none; display: none; }
body.loading .map-loading { display: block; }
.map-loading::after {
  content: ""; position: absolute; inset: 0; width: 35%; background: var(--accent);
  animation: load 1.1s ease-in-out infinite;
}
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

#toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--sheet-h)); transform: translate(-50%, 20px);
  background: var(--ink); color: var(--panel); padding: 9px 14px; border-radius: 999px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2000; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.map-tools button, .tabs button, .btn, .fchip, .lchip, .seg button, .presets button { -webkit-user-select: none; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Touch screens ---------- */
@media (pointer: coarse) {
  :root { --row-pad: 13px; }
  input[type=search], select, .fav-note { font-size: 16px; }
  .fchip, .lchip { padding-top: 8px; padding-bottom: 8px; }
  .seg button { padding: 9px 13px; }
  .btn { padding: 9px 13px; font-size: 14px; }
  .results .pick { width: 20px; height: 20px; }
  .star { font-size: 22px; }
  .map-tools button { width: 46px; height: 46px; }
  .icon-btn { width: 42px; height: 42px; }
}

/* ---------- iPad portrait / small laptops ---------- */
@media (max-width: 1024px) { :root { --panel-w: 344px; } }

/* ---------- Phones: bottom sheet over a full-screen map ---------- */
@media (max-width: 699px) {
  body { display: block; }
  #map { position: fixed; inset: 0; height: auto; }
  #panel {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: var(--sheet-h);
    border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .2);
    transition: height .22s ease; padding-bottom: env(safe-area-inset-bottom);
  }
  #panel.dragging { transition: none; }
  .sheet-handle { display: block; padding: 8px 0 2px; cursor: grab; touch-action: none; }
  .sheet-handle span { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto; }
  header { padding: 4px 14px 0; touch-action: none; }
  header input, header button, .suggest { touch-action: auto; }
  .brand { display: none; }
  .view { padding: 0 14px 16px; }
  .results, .list-head { margin-left: -14px; margin-right: -14px; }
  .list-head { padding-left: 14px; padding-right: 14px; }
  .results li { padding-left: 14px; }
  .leaflet-control-zoom { display: none; }
  .leaflet-top { top: env(safe-area-inset-top); }
  .mode-banner { top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 64px; transform: none; max-width: none; }
}

/* Muted basemap: OpenStreetMap greyed out (light) or inverted (dark) */
.tiles-clean { filter: grayscale(1) contrast(.82) brightness(1.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tiles-clean { filter: grayscale(1) invert(1) brightness(.78) contrast(.9); }
}
:root[data-theme="dark"] .tiles-clean { filter: grayscale(1) invert(1) brightness(.78) contrast(.9); }

/* Filter options: one flat row each — colour, name, count, tick when on */
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.group-head h3 { margin: 0; }
.head-actions { display: inline-flex; gap: 12px; }
.head-actions button { border: 0; background: none; padding: 2px 0; cursor: pointer; color: var(--accent); font-size: 12.5px; font-weight: 500; }
.head-actions button:hover { text-decoration: underline; }
.opt-list { display: grid; margin: 0 -8px; }
.opt {
  display: grid; grid-template-columns: 12px 1fr auto 18px; align-items: center; gap: 10px;
  width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  -webkit-user-select: none; user-select: none;
}
.opt:hover { background: var(--soft); }
.opt i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.opt .opt-name { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt .n { font: 500 12px var(--f-data); color: var(--faint); }
.opt .tick { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.opt[aria-pressed="true"] .tick { visibility: visible; }
.opt[aria-pressed="false"] .opt-name { color: var(--muted); }
.opt[aria-pressed="false"] i { opacity: .3; }
/* Presets: flat tiles, filled only when active */
.presets button { border: 0; background: var(--soft); }
.presets button:hover { background: color-mix(in srgb, var(--accent) 14%, var(--soft)); }
@media (pointer: coarse) { .opt { padding: 10px 8px; } .seg button { padding: 8px 13px; } }
/* Layer and owner-kind toggles: plain pills like the other switches (checkbox kept for accessibility, hidden) */
.lchip { border: 0; padding: 6px 12px; background: var(--soft); color: var(--muted); font-weight: 500; }
.lchip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lchip:hover { color: var(--ink); }
.lchip:has(input:checked) { background: var(--accent); color: var(--accent-ink); border: 0; }
.lchip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lchip { position: relative; }

/* Търгове */
#auction-types { margin: 8px 0 2px; }
.results li.auction { grid-template-columns: 1fr auto; }
.results .atype { font-weight: 600; font-size: 13.5px; }
.results .aprice { font: 700 13.5px var(--f-data); color: var(--ink); white-space: nowrap; }
.results li.auction .go { color: var(--faint); font-size: 18px; padding-left: 6px; }
.source-note { color: var(--faint); font-size: 11.5px; margin: 12px 0 0; }
.source-note a { color: var(--muted); }
.auction-card {
  display: grid; gap: 2px; margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--reg) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--reg) 35%, var(--line));
}
.auction-card .ac-title { font: 600 10.5px var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--reg); }
.auction-card .ac-price { font: 700 19px/1.2 var(--f-display); display: flex; align-items: baseline; gap: 8px; }
.auction-card .ac-price small { font: 400 11.5px var(--f-body); color: var(--muted); }
.auction-card .ac-meta { font-size: 12.5px; color: var(--muted); }
.auction-card .ac-go { margin-top: 4px; color: var(--accent); font-weight: 600; font-size: 13px; }
.tabs button { font-size: 13px; }

/* ---------- Парцели: filter line on top of the list ---------- */
.filter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 10px 9px 12px; margin-bottom: 8px; border: 0; border-radius: 10px; background: var(--soft);
  cursor: pointer; text-align: left;
}
.filter-bar:hover { background: color-mix(in srgb, var(--accent) 10%, var(--soft)); }
.filter-bar .fb-text { font-weight: 600; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-bar .fb-btn { flex: none; color: var(--accent); font-weight: 600; font-size: 13px; }
.filter-bar .fb-btn::after { content: " ›"; }

/* Filters sub-page */
.subpage-top { display: flex; align-items: center; gap: 12px; padding: 12px 0 2px; }
.subpage-top span { font-weight: 600; }
.apply-bar { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--panel) 30%); margin-top: 6px; }
.btn-primary {
  width: 100%; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.05); }

/* ---------- Ново: event rows ---------- */
.results li.event { grid-template-columns: 1fr auto; }
.results li.event .line1 + .line1 { margin-top: 2px; }
.ev-kind { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.ev-kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ev-date { font: 500 11.5px var(--f-data); color: var(--faint); }
.results li.event .owner { font-size: 12.5px; }
.results li.event .go { color: var(--faint); font-size: 18px; padding-left: 6px; }
#feed-types { margin-bottom: 2px; }
#view-feed .field { margin: 8px 0 6px; }

/* ---------- Plot details: signals, folded facts ---------- */
.signals { margin: 14px 0 0; display: grid; gap: 6px; }
.signals h3 { margin: 0 0 2px; }
.signals .auction-card { margin: 0; }
.signal {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--soft); color: var(--ink); text-decoration: none;
}
a.signal:hover { border-color: var(--accent); }
.sg-kind { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.sg-kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sg-text { font-size: 13px; font-weight: 500; }
.sg-sub { font-size: 12px; color: var(--muted); }
.sg-go { margin-top: 3px; color: var(--accent); font-weight: 600; font-size: 12.5px; }
.more-facts { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.more-facts summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.more-facts .facts { border-top: 0; padding-top: 0; margin-top: 10px; }
.chip-s { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.results .chips { min-width: 0; }

/* ===================== Top bar: logo · main menu · search ===================== */
:root { --top-h: 0px; }
@media (min-width: 700px) {
  body { display: grid; grid-template-columns: var(--panel-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }
  #panel { height: auto; min-height: 0; grid-row: 2; }
  #map { height: auto; grid-row: 2; grid-column: 2; }
}
#topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; min-width: 0;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 900;
}
#topbar .brand { flex: none; width: calc(var(--panel-w) - 32px); margin: 0; display: flex; align-items: baseline; gap: 10px; }
#topbar .tabs { display: flex; gap: 4px; margin: 0; flex: none; }
#topbar .tabs button {
  flex: none; padding: 7px 13px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap;
}
#topbar .tabs button:hover { color: var(--ink); background: var(--soft); }
#topbar .tabs button[aria-selected="true"] { color: var(--ink); background: var(--soft); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
#topbar .search-wrap { flex: 1; min-width: 180px; max-width: 460px; margin-left: auto; }
#panel header { padding: 0 16px; border-bottom: 0; }
#panel header .active-filter { margin: 12px 0 0; }
.sheet-title { display: none; }

@media (max-width: 1024px) {
  #topbar .brand { width: auto; }
  #topbar .stamp { display: none; }
  #topbar .tabs button { padding: 7px 10px; font-size: 13.5px; }
}

/* Phones: search and menu float at the top of a full-screen map; the bottom sheet holds the content */
@media (max-width: 699px) {
  body { display: block; }
  #topbar {
    position: fixed; top: 0; left: 0; right: 0; flex-wrap: wrap; gap: 6px;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px; border-bottom: 0;
    background: var(--panel); box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  }
  #topbar .brand { display: none; }
  #topbar .search-wrap { order: 1; flex: 1 1 100%; max-width: none; margin: 0; }
  #topbar .tabs { order: 2; width: 100%; overflow-x: auto; scrollbar-width: none; gap: 0; justify-content: space-between; }
  #topbar .tabs::-webkit-scrollbar { display: none; }
  #topbar .tabs button { padding: 6px 5px; font-size: 12.5px; white-space: nowrap; }
  #topbar .tabs .count { font-size: 10.5px; }
  #map { position: fixed; inset: 0; }
  .leaflet-top { top: var(--top-h); }
  .mode-banner { top: calc(var(--top-h) + 10px); }
  #panel header { padding: 0 14px; }
  .sheet-title { display: block; margin: 2px 0 8px; font-weight: 600; font-size: 14px; }
  .sheet-title span { color: var(--faint); font: 500 12px var(--f-data); margin-left: 6px; }
}
@media (max-width: 699px) {
  .map-tools button { width: 40px; height: 40px; }
  .map-tools svg { width: 18px; height: 18px; }
}
.feed-intro { margin: 0 0 10px; color: var(--muted); font-size: 13px; }

/* Промени: one line saying what changed */
.chg { font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.chg b { font-weight: 600; }
.chg-arrow { color: var(--faint); padding: 0 2px; }
#changes-period { width: 100%; }