/* The map (18.10.2026): public houses / power / outages / alarm; the admin layer in Aegis. */
:root { --mp-bg: #ffffff; --mp-fg: #1d2330; --mp-muted: #687385; --mp-line: #d9dee7; --mp-accent: #1f6feb; }
@media (prefers-color-scheme: dark) {
  :root { --mp-bg: #161b24; --mp-fg: #e7ecf3; --mp-muted: #8b97a8; --mp-line: #2a3344; --mp-accent: #3d8bfd; }
}
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; font: 14px/1.4 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  background: var(--mp-bg); color: var(--mp-fg); }
#mp-top { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--mp-line); flex-wrap: wrap; }
.mp-title { font-weight: 650; white-space: nowrap; }
.mp-search { flex: 1; min-width: 200px; max-width: 460px; }
.mp-search input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--mp-line); border-radius: 8px;
  background: var(--mp-bg); color: var(--mp-fg); font-size: 15px; }
#mp-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
#mp-tools button, #mp-panel button { padding: 6px 10px; border: 1px solid var(--mp-line); border-radius: 6px; background: var(--mp-bg);
  color: var(--mp-fg); cursor: pointer; font: inherit; font-size: 13px; }
#mp-tools button.on, #mp-panel button.primary { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }
#mp-map { flex: 1; min-height: 0; }
#mp-alarm { padding: 8px 12px; font-weight: 600; color: #fff; background: #d83a3a; }
#mp-alarm.yellow { background: #e0a800; color: #1d2330; }
#mp-panel { position: absolute; z-index: 1000; right: 10px; top: 64px; width: min(360px, calc(100% - 20px)); max-height: calc(100% - 90px);
  overflow: auto; background: var(--mp-bg); color: var(--mp-fg); border: 1px solid var(--mp-line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25); padding: 12px; box-sizing: border-box; }
#mp-panel h3 { margin: 0 0 8px; font-size: 15px; }
#mp-panel label { display: block; font-size: 12px; color: var(--mp-muted); margin: 6px 0 2px; }
#mp-panel label.chk { display: flex; gap: 6px; align-items: center; color: var(--mp-fg); font-size: 14px; }
#mp-panel input:not([type=checkbox]):not([type=color]), #mp-panel select, #mp-panel textarea { width: 100%; box-sizing: border-box; padding: 6px 8px;
  border: 1px solid var(--mp-line); border-radius: 6px; background: var(--mp-bg); color: var(--mp-fg); font: inherit; }
#mp-panel .row { display: flex; gap: 6px; }
#mp-panel .row > * { flex: 1; }
#mp-panel .btns { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
#mp-panel .err { color: #d83a3a; font-size: 12px; min-height: 1em; }
#mp-panel table { width: 100%; border-collapse: collapse; font-size: 12px; }
#mp-panel td { border-bottom: 1px solid var(--mp-line); padding: 4px 2px; vertical-align: top; }
#mp-legend { position: absolute; z-index: 900; left: 10px; bottom: 22px; background: var(--mp-bg); color: var(--mp-fg);
  border: 1px solid var(--mp-line); border-radius: 8px; padding: 6px 10px; font-size: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
#mp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: -1px; }
#mp-legend i.sq { border-radius: 2px; }
#mp-legend i.ln { width: 16px; height: 3px; border-radius: 0; vertical-align: 2px; }
.mp-sw { width: 10px; height: 10px; border-radius: 2px; border: 1px solid #fff; box-shadow: 0 0 2px rgba(0, 0, 0, .6); }
.mp-sw.down { outline: 2px solid #d83a3a; }
.mp-node { width: 16px; height: 16px; border-radius: 3px; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .7); }
.mp-vx { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--mp-accent); }
.leaflet-popup-content { font-size: 13px; }
.leaflet-popup-content b { font-weight: 650; }
body.mp-embed #mp-top .mp-title { display: none; }
body.mp-drawing #mp-map { cursor: crosshair; }
@media (max-width: 640px) {
  .mp-title { display: none; }
  #mp-panel { top: auto; bottom: 10px; max-height: 60%; }
  #mp-legend { bottom: 10px; font-size: 11px; }
  .mp-search input { font-size: 16px; }
}
.mp-core { width: 18px; height: 18px; transform: rotate(45deg); border: 2px solid #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .7); box-sizing: border-box; }
.mp-sw.unplaced, .mp-node.unplaced { outline: 2px dashed #d83a3a; outline-offset: 2px; }
@media (max-width: 640px) {
  #mp-tools { flex-wrap: nowrap; overflow-x: auto; width: 100%; margin-left: 0; -webkit-overflow-scrolling: touch; }
  #mp-tools button { white-space: nowrap; flex: none; }
}
/* муфти / кросування (18.10.2026) */
.mp-joint { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .7); box-sizing: border-box;
  color: #fff; font: 700 10px/14px system-ui, sans-serif; text-align: center; }
#mp-panel.wide { width: min(720px, calc(100% - 20px)); }
#mp-panel table.cx th { text-align: left; font-weight: 600; font-size: 11px; color: var(--mp-muted); padding: 4px 2px; border-bottom: 1px solid var(--mp-line); }
#mp-panel .fbn, .fbn { color: var(--mp-muted); font-size: 11px; }
i.fb { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #777; vertical-align: -1px; margin-right: 3px; }
#mp-panel button.mini { padding: 1px 6px; font-size: 12px; }
#mp-panel button:disabled { opacity: .5; cursor: default; }
#mp-panel .chip { display: inline-block; border: 1px solid var(--mp-line); border-radius: 12px; padding: 2px 4px 2px 8px; margin: 2px 0; font-size: 12px; }
#mp-panel details { margin-top: 8px; }
#mp-panel summary { cursor: pointer; font-size: 13px; }
#mp-panel .row { margin-top: 4px; align-items: flex-start; }
/* shapes per role / joint kind, the cross-connect picture, route editing (18.10.2026) */
.mp-shape { display: block; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .7)); overflow: visible; }
.mp-shape.down { filter: drop-shadow(0 0 0 #d83a3a) drop-shadow(0 0 2px #d83a3a) drop-shadow(0 0 2px #d83a3a); }
.mp-shape.unplaced { outline: 2px dashed #d83a3a; outline-offset: 2px; }
.mp-vx.sel { background: #ff3d7f; border-color: #fff; transform: scale(1.3); }
.mp-mid { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .85); border: 1px dashed #ff3d7f; color: #ff3d7f;
  font: 700 12px/12px system-ui, sans-serif; text-align: center; box-sizing: border-box; cursor: copy; }
#mp-cross { position: fixed; inset: 0; z-index: 2000; background: var(--mp-bg); color: var(--mp-fg); display: flex; flex-direction: column; }
#mp-cross[hidden] { display: none; }
#mp-cross button { padding: 5px 10px; border: 1px solid var(--mp-line); border-radius: 6px; background: var(--mp-bg); color: var(--mp-fg); cursor: pointer; font: inherit; font-size: 13px; }
#mp-cross button.primary { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }
#mp-cross button:disabled { opacity: .5; cursor: default; }
#mp-cross button.mini { padding: 0 6px; font-size: 12px; }
#mp-cross input, #mp-cross select { padding: 4px 6px; border: 1px solid var(--mp-line); border-radius: 6px; background: var(--mp-bg); color: var(--mp-fg); font: inherit; font-size: 13px; }
.xc-top { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--mp-line); flex-wrap: wrap; }
.xc-sp { flex: 1; }
.xc-bar { padding: 6px 12px; font-size: 13px; border-bottom: 1px solid var(--mp-line); min-height: 22px; background: rgba(127, 127, 127, .07); }
.xc-bar .err { color: #d83a3a; }
.xc-body { position: relative; flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(170px, 260px) minmax(260px, 1fr);
  gap: 0 110px; padding: 12px 16px 40px; align-items: start; min-width: 0; }
@media (max-width: 760px) { .xc-body { grid-template-columns: 240px 150px 240px; gap: 0 70px; } }
#xc-svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; }
#xc-svg .xl-case { fill: none; stroke: #fff; stroke-width: 6; }
#xc-svg .xl-case.sel { stroke: #ff3d7f; stroke-width: 9; }
#xc-svg .xl { fill: none; stroke-width: 3; }
#xc-svg .xl-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
#xc-svg .xl-tmp { fill: none; stroke: #ff3d7f; stroke-width: 2.5; stroke-dasharray: 5 4; }
.xc-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xb { border: 1px solid var(--mp-line); border-radius: 8px; background: var(--mp-bg); overflow: visible; }
.xb.dev { border-color: #1f6feb55; }
.xb.mid { border-style: dashed; }
.xh { padding: 5px 8px; border-bottom: 1px solid var(--mp-line); font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.xr { display: flex; align-items: center; gap: 6px; padding: 2px 0 2px 8px; font-size: 12px; min-height: 20px; }
.xr.R, .xr.M { padding: 2px 8px 2px 0; }
.xr.M { padding: 2px 0; justify-content: space-between; }
.xr .xt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr.M .xt { text-align: center; }
.xdst { color: var(--mp-muted); margin-left: 6px; font-size: 11px; }
.xd { flex: none; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 3px solid var(--c); background: var(--mp-bg);
  cursor: crosshair; touch-action: none; margin: 0 -7px; position: relative; z-index: 2; }
.xd.on { background: var(--c); }
.xd.pick { box-shadow: 0 0 0 3px #ff3d7f; }
.xd:hover { transform: scale(1.25); }
.mp-hdrag { width: 18px; height: 18px; border-radius: 50%; background: #ff3d7f; border: 3px solid #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .7); box-sizing: border-box; cursor: grab; }
.mp-shape.down { animation: mp-down 1s ease-in-out infinite; }
@keyframes mp-down { 0%, 100% { filter: drop-shadow(0 0 1px #d83a3a) drop-shadow(0 0 3px #d83a3a) drop-shadow(0 0 3px #d83a3a); }
  50% { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .7)); } }
.lg-down { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #d83a3a; vertical-align: -2px; animation: mp-blink 1s infinite; }
@keyframes mp-blink { 50% { opacity: .2; } }
.xb.eq { border-color: #7b1fa255; }
/* compact cross-connect picture (owner 18.10.2026: «не нужно такие широкие кассеты и по 2 цветных кружка») */
.xc-body { grid-template-columns: 250px 150px 250px; gap: 0 90px; justify-content: center; }
@media (max-width: 760px) { .xc-body { grid-template-columns: 210px 120px 210px; gap: 0 60px; justify-content: start; } }
.xr { min-height: 18px; padding-top: 1px; padding-bottom: 1px; }
.xh { padding: 4px 6px; font-size: 12px; }
.xd { width: 13px; height: 13px; border-width: 3px; margin: 0 -6.5px; }
.xd.on { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--c); }
.xdst::before { content: "→ "; }
.xd { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.xd.on { box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, .45); }
.xr.R .xt { margin-left: 4px; }
.xr.L .xt { margin-right: 4px; }

/* splitter ratio next to a joint (owner 19.10.2026) */
.mp-ratio { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 10px/1.2 system-ui, sans-serif;
  color: #004d40; background: rgba(255,255,255,.85); border-radius: 3px; padding: 0 2px; pointer-events: none; }

/* floating search / buttons bar and hide toggles (owner 19.10.2026) */
#mp-top { position: absolute; z-index: 950; top: calc(10px + var(--mp-alarm-h, 0px)); left: 56px; right: 64px; border: 1px solid var(--mp-line); border-radius: 10px;
  background: var(--mp-bg); box-shadow: 0 2px 12px rgba(0, 0, 0, .18); padding: 6px 8px; padding-right: 34px; }
#mp-panel { top: calc(76px + var(--mp-alarm-h, 0px)); }
.mp-hide { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--mp-muted); cursor: pointer; font-size: 16px; line-height: 26px; }
.mp-hide:hover { background: var(--mp-line); color: var(--mp-fg); }
#mp-legend { padding-right: 30px; }
.mp-show { display: none; position: absolute; z-index: 950; border: 1px solid var(--mp-line); border-radius: 8px; background: var(--mp-bg);
  color: var(--mp-fg); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); cursor: pointer; font: inherit; font-size: 13px; padding: 6px 10px; }
#mp-top-show { top: calc(10px + var(--mp-alarm-h, 0px)); left: 56px; }
#mp-leg-show { left: 10px; bottom: 22px; }
body.mp-top-off #mp-top, body.mp-leg-off #mp-legend { display: none; }
body.mp-top-off #mp-top-show, body.mp-leg-off #mp-leg-show { display: block; }
@media (max-width: 640px) {
  #mp-top { left: 50px; right: 56px; gap: 6px; }
  #mp-top-show { left: 50px; }
  #mp-leg-show { bottom: 10px; }
  #mp-panel { top: auto; }
}
/* popup cards (owner 19.10.2026): title, what it is, label/value rows, actions in their own bar */
.mp-pop .leaflet-popup-content { margin: 12px 14px 10px; line-height: 1.35; }
.mp-pop .leaflet-popup-content-wrapper { border-radius: 10px; }
.pc-t { font-size: 15px; font-weight: 650; padding-right: 14px; }
.pc-s { color: #687385; font-size: 12px; margin-top: 2px; }
.pc-w { margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: #fdecec; color: #b42318; font-size: 12px; }
.pc-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 8px; font-size: 13px; }
.pc-kv > span:nth-child(odd) { color: #687385; white-space: nowrap; }
.pc-l { margin-top: 8px; padding-top: 6px; border-top: 1px solid #e6e9ef; font-size: 12px; max-height: 160px; overflow: auto; }
.pc-l > div + div { margin-top: 3px; }
.pc-n { margin-top: 8px; font-size: 12px; color: #3d4757; white-space: pre-wrap; }
.pc-m { margin-top: 6px; font-size: 11px; color: #9aa3b2; }
.pc-a { display: flex; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e6e9ef; flex-wrap: wrap; }
.pc-sp { flex: 1; }
.pc-b { padding: 6px 12px; border: 1px solid #d9dee7; border-radius: 7px; background: #fff; color: #1d2330; font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: none; line-height: 1.2; }
.pc-b:hover { background: #f1f4f9; }
.pc-b.pri { background: #1f6feb; border-color: #1f6feb; color: #fff !important; }
.pc-b.pri:hover { background: #1a5fd0; }
.pc-b.dng { color: #c62828; border-color: transparent; background: transparent; }
.pc-b.dng:hover { background: #fdecec; }
.pc-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; }
.pc-ok { color: #2e9e5b; }
.pc-bad { color: #d83a3a; }
/* owner 19.10.2026: search and buttons as a column on the left edge, semi-transparent (the legend too); solid on hover */
:root { --mp-glass: rgba(255, 255, 255, .78); }
@media (prefers-color-scheme: dark) { :root { --mp-glass: rgba(22, 27, 36, .78); } }
#mp-top { left: 10px; right: auto; top: calc(84px + var(--mp-alarm-h, 0px)); width: 210px; flex-direction: column; align-items: stretch;
  flex-wrap: nowrap; gap: 6px; padding: 8px; padding-top: 8px; background: var(--mp-glass); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  max-height: calc(100% - 200px - var(--mp-alarm-h, 0px)); overflow: auto; }
#mp-top .mp-title { padding-right: 26px; font-size: 13px; }
#mp-top .mp-search { min-width: 0; max-width: none; flex: none; }
#mp-top .mp-search input { padding: 6px 8px; font-size: 14px; }
#mp-tools { flex-direction: column; flex-wrap: nowrap; margin-left: 0; gap: 4px; }
#mp-tools button { text-align: left; width: 100%; background: transparent; }
#mp-tools button:hover { background: var(--mp-bg); }
#mp-top:hover, #mp-legend:hover { background: var(--mp-bg); }
#mp-legend { background: var(--mp-glass); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#mp-top-show { top: calc(84px + var(--mp-alarm-h, 0px)); left: 10px; }
body.mp-embed #mp-top .mp-title { display: block; visibility: hidden; height: 0; padding: 0; margin: 0 0 14px; }
@media (max-width: 640px) {
  #mp-top { left: 10px; right: auto; width: 180px; }
  #mp-top .mp-title { display: block; visibility: hidden; height: 0; margin-bottom: 14px; }
  #mp-tools { flex-direction: column; overflow: visible; width: auto; }
  #mp-tools button { white-space: normal; }
  #mp-top-show { left: 10px; }
}

/* narrower column, auto-fold, district → house search (owner 19.10.2026) */
#mp-top { width: 158px; }
#mp-top .mp-search { display: flex; flex-direction: column; gap: 4px; }
#mp-area { width: 100%; box-sizing: border-box; padding: 5px 6px; border: 1px solid var(--mp-line); border-radius: 8px; background: var(--mp-bg);
  color: var(--mp-fg); font: inherit; font-size: 13px; }
#mp-q:disabled { opacity: .55; }
#mp-tools button { padding: 5px 8px; font-size: 12.5px; }
body.mp-top-auto #mp-top { display: none; }
body.mp-top-auto #mp-top-show { display: block; }
@media (max-width: 640px) { #mp-top { width: 150px; } }
/* owner 19.10.2026: the column is as wide as its content (the district list decides), not a fixed width */
#mp-top { width: max-content; max-width: calc(100% - 80px); }
#mp-area { width: auto; max-width: 100%; }
@media (max-width: 640px) { #mp-top { width: max-content; max-width: calc(100% - 70px); } }
#mp-top .mp-search input#mp-q { width: auto; min-width: 100%; }

/* the address suggestions (own list, 19.10.2026) */
#mp-sug { position: fixed; z-index: 1200; width: max-content; max-width: calc(100vw - 20px); overflow: auto; background: var(--mp-bg);
  color: var(--mp-fg); border: 1px solid var(--mp-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); padding: 4px 0; font-size: 13px; }
#mp-sug[hidden] { display: none; }
.mp-sg { padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.mp-sg:hover, .mp-sg.on { background: var(--mp-accent); color: #fff; }

/* search and controls are two boxes (owner 19.10.2026): search on top next to the zoom, controls a column on the left */
#mp-top { top: calc(10px + var(--mp-alarm-h, 0px)); left: 56px; width: max-content; max-width: calc(100% - 130px); padding: 6px; }
#mp-top .mp-title { display: none; }
#mp-top .mp-search { flex-direction: row; gap: 6px; }
#mp-top .mp-search input#mp-q { min-width: 0; width: auto; }
#mp-area { flex: none; }
#mp-tb { position: absolute; z-index: 950; left: 10px; top: calc(84px + var(--mp-alarm-h, 0px)); width: max-content; padding: 8px;
  display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--mp-line); border-radius: 10px; background: var(--mp-glass);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  max-height: calc(100% - 200px - var(--mp-alarm-h, 0px)); overflow: auto; }
#mp-tb:hover { background: var(--mp-bg); }
#mp-tb[hidden] { display: none; }
.mp-tb-h { font-size: 12px; font-weight: 650; color: var(--mp-muted); padding-right: 26px; }
#mp-tb-show { top: calc(84px + var(--mp-alarm-h, 0px)); left: 10px; }
body.mp-tb-off #mp-tb, body.mp-tb-auto #mp-tb { display: none; }
body.mp-tb-off #mp-tb-show, body.mp-tb-auto #mp-tb-show { display: block; }
#mp-tb-show { display: none; }
body.mp-tb-off #mp-tb-show, body.mp-tb-auto #mp-tb-show { display: block; }
body:not(.mp-has-tb) #mp-tb-show { display: none !important; }
@media (max-width: 640px) {
  #mp-top { left: 50px; max-width: calc(100% - 120px); box-sizing: border-box; }
  #mp-top .mp-search { flex-direction: column; }
}
#mp-top .mp-title, body.mp-embed #mp-top .mp-title { display: none !important; }
/* ---- cross-connect board v2 (19.10.2026): free blocks, module groups, two-colour lines, menus, table ---- */
.k-wrap { flex: 1; overflow: auto; position: relative; background: repeating-linear-gradient(0deg, transparent 0 19px, rgba(127,127,127,.07) 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, rgba(127,127,127,.07) 19px 20px); }
.k-board { position: relative; min-width: 100%; min-height: 100%; }
.k-board #xc-svg { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; }
.kb { position: absolute; z-index: 1; background: var(--mp-bg); border: 1px solid var(--mp-line); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: 12px; }
.kb-cable { border-top: 3px solid #1f6feb; }
.kb-splitter { border-top: 3px solid #6b7380; }
.kb-odf, .kb-dev, .kb-eq { border-top: 3px solid #f2b600; }
.kb-h { display: flex; align-items: flex-start; gap: 4px; padding: 5px 6px 5px 10px; border-bottom: 1px solid var(--mp-line); }
.kb-h[data-drag] { cursor: grab; touch-action: none; }
.kb-tt { flex: 1; min-width: 0; }
.kb-t { font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-s { color: var(--mp-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mp-cross .kb-m { border: 0; background: transparent; padding: 0 6px; font-size: 16px; line-height: 20px; color: var(--mp-muted); }
#mp-cross .kb-m:hover { background: var(--mp-line); color: var(--mp-fg); }
.kr { position: relative; display: flex; align-items: center; gap: 6px; padding: 1px 12px; min-height: 19px; cursor: pointer; }
.kr:hover { background: rgba(31,111,235,.08); }
.kr.pick { background: rgba(255,61,127,.15); }
.kr.kmod { cursor: default; font-weight: 600; font-size: 11px; color: var(--mp-muted); padding-top: 4px; background: rgba(127,127,127,.06); }
.kr.knote { cursor: default; color: var(--mp-muted); }
.ksw { flex: none; width: 10px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.kt { flex: none; white-space: nowrap; }
.kdst { flex: 1; min-width: 0; color: var(--mp-muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.kd { position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--c);
  background: var(--mp-bg); cursor: crosshair; touch-action: none; }
.kd[data-side="L"] { left: -6px; }
.kd[data-side="R"] { right: -6px; }
.kd.on { background: var(--c); box-shadow: 0 0 0 1px #fff; }
.kd:hover { transform: scale(1.3); }
.kl-case { fill: none; stroke: rgba(0,0,0,.45); stroke-width: 5; }  /* dark: a white fibre stays visible */
.kl-a { fill: none; stroke-width: 3; }
.kl-b { fill: none; stroke-width: 3; stroke-dasharray: 7 7; }
.kl-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.kl.dim { opacity: .18; }
.kl.hi .kl-case { stroke: #ff3d7f; stroke-width: 9; }
#mp-cross .kseg { display: inline-flex; }
#mp-cross .kseg button { border-radius: 0; }
#mp-cross .kseg button:first-child { border-radius: 6px 0 0 6px; }
#mp-cross .kseg button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
#mp-cross .kseg button.on { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }
.kmenu { position: fixed; z-index: 2100; min-width: 220px; max-width: 340px; background: var(--mp-bg); color: var(--mp-fg); border: 1px solid var(--mp-line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.28); padding: 8px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.kmenu .km-t { font-size: 12px; color: var(--mp-muted); padding-bottom: 4px; border-bottom: 1px solid var(--mp-line); margin-bottom: 2px; }
.kmenu button { text-align: left; padding: 6px 10px; border: 1px solid var(--mp-line); border-radius: 7px; background: var(--mp-bg); color: var(--mp-fg); cursor: pointer; font: inherit; }
.kmenu button:hover { background: rgba(31,111,235,.08); }
.kmenu button.pri { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }
.kmenu button.dng { color: #c62828; border-color: transparent; }
.kmenu input, .kmenu select { padding: 5px 6px; border: 1px solid var(--mp-line); border-radius: 6px; background: var(--mp-bg); color: var(--mp-fg); font: inherit; font-size: 13px; }
.kmenu label { font-size: 12px; color: var(--mp-muted); }
.kmenu .km-row { display: flex; gap: 6px; }
.kmenu .km-row input, .kmenu label input[type=number] { width: 64px; }
.kmenu .km-list { max-height: 260px; overflow: auto; }
.kmenu .km-i { padding: 5px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.kmenu .km-i:hover { background: var(--mp-accent); color: #fff; }
.kmenu .err { color: #d83a3a; font-size: 12px; }
.k-table { flex: 1; overflow: auto; padding: 12px; }
.k-table table.cx { border-collapse: collapse; font-size: 13px; }
.k-table td, .k-table th { border-bottom: 1px solid var(--mp-line); padding: 4px 8px; text-align: left; vertical-align: top; }
.onlyprint { display: none; }
@media print {
  body > *:not(#mp-cross) { display: none !important; }
  #mp-cross { position: static; }
  #mp-cross .xc-top, #mp-cross .xc-bar, .noprint { display: none !important; }
  .onlyprint { display: block; }
}

/* search box (owner 19.10.2026): semi-transparent like the other boxes; the house field shows once a district is chosen */
#mp-top { background: var(--mp-glass); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#mp-top:hover, #mp-top:focus-within { background: var(--mp-bg); }
#mp-q[hidden] { display: none; }

.mp-area-lb { display: inline-block; transform: translate(-50%, -50%); font: 700 12px/1 system-ui, sans-serif; white-space: nowrap; opacity: .75;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff; pointer-events: none; }
#mp-area { width: auto; max-width: none; }
.pc-ip { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; color: var(--mp-accent); text-decoration: none; }
.pc-ip:hover { text-decoration: underline; }
.pc-ln { font-size: 11px; padding: 0 5px; border: 1px solid #d9dee7; border-radius: 4px; color: #3d4757; text-decoration: none; }
.pc-ln:hover { background: #1f6feb; border-color: #1f6feb; color: #fff; }

/* outage mode (19.10.2026) */
#mp-inc { position: absolute; z-index: 980; top: calc(64px + var(--mp-alarm-h, 0px)); left: 50%; transform: translateX(-50%); width: max-content;
  max-width: calc(100% - 140px); display: flex; flex-direction: column; gap: 6px; }
#mp-inc[hidden] { display: none; }
#mp-inc .inc { background: var(--mp-bg); color: var(--mp-fg); border: 2px solid #d83a3a; border-radius: 10px; padding: 8px 12px; box-shadow: 0 6px 22px rgba(216,58,58,.35); }
#mp-inc .inc-t { font-weight: 700; color: #c62828; }
#mp-inc .inc-s { font-size: 12px; color: var(--mp-muted); margin-top: 2px; }
#mp-inc .inc-a { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
#mp-inc button, #mp-inc select { padding: 5px 10px; border: 1px solid var(--mp-line); border-radius: 7px; background: var(--mp-bg); color: var(--mp-fg); font: inherit; font-size: 13px; cursor: pointer; }
#mp-inc button.pri { background: #d83a3a; border-color: #d83a3a; color: #fff; }
#mp-inc button.dng { border-color: transparent; color: var(--mp-muted); }
#mp-inc .inc-ok { display: inline-flex; gap: 0; }
#mp-inc .inc-ok button { border-radius: 7px 0 0 7px; }
#mp-inc .inc-ok select { border-radius: 0 7px 7px 0; margin-left: -1px; }
.mp-inc-ring { animation: mp-inc 1.2s ease-in-out infinite; }
@keyframes mp-inc { 0%, 100% { stroke-opacity: 1; stroke-width: 3; } 50% { stroke-opacity: .25; stroke-width: 7; } }
@media (max-width: 640px) { #mp-inc { left: 10px; right: 10px; transform: none; width: auto; max-width: none; top: calc(110px + var(--mp-alarm-h, 0px)); } }
.mp-inc-tip { background: #d83a3a; color: #fff; border: 0; font-weight: 600; }
.mp-inc-tip::before { display: none; }
#mp-inc-toast { position: absolute; z-index: 980; top: calc(64px + var(--mp-alarm-h, 0px)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 140px);
  background: var(--mp-bg); color: var(--mp-fg); border: 2px solid #2e9e5b; border-radius: 10px; padding: 8px 12px; box-shadow: 0 6px 22px rgba(0,0,0,.2); font-size: 13px; }
#mp-inc-toast[hidden] { display: none; }

/* the incident bubble on the map (19.10.2026): grows out of the house / the centre of the district */
.mp-inc-pop .leaflet-popup-content-wrapper { border: 2px solid #d83a3a; border-radius: 12px; box-shadow: 0 8px 26px rgba(216,58,58,.35);
  animation: mp-inc-grow .4s cubic-bezier(.2,.9,.3,1.2); transform-origin: 50% 100%; }
.mp-inc-pop .leaflet-popup-tip { background: #d83a3a; }
.mp-inc-pop .leaflet-popup-content { margin: 10px 12px; }
.mp-inc-pop .inc-t { font-weight: 700; color: #c62828; }
.mp-inc-pop .inc-s { font-size: 12px; color: #687385; margin-top: 2px; }
.mp-inc-pop .inc-a { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.mp-inc-pop button, .mp-inc-pop select { padding: 5px 10px; border: 1px solid #d9dee7; border-radius: 7px; background: #fff; color: #1d2330; font: inherit; font-size: 13px; cursor: pointer; }
.mp-inc-pop button.pri { background: #d83a3a; border-color: #d83a3a; color: #fff; }
.mp-inc-pop button.dng { border-color: transparent; color: #687385; }
.mp-inc-pop .inc-ok { display: inline-flex; }
.mp-inc-pop .inc-ok button { border-radius: 7px 0 0 7px; }
.mp-inc-pop .inc-ok select { border-radius: 0 7px 7px 0; margin-left: -1px; }
@keyframes mp-inc-grow { from { transform: scale(.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* 23.10.2026: an oblenergo power cut over fallen houses — info, not an alarm */
.mp-inc-pop.mp-inc-info .leaflet-popup-content-wrapper { border-color: #e0a100; box-shadow: 0 6px 18px rgba(224,161,0,.30); }
.mp-inc-pop.mp-inc-info .leaflet-popup-tip { background: #e0a100; }

/* «Аварії» on the map (26.10.2026) */
#mp-panel h4 { margin: 14px 0 6px; font-size: 13px; }
#mp-panel .vo-item, #mp-panel .vo-z { border-top: 1px solid var(--mp-line); padding: 8px 0; }
#mp-panel .vo-say, #mp-panel .vo-meta { font-size: 12px; color: var(--mp-muted); margin-top: 4px; }
#mp-panel .vo-late { font-size: 12px; color: #fff; background: #e0a800; border-radius: 4px; padding: 1px 6px; }
#mp-panel button.dng { color: #d83a3a; }

/* house kinds (26.10.2026): block of flats — a square, non-residential — a diamond; private houses stay circles */
.mp-hk { width: 10px; height: 10px; box-sizing: border-box; background: var(--c); border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.mp-hk-mkd { border-radius: 2px; }
.mp-hk-other { transform: rotate(45deg) scale(.85); }
.mp-hk.rough { background: transparent; border: 1.5px dashed var(--c); box-shadow: none; }

/* switch IP menu and the house card (26.10.2026) */
#mp-ipm { position: fixed; z-index: 3000; width: 230px; background: var(--mp-bg); color: var(--mp-fg); border: 1px solid var(--mp-line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); padding: 6px 0; font-size: 13px; }
#mp-ipm a { display: block; padding: 6px 12px; color: inherit; text-decoration: none; }
#mp-ipm a:hover { background: var(--mp-accent); color: #fff; }
#mp-ipm .ipm-t { padding: 4px 12px 6px; font-weight: 600; border-bottom: 1px solid var(--mp-line); margin-bottom: 4px; }
#mp-ipm .ipm-s { padding: 6px 12px 2px; font-size: 11px; color: var(--mp-muted); text-transform: uppercase; letter-spacing: .05em; }
#mp-panel .hc-it { border: 1px solid var(--mp-line); border-radius: 8px; padding: 8px; margin: 6px 0; display: grid; gap: 6px; }
#mp-panel .hc-it.focus { border-color: var(--mp-accent); box-shadow: 0 0 0 2px var(--mp-accent); }
#mp-panel .hc-it .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#mp-panel .hc-it .row > input, #mp-panel .hc-it .row > select { flex: 1 1 120px; min-width: 0; }
#mp-panel .hc-it .hc-m { font-size: 12px; color: var(--mp-muted); }
#mp-panel .hc-it .btns { margin-top: 0; }
#mp-panel button.dng { color: #d83a3a; }

/* hand-drawn house outline (26.10.2026): the list of billing houses without an outline */
#mp-panel .no-list { max-height: 45vh; overflow: auto; margin-top: 6px; border: 1px solid var(--mp-line); border-radius: 6px; }
#mp-panel .no-it { padding: 5px 8px; cursor: pointer; border-bottom: 1px solid var(--mp-line); display: flex; justify-content: space-between; gap: 8px; }
#mp-panel .no-it:hover { background: color-mix(in srgb, var(--mp-accent) 12%, transparent); }
#mp-panel .no-it .vo-meta { font-size: 11px; text-align: right; }
#mp-panel .rg-ok { color: #1f9d55; margin-top: 6px; }
#mp-panel button.on { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }

/* «🏠 Будинки» box (26.10.2026): house layers + other sources, apart from the long layer list */
.mp-hbox { background: var(--mp-bg); color: var(--mp-fg); }
.mp-hbox .mp-hb-b { border: 0; background: transparent; color: inherit; padding: 6px 10px; cursor: pointer; font: inherit; white-space: nowrap; }
.mp-hbox .mp-hb-body { padding: 4px 10px 8px; max-width: 290px; }
.mp-hbox .mp-hb-t { font-size: 12px; color: var(--mp-muted); margin: 8px 0 2px; font-weight: 600; }
.mp-hbox .mp-hb-i { display: flex; gap: 6px; align-items: center; margin: 3px 0; cursor: pointer; }
.mp-hbox .mp-hb-i.sub { margin-left: 18px; font-size: 12px; }
.mp-hbox .mp-hb-n { font-size: 11px; color: var(--mp-muted); margin-top: 6px; }
#mp-panel .cp-r { border-top: 1px solid var(--mp-line); padding: 6px 0; }
#mp-panel .cp-r .vo-meta { margin-left: 22px; }
#mp-panel .cp-r button { margin: 4px 0 0 22px; }
#mp-panel .cp-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.mp-inc-pop hr.inc-sep { border: 0; border-top: 1px solid #f0c9c9; margin: 8px 0; }
.mp-offline-note { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 2000; background: #fff3cd; color: #5c4400; border: 1px solid #e0b84a; border-radius: 8px; padding: 8px 12px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
/* the air-alarm badge (27.10.2026): a pulsing siren on the map, a click opens the card with the link to the alarm map */
#mp-siren { --sr: #d83a3a; position: absolute; z-index: 990; right: 12px; top: 64px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; width: 92px; padding: 10px 6px 8px; border-radius: 18px; background: var(--sr); color: #fff; font-weight: 700; font-size: 12px;
  line-height: 1.2; text-align: center; cursor: pointer; box-shadow: 0 6px 20px rgba(216,58,58,.45); user-select: none; box-sizing: border-box; }
#mp-siren.open { width: min(240px, calc(100% - 24px)); }
#mp-siren .sr-dur { font-weight: 400; opacity: .9; }
#mp-siren.yellow { --sr: #e0a800; color: #1d2330; box-shadow: 0 6px 20px rgba(224,168,0,.45); }
#mp-siren .sr-ic { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.22); animation: sr-shake 1.6s ease-in-out infinite; }
#mp-siren .sr-ring { position: absolute; left: calc(50% - 16px); top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--sr);
  animation: sr-pulse 1.8s ease-out infinite; pointer-events: none; }
#mp-siren .sr-ring2 { animation-delay: .9s; }
#mp-siren .sr-sh { position: relative; z-index: 1; }
#mp-siren .sr-card { width: 100%; margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.35); font-weight: 400; cursor: default; }
#mp-siren .sr-t { font-weight: 700; font-size: 15px; }
#mp-siren .sr-why { margin-top: 2px; font-size: 14px; }
#mp-siren .sr-s { margin-top: 2px; opacity: .9; font-size: 12px; }
#mp-siren .sr-go { margin-top: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
#mp-siren .sr-link { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 8px; background: #fff; color: #b71c1c; font-weight: 700;
  text-decoration: none; }
#mp-siren.yellow .sr-link { color: #6b4e00; }
#mp-siren .sr-src { margin-top: 4px; font-size: 11px; opacity: .8; }

#mp-siren:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes sr-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes sr-shake { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 85% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { #mp-siren .sr-ring, #mp-siren .sr-ic { animation: none; } }
@media (max-width: 640px) { #mp-siren { top: auto; bottom: 64px; right: 10px; } }
.mp-radius { background: var(--mp-card, #fff); padding: 8px 10px; font-size: 12px; line-height: 1.5; margin-bottom: 52px !important; } .mp-radius input { width: 190px; } .mp-r-n { color: #687385; }
.hc-live { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #d9dee7; font-size: 12px; line-height: 1.6; }
.hc-live .hc-h { font-weight: 600; color: #687385; }
.hc-live .hc-warn { margin-top: 4px; padding: 4px 6px; border-radius: 6px; background: #fdecea; color: #a61b1b; }
.hc-live .mono { font-family: ui-monospace, monospace; font-size: 11px; }