html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, sans-serif;
}

[hidden] { display: none !important; }

#map {
  width: 100vw;
  height: 100vh;
}

.hud {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: rgba(15, 18, 22, 0.82);
  color: #eee;
  padding: 12px 16px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  max-width: 340px;
  width: 320px;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.hud h1 {
  margin: 0 0 4px;
  font-size: 20px;
  color: #fff;
}

.hud h1 span {
  font-size: 12px;
  font-weight: 400;
  color: #aaa;
  margin-left: 6px;
}

.hud p {
  margin: 2px 0;
  font-size: 13px;
  color: #ddd;
}

.hud .hint {
  font-size: 12px;
  color: #9ab;
}

.legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: #bbb;
}

.legend .gradient {
  width: 140px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    hsl(52, 95%, 52%),
    hsl(40, 95%, 50%),
    hsl(28, 95%, 48%),
    hsl(14, 95%, 46%),
    hsl(0, 95%, 44%)
  );
  border: 1px solid #999;
}

.pjj-tip {
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pjj-tip::before {
  display: none;
}

.leaflet-heatmap-layer {
  pointer-events: none !important;
}

/* Hide Leaflet's scaled previous heat canvas during zoom transitions. The new
   fixed-size frame is rebuilt on zoomend, without a flash of giant circles. */
.leaflet-zoom-anim .air-smoke-layer { visibility: hidden; }

/* ---------- Category options panel (permanent, bottom-right) ---------- */
#category-panel {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1100;
  width: 300px;
  background: rgba(15, 18, 22, 0.92);
  color: #eee;
  border-radius: 16px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.cat-title {
  padding: 12px 16px 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ab;
  font-weight: 600;
}

.cat-list {
  display: block;
  padding: 0 10px 12px;
}

.cat-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.cat-option:last-child {
  margin-bottom: 0;
}

.cat-option:hover {
  background: rgba(255, 255, 255, 0.09);
}

.cat-option.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffd600;
}

.cat-swatch {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.cat-swatch.land {
  background: linear-gradient(135deg, #ffd600, #ff8f00, #d50000);
}

.cat-swatch.water {
  background: linear-gradient(135deg, #2bb8d8, #f3cf52, #f2a63a, #e05236, #c62828);
}

.cat-swatch.air {
  background: linear-gradient(135deg, rgba(255, 235, 0, 0.05), #ffe100, #ff9600, #ff3d00);
}

.cat-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cat-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.cat-desc {
  font-size: 11.5px;
  color: #9ab;
  line-height: 1.35;
}

.cat-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.cat-option:last-child {
  border-bottom: none;
}

.cat-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cat-option.active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 #ffd600;
}

.cat-swatch {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.cat-swatch.land {
  background: linear-gradient(135deg, #ffd600, #ff8f00, #d50000);
}

.cat-swatch.water {
  background: linear-gradient(135deg, #2bb8d8, #f3cf52, #f2a63a, #e05236, #c62828);
}

.cat-swatch.air {
  background: linear-gradient(135deg, rgba(255, 235, 0, 0.05), #ffe100, #ff9600, #ff3d00);
}

.cat-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cat-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.cat-desc {
  font-size: 11px;
  color: #9ab;
}

#info-panel {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1100;
  width: 300px;
  max-height: 55vh;
  overflow-y: auto;
  background: rgba(15, 18, 22, 0.92);
  color: #eee;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  transform: translateX(-120%);
  transition: transform 0.25s ease;
  padding-bottom: 10px;
}

#info-panel.open {
  transform: translateX(0);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ab;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: rgba(15, 18, 22, 0.95);
}

#info-panel-close {
  background: none;
  border: none;
  color: #9ab;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

#info-panel-close:hover {
  color: #fff;
}

#info-panel-body {
  padding: 12px 14px 0;
}

#info-panel-body h2 {
  margin: 0 0 2px;
  font-size: 17px;
  color: #fff;
}

#info-panel-body .sub {
  margin: 0 0 8px;
  font-size: 12px;
  color: #9ab;
}

#info-panel-body .sev {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 10px;
}

#info-panel-body .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
}

#info-panel-body .row span {
  color: #9ab;
}

#info-panel-body .row strong {
  color: #fff;
  font-weight: 600;
}

#info-panel-body .est {
  font-size: 11px;
  color: #789;
  font-weight: 400;
}

#info-panel-body .row.real strong {
  color: #7ccb3a;
}

#info-panel-body .row.estrow strong {
  color: #ffd600;
}

#info-panel-body .extra {
  margin: 8px 0 0;
  font-size: 12px;
  color: #bcd;
}

#info-panel-body .src {
  margin: 10px 0 0;
  font-size: 10px;
  color: #678;
  line-height: 1.4;
}

.leaflet-tooltip {
  font-size: 13px;
}

/* Search stays inside the HUD so it never covers the map's layer controls. */
#city-search { position: relative; margin-top: 12px; }
#city-search label { display: block; margin-bottom: 5px; font-size: 12px; color: #c6d3dc; }
#city-query {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  background: #15232d; color: #fff; border: 1px solid #516471;
  border-radius: 7px; font: inherit; font-size: 13px;
}
#city-query:focus { outline: 2px solid #ffd600; outline-offset: 1px; }
#city-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1200;
  padding: 4px; margin: 6px 0 0; list-style: none; background: #101c25;
  border: 1px solid #516471; border-radius: 8px; max-height: 260px;
  overflow-y: auto; box-shadow: 0 5px 20px #0008;
}
#city-results li { padding: 9px; border-radius: 5px; cursor: pointer; font-size: 13px; }
#city-results li:hover, #city-results li[aria-selected="true"] { background: #304551; }
#city-results strong, #city-results span { display: block; }
#city-results span { color: #a8bac8; font-size: 11px; margin-top: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Local initiative system ---------- */
.initiative-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.initiative-actions button, .initiative-panel button {
  border: 1px solid #526571; border-radius: 8px; background: #203440;
  color: #f4f8fa; padding: 9px 11px; font: inherit; font-size: 12px; cursor: pointer;
}
.initiative-actions button:hover, .initiative-panel button:hover { background: #35505e; }
.initiative-panel button:disabled { opacity: 0.55; cursor: default; }
.initiative-panel button:focus-visible, .initiative-actions button:focus-visible {
  outline: 2px solid #ffd34c; outline-offset: 2px;
}
#report-hotspot, .initiative-panel .initiative-primary { background: #ffd34c; color: #19272f; border-color: #ffd34c; font-weight: 700; }
.initiative-panel {
  position: absolute; top: 10px; right: 10px; bottom: 10px; z-index: 1300;
  width: min(390px, calc(100vw - 48px)); padding: 18px;
  overflow-y: auto; border: 1px solid #48606a; border-radius: 15px;
  color: #eef4f7; background: #101e27f7; backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px #0008; font-size: 13px;
}
.initiative-panel[hidden] { display: none; }
.initiative-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.initiative-head h2 { font-size: 22px; margin: 4px 0 12px; }
.initiative-head > button { padding: 2px 9px; font-size: 24px; }
.initiative-eyebrow { color: #9eb8c5; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.initiative-panel h3 { font-size: 17px; margin: 18px 0 10px; }
.initiative-panel p { line-height: 1.5; }
.prototype-notice { padding: 10px 12px; background: #263a44; border-left: 3px solid #ffd34c; border-radius: 5px; font-size: 11px; color: #d6e1e7; }
#initiative-status:empty { display: none; }
#initiative-status { padding: 9px; border-radius: 6px; color: #bce9d5; background: #173c35; }
#initiative-status.is-error { color: #ffd3c9; background: #502c2a; }
.initiative-panel label { display: block; font-weight: 600; margin: 14px 0 6px; }
.initiative-panel input, .initiative-panel textarea, .initiative-panel select {
  width: 100%; box-sizing: border-box; border: 1px solid #526571;
  border-radius: 7px; padding: 10px; color: #fff; background: #1a2d38;
  font: inherit; font-size: 13px;
}
.initiative-panel input:focus, .initiative-panel textarea:focus, .initiative-panel select:focus { outline: 2px solid #ffd34c; outline-offset: 1px; }
.initiative-panel textarea { resize: vertical; }
.initiative-panel small, .initiative-hint { display: block; color: #afc2cc; font-size: 11px; line-height: 1.5; margin-top: 7px; }
.initiative-panel a { color: #93dbe5; }
.initiative-input-row { display: flex; gap: 6px; }
.initiative-input-row input { min-width: 0; flex: 1; }
.initiative-input-row button { flex-shrink: 0; }
.initiative-panel .address-results { padding: 0; list-style: none; }
.address-results button { width: 100%; text-align: left; margin: 4px 0; line-height: 1.4; }
.initiative-location-summary { display: flex; align-items: center; gap: 8px; color: #c5d5de; margin-top: 15px; }
.initiative-location-summary span { flex: 1; overflow-wrap: anywhere; font-size: 11px; }
.initiative-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.initiative-photos img { width: 108px; height: 94px; object-fit: cover; border-radius: 7px; border: 1px solid #526571; }
#hotspot-form > button[type="submit"] { width: 100%; margin-top: 12px; }
.initiative-empty { margin: 20px 0; color: #b7c9d1; padding: 16px; border: 1px dashed #526571; border-radius: 10px; }
.initiative-panel .initiative-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 15px; margin-top: 10px; }
.initiative-card strong, .initiative-card span { display: block; }
.initiative-card span { color: #b7d0dc; font-size: 11px; margin-top: 6px; }
.initiative-description, .chat-messages p { white-space: pre-wrap; overflow-wrap: anywhere; }
.volunteer-count { padding: 10px; background: #294339; color: #bdecd0; border-radius: 7px; }
.chat-messages { max-height: 260px; overflow-y: auto; margin-bottom: 10px; padding: 10px; background: #0a161d; border-radius: 9px; }
.chat-messages article { padding: 9px 0; border-bottom: 1px solid #293e48; }
.chat-messages article:last-child { border: 0; }
.chat-messages time { display: block; margin-top: 3px; color: #9aafbb; font-size: 10px; }
.chat-messages p { margin: 5px 0; }
.initiative-pin {
  background: #159782; border: 2px solid #fff;
  border-radius: 18px 18px 18px 4px; color: #fff;
  box-shadow: 0 2px 5px #0005;
  display: grid; place-items: center;
}
.initiative-pin-symbol { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ffffff24; color: #fff; font-size: 24px; line-height: 1; text-shadow: 0 1px 2px #045e5b80; }
.initiative-pin-draft { border-style: dashed; }

/* Original Broomie art is a transparent cut-out rig, not a replacement drawing.
   The reticle stays at the exact click coordinate while the art floats beside it. */
#broomie-cursor {
  position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 2000;
  pointer-events: none; user-select: none; will-change: transform;
}
#broomie-cursor * { pointer-events: none; }
#broomie-cursor::before {
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border: 2px solid #fff; box-sizing: border-box; border-radius: 50%;
  background: #159782; box-shadow: 0 0 0 1px #142d3c;
}
.broomie-rig {
  position: absolute; left: var(--broomie-left, -120px); top: var(--broomie-top, -47px);
  width: 112px; height: 93.8px; transform-origin: 43.8% 49.1%;
  filter: drop-shadow(0 3px 3px #0005);
}
.broomie-part { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.broomie-leftArm { transform-origin: 20% 54.6%; }
.broomie-rightArm { transform-origin: 69.6% 48.5%; }
.broomie-leftLeg { transform-origin: 40.7% 73.9%; }
.broomie-rightLeg { transform-origin: 47.3% 73.9%; }
#map.broomie-picking, #map.broomie-picking.leaflet-grab, #map.broomie-picking .leaflet-interactive { cursor: none; }
#map.broomie-picking .leaflet-control, #map.broomie-picking .leaflet-control * { cursor: auto; }
#broomie-map-preview { display: block; width: 96px; height: auto; margin: 0 auto 8px; }
@media (prefers-reduced-motion: reduce) {
  .broomie-rig, .broomie-part { transition: none; }
}
@media (pointer: fine) {
  .report-picking, .report-picking .leaflet-interactive, .report-picking.leaflet-grab { cursor: crosshair; }
  .report-picking .leaflet-control { cursor: auto; }
}
@media (max-width: 600px) {
  .initiative-panel { top: auto; bottom: 8px; left: 8px; right: 8px; max-height: 55dvh; width: auto; padding: 14px; }
  .initiative-open .hud { visibility: hidden; }
  .initiative-actions { gap: 5px; }
  .initiative-actions button { font-size: 11px; padding: 8px; }
}
@media (max-width: 600px) {
  .hud { max-width: min(340px, calc(100vw - 90px)); }
  .hud > p { display: none; }
  #city-results { max-height: 190px; }
}

/* City discovery, a deliberate home-city choice, and clearer action hierarchy. */
.hud .hud-intro { color: #adbec7; font-size: 12px; line-height: 1.5; margin: 8px 0 12px; }
.home-city-bar { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 10px; padding: 10px 12px; background: #21372e; border: 1px solid #4c6a56; border-radius: 9px; }
.home-city-bar small, .home-city-bar strong { display: block; }
.home-city-bar small { color: #b1c8b9; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3px; }
.home-city-bar strong { font-size: 13px; }
.home-city-bar button { background: none; border: 0; color: #c5e5cd; text-decoration: underline; font: inherit; font-size: 11px; cursor: pointer; }
.city-preview { margin: 12px 0; background: #1a2c35; border: 1px solid #3c535e; border-radius: 12px; overflow: hidden; }
.city-preview > img { display: block; width: 100%; height: 112px; object-fit: cover; }
.city-preview-body { padding: 12px 14px; }
.city-preview h2 { margin: 5px 0; font-size: 22px; }
.hud .city-preview p { font-size: 11px; color: #b3c6d1; }
#set-home-city { width: 100%; margin-top: 12px; padding: 10px; background: #d7eacf; color: #20352b; border: 0; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#set-home-city:disabled { background: #304c3d; color: #cbe7d2; cursor: default; }
.hud #city-set-status { margin-top: 8px; color: #c8e2cf; line-height: 1.5; }
#city-set-status:empty { display: none; }
.hud-actions { flex-direction: column; margin-top: 14px; }
.hud-actions button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 13px; border-radius: 10px; }
.hud-actions button > span:nth-child(2) { flex: 1; }
.hud-actions strong, .hud-actions small { display: block; }
.hud-actions strong { font-size: 13px; }
.hud-actions small { margin-top: 4px; font-size: 10px; opacity: 0.8; font-weight: 400; }
.action-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 9px; font-size: 23px; }
#set-home-city:focus-visible, .home-city-bar button:focus-visible { outline: 2px solid #ffd34c; outline-offset: 2px; }
.initiative-panel { padding: 22px; border-color: #3e5660; background: linear-gradient(160deg, #152934fa, #101c25fc); }
.initiative-head h2 { margin-bottom: 3px; letter-spacing: -0.5px; }
.initiative-panel .initiative-subtitle { color: #a9bdc8; margin: 4px 0 18px; font-size: 12px; }
.prototype-notice { background: #1b303a; border: 1px solid #374e59; color: #a9bdc8; padding: 10px 12px; }
.prototype-notice summary { cursor: pointer; font-size: 10px; }
.prototype-notice p { margin: 10px 0 0; }
.report-steps { display: flex; gap: 15px; list-style: none; margin: 22px 0; padding: 0; }
.report-steps li { display: flex; align-items: center; gap: 7px; color: #93aab7; font-size: 11px; }
.report-steps li > span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #4a626d; border-radius: 50%; }
.report-steps li[aria-current="step"] { color: #ffda6c; }
.report-steps li[aria-current="step"] > span { background: #ffda6c; border-color: #ffda6c; color: #23313a; font-weight: 700; }
.location-methods { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; background: #0c1b24; border: 1px solid #344c58; border-radius: 10px; margin: 18px 0; }
.initiative-panel .location-methods button { background: none; border: 0; padding: 12px 8px; }
.initiative-panel .location-methods button[aria-pressed="true"] { background: #304954; color: #ffe091; box-shadow: 0 2px 5px #0004; }
.location-search-card, .map-location-help { padding: 16px; border: 1px solid #3b535f; border-radius: 12px; background: #1c303b; }
.location-search-card label { margin-top: 0; }
.map-location-help { text-align: center; }
.map-location-help > span { font-size: 42px; color: #ffdb70; }
.map-location-help p { color: #c4d3db; margin: 6px 0 16px; }
.initiative-location-summary { padding: 12px; background: #233e35; border: 1px solid #436555; border-radius: 10px; }
.initiative-location-summary small { margin: 0 0 4px; color: #b4d0be; text-transform: uppercase; font-size: 9px; letter-spacing: 0.08em; }
.initiative-fieldset { min-width: 0; margin: 23px 0; padding: 14px 16px 18px; border: 1px solid #3c525e; border-radius: 12px; background: #1b2e3880; }
.initiative-fieldset legend { padding: 0 7px; font-size: 12px; font-weight: 650; color: #d3e1e9; }
.initiative-fieldset label:first-of-type { margin-top: 6px; }
.initiative-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.initiative-panel input[type="file"] { padding: 14px; border-style: dashed; background: #12242e; }
.initiative-panel input::file-selector-button { background: #314b58; color: #fff; border: 0; border-radius: 6px; padding: 7px 9px; margin-right: 8px; cursor: pointer; }
.nearby-hero { margin: 22px 0 18px; padding: 20px; background: radial-gradient(at 100% 0, #405747, #213c35); border: 1px solid #4d6957; border-radius: 13px; }
.initiative-panel .nearby-hero h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.5px; margin: 10px 0; }
.nearby-hero p { color: #bcd0c5; font-size: 12px; margin-bottom: 0; }
.nearby-search-area { padding: 15px; background: #1b303b; border: 1px solid #3e5561; border-radius: 12px; }
.nearby-search-area > p { font-size: 15px; font-weight: 600; margin: 7px 0 12px; overflow-wrap: anywhere; }
.nearby-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.nearby-filter label { margin: 0; }
.nearby-filter select { width: 110px; }
.initiative-empty { padding: 25px 18px; text-align: center; background: #152b35; }
.initiative-empty > span { color: #e6cf8a; font-size: 38px; }
.initiative-empty h4 { color: #e7eef2; font-size: 16px; margin: 10px 0; }
.initiative-empty p { font-size: 12px; color: #a8c0cd; }
.initiative-panel .initiative-empty button { margin-top: 8px; border-color: #827548; color: #ffe39c; }
.initiative-card .initiative-card-thumbnail { flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover; border-radius: 9px; background: #365448; color: #d4e5cb; text-align: center; font-size: 30px; line-height: 48px; margin: 0; }
@media (max-width: 600px) {
  .hud { width: min(320px, calc(100vw - 70px)); max-width: none; box-sizing: border-box; max-height: calc(55dvh - 24px); padding: 12px; }
  .hud h1 { font-size: 17px; }
  .city-preview > img { height: 82px; }
  .hud-actions button { padding: 10px; }
  .initiative-panel { padding: 16px; }
  .initiative-form-grid { grid-template-columns: 1fr; }
}

/* Independent panels share one right-hand rail, never the same map corner. */
#right-rail {
  position: absolute; top: 10px; right: 10px; bottom: 10px; width: 360px;
  z-index: 1300; display: flex; flex-direction: column; gap: 12px;
  pointer-events: none;
}
#right-rail > * { pointer-events: auto; min-height: 0; box-sizing: border-box; }
#info-panel {
  display: none; position: relative; inset: auto; width: 100%; max-height: 48%;
  flex: 0 1 auto; overflow: hidden; transform: none; transition: none; padding: 0;
}
#info-panel.open { display: flex; flex-direction: column; transform: none; }
#info-panel .panel-head { flex-shrink: 0; }
#info-panel-body { overflow-y: auto; min-height: 0; padding-bottom: 14px; }
#category-panel {
  position: relative; inset: auto; width: 100%; margin-top: auto;
  flex: 0 1 auto; max-height: 45%; display: flex; flex-direction: column;
}
#layer-body { overflow-y: auto; min-height: 0; }
.panel-title-row { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.hud-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hud-heading h1 { margin: 0; }
.panel-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.panel-toggle, .initiative-panel .panel-toggle, #initiative-close {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  padding: 0; color: #d7e4eb; background: #233a47; border: 1px solid #526571;
  border-radius: 7px; cursor: pointer; font: inherit; font-size: 19px; line-height: 1;
}
.panel-toggle:hover { background: #3a5260; }
.panel-toggle:focus-visible { outline: 2px solid #ffd34c; outline-offset: 2px; }
.is-collapsed { overflow: hidden; }
#right-rail > .is-collapsed { flex: 0 0 auto; max-height: none; }
#category-panel.is-collapsed .cat-title { padding-bottom: 12px; }
#initiative-panel {
  position: relative; inset: auto; width: 100%; max-height: none;
  padding: 0; display: flex; flex-direction: column; flex: 1 1 0;
  overflow: hidden;
}
#initiative-panel .initiative-head { padding: 18px; flex-shrink: 0; gap: 10px; }
#initiative-panel .initiative-head h2 { font-size: 20px; }
#initiative-body { padding: 0 18px 18px; overflow-y: auto; min-height: 0; }
.city-preview-credit { padding: 5px 10px; font-size: 9px; line-height: 1.4; }
.city-preview-credit:empty { display: none; }
.city-preview-credit a, .region-photo a { color: #b9cbd6; }
.region-photo { margin: 0 0 12px; }
.region-photo img { width: 100%; height: 125px; object-fit: cover; border-radius: 7px; }
.region-photo figcaption { font-size: 9px; line-height: 1.4; margin-top: 4px; }
@media (max-width: 900px) and (min-width: 701px) {
  .hud { width: 270px; }
  #right-rail { width: 330px; }
}
@media (max-width: 700px) {
  .hud { width: min(340px, calc(100vw - 20px)); box-sizing: border-box; max-height: calc(40dvh - 10px); }
  #right-rail { top: 42dvh; width: min(360px, calc(100vw - 20px)); }
  #info-panel { max-height: 55%; }
  #category-panel { max-height: 40%; }
  #initiative-panel .initiative-head { padding: 12px; }
  #initiative-body { padding: 0 12px 14px; }
}

/* Reserve a clear left-hand column for the native bottom-left zoom control. */
.leaflet-control-attribution { max-width: calc(100vw - 70px); }
@media (max-width: 700px) {
  #right-rail { width: min(360px, calc(100vw - 70px)); }
}

/* ---------- Loading overlay ---------- */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: radial-gradient(ellipse at center, #0d1e3a 0%, #05070f 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

#loading-overlay.hidden { opacity: 0; pointer-events: none; }

.loading-card { text-align: center; color: #fff; padding: 40px; }

.loading-card h1 {
  font-size: 42px;
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #00c853, #ffd600, #ff6d00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.loading-card p { color: #b9cbd6; font-size: 16px; margin: 0 0 26px; }

#loading-continue {
  background: linear-gradient(90deg, #00c853, #2e7d32);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 44px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 200, 83, 0.35);
}

#loading-continue:hover { filter: brightness(1.15); }

/* Original dark navy water-map look. */
#map.navy .leaflet-tile-pane {
  filter: brightness(0.55) contrast(1.5);
}

.hud .legend-note { color: #b6c4cf; font-size: 10px; line-height: 1.45; margin: 8px 0; }

/* ---------- Funding panel ---------- */
#funding-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1400;
  width: 330px;
  max-height: 78vh;
  overflow-y: auto;
  background: rgba(15, 18, 22, 0.94);
  color: #eee;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

#funding-panel .panel-head {
  position: sticky;
  top: 0;
  background: rgba(15, 18, 22, 0.97);
}

#funding-close {
  background: none;
  border: none;
  color: #9ab;
  font-size: 18px;
  cursor: pointer;
  margin-left: auto;
}

#funding-close:hover { color: #fff; }

#funding-body { padding: 10px 16px 16px; }

#funding-body h3 {
  font-size: 13px;
  color: #ffd600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 14px 0 6px;
}

#funding-body h3:first-child { margin-top: 4px; }

#funding-body a {
  display: block;
  color: #b9cbd6;
  text-decoration: none;
  font-size: 13px;
  padding: 3px 0;
}

#funding-body a:hover { color: #fff; text-decoration: underline; }

#funding-body .funding-note {
  font-size: 11px;
  color: #789;
  margin: 4px 0 0;
}

/* ---------- Team logo + mission message (above options panel) ---------- */
#team-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 8px;
}

#team-logo-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

#team-logo-btn img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.2s ease;
}

#team-logo-btn:hover img {
  transform: scale(1.07);
}

.team-message {
  width: 300px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  background: rgba(5, 7, 12, 0.78);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  color: #dfe8ef;
  text-align: center;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.team-message.open {
  max-height: 320px;
  opacity: 1;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.team-message h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #ffd600;
  letter-spacing: 0.04em;
}

.team-message p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
}

.team-message p:last-child { margin-bottom: 0; }