html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: Verdana, Tahoma, sans-serif; font-size: 12px;
  background: #d3d9de;
}
body { display: flex; flex-direction: column; }

#container {
  flex: 1 1 auto;
  display: flex; flex-direction: row;
  width: 100%;
  min-height: 0;
}
#cal-panel { flex: 0 0 auto; display: none !important; }
#ed-panel { flex: 0 0 30px; }
#footer { flex: 0 0 32px; }
/* Footer entirely off in viewer mode — all its content is editor diagnostics
 * (Шуберт coords, Источник, pix, Режим калибровки toggle). */
body:not(.editing-mode) #footer { display: none; }
/* Calibration panel only shows when BOTH editing mode AND calibration sub-mode are on. */
body.editing-mode.calibrating #cal-panel { display: flex !important; }
/* All editing-only elements (places-bar, cal-toggle, "Источник", "pix", popup
 * Move/Delete buttons) are hidden by default — only the viewer surface stays
 * visible. They become visible when body.editing-mode is set. !important so
 * downstream component rules (e.g. .place-popup .place-actions{display:flex})
 * can't accidentally re-show them in viewer mode. */
.edit-only { display: none !important; }
body.editing-mode .edit-only { display: revert !important; }
body.editing-mode #places-bar.edit-only { display: flex !important; }
body.editing-mode .place-popup .place-actions.edit-only { display: flex !important; }
/* Edit checkbox is only rendered when the app detects local (server-backed) mode. */
body:not(.editing-allowed) #edit-toggle-wrap { display: none !important; }

.pane {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
  border-right: 1px solid #375269;
}
.pane:last-child { border-right: none; }

#map-old, #map-new {
  width: 100%; height: 100%;
  background: #f4f4f0;
}

.crosshair {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  pointer-events: none;
  z-index: 500;
}
.crosshair::before,
.crosshair::after {
  content: '';
  position: absolute;
  background: #ff0000;
  box-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff;
}
.crosshair::before { left: 14px; top: 0;  width: 2px;  height: 30px; }
.crosshair::after  { left: 0;  top: 14px; width: 30px; height: 2px;  }

body.calibrating .crosshair::before,
body.calibrating .crosshair::after { background: #00aa00; }

/* --- Places toolbar (always visible, above maps) --- */
#places-bar {
  flex: 0 0 36px;
  display: flex; align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: #f0e8d4;
  border-bottom: 1px solid #8a6d2e;
  font-size: 12px;
}
#places-bar .lbl { color: #5a4a1a; }
#places-bar .lbl.right { margin-left: auto; }
#places-bar input[type=text] {
  width: 220px;
  padding: 4px 8px;
  border: 1px solid #8a6d2e;
  border-radius: 3px;
  font: inherit;
}
#places-bar input[type=text].locked,
#places-bar input[type=text][readonly] {
  background: #e8e2cd;
  color: #5a4a1a;
  cursor: not-allowed;
}
#places-bar select {
  padding: 4px 6px;
  border: 1px solid #8a6d2e;
  border-radius: 3px;
  font: inherit;
}
#places-bar #np-parish { max-width: 260px; }
#places-bar .bar-sep { color: #c4b48a; padding: 0 2px; }
#places-bar #add-place-btn {
  padding: 4px 14px;
  background: #4a8c33;
  color: white;
  border: 1px solid #2b5d00;
  border-radius: 3px;
  cursor: pointer;
  font: inherit; font-weight: bold;
}
#places-bar #add-place-btn:hover { background: #5fa843; }
#places-bar #add-place-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#place-status { color: #466176; }

/* --- Search bar (separate row under places-bar) --- */
#search-bar {
  flex: 0 0 32px;
  display: flex; align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: #ece4ce;
  border-bottom: 1px solid #8a6d2e;
  font-size: 12px;
  /* No z-index here on purpose: a positioned element with z-index creates a
   * stacking context and would trap #search-dropdown's z-index (1500) inside
   * it. We need the dropdown to compete in the root stacking context against
   * .pane-label and .nav-arrow (z-index 600). */
}
#search-bar .lbl { color: #5a4a1a; }
#search-wrap { position: relative; }
#search-input {
  width: 280px;
  padding: 4px 8px;
  border: 1px solid #8a6d2e;
  border-radius: 3px;
  font: inherit;
}
#search-dropdown {
  position: absolute;
  top: 100%; left: 0;
  width: 380px;
  max-height: 320px;
  overflow-y: auto;
  background: white;
  border: 1px solid #8a6d2e;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 1500;
}
#search-dropdown.empty { display: none; }
.search-item {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid #efe7d2;
  display: flex; align-items: baseline; gap: 8px;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover, .search-item.active { background: #faf5e3; }
.search-item .name { font-weight: bold; color: #2d2d2d; }
.search-item .meta { color: #6a5a2a; font-size: 11px; }
.search-item .sheet-tag {
  margin-left: auto;
  padding: 1px 6px;
  background: #d8c98e;
  color: #4a3a08;
  border-radius: 2px;
  font-size: 10px;
}
.search-item .sheet-tag.current { background: #b6d4a4; color: #2b5d00; }
#search-status { color: #466176; }
#search-bar .lbl.right { margin-left: auto; }
.search-source { font-style: italic; color: #6a5a2a; }

/* --- Place markers --- */
.place-marker {
  background: transparent !important;
  border: none !important;
}
.place-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
  cursor: pointer;
}
.place-star-svg {
  display: block;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
  cursor: pointer;
}
.place-tooltip {
  background: rgba(255,255,200,0.9);
  border: 1px solid #8a6d2e;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: bold;
  color: #2b1a00;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.place-edit-row {
  display: flex; align-items: center; gap: 4px;
  margin: 4px 0;
}
.place-name-input {
  flex: 1; font: inherit; font-size: 13px; font-weight: bold;
  padding: 2px 4px;
  border: 1px solid #b09030; background: #fffbf0;
  border-radius: 2px;
}
.place-yards-input {
  width: 56px; font: inherit; font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #b09030; background: #fffbf0;
  border-radius: 2px;
}
.place-save-edits {
  font-size: 13px; padding: 1px 6px;
  border: 1px solid #888; background: #fff;
  border-radius: 3px; cursor: pointer;
}
.place-save-edits:hover { background: #f0f0f0; }
.place-save-edits:disabled { opacity: 0.4; }
.place-nearest-city {
  color: #555; font-style: italic;
}
.place-type-input {
  flex: 1; font: inherit; font-size: 11px;
  padding: 2px 4px;
  border: 1px solid #b09030; background: #fffbf0;
  border-radius: 2px;
}
/* In editing-mode, hide the static name display since input is shown instead. */
body.editing-mode .place-popup .not-editing-only { display: none; }
.place-edit-label {
  font-size: 11px; color: #555;
}
/* Pixel-mode bar: only visible when current map is pixel-pinned (Шуберт v2).
   Use id selectors so we beat the existing `body.editing-mode #places-bar.edit-only
   { display: flex !important }` rule by matching specificity AND coming later. */
.pixel-mode-only { display: none !important; }
body.pixel-mode #places-bar-px.pixel-mode-only { display: flex !important; }
body.pixel-mode #places-bar.not-pixel-mode-only { display: none !important; }
/* На не-pixel-mode картах (РККА, обычный Шуберт) в editing-mode правило
   .edit-only { display: revert !important } (specificity 0,2,1) пробивает
   .pixel-mode-only (0,1,0) — pixel-bar и match-panel становятся видны.
   Гасим явным id-селектором (1,1,1) — побеждаем по specificity. */
body:not(.pixel-mode) #places-bar-px,
body:not(.pixel-mode) #match-panel { display: none !important; }

/* Marker cluster icons — override Leaflet.markercluster's pastel default so
   clusters read as bold green dots on monochrome historical scans. */
.marker-cluster-small        { background-color: rgba(60, 180, 75, 0.45); }
.marker-cluster-small  div   { background-color: rgba(30, 130, 50, 0.95); color: #fff; }
.marker-cluster-medium       { background-color: rgba(40, 160, 60, 0.45); }
.marker-cluster-medium div   { background-color: rgba(20, 110, 40, 0.95); color: #fff; }
.marker-cluster-large        { background-color: rgba(20, 130, 45, 0.45); }
.marker-cluster-large  div   { background-color: rgba(10, 90,  30, 0.95); color: #fff; }
.marker-cluster div span { font-weight: bold; }

.place-tooltip-foreign {
  background: rgba(245,245,235,0.7);
  color: #555;
  font-weight: normal;
  border-color: #aaa;
}
.leaflet-tooltip.place-tooltip::before,
.leaflet-tooltip.place-tooltip-foreign::before { display: none; }
.place-sheet-tag { font-style: italic; color: #888; }

.place-popup .place-name { font-weight: bold; font-size: 13px; }
.place-popup .place-type { color: #666; font-size: 11px; }
.place-popup .place-admin { color: #444; font-size: 11px; }
.place-popup .place-pixel { color: #888; font-size: 10px; font-family: monospace; margin-top: 4px; }
.place-popup .place-actions { margin-top: 6px; display: flex; gap: 6px; }
.place-popup button.del-place {
  padding: 3px 10px;
  background: #c33; color: white;
  border: none; border-radius: 3px; cursor: pointer;
}
.place-popup button.move-place {
  padding: 3px 10px;
  background: #4a8c33; color: white;
  border: none; border-radius: 3px; cursor: pointer;
}

/* --- Шуберт v2 Phase D: match panel above the map --- */
#match-panel {
  display: none;
  align-items: center; gap: 8px;
  padding: 4px 8px;
  background: #f5f4ec;
  border-bottom: 1px solid #c0bda0;
  font-size: 12px;
}
body.editing-mode.pixel-mode #match-panel { display: flex !important; }
#match-panel .match-counter { color: #444; }
#match-panel .match-counter b { color: #222; }
#match-panel button {
  padding: 3px 10px;
  background: #fff; border: 1px solid #7a8aa0;
  border-radius: 3px; cursor: pointer; font-size: 12px;
}
#match-panel button:hover { background: #f0f6fa; }
#match-panel button:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Шуберт v2 Phase D: РККА match review section in popup --- */
.place-match-section {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #aaa;
}
.place-match-head    { font-size: 12px; color: #333; }
.place-match-meta    { color: #888; font-weight: normal; font-size: 11px; margin-left: 4px; }
.place-match-status  { font-size: 11px; margin: 2px 0 4px; }
.match-status-pending  { color: #b07a14; }
.match-status-accepted { color: #1d5fb8; }
.match-status-rejected { color: #888; }
.place-match-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.place-match-actions button {
  padding: 3px 8px;
  border: none; border-radius: 3px; cursor: pointer;
  font-size: 11px;
}
.place-match-actions button.match-accept { background: #2a6ec9; color: white; }
.place-match-actions button.match-reject { background: #b34a4a; color: white; }
.place-match-actions button.match-redo   { background: #888;    color: white; }
.place-match-actions button:disabled { opacity: 0.5; cursor: default; }

.match-search {
  width: 100%;
  margin: 4px 0;
  padding: 3px 6px;
  font-size: 12px;
  box-sizing: border-box;
}
.unified-mention-row {
  display: flex; align-items: center; gap: 4px;
  padding: 1px 0;
  font-size: 11px;
}
.unified-mention-row .link-break {
  margin-left: auto;
  font-size: 10px; padding: 1px 5px;
  background: #b34a4a; color: white;
  border: none; border-radius: 3px; cursor: pointer;
}
.unified-mention-row .link-break:hover { background: #d05a5a; }
.unified-mention-row .link-break:disabled { opacity: 0.5; cursor: default; }
.match-rows {
  max-height: 200px;     /* ≈6 rows visible, остальное через scroll */
  overflow-y: auto;
}
.match-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
  border-top: 1px dotted #ddd;
}
.match-row:first-of-type { border-top: 0; }
.match-row-info { flex: 1; min-width: 0; }
.match-row-alt  { color: #555; font-size: 11px; font-style: italic; }
.match-row-linked {
  display: block;
  color: #b07a14; font-size: 11px;
}
.match-row button.match-accept {
  padding: 2px 7px; font-size: 11px;
  background: #2a6ec9; color: white;
  border: none; border-radius: 3px; cursor: pointer;
}
.match-row button.match-accept:hover { background: #4587e0; }
.match-row button.match-accept:disabled { opacity: 0.5; cursor: default; }

/* --- Sheet navigation arrows (on historical pane) --- */
.nav-arrow {
  display: none;
  position: absolute;
  z-index: 600;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 2px solid #375269;
  border-radius: 50%;
  color: #014A9C;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  padding: 0;
  user-select: none;
}
.nav-arrow:hover {
  background: #e1f0e1;
  border-color: #2b5d00;
  color: #2b5d00;
}
.nav-arrow-left  { left:  10px; top: 50%;  margin-top: -19px; }
.nav-arrow-right { right: 10px; top: 50%;  margin-top: -19px; }
.nav-arrow-up    { top:    10px; left: 50%; margin-left: -19px; }
.nav-arrow-down  { bottom: 10px; left: 50%; margin-left: -19px; }

/* --- Pane toggle buttons (hide/show the neighbour pane) --- */
.pane-toggle {
  position: absolute;
  bottom: 15px;
  z-index: 600;
  width: 38px; height: 38px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.95);
  border: 2px solid #375269;
  border-radius: 50%;
  color: #014A9C;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  user-select: none;
}
.pane-toggle:hover { background: #e1f0e1; border-color: #2b5d00; color: #2b5d00; }
.pane-toggle-rt { right: 15px; }   /* in left pane → hides right neighbour */
.pane-toggle-lt { left:  15px; }   /* in right pane → hides left neighbour */

/* Hide-neighbour states. Only one direction can be active at a time. */
body.hide-right .pane:nth-child(2) { display: none; }
body.hide-right .pane:first-child  { flex: 1 1 100%; }
body.hide-left  .pane:first-child  { display: none; }
body.hide-left  .pane:nth-child(2) { flex: 1 1 100%; }

/* --- Historical-pane map selector (mirror of L.control.layers, top-right) */
.sheet-selector .leaflet-control-layers-list { white-space: nowrap; }
.sheet-selector label { cursor: pointer; padding: 1px 0; }
.sheet-selector label:hover { background: #f0f6fa; }
.sheet-selector input[type=radio] { margin-right: 4px; }

.pane-label {
  position: absolute;
  left: 50%; top: 8px;
  transform: translateX(-50%);
  z-index: 600;
  background: rgba(255,255,255,0.85);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  color: #375269;
  box-shadow: 0 0 3px rgba(0,0,0,0.25);
  pointer-events: none;
}

/* --- Calibration panel (above footer, hidden by default) --- */
#cal-panel {
  display: none;
  flex-direction: column;
  background: #eaf1d8;
  border-top: 1px solid #6b8e1d;
  border-bottom: 1px solid #6b8e1d;
  padding: 4px 10px;
  gap: 4px;
  font-size: 11px;
  max-height: 30vh;
  overflow-y: auto;
}
#cal-panel .cal-row.top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#cal-panel button {
  font: inherit; padding: 4px 10px;
  border: 1px solid #375269; border-radius: 3px;
  background: #fff; color: #014A9C; cursor: pointer;
}
#cal-panel button:hover { background: #f0f6fa; }
#cal-panel button:disabled { opacity: 0.5; cursor: not-allowed; }
#cal-panel button.warn { color: #b00; border-color: #b00; }
#cal-status { color: #466176; flex: 1; text-align: right; }

.cal-list { display: flex; flex-direction: column; gap: 2px; }
.cal-list .cal-row {
  display: flex; align-items: center; gap: 6px;
  font-family: Consolas, monospace; font-size: 11px;
  padding: 2px 4px; background: rgba(255,255,255,0.5);
}
.cal-idx { color: #888; min-width: 24px; }
button.cal-del {
  padding: 0 6px !important; font-weight: bold; color: #b00 !important;
  border-color: #b00 !important;
}

/* --- Calibration anchor triangles --- */
.cal-pt-marker {
  background: transparent !important;
  border: none !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* --- Calibration 4×4 grid labels (12-13 only, temporary) --- */
.cal-grid-label {
  background: rgba(255, 136, 0, 0.92);
  color: #000;
  font: bold 13px Consolas, monospace;
  border: 1.5px solid #cc5500;
  border-radius: 4px;
  text-align: center;
  line-height: 18px;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* --- Rebuild overlay (blocks UI while prep_tiles is running) --- */
#rebuild-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 30, 40, 0.78);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  cursor: wait;
}
#rebuild-overlay[hidden] { display: none; }
.overlay-inner {
  background: white;
  padding: 36px 48px;
  border-radius: 8px;
  max-width: 520px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.overlay-inner h2 {
  margin: 0 0 12px;
  font-size: 22px;
  color: #014A9C;
}
.overlay-sub {
  color: #555;
  font-size: 13px;
  margin: 8px 0;
}
.progressbar {
  width: 100%;
  height: 22px;
  background: #e3e8ee;
  border-radius: 11px;
  overflow: hidden;
  margin: 16px 0 8px;
  position: relative;
}
#progressbar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4a8c33, #5fa843);
  transition: width 0.4s ease;
}
#rebuild-elapsed {
  font-family: Consolas, monospace;
  font-size: 16px;
  font-weight: bold;
  color: #014A9C;
}

/* --- Footer --- */
#footer {
  height: 32px;
  background: #eef3f7;
  border-top: 1px solid #375269;
  display: flex; align-items: center;
  padding: 0 10px;
  gap: 8px;
  font-size: 12px;
}
#footer .lbl { color: #466176; }
#footer .lbl.right { margin-left: auto; }
#footer .val {
  font-family: Consolas, 'Courier New', monospace;
  font-weight: bold;
  color: #014A9C;
}
#coords { cursor: pointer; user-select: all; padding: 1px 4px; border-radius: 3px; }
#coords:hover { background: #dde6ec; }
#coords.copied { background: #d6f0d6; }

/* --- Editor / view-mode bottom strip (above main footer) --- */
#ed-panel {
  height: 30px;
  background: #f6f4ec;
  border-top: 1px solid #8a6d2e;
  display: flex; align-items: center;
  padding: 0 10px;
  gap: 8px;
  font-size: 12px;
}
#ed-panel .lbl { color: #5a4a1a; }
#ed-panel .lbl.right,
#ed-panel .cal-toggle-wrap.right { margin-left: auto; }
#ed-panel .val {
  font-family: Consolas, 'Courier New', monospace;
  font-weight: bold;
  color: #014A9C;
}
body.editing-mode #edit-toggle-wrap { background: #d4e7a8; color: #2b5d00; font-weight: bold; }
.ed-filter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 3px;
  cursor: pointer; user-select: none;
  background: #ece4ce;
  border: 1px solid transparent;
}
.ed-filter:hover { background: #e3d9b6; }
.ed-filter input { margin: 0; }

/* "Названия" checkbox: hide all permanent marker tooltips when off. */
body.no-place-labels .leaflet-tooltip.place-tooltip { display: none !important; }
/* Performance: hide all permanent tooltips while the user is panning/zooming.
 * Leaflet repositions every tooltip on every move event — at 2000+ markers
 * this triggers massive layout thrash. Hidden tooltips skip the reflow. */
body.map-panning .leaflet-tooltip.place-tooltip { display: none !important; }
/* Collision-hidden tooltips: priority resolution by refreshLabelCollisions(). */
.leaflet-tooltip.place-tooltip.hidden-by-collision { display: none !important; }

.cal-toggle-wrap {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 3px;
  cursor: pointer; user-select: none;
}
.cal-toggle-wrap:hover { background: #dde6ec; }
body.calibrating .cal-toggle-wrap { background: #d4e7a8; color: #2b5d00; font-weight: bold; }