/* ============================================================
   昆明积水地图 · app.css
   设计系统：暖纸底「市政档案」视觉 + 暗色主题（html[data-theme=dark]）
   结构：1 令牌 → 2 基础 → 3 顶栏 → 4 侧栏面板 → 5 地图与弹层
         → 6 区域报告 → 7 动效与杂项 → 8 移动端 → 9 打印
   ============================================================ */

/* —— 1. 设计令牌（浅色为默认，暗色见 :root[data-theme="dark"]） —— */
:root {
  /* 底与面 */
  --bg: #f3efe6;
  --bg-deep: #ebe6dc;
  --panel: #fffdf8;
  --panel-2: #f7f2e8;
  --hover: #efe8d8;
  --hover-2: #f3eee4;
  --banner-bg: #efe8d8;
  --banner-hist-bg: #e8eefc;
  --th-bg: #efe8d8;
  --row-hot-bg: #fff5f4;
  --row-zero-bg: #faf7f0;
  --track-bg: #e8e0d2;
  --grip: #cfc4b4;

  /* 线 */
  --line: #e4dccf;
  --line-strong: #cfc4b4;
  --form-edge: #292524;

  /* 墨与字 */
  --ink: #1f1b16;
  --ink-2: #3f3a34;
  --muted: #6b6258;

  /* 顶栏 */
  --nav: #1a1612;
  --nav-2: #2a241e;
  --nav-line: #3d342c;
  --nav-fg: #f5efe4;
  --nav-muted: #a89a88;

  /* 品牌 / 语义色 */
  --today: #b42318;
  --on-today: #fffdf8;
  --sev-closed: #c1121f;
  --sev-mid: #e85d04;
  /* 图钉/徽章/图例的实底色：其上文字为白色，双主题同值保证对比度 ≥4.5。
     --sev-* 变量还兼任文字色（暗色下是提亮版），故实底单列 -solid。 */
  --sev-closed-solid: #c1121f;
  --sev-mid-solid: #c2410c;
  --sev-ctrl-solid: #4f46e5;
  --sev-slow: #f59e0b;
  --sev-slow-ink: #1f1b16;
  --sev-ctrl: #4f46e5;
  --hist: #1d4ed8;
  --on-hist: #fff;
  --ugc: #0f766e;
  --on-ugc: #fff;
  --safe: #15803d;
  --meta-slow: #b45309;

  /* 柔色状态对（bg/ink 成对使用） */
  --soft-red-bg: #fee2e2;
  --soft-red-ink: #991b1b;
  --soft-orange-bg: #ffedd5;
  --soft-orange-ink: #9a3412;
  --soft-green-bg: #dcfce7;
  --soft-green-ink: #166534;
  --soft-blue-bg: #e3ecfd;
  --soft-blue-ink: #1e40af;
  --soft-yellow-bg: #fef3c7;
  --soft-yellow-ink: #92400e;
  --soft-gray-bg: #e7e5e4;
  --soft-gray-ink: #44403c;

  /* 弹层与控件 */
  --legend-bg: rgba(255, 253, 248, 0.92);
  --edge-highlight: rgba(255, 255, 255, 0.5);
  --probe-bg: #0f172a;
  --probe-ink: #f8fafc;
  --btn-solid-bg: #1c1917;
  --btn-solid-ink: #fffdf8;
  --backdrop: rgba(28, 25, 23, 0.42);
  --sel-bg: rgba(193, 18, 31, 0.14);

  /* 焦点 */
  --focus: #1d4ed8;
  --focus-ring: rgba(29, 78, 216, 0.16);
  --focus-nav: #f5efe4;

  /* 阴影：统一暖色调（与纸底同族），不用纯黑 */
  --shadow-sm: 0 1px 2px rgba(64, 48, 24, 0.06), 0 2px 8px rgba(64, 48, 24, 0.10);
  --shadow-md: 0 2px 6px rgba(64, 48, 24, 0.08), 0 8px 28px rgba(64, 48, 24, 0.16);
  --shadow-lg: 0 4px 12px rgba(64, 48, 24, 0.10), 0 16px 48px rgba(64, 48, 24, 0.26);

  /* 动效 */
  --t-fast: 140ms;
  --t-med: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

:root[data-theme="dark"] {
  --bg: #14110d;
  --bg-deep: #100e0b;
  --panel: #1f1b16;
  --panel-2: #262119;
  --hover: #2b251d;
  --hover-2: #2f2820;
  --banner-bg: #2b251d;
  --banner-hist-bg: #1e2740;
  --th-bg: #2b251d;
  --row-hot-bg: #33201d;
  --row-zero-bg: #201c17;
  --track-bg: #3a332a;
  --grip: #4a4236;

  --line: #3a332a;
  --line-strong: #4a4236;
  --form-edge: #4a4236;

  --ink: #ece5d8;
  --ink-2: #cfc4b4;
  --muted: #a3968a;

  --nav: #0f0d0a;
  --nav-2: #262019;
  --nav-line: #3a332a;
  --nav-fg: #f0e9dc;
  --nav-muted: #94887a;

  --today: #e2564d;
  --on-today: #240b09;
  --sev-closed: #e2564d;
  --sev-mid: #f0863a;
  --sev-slow: #e3aa3d;
  --sev-slow-ink: #241c0e;
  --sev-ctrl: #9a8cf5;
  --sev-closed-solid: #c1121f;
  --sev-mid-solid: #c2410c;
  --sev-ctrl-solid: #4f46e5;
  --hist: #7da2ff;
  --on-hist: #0d1730;
  --ugc: #45c4b3;
  --on-ugc: #06211d;
  --safe: #58c98a;
  --meta-slow: #d9a441;

  --soft-red-bg: #3d1b18;
  --soft-red-ink: #ffb4ab;
  --soft-orange-bg: #3a2416;
  --soft-orange-ink: #ffb894;
  --soft-green-bg: #17301f;
  --soft-green-ink: #8fe0aa;
  --soft-blue-bg: #1c2a4a;
  --soft-blue-ink: #aec7ff;
  --soft-yellow-bg: #33290f;
  --soft-yellow-ink: #e8c162;
  --soft-gray-bg: #2c2925;
  --soft-gray-ink: #c6beb2;

  --legend-bg: rgba(26, 22, 17, 0.9);
  --edge-highlight: rgba(255, 255, 255, 0.06);
  --probe-bg: #e8e0d2;
  --probe-ink: #14110d;
  --btn-solid-bg: #f0e9dc;
  --btn-solid-ink: #14110d;
  --backdrop: rgba(0, 0, 0, 0.55);
  --sel-bg: rgba(226, 86, 77, 0.3);

  --focus: #7da2ff;
  --focus-ring: rgba(125, 162, 255, 0.22);
  --focus-nav: #f0e9dc;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.55);
}

/* —— 2. 基础 —— */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body {
  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  position: relative;
  width: 100%;
  max-width: 100%;
  /* 数据型产品：数字统一等宽，表格/水深/计数纵向对齐 */
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--sel-bg); }

/* 键盘可达性：全站可见焦点环 */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.topnav :focus-visible { outline-color: var(--focus-nav); }

/* 细滚动条（火狐 + WebKit） */
.list, .place-suggest, .report, .catalog-wrap, .topnav .tabs {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* 可交互元素的统一过渡 */
.topnav button, .bar button, .search, .map-tools button, .place-search-form button,
.place-suggest button, .place-result-close, .place-actions button, .district-card,
.tier-chip, .empty-reset, .sheet-toggle, .catalog-goto, .jump-map, .leaflet-control-zoom a {
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}

/* —— 3. 顶栏 —— */
.topnav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--nav);
  color: var(--nav-fg);
  border-bottom: 1px solid var(--nav-line);
  z-index: 1000;
}
.topnav .brand {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.06em;
  margin-right: 8px;
  white-space: nowrap;
}
/* 品牌水滴：与「断交」图钉同形，呼应主题 */
.topnav .brand::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--sev-closed);
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  margin-right: 7px;
  vertical-align: 1px;
}
.topnav .brand span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--nav-muted);
  margin-top: 2px;
}
.topnav .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-items: center;
}
.topnav .tab-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.topnav .tab-group + .tab-group {
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid var(--nav-line);
  position: relative;
}
.topnav .tab-group--util { margin-left: auto; }
.topnav .tab-group--page button {
  background: transparent;
  border-style: dashed;
  font-weight: 600;
}
.topnav .tab-group--page button.on {
  background: var(--ugc);
  border-color: var(--ugc);
  color: var(--on-ugc);
}
.topnav .tab-group--page button.report.on {
  background: var(--hist);
  border-color: var(--hist);
  color: var(--on-hist);
}
.topnav button {
  border: 1px solid var(--nav-line);
  background: transparent;
  color: var(--nav-fg);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
}
.topnav button:hover { background: var(--nav-2); }
.topnav button:active { transform: translateY(1px); }
.topnav button.on {
  background: var(--today);
  border-color: var(--today);
  color: var(--on-today);
}
.topnav button.hist.on,
.topnav button.report.on {
  background: var(--hist);
  border-color: var(--hist);
  color: var(--on-hist);
}
.topnav button.ugc.on {
  background: var(--ugc);
  border-color: var(--ugc);
  color: var(--on-ugc);
}
.topnav button.district.on {
  background: var(--ugc);
  border-color: var(--ugc);
  color: var(--on-ugc);
}
.topnav .district-tabs { display: contents; }
.topnav button.district { padding: 7px 9px; }
.topnav .nav-sep {
  width: 1px;
  align-self: stretch;
  background: var(--nav-line);
  margin: 0 4px;
  flex: 0 0 1px;
}
.bar-row.zero { opacity: 0.55; }
table.data tr.zero td { color: var(--muted); background: var(--row-zero-bg); }

/* —— 4. 侧栏面板 —— */
.shell {
  flex: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.app {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: 100%;
}
.app.hidden, .report.hidden, .hidden { display: none !important; }

.boards {
  min-height: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.col {
  display: none;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  background: var(--panel);
}
.col.show { display: flex; }
.col.hist { background: var(--panel-2); }
.col header { padding: 14px 14px 6px; }
.col header h1 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.col header p, .note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.period-banner {
  margin: 0 14px 10px;
  padding: 10px 11px;
  background: var(--banner-bg);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
}
.period-banner strong { color: var(--today); }
.period-banner.hist-banner { background: var(--banner-hist-bg); }
.period-banner.hist-banner strong { color: var(--hist); }
.period-banner .banner-details {
  display: block;
  margin-top: 4px;
}
.period-banner .banner-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: 11px;
  user-select: none;
  padding: 2px 0;
}
.period-banner .banner-details > summary::-webkit-details-marker { display: none; }
.period-banner .banner-details > summary::after {
  content: "展开 ▾";
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
}
.period-banner .banner-details[open] > summary::after { content: "收起 ▴"; }
.note { padding: 0 14px 10px; }
.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
}
.bar button, .search {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
}
.bar button {
  padding: 5px 8px;
  cursor: pointer;
}
.bar button:hover { border-color: var(--line-strong); background: var(--hover-2); }
.bar button:active { transform: translateY(1px); }
.bar button.on { background: var(--today); color: var(--on-today); border-color: var(--today); }
.col.hist .bar button.on { background: var(--hist); border-color: var(--hist); color: var(--on-hist); }
.search {
  margin: 0 14px 8px;
  width: calc(100% - 28px);
  padding: 7px 8px;
}
.search:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.list { flex: 1; overflow: auto; padding: 0 8px 16px; }
.item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 7px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  align-items: start;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}
.item:hover { background: var(--hover); }
.item.on {
  background: var(--hover-2);
  box-shadow: inset 3px 0 0 0 var(--today);
}
.col.hist .item.on { box-shadow: inset 3px 0 0 0 var(--hist); }
.item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--sev-closed-solid);
  margin-top: 1px;
}
.badge.mid { background: var(--sev-mid-solid); }
.badge.slow { background: var(--sev-slow); color: var(--sev-slow-ink); }
.badge.ctrl { background: var(--sev-ctrl-solid); }
.badge.sq {
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--hist);
}
.badge.sq span { transform: rotate(-45deg); display: block; }
.item h2 { margin: 0; font-size: 13px; font-weight: 700; }
.item p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.meta { font-size: 12px; font-weight: 700; color: var(--sev-closed); white-space: nowrap; }
.meta.mid { color: var(--sev-mid); }
.meta.slow { color: var(--meta-slow); }
.meta.ctrl { color: var(--sev-ctrl); }
.col.hist .meta { color: var(--hist); }

/* 空状态 */
.empty {
  margin: 18px 14px;
  padding: 22px 16px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--panel-2);
}
.empty-t { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.empty-s { margin: 4px 0 12px; font-size: 12px; color: var(--muted); }
.empty-reset {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.empty-reset:hover { border-color: var(--focus); color: var(--focus); }
.empty-reset:active { transform: translateY(1px); }

.sheet-toggle { display: none; }

/* —— 5. 地图与弹层 —— */
.map-stage {
  position: relative;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#map { height: 100%; min-height: 0; width: 100%; overflow: hidden; }
.map-overlay-top {
  position: absolute;
  z-index: 800;
  top: 12px;
  left: 12px;
  right: 12px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.map-overlay-top.hidden { display: none; }
.map-overlay-top > .place-search,
.map-overlay-top > .map-tools { pointer-events: auto; }
.leaflet-container { width: 100%; height: 100%; overflow: hidden; background: var(--bg-deep); }
.map-tools {
  position: static;
  z-index: 500;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.map-tools.hidden { display: none; }
.map-tools button {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
}
.map-tools button:hover { background: var(--hover-2); border-color: var(--line-strong); }
.map-tools button:active { transform: translateY(1px); }
.place-search {
  position: relative;
  z-index: 800;
  width: 100%;
  max-width: none;
}
.place-search.hidden { display: none; }
.place-search-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  display: block;
  padding: 0 2px;
}
.place-search-form {
  display: flex;
  gap: 0;
  background: var(--panel);
  border: 2px solid var(--form-edge);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.place-search-form:focus-within {
  border-color: var(--focus);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
.place-search-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.place-search-form input::placeholder { color: var(--muted); }
.place-search-form button {
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--btn-solid-bg);
  color: var(--btn-solid-ink);
  padding: 0 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.place-search-form button:hover { opacity: 0.9; }
.place-search-form button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.place-suggest {
  margin-top: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow: auto;
  z-index: 850;
}
.place-suggest.hidden,
.place-result.hidden,
.place-result-modal.hidden { display: none; }
.place-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
}
.place-suggest button:last-child { border-bottom: 0; }
.place-suggest button:hover,
.place-suggest button:focus { background: var(--hover-2); }
.place-suggest button:focus-visible { outline-offset: -2px; }
.place-suggest strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}
.place-suggest span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.place-result-modal {
  position: absolute;
  inset: 0;
  z-index: 880;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 96px 14px 14px;
  pointer-events: none;
}
.place-result-modal:not(.hidden) {
  pointer-events: auto;
}
.place-result-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--backdrop);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.place-result {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: min(68vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
}
.place-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.place-result-head h3 {
  margin: 0;
  flex: 1;
  font-size: 16px;
  line-height: 1.35;
  padding-right: 6px;
  min-width: 0;
  word-break: break-word;
  text-wrap: balance;
}
.place-result-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.place-result-close:hover,
.place-result-close:focus {
  background: var(--hover-2);
  color: var(--ink);
}
.place-result p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.place-result .place-src { font-size: 12px; color: var(--muted); }
.place-result .verdict {
  display: inline-block;
  margin: 2px 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.place-result .verdict.hit { background: var(--soft-red-bg); color: var(--soft-red-ink); }
.place-result .verdict.near { background: var(--soft-orange-bg); color: var(--soft-orange-ink); }
.place-result .verdict.clear { background: var(--soft-green-bg); color: var(--soft-green-ink); }
.place-result .verdict.unknown { background: var(--soft-gray-bg); color: var(--soft-gray-ink); }
.place-result ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
}
.place-result .place-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.place-result .place-actions button {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
}
.place-result .place-actions button:hover { background: var(--hover-2); }
.legend {
  position: absolute;
  z-index: 500;
  right: 12px;
  bottom: 12px;
  background: var(--legend-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.7;
  max-width: 220px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--edge-highlight);
}
.legend.hidden { display: none; }
.popup h3 { margin: 0 0 6px; font-size: 15px; }
.popup p { margin: 0 0 6px; font-size: 13px; }
.popup a { color: var(--today); }

/* Leaflet 组件品牌皮肤 */
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.leaflet-popup-content {
  margin: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
}
.leaflet-popup-tip { background: var(--panel); box-shadow: none; }
.leaflet-popup-close-button {
  color: var(--muted);
  font-size: 18px;
  padding: 6px 8px 0 0;
}
.leaflet-popup-close-button:hover {
  color: var(--ink);
  background: transparent;
}
.leaflet-control-zoom {
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.leaflet-control-zoom a {
  width: 34px;
  height: 34px;
  line-height: 34px;
  font-size: 17px;
  background: var(--panel);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.leaflet-control-zoom a:last-child { border-bottom: 0; }
.leaflet-control-zoom a:hover { background: var(--hover-2); color: var(--ink); }
.leaflet-control-attribution {
  background: var(--legend-bg);
  color: var(--muted);
  font-size: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.leaflet-control-attribution a { color: var(--today); }
/* 暗色：底图瓦片反相成夜间模式（仅作用瓦片层，不影响图钉与圆圈） */
:root[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(185deg) saturate(0.5) brightness(0.9) contrast(0.92);
}

.pin-wrap { background: none !important; border: 0 !important; }
.pin {
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  border: 3px solid var(--panel);
  animation: pin-fade var(--t-med) var(--ease) backwards;
}
.pin.closed {
  width: 42px; height: 42px;
  background: var(--sev-closed-solid);
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  font-size: 13px;
}
.pin.closed span { transform: rotate(45deg); display: block; }
.pin.mid {
  width: 36px; height: 36px;
  background: var(--sev-mid-solid);
  border-radius: 50%;
  font-size: 12px;
}
.pin.slow {
  width: 36px; height: 36px;
  background: var(--sev-slow);
  color: var(--sev-slow-ink);
  border-radius: 8px;
  font-size: 12px;
}
.pin.ctrl {
  width: 36px; height: 36px;
  background: var(--sev-ctrl-solid);
  border-radius: 4px;
  font-size: 11px;
}
.pin.hist {
  width: 34px; height: 34px;
  background: var(--hist);
  transform: rotate(45deg);
  font-size: 12px;
}
.pin.hist span { transform: rotate(-45deg); display: block; }
.pin.ugc {
  width: 34px; height: 34px;
  background: var(--ugc);
  border-radius: 50%;
  font-size: 11px;
}
.pin.safe {
  width: 34px; height: 34px;
  background: var(--safe);
  border-radius: 6px;
  font-size: 11px;
}
.pin.probe {
  width: 36px; height: 36px;
  background: var(--probe-bg);
  color: var(--probe-ink);
  border-radius: 50%;
  border: 2px solid var(--panel);
  box-shadow: var(--shadow-md);
  font-size: 11px;
}
/* 非旋转图钉：落下 + 悬停放大；旋转的不做位移，避免破坏形状 */
.pin:not(.closed):not(.hist):not(.probe) { animation-name: pin-drop; }
.pin:not(.closed):not(.hist):hover { transform: scale(1.1); }
@keyframes pin-fade { from { opacity: 0; } }
@keyframes pin-drop { from { opacity: 0; transform: translateY(-12px); } }

.badge.ugc { background: var(--ugc); }
.badge.safe { background: var(--safe); }
.meta.ugc { color: var(--ugc); }
.meta.safe { color: var(--safe); }
.legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.legend .swatch.s-closed { background: var(--sev-closed-solid); }
.legend .swatch.s-mid { background: var(--sev-mid-solid); }
.legend .swatch.s-slow { background: var(--sev-slow); }
.legend .swatch.s-ctrl { background: var(--sev-ctrl-solid); }
.legend .swatch.s-hist { background: var(--hist); }
.legend .swatch.s-ugc { background: var(--ugc); }
.legend .swatch.drop {
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
}
.legend .swatch.sq { border-radius: 2px; }
.legend .swatch.diamond {
  border-radius: 2px;
  transform: rotate(45deg);
}

/* —— 6. 区域报告 —— */
/* 背景收窄到视图容器：导航上也有 class="report" 的按钮，不能让页面背景规则命中它 */
#view-report {
  height: 100%;
  overflow: auto;
  /* 纸面噪点打破数码平坦感（SVG 湍流，5% 透明度，置于渐变之上） */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 80% 50% at 10% 0%, #ebe4d6 0%, transparent 55%),
    linear-gradient(180deg, #f7f2e8 0%, #f3efe6 40%, #ebe6dc 100%);
}
:root[data-theme="dark"] #view-report {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 80% 50% at 10% 0%, #241d14 0%, transparent 55%),
    linear-gradient(180deg, #1a1611 0%, #14110d 40%, #100e0b 100%);
}
.report-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 22px 64px;
}
.report h1 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: 0.02em;
  font-weight: 900;
  line-height: 1.25;
  text-wrap: balance;
}
.report h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--sev-closed), transparent);
}
.report .lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 42em;
}
.report .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.report .chip {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
}
.report .chip.hot { background: var(--today); color: var(--on-today); border-color: var(--today); }
.report .chip.blue { background: var(--hist); color: var(--on-hist); border-color: var(--hist); }
.district-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 8px;
}
.district-board-hint { margin: 0 0 16px; }
.district-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 14px 12px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.district-card:hover {
  border-color: var(--ugc);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.district-card:active { transform: translateY(0); }
.district-card.hot {
  border-color: var(--today);
  background: var(--row-hot-bg);
}
.district-card .name { font-size: 15px; font-weight: 750; }
.district-card .code { font-size: 11px; color: var(--muted); margin-top: 2px; }
.district-card .num {
  font-size: 28px;
  font-weight: 800;
  color: var(--today);
  line-height: 1.1;
  margin: 8px 0 4px;
}
.district-card .split { font-size: 12px; color: var(--muted); }
.district-card .go { font-size: 12px; color: var(--ugc); margin-top: 8px; }
.district-card .tagline {
  grid-column: 1 / -1;
  font-size: 11px;
  line-height: 1.45;
  color: var(--soft-orange-ink);
  margin-top: 6px;
}
.tier-board-wrap {
  margin: 0 0 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.tier-board-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.tier-board-sub { margin: 0 0 12px; }
.tier-board {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tier-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 52px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"] .tier-row { border-color: rgba(255, 255, 255, 0.08); }
.tier-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 8px 4px;
}
.tier-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #ececec;
  min-height: 52px;
}
.tier-row.tier-bottom .tier-items { background: #f5f5f5; }
:root[data-theme="dark"] .tier-items { background: #2a2724; }
:root[data-theme="dark"] .tier-row.tier-bottom .tier-items { background: #23201c; }
.tier-chip {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  background: var(--panel);
  color: var(--ink);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.tier-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.tier-chip .n { font-size: 11px; opacity: 0.72; margin-left: 4px; font-weight: 600; }
.tier-row.tier-hang .tier-label { background: #e63946; color: #fff; }
.tier-row.tier-top .tier-label { background: #f4a261; color: #1a1a1a; }
.tier-row.tier-elite .tier-label { background: #ffd60a; color: #1a1a1a; }
.tier-row.tier-npc .tier-label { background: #fefae0; color: #5c4a00; }
.tier-row.tier-bottom .tier-label { background: #fff; color: #666; }
:root[data-theme="dark"] .tier-row.tier-bottom .tier-label { background: #2c2925; color: var(--muted); }
.tier-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 4px;
}
.callout {
  background: #fff7ed;
  border: 1px solid #f0d9b8;
  border-left: 4px solid var(--today);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 28px;
  font-size: 14px;
  line-height: 1.65;
}
.callout.info {
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left-color: var(--hist);
}
:root[data-theme="dark"] .callout { background: #2f2519; border-color: #4a3a24; }
:root[data-theme="dark"] .callout.info { background: #1c2740; border-color: #31456e; }
.callout strong { display: block; margin-bottom: 6px; font-size: 13px; }
.report h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 32px 0 12px;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
/* 章节菱形：呼应常年层菱形图钉 */
.report h2::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--today);
  transform: rotate(45deg);
}
.report h3 {
  margin: 18px 0 8px;
  font-size: 15px;
}
.report p, .report li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.report ul { margin: 0 0 12px; padding-left: 1.2em; }
.report .muted { color: var(--muted); font-size: 12px; }
.bars {
  display: grid;
  gap: 8px;
  margin: 12px 0 20px;
}
.bar-row {
  display: grid;
  grid-template-columns: 7.5em 1fr 2.2em;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.bar-row.wide {
  grid-template-columns: 11em 1fr 2.2em;
}
.bar-track {
  height: 10px;
  background: var(--track-bg);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: var(--w, 0%);
  background: var(--today);
  border-radius: 4px;
}
.bar-fill.blue { background: var(--hist); }
.corridor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  margin: 12px 0 8px;
}
.corridor-grid .corridor {
  height: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.corridor-grid .corridor:nth-last-child(-n+2) { border-bottom: 0; }
.corridor {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.corridor:last-child { border-bottom: 0; }
.corridor .head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.corridor .head h3 { margin: 0; }
.tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--soft-red-bg);
  color: var(--soft-red-ink);
}
.tag.mid { background: var(--soft-orange-bg); color: var(--soft-orange-ink); }
.tag.low { background: var(--soft-blue-bg); color: var(--soft-blue-ink); }
.corridor .scope { font-weight: 650; margin: 0 0 4px; font-size: 13px; }
.corridor .meta-line {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 12px 0 8px;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 10px 0 18px;
  background: var(--panel);
}
table.data th, table.data td {
  border: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}
table.data th {
  background: var(--th-bg);
  font-weight: 700;
}
table.data tbody tr:hover td { background: var(--hover-2); }
table.data tr.hot td { background: var(--row-hot-bg); }
table.data tr.hot:hover td { background: var(--row-hot-bg); }
.catalog-tools .bar { padding: 0; }
.catalog-search.search {
  margin: 0;
  width: 100%;
  max-width: 360px;
}
.catalog-wrap {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
table.catalog {
  margin: 0;
  font-size: 12px;
  min-width: 1080px;
}
table.catalog th {
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--line);
}
table.catalog td.place { font-weight: 650; min-width: 140px; }
table.catalog .links a {
  display: inline-block;
  margin: 0 8px 4px 0;
  color: var(--today);
  white-space: nowrap;
}
table.catalog .amap {
  white-space: nowrap;
}
.catalog-goto {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--today);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
}
.catalog-goto:hover { text-decoration-thickness: 2px; }
.fb-st {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.fb-st.ok { background: var(--soft-green-bg); color: var(--soft-green-ink); }
.fb-st.mid { background: var(--soft-orange-bg); color: var(--soft-orange-ink); }
.fb-st.neg { background: var(--soft-gray-bg); color: var(--soft-gray-ink); }
.fb-st.maybe { background: var(--soft-yellow-bg); color: var(--soft-yellow-ink); }
#view-ugc table.catalog { min-width: 720px; }
.jump-map {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--today);
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.jump-map:hover { text-decoration-thickness: 2px; }
.report .back-row { margin-top: 24px; }

/* —— 7. 动效偏好与打印 —— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { overflow: visible; height: auto; }
  .shell { overflow: visible; }
  .topnav, .map-stage, .sheet-toggle, .report .back-row { display: none !important; }
  .report { height: auto; overflow: visible; background: #fff; }
}

/* —— 8. 平板 / 手机：地图为主，列表改底部抽屉 —— */
@media (max-width: 960px) {
  body {
    touch-action: pan-y pinch-zoom;
  }
  .topnav {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  .topnav .brand {
    font-size: 14px;
    margin-right: 0;
  }
  .topnav .brand span { display: none; }
  .topnav .tabs {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
    min-width: 0;
    max-width: 100%;
  }
  .topnav .tab-group--util { margin-left: 0; }
  /* 分组不换行不收缩：整条 tabs 单行横滚；否则事件组被压到 min-content 内部换行叠高 */
  .topnav .tab-group {
    flex-wrap: nowrap;
    flex: 0 0 auto;
  }
  .topnav .tabs::-webkit-scrollbar { display: none; }
  .topnav button {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 13px;
    min-height: 36px;
  }

  .app {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
  }
  .map-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  #map {
    position: absolute;
    inset: 0;
    height: auto;
    width: 100%;
    z-index: 1;
    touch-action: none;
  }
  .boards {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 700;
    max-height: min(58vh, 520px);
    max-width: 100%;
    border-right: 0;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    background: var(--panel);
    transform: translateY(calc(100% - 56px));
    transition: transform 0.28s var(--ease);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }
  .boards.open {
    transform: translateY(0);
  }
  .sheet-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    padding: 8px 12px 10px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    font-family: inherit;
    border-radius: 14px 14px 0 0;
    flex: 0 0 auto;
  }
  .sheet-toggle:active { background: var(--hover); }
  .sheet-grip {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--grip);
  }
  .col header { padding: 10px 14px 4px; }
  .col header h1 { font-size: 15px; }
  .period-banner {
    margin: 0 12px 8px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .bar { padding: 0 12px 8px; gap: 6px; }
  .bar button {
    padding: 7px 10px;
    font-size: 12px;
    min-height: 34px;
  }
  .search {
    margin: 0 12px 8px;
    width: calc(100% - 24px);
    padding: 10px 10px;
    font-size: 14px;
  }
  .list { padding: 0 8px 20px; -webkit-overflow-scrolling: touch; }
  .item { padding: 10px 8px; min-height: 44px; }
  .empty { margin: 14px 10px; }

  .map-overlay-top {
    left: 10px;
    right: 10px;
    top: 10px;
    max-width: none;
    gap: 6px;
    z-index: 900;
  }
  .place-search-label {
    font-size: 12px;
    padding: 5px 12px;
  }
  .place-search-form {
    box-shadow: var(--shadow-md);
  }
  .place-search-form input {
    padding: 12px 14px;
    font-size: 16px;
  }
  .place-search-form button {
    padding: 0 16px;
    font-size: 14px;
    min-height: 44px;
    min-width: 72px;
  }
  .place-suggest { max-height: 40vh; }
  .place-result-modal {
    padding: 14px 10px calc(72px + env(safe-area-inset-bottom) + 14px);
    align-items: flex-end;
  }
  .place-result {
    width: 100%;
    max-height: min(64vh, 520px);
  }
  .map-tools {
    position: static;
    left: auto;
    top: auto;
    right: auto;
    max-width: none;
  }
  .map-tools button {
    padding: 8px 12px;
    font-size: 13px;
    min-height: 36px;
  }
  .legend {
    right: 10px;
    bottom: calc(56px + 10px + env(safe-area-inset-bottom));
    max-width: min(150px, calc(100vw - 20px));
    padding: 7px 9px;
    font-size: 11px;
    line-height: 1.45;
    transition: bottom 0.28s var(--ease);
  }
  body:has(.boards.open) .legend {
    bottom: calc(min(58vh, 520px) + 8px + env(safe-area-inset-bottom));
  }

  .leaflet-popup-content-wrapper {
    max-width: min(260px, 78vw);
  }
  .leaflet-popup-content {
    margin: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
  }
  .popup h3 { font-size: 14px; }
  .popup p { font-size: 12px; margin-bottom: 4px; }
  .pin.closed { width: 34px; height: 34px; font-size: 11px; }
  .pin.mid, .pin.slow, .pin.ctrl, .pin.hist { width: 28px; height: 28px; font-size: 10px; }
  .leaflet-control-zoom a {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
  }

  .report-inner { padding: 18px 14px 48px; }
  .report h1 { font-size: 23px; }
  .district-board { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .corridor-grid { grid-template-columns: 1fr; }
  .corridor-grid .corridor:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .corridor-grid .corridor:last-child { border-bottom: 0; }
  .tier-row { grid-template-columns: 56px 1fr; min-height: 46px; }
  .tier-label { font-size: 15px; }
  .tier-items { min-height: 46px; padding: 6px 8px; }
  table.data { font-size: 12px; display: block; overflow-x: auto; }
}

@media (max-width: 960px) and (orientation: landscape) {
  .boards { max-height: 70vh; }
  .boards:not(.open) { transform: translateY(calc(100% - 48px)); }
}