/* ========================= FS APP (KFS PARITY) =========================
   This stylesheet reproduces the KFS look/behavior for FS.
   Blocks numbered & end-marked per GUIDELINES_V2.
   ===================================================================== */


/* ---------------- BLOCK CSS-FONTS-010 — Local Webfonts (FS) ---------------- */
/* Files live in /assets/fonts/ exactly as below (Sansation is mandatory) */
@font-face {
  font-family: "Sansation";
  src: url("/assets/fonts/Sansation-Regular.woff2") format("woff2"),
       url("/assets/fonts/Sansation-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sansation";
  src: url("/assets/fonts/Sansation-Bold.woff2") format("woff2"),
       url("/assets/fonts/Sansation-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sansation";
  src: url("/assets/fonts/Sansation-Italic.woff2") format("woff2"),
       url("/assets/fonts/Sansation-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
/* -------------- END BLOCK CSS-FONTS-010 — Local Webfonts (FS) -------------- */


/* ---------------- BLOCK CSS-VARS-020 — Theme & Base Vars (FS) ---------------- */
:root{
  /* KFS colors */
  --fs-navy:#0A1F33;
  --fs-on:#ffffff;
  --fs-bd:#e6eef4;
  --fs-chip:#eef3f7;
  --fs-muted:#6b7a8a;
  --fs-orange:#ff6600;
  --fs-orange-2:#ff4900;

  /* layout metrics */
  --fs-header-h: 67px;
  --fs-tabbar-h: 0px;

  /* radii & shadow (KFS-like) */
  --fs-r: 14px;
  --fs-r-sm: 10px;
  --fs-shadow: 0 2px 10px rgba(0,0,0,.08);

  --fs-overlay-right: 40px;
  --fs-overlay-width: 134px;
  --fs-report-btn-top: 24px;
  --fs-report-btn-right: 32px;
  --fs-report-btn-width: 134px;
  --fs-report-btn-font-size: 13px;
  --fs-report-btn-pad-y: 10px;
  --fs-report-btn-pad-x: 16px;
}

@media (max-width: 768px){
  :root{
    --fs-overlay-right: 12px;
    --fs-report-btn-right: 12px;
    --fs-overlay-width: 120px;
    --fs-report-btn-width: 120px;
    --fs-report-btn-font-size: 12px;
    --fs-report-btn-pad-y: 8px;
    --fs-report-btn-pad-x: 12px;
  }
}
* { box-sizing: border-box; }
img { max-width: 100%; display: block; }
/* -------------- END BLOCK CSS-VARS-020 — Theme & Base Vars (FS) -------------- */


/* ---------------- BLOCK CSS-BASE-030 — Typography & Base (FS) ---------------- */
html, body {
  margin:0; padding:0;
  font-family: "Sansation", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  color:#222; background: var(--fs-navy);
}
button, input, select, textarea, .btn, .chip, .badge {
  font-family: "Sansation", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* -------------- END BLOCK CSS-BASE-030 — Typography & Base (FS) -------------- */


/* ---------------- BLOCK CSS-LAYOUT-060 — Page Height Scaffolding (FS) ---------------- */
html, body { height: 100dvh; }
main#fs-grid { min-height: calc(100dvh - var(--fs-tabbar-h)); }
#fs-map-wrap { min-height: calc(100dvh - var(--fs-header-h) - var(--fs-tabbar-h)); }
/* -------------- END BLOCK CSS-LAYOUT-060 — Page Height Scaffolding (FS) -------------- */


/* ---------------- BLOCK CSS-HEADER-040 — Top Bar (FS KFS-parity) ---------------- */
#topbar{
  background: linear-gradient(135deg, var(--fs-orange), var(--fs-orange-2));
  color: var(--fs-on);
  height: var(--fs-header-h);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
#topbar .brand{ display:flex; align-items:center; gap:14px; }
#topbar .brand .brand-flame{ width:32px; height:32px; }
#topbar .brand .brand-text{ display:flex; flex-direction:column; line-height:1.1; }
#topbar .brand .brand-title{ font-weight:700; font-size:21px; letter-spacing:1.1px; color:var(--fs-on); }
#topbar .brand .brand-sub{ font-weight:700; font-size:10px; letter-spacing:.9px; color:var(--fs-on); opacity:.9; }
/* Right-aligned topbar actions */
#topbar .actions{ margin-left:auto; display:flex; align-items:center; gap:20px; padding-right:27px; height:100%; position:relative; top:5px; }
#topbar .actions .act{ display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--fs-on); text-decoration:none; font-weight:700; font-size:8px; letter-spacing:1px; line-height:1; }
#topbar .actions .act img{ width:18px; height:18px; display:block; }
#topbar .actions .act svg{ width:18px; height:18px; display:block; }
#topbar .language-btn{
  appearance:none; border:none; background:transparent; color:var(--fs-on);
  font-size:20px; line-height:1; cursor:pointer; padding:6px; border-radius:8px;
}
#topbar .language-btn:focus{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
/* -------------- END BLOCK CSS-HEADER-040 — Top Bar (FS KFS-parity) -------------- */


/* =========================== LEAFLET / MAP (070–099) =========================== */


/* ---------------- BLOCK CSS-MAP-070 — Map Height & Container (FS) ---------------- */
#map{
  width:100%;
  height: calc(100dvh - var(--fs-header-h) - var(--fs-tabbar-h));
  min-height: 420px;
  border-radius: var(--fs-r);
  background:#e9eef3;
  overflow:hidden;
}
/* -------------- END BLOCK CSS-MAP-070 — Map Height & Container (FS) -------------- */


/* ---------------- BLOCK CSS-LEAFLET-075 — Prevent Tile Scaling (FS) ---------------- */
/* Let Leaflet compute tile sizing & transforms. Do NOT force 256×256 sizes. */
.leaflet-container img{
  max-width: none !important;  /* avoid global img rules stretching tiles */
  image-rendering: auto;
}

/* Force normal compositing and visible tiles after load */
.leaflet-container img.leaflet-tile{ mix-blend-mode: normal !important; }
.leaflet-tile-loaded{ visibility: visible !important; }
.leaflet-tile{ visibility: visible !important; }

/* Panes use Leaflet defaults for sizing; do not override width/height. */

/* Keep the animation origin stable without touching pane transforms */
/* -------------- END BLOCK CSS-LEAFLET-075 — Prevent Tile Scaling (FS) -------------- */


/* ---------------- BLOCK CSS-LEAFLET-080 — Map Containing Block (FS) ---------------- */
#map{ position: relative; overflow:hidden; }
/* -------------- END BLOCK CSS-LEAFLET-080 — Map Containing Block (FS) -------------- */


/* ---------------- BLOCK CSS-LEAFLET-076 — Leaflet Critical Resets (FS) ---------------- */
/* SAFE VERSION (REG-5):
   - Keep the map viewport clipped and tap-highlight free.
   - Do NOT override Leaflet’s own positioning of panes/tiles.
   - Works correctly with L.Browser.any3d = false (2-D mode). */

.leaflet-container {
  overflow: hidden;                 /* keep map viewport clipped */
  -webkit-tap-highlight-color: transparent;
}

/* Guard rails: force absolute positioning and origin at 0,0 for all panes */
/* Use Leaflet’s native pane/layer positioning; do not override */

/* Tiles: only neutral tweaks, never force left/top or position. */
.leaflet-container .leaflet-tile,
.leaflet-container img.leaflet-tile {
  max-width: none;                  /* never stretch tiles */
  image-rendering: auto;
}

/* Keep zoom origin stable for animated zooms. */
/* -------------- END BLOCK CSS-LEAFLET-076 — Leaflet Critical Resets (FS) -------------- */
/* ---------------- BLOCK CSS-LEAFLET-090 — Map Sizing & 2-D Parity ---------------- */

/* Give the map a definite height in all layouts */
#map{
  min-height: 540px;
  height: calc(100vh - var(--fs-header-h) - var(--fs-tabbar-h));
  background: #e6edf2; /* fallback while tiles load */
}

/* Mobile */
@media (max-width: 768px){
  #map{
    min-height: 420px;
    height: calc(100vh - var(--fs-header-h) - var(--fs-tabbar-h));
  }
}

/* Neutralize transforms on wrappers ONLY (never on Leaflet panes) */
html, body, #fs-grid, #fs-map-wrap, #map{
  transform: none !important;
  will-change: auto !important;
}

/* Stable Leaflet container rendering */
.leaflet-container{
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.leaflet-top.leaflet-right{ top:74px; right:24px; }
@media (max-width:768px){ .leaflet-top.leaflet-right{ top:62px; right:24px; } }

/* IMPORTANT: Do NOT force .leaflet-tile width/height (prevents single-column bugs) */
/* Leave Leaflet to size tiles itself. */

/* Optional: grid helper used by FS_tiles(true) */
.fs-tilebox{
  border: 1px dashed rgba(0,0,0,0.15);
  font: 12px/1.2 monospace;
  padding: 4px;
  text-align: center;
  background: rgba(255,255,255,0.7);
}
/* -------------- END BLOCK CSS-LEAFLET-090 — Map Sizing & 2-D Parity -------------- */


/* ============================== LAYOUT & UI =================================== */


/* ---------------- BLOCK CSS-LAYOUT-100 — 2-Column Grid & Sidebar (FS) ---------------- */
#fs-grid{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:16px;
  padding:16px;
  max-width:1400px;
  margin:0 auto;
  align-items: start;
}
#fs-map-wrap{
  position: relative;
  height: calc(100dvh - var(--fs-header-h) - var(--fs-tabbar-h));
  min-height: 420px;
}
#fs-map-wrap #map{
  height: calc(100dvh - var(--fs-header-h) - var(--fs-tabbar-h));
  min-height: 420px;
  border-radius: var(--fs-r);
  box-shadow: var(--fs-shadow);
  background:#dee5ea;
}
#fs-sidebar{ display:flex; flex-direction:column; gap:12px; }
/* -------------- END BLOCK CSS-LAYOUT-100 — 2-Column Grid & Sidebar (FS) -------------- */


/* ---------------- BLOCK CSS-PANELS-200 — KFS-style Panels (FS) ---------------- */
.kpanel{
  background:#fff;
  border-radius: var(--fs-r);
  box-shadow: var(--fs-shadow);
  border:1px solid var(--fs-bd);
  padding: 10px 12px;
  display:flex; flex-direction:column; gap:8px;
}
.kpanel .kp-h h3{ margin:0 0 4px 0; font-size:16px; font-weight:700; }
.kpanel.firebox{
  background: linear-gradient(135deg, var(--fs-orange), var(--fs-orange-2));
  color:#fff;
}
.kpanel.firebox{ border:1px solid rgba(255,255,255,.25); }
.kpanel.firebox .kp-h h3{ font-size:18px; }
.kpanel .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.kpanel .row .btn{ flex:1 1 0; min-width:0; max-width:100%; }
.kpanel .row.three{ display:grid; grid-template-columns: minmax(0,1fr) auto auto; gap:8px; align-items:center; }
.kpanel .row.three .btn{ min-width:0; }
.kpanel .row.three input.btn{ width:100%; }
.kp-form.hidden{ display:none; }

/* Major tab bar (browser-like) */
.kp-tabbar{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; align-items:stretch; margin:-8px -12px 14px; padding:12px 12px 0; position:relative; }
.kp-tabbig{ appearance:none; border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.85); color:#24364f; padding:12px 16px; border-radius:16px; font-weight:500; font-size:16px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); width:100%; transition: background .2s ease, color .2s ease, transform .2s ease; text-align:center; }
.kp-tabbig.active{ background: linear-gradient(135deg, var(--fs-orange), var(--fs-orange-2)); color:#fff; border-color:#ff4e00; box-shadow: 0 2px 10px rgba(255,72,0,.25); }

/* Report panel specific refinements */
#kp-report .kp-tabbar{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:stretch; margin:-10px -12px 12px; padding:12px 12px 0; }
#kp-report .kp-tabbig{ appearance:none; border:2px solid rgba(255,255,255,.55); background:rgba(255,255,255,.92); color:#24364f; padding:12px 16px; border-radius:20px; font-weight:700; font-size:18px; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.10); width:100%; text-align:center; }
#kp-report .kp-tabbig .sub{ font-weight:600; font-size:14px; opacity:.95; margin-left:6px; }
#kp-report .kp-tabbig.active{ background: linear-gradient(135deg, var(--fs-orange), var(--fs-orange-2)); color:#fff; border-color:#ff4e00; box-shadow: 0 4px 14px rgba(255,72,0,.35); }
#kp-report .btn.orange{ border-radius:14px; }
#kp-report .btn.pill{ border-radius:12px; }
/* Report panel precise layout */
#kp-report .row{ gap:8px; }
#kp-report .row .btn.pill{ flex:1; }
#kp-report #btn-pick-on-map{ flex:0 0 auto; padding:10px 12px; }
#kp-report #btn-pick-on-map.active{
  background: linear-gradient(135deg, #ff6a33, var(--fs-orange-2));
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.kpanel .row.space{ justify-content:space-between; }
.kpanel .field{
  flex:1; padding:9px 10px; border-radius:10px; border:1px solid var(--fs-bd);
  background:#fff; color:#111; min-width:0;
}
.kpanel textarea.field{ resize:vertical; }
.btn{
  border:none; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:500;
  background:#eef3f7; color:#0a1f33;
}
.btn.sm{ padding:6px 10px; font-size:12px; min-height:28px; }
.btn.pill{ background: var(--fs-chip); border:1px solid var(--fs-bd); }
.btn.pill{ min-height:36px; }
.btn.pill::placeholder{ color:#6b7a8a; }
/* Wrap long localized labels to prevent overflow in tight layouts */
.btn.pill{ white-space: normal; }
select.btn.pill, input.btn.pill{ min-width:0; }
/* Ensure icons appear directly before text and centered as a unit */
.btn.pill{ display:flex; align-items:center; justify-content:center; gap:4px; }
.btn.pill .ico{ flex:0 0 auto; }
textarea.btn.pill{ line-height:1.35; min-height:74px; }
.btn.orange{ 
  background: linear-gradient(135deg, #ff6a33, var(--fs-orange-2)); 
  color:#fff; 
  border:1px solid rgba(255,255,255,.3);
  min-height:38px;
}
.btn.orange.sm{ min-height:28px; }
.btn .ico{ width:18px; height:18px; margin-right:0; vertical-align:middle; }
.btn.orange .ico{ margin-left:10px; }
/* Precise spacing/sizing adjustments for action buttons */
#btn-send-report-side .ico{ margin-left:7px; width:17px; height:17px; }
#btn-send-report-side span{ position:relative; top:3px; font-weight:700; }
#vol-submit .ico{ margin-left:4px; width:24px; height:24px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background: linear-gradient(135deg, var(--fs-orange), var(--fs-orange-2));
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  border-radius:8px;
  padding:5px 12px;
  text-decoration:none;
  box-shadow:none;
  font-size:12px;
}
.footer.small{
  text-align:center; font-size:12px; color:#fff; background:var(--fs-navy);
  padding:12px; border-radius:10px;
}
.kpanel.fs-highlight{ box-shadow: 0 0 0 3px #FFE200, 0 6px 20px rgba(255,51,0,.35); }
/* -------------- END BLOCK CSS-PANELS-200 — KFS-style Panels (FS) -------------- */

/* ---------------- BLOCK CSS-OVERLAY-UI — Align Leaflet Overlay Panel ---------------- */
.leaflet-control-layers.leaflet-control-layers-expanded{
  position: fixed !important;
  right: var(--fs-overlay-right) !important;
  width: var(--fs-overlay-width) !important;
}

#kp-volunteer .row{ gap:8px; }
#kp-volunteer .btn.pill{ width:100%; }
#kp-volunteer .check-grid{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#kp-volunteer .check{ display:flex; align-items:center; gap:3px; color:#0a1f33; font-size:12px; font-weight:400; }
#kp-volunteer .check input[type="checkbox"]{ width:14px; height:14px; }
#kp-volunteer #vol-submit{ width:100%; font-weight:700; }
/* -------------- END BLOCK CSS-VOLUNTEER-210 — Volunteer Panel -------------- */

.meta-grid{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.meta-grid > div{ display:flex; align-items:center; gap:6px; }
.meta-grid strong{ font-weight:700; }
.meta-grid span{ font-weight:400; color:#0a1f33; }
/* Weather panel spacing parity: match header-to-meta spacing */
#kp-weather .chip-row{ margin-top:7px; }
#kp-weather .meta-grid > div strong::after{ content: ": "; }

/* ---------------- BLOCK MAP-LEAFLET-FIX-212 — Leaflet Base Tile Paint Guards ---------------- */
/* Ensure the map canvas fully paints tiles and doesn’t get clipped by parents.
   IMPORTANT: Do NOT apply transforms to Leaflet panes — that breaks tiling. */
#map.leaflet-container{
  backface-visibility: hidden;
}

/* Keep images crisp without breaking tile composition */
.leaflet-tile{
  image-rendering: auto;
}
/* -------------- END BLOCK MAP-LEAFLET-FIX-212 — Leaflet Base Tile Paint Guards -------------- */





/* ---------------- BLOCK CSS-OVERLAYS-300 — Map Overlays Panel (FS) ---------------- */
#kp-overlays .item{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 12px; border-radius:12px; background:#f0f4f8; cursor:pointer;
  border:1px solid var(--fs-bd);
  min-height:36px;
}
#kp-overlays .item:not(.active){
  background:#eef3f7; border:2px solid #0a1f33; box-shadow:none;
}
#kp-overlays .left{ display:flex; align-items:center; gap:6px; }
#kp-overlays .right{ display:flex; align-items:center; gap:6px; }
#kp-overlays .left span:not(.dot){ font-size:14px; font-weight:500; }
#kp-overlays .badge{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#ff4900;
  border:1px solid var(--fs-bd);
  border-radius:999px; padding:3px 10px; min-height:26px; line-height:1;
  font-weight:700; font-size:13px;
}
.fire-time-select{
  background: var(--fs-chip); border:1px solid var(--fs-bd); border-radius:999px; padding:3px 10px;
  font-size:13px; color:#0a1f33; cursor:pointer; min-width:72px; font-weight:600; margin-right:8px; min-height:26px; line-height:1;
}
#kp-overlays .item.active,
#kp-overlays .item.active:hover{
  background: linear-gradient(135deg, var(--fs-orange), var(--fs-orange-2)) !important;
  color:#fff !important; border-color:#ff4e00 !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.18) !important;
  transform: translateY(-1px);
}
#kp-overlays .item.active .badge{
  background: rgba(255,255,255,.9) !important; color:#ff4900 !important; border:1px solid rgba(255,255,255,.5);
}
#kp-overlays .item.active .fire-time-select{
  background: rgba(255,255,255,.95) !important; border-color: rgba(255,255,255,.8) !important; color:#333 !important;
}
#kp-overlays .toggle.btn.pill[aria-pressed="true"]{
  background: linear-gradient(135deg, var(--fs-orange), var(--fs-orange-2));
  color:#fff; border-color:#ff4e00;
}
#kp-overlays .toggle.btn.pill[aria-pressed="false"]{
  background: var(--fs-chip); color:#0a1f33; border-color: var(--fs-bd);
}
/* -------------- END BLOCK CSS-OVERLAYS-300 — Map Overlays Panel (FS) -------------- */

/* ---------------- BLOCK CSS-LAYERS-CHOOSER-305 — Custom Map Layers Chooser ---------------- */
.layers-chooser{
  position:relative;
  background: rgba(255,255,255,.95); border:2px solid #c7d3df; border-radius:16px; box-shadow: 0 8px 18px rgba(0,0,0,.18);
  padding:13px 10px 12px; min-width:132px; font-family: "Sansation", Arial, sans-serif;
}
.layers-chooser .lc-head{ position:absolute; top:4px; right:3px; }
.layers-chooser .lc-close{ appearance:none; border:none; background:transparent; color:#6d7890; font-weight:400; font-size:30px; line-height:1; cursor:pointer; }
.layers-chooser .lc-list{ display:flex; flex-direction:column; gap:6px; }
.layers-chooser .lc-item{ display:flex; align-items:center; gap:6px; }
.layers-chooser .lc-check{ width:17px; height:17px; border-radius:3px; border:1px solid #2a3b54; background:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:none; }
.layers-chooser .lc-check.on{ background:#fff; }
.layers-chooser .lc-check.on::after{ content:""; width:6px; height:3px; border-bottom:1px solid #2a3b54; border-left:1px solid #2a3b54; transform: rotate(-45deg); }
.layers-chooser .lc-label{ font-size:12.5px; font-weight:400; color:#3a4a63; }
.layers-chooser .lc-hydrants{ color:#d62828; }
.layers-chooser .lc-transformers{ color:#e0b111; }
.layers-chooser .lc-pools{ color:#2b7cff; }
.layers-chooser .lc-cisterns{ color:#31b24b; }
.layers-chooser .lc-watertanks{ color:#7525ee; }
.layers-chooser .lc-fires{ color:#ff4e00; }
.layers-chooser .lc-topo{ color:#6b7a8a; }
/* -------------- END BLOCK CSS-LAYERS-CHOOSER-305 — Custom Map Layers Chooser -------------- */

/* Mini toggle button for layers chooser */
.layers-chooser-wrap{ position: relative; }
.layers-chooser-wrap .lc-mini{
  appearance:none;
  border:2px solid #d6dee8;
  background:#fff;
  color:#6d7890;
  border-radius:10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
}
.layers-chooser-wrap .lc-mini img{ width:22px; height:22px; display:block; transform: translateX(1px); }
.layers-chooser-wrap .lc-mini:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.layers-chooser-wrap .lc-mini:focus{ outline:2px solid rgba(109,120,144,.35); outline-offset:2px; }

@media (max-width: 768px){
  .layers-chooser{ min-width:106px; padding:10px 8px 10px; }
  .layers-chooser .lc-head{ top:-1px; }
  .layers-chooser .lc-list{ gap:5px; }
  .layers-chooser .lc-item{ gap:5px; }
  .layers-chooser .lc-check{ width:14px; height:14px; border-radius:3px; border-width:1px; }
  .layers-chooser .lc-check.on::after{ width:5px; height:3px; border-bottom-width:1px; border-left-width:1px; }
  .layers-chooser .lc-label{ font-size:10px; }
  .layers-chooser .lc-close{ font-size:26px; }
}

/* ---------------- BLOCK CSS-POPUP-500 — Feature Popup Styling (FS) ---------------- */
.fp { min-width: 200px; max-width: 280px; font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.fp-head { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.fp-ico { width: 28px; height: 28px; display: block; }
.fp-title { font-weight: 700; margin: 0; }
.fp-sub { color: #666; }
.fp-details { margin-top: 8px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.fp-row { display: contents; }
.fp-k { color: #555; }
.fp-v { color: #111; }
.fp-id { margin-top: 8px; color: #666; }
/* -------------- END BLOCK CSS-POPUP-500 — Feature Popup Styling (FS) -------------- */


/* ---------------- BLOCK CSS-RESP-800 — Responsive (FS) ---------------- */
@media (min-width: 981px){
  #fs-grid{ grid-template-columns: 1fr 468px; }
}
@media (max-width: 980px){
  #fs-grid{ grid-template-columns: 1fr; padding:10px; }
  #map{ height: calc(100dvh - var(--fs-header-h) - var(--fs-tabbar-h)); min-height:400px; }
}
@media (max-width: 480px){
  #fs-grid{ padding:8px; }
  #map{ height: calc(100dvh - var(--fs-header-h) - var(--fs-tabbar-h)); min-height:350px; }
}
@media (max-width: 520px){
  :root{ --fs-header-h: 58px; }
  #topbar .brand{ gap:10px; }
  #topbar .brand .brand-flame{ width:26px; height:26px; }
  #topbar .brand .brand-title{ font-size:18px; letter-spacing:.9px; }
  #topbar .brand .brand-sub{ font-size:9px; letter-spacing:.9px; }
  #topbar .actions{ gap:8px; padding-right:12px; top:0; }
  #topbar .actions .act img{ width:17px; height:17px; }
  #topbar .actions .act svg{ width:17px; height:17px; }
  #topbar .actions .act{ font-size:6px; letter-spacing:0; }
}
/* -------------- END BLOCK CSS-RESP-800 — Responsive (FS) -------------- */


/* ---------------- BLOCK CSS-LEAFLET-207 — Debug Tile Grid (FS) ---------------- */
.fs-tilebox{
  box-sizing: border-box;
  width: 256px; height: 256px;
  border: 1px dashed rgba(0,0,0,.25);
  background: rgba(255,255,255,.12);
  font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  color:#333; display:flex; align-items:flex-end; justify-content:flex-end;
  padding: 2px 4px;
  pointer-events: none;
}
/* -------------- END BLOCK CSS-LEAFLET-207 — Debug Tile Grid (FS) -------------- */
/* Restore Leaflet pane/layer absolute positioning to fix tile layout */
.leaflet-container .leaflet-map-pane,
.leaflet-container .leaflet-tile-pane,
.leaflet-container .leaflet-overlay-pane,
.leaflet-container .leaflet-shadow-pane,
.leaflet-container .leaflet-tooltip-pane,
.leaflet-container .leaflet-popup-pane {
  position: absolute !important;
}

/* Ensure correct stacking order for panes (match Leaflet defaults) */
.leaflet-container .leaflet-tile-pane{ z-index: 200 !important; }
.leaflet-container .leaflet-overlay-pane{ z-index: 400 !important; }
.leaflet-container .leaflet-marker-pane{ z-index: 1000 !important; }
.leaflet-container .leaflet-tooltip-pane{ z-index: 650 !important; }
.leaflet-container .leaflet-popup-pane{ z-index: 700 !important; }

.leaflet-container .leaflet-layer {
  position: absolute !important;
}

.leaflet-container .leaflet-tile,
.leaflet-container img.leaflet-tile {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  max-width: none;
  image-rendering: auto;
}
.leaflet-container .leaflet-marker-pane img{ mix-blend-mode: normal !important; opacity: 1 !important; }
.leaflet-container .leaflet-pick-pane{ z-index: 1200 !important; }
.leaflet-container .leaflet-kfs-top-pane{ z-index: 2147483647 !important; }
.leaflet-container .leaflet-marker-icon.fs-pick-dot{
  width:24px; height:24px; border:3px solid #fff; border-radius:50%; background:#d60000;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.leaflet-container .leaflet-marker-icon.fs-pick-pin{ z-index: 2147483647 !important; pointer-events:auto; visibility: visible !important; opacity: 1 !important; }
/* High-visibility draggable pick pin (DivIcon) */
.fs-pick-pin{ width:36px; height:50px; display:flex; align-items:flex-end; justify-content:center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.fs-pick-pin svg{ display:block; }
#kp-overlays .dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
#kp-overlays .dot.blue{ background:#2b7cff; }
#kp-overlays .dot.green{ background:#31b24b; }
#kp-overlays .dot.yellow{ background:#f2c94c; }
#kp-overlays .dot.purple{ background:#7b4de8; }
.entry-card{ border:1px solid var(--fs-bd); border-radius: var(--fs-r-sm); background:#f6f9fc; padding:10px; margin:8px 0; box-shadow: var(--fs-shadow); }
.entry-card .row{ margin-bottom:6px; }
.entry-card .row:last-child{ margin-bottom:0; }
.entry-card.add{ border:2px solid var(--fs-orange); background:#fff7f2; }
.entry-card.add .kp-h h3{ color: var(--fs-orange-2); margin:0 0 6px 0; }