/*  ───────────────────────────────────────────────────────────────
    map-overrides.css  – last file in the cascade (after Bootstrap
    and map-view.css).  Only *small* tweaks live here.
    ──────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   CHUNKY MODAL HEADINGS  (H3 look, as before Bootstrap)
   ────────────────────────────────────────────────────────── */
.modal-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #111;
}
.modal-header {
  border-bottom: 2px solid #e5e5e5;
  padding-right: calc(1rem + .5rem);   /* room for the button */
}

/* ──────────────────────────────────────────────────────────
   Misc. fix – legend editor keeps pointer events
   ────────────────────────────────────────────────────────── */
.legend-wrapper { pointer-events: auto !important; }


/* ── bold H-3 style titles you preferred ─────────────────────── */
.modal-title{
  font-size:1.4rem !important;
  font-weight:700 !important;
  color:#111;
}
.modal-header{ border-bottom:2px solid #e5e5e5; }


/*────────────────  Project-Description modal  ───────────────*/

/* panel */
#project-description-modal .modal-content{
  position:relative;
  width:550px;                /* hard cap you wanted                */
  max-width:90vw;
  background:#fff;
  border-radius:8px;
  padding:1.5rem;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  display:flex; flex-direction:column;     /* lets footer sit at end */
}

/* “×” icon – always upper-right */
#project-description-modal .close{
  position:absolute; top:.6rem; right:.8rem;
  width:1.6rem; height:1.6rem;
  display:flex; justify-content:center; align-items:center;
  font-size:1.3rem; line-height:1;
  background:none; border:0; color:#555;
  opacity:.8; transition:opacity .15s;
}
#project-description-modal .close:hover{ opacity:1; }

/* footer → right-aligned */
#project-description-modal .pd-footer{
  margin-top:1.2rem;
  display:flex; justify-content:flex-end;
}

/* blue Bootstrap-style Close button – just wider than its label */
#project-description-modal .pd-close-btn{
  background:#0d6efd;          /* Bootstrap primary blue */
  color:#fff;
  border:0; border-radius:4px;
  padding:.40rem 1.05rem;      /* keeps width snug */
  font-size:.95rem;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s;
}
#project-description-modal .pd-close-btn:hover{
  background:#0b5ed7;          /* darker on hover */
}

/* place this at the very end of map-overrides.css */
#project-description-modal .pd-close-btn.close-btn{
  width:auto !important;          /* kill the 100 % width */
  min-width:0;                    /* prevent another rule expanding it */
  display:inline-flex;            /* centres the label nicely */
  justify-content:center;
  align-items:center;
}

/* ────────────────────────────────────────────────
   Generic “pd-style” modal
   – 350 px card
   – bold H3 heading (in your markup)
   – “×” upper-right
   – blue Close button lower-right
   ─────────────────────────────────────────────── */
.pd-style{                           /* overlay */
  position:fixed; inset:0;
  display:none; justify-content:center; align-items:center;
  background:rgba(0,0,0,.45);
  z-index:11000;
}


/* “×” */
.pd-style .close{
  position:absolute; top:.6rem; right:.8rem;
  width:1.6rem; height:1.6rem;
  display:flex; justify-content:center; align-items:center;
  font-size:1.3rem; line-height:1;
  background:none; border:0; color:#555;
  opacity:.8; transition:opacity .15s;
}
.pd-style .close:hover{ opacity:1; }

/* footer */
.pd-style .pd-footer{
  margin-top:1.2rem;
  display:flex; justify-content:flex-end;
}

/* blue Close button */
.pd-style .pd-close-btn{
  background:#0d6efd;
  color:#fff;
  border:0; border-radius:4px;
  padding:.4rem 1.1rem;
  font-size:.95rem;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s;
}
.pd-style .pd-close-btn:hover{ background:#0b5ed7; }

/* Hide any Bootstrap full-width button that sits INSIDE the body
   of the Welcome / Exit modals.  The footer button keeps showing
   because it uses the custom .pd-close-btn class, not .btn-primary. */
#welcome-body .btn-primary.w-100,
#exit-body    .btn-primary.w-100{
  display:none !important;
}

#exit-body .btn-primary.w-100,
#exit-body .btn-primary          { display:none!important; }

/* (optional) ensure no stray ‘X’ remains if HTML can’t be edited */
#exit-close-x                    { display:none!important; }


/* white card */
.pd-style .modal-content{
    /* …existing declarations… */
    width:450px;           /* ← was 350px */
    max-width:90vw;
}

.pd-style .close{ right:1rem; }   /* moves the X a little further in */

.pd-footer .pd-close-btn { width:auto !important; }   /* never stretch */

/* small square icon-buttons that sit next to the “×” */
.icon-btn{
  width:32px;height:32px;margin-left:6px;
  border:0;border-radius:4px;background:none;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;cursor:pointer;
  color:#555;opacity:.85;transition:background .15s,opacity .15s;
}
.icon-btn:hover{background:rgba(0,0,0,.08);opacity:1;}


.feature-footer{
  display:flex;
  justify-content:flex-end;     /* push everything right */
  gap:.6rem;                    /* little breathing room */
}

.blue-btn{
  background:#0d6efd; color:#fff; border:0; padding:.45rem 1.1rem;
  border-radius:4px; cursor:pointer;
}
.blue-btn:hover{ background:#0b5ed7; }

.danger-btn{
  background:#dc3545; color:#fff; border:0; padding:.45rem .9rem;
  border-radius:4px; cursor:pointer;
}
.danger-btn:hover{ background:#bb2d3b; }

/* put this in map-overrides.css (or any stylesheet that loads last) */
#feature-modal .feature-footer button + button {
  margin-left: .6rem;      /* tweak the spacing to taste */
}


/* Feature-info modal – footer ----------------------------------------- */
#feature-modal .feature-footer{
  display:flex;                 /* line the buttons up */
  justify-content:flex-end;     /* right-align the whole group */
  gap:.7rem;                    /* <--  space between every button */
}

#feature-modal .feature-footer button{
  flex:0 0 auto;                /* don’t let flexbox stretch them */
}

/* Put some breathing-room between the Delete ▸ Edit ▸ Close buttons
   that sit in any .pd-footer row */
.pd-footer > button:not(:last-child){
  margin-right: .6rem;          /* tweak the value to taste */
}

/* Center the lone icon inside the delete button */
.danger-button{
  display: inline-flex;          /* turn the button into a flex container   */
  align-items: center;           /* vertical centering                      */
  justify-content: center;       /* horizontal centering (just in case)     */

  /* optional sizing tweaks so the button is square-ish */
  width: 2.25rem;                /* tweak to taste                          */
  height: 2.25rem;               /* keep the same as width for a square     */
  padding: 0;                    /* remove default padding                  */
}


/* remove
.modal.pd-style .modal-content,
#legend-modal  .modal-content */

/* put a thin rule between geometry groups (like project-edit) */
.legend-group + .legend-group{
  border-top: 1px solid #e4e4e4;
  padding-top: .8rem;
  margin-top : 1.2rem;
}

/* just a little spacing between footer buttons */
.pd-footer .pd-close-btn,
.pd-footer .danger-button{
  margin-inline-start: .4rem;
}

/* option-only delete icon (centred square) */
.danger-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.4rem;
  height:2.4rem;
  padding:0;
}


/* WCAG/Bootstrap-style clip */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* 📌 place after Bootstrap / global resets */

/* add space below every <p> inside .modal-content */
.modal-content p {
  margin-block: 0 1.2em;   /* top 0, bottom 1.5× line-height */
}

/* tidy: remove final trailing gap */
.modal-content p:last-child {
  margin-bottom: 0;
}

/* ───── Zoom-to pill ─────────────────────────────────────────── */
.zoom-select {
  appearance      : none;           /* neutralise browser chrome   */
  padding         : .25rem 2.4rem .25rem .5rem;
  font: 600 1.05rem/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
  background      : #fff;
  border          : 2px solid #000;
  border-radius   : .4rem;
  box-shadow      : 0 2px 6px rgba(0,0,0,.15);
  cursor          : pointer;
}
.zoom-select:focus { outline: none; }
.zoom-select option { font-weight: 400; }

/* ▼ little chevron (pure CSS) */
.zoom-select::after {
  content : "";
}

/* ───── Top-bar visibility rules ─────────────────────────────── */
/* Blue bar hidden by default… */
#topbar { display:none; }
/* …but enabled *only* in the sidebar theme                       */
html[data-ui-theme="sidebar"] #topbar { display:flex; }


/* Make the banner the positioning anchor */
#banner-area { position: relative; }

/* Center the Zoom-to chooser 6 px beneath the banner bubble */
#banner-controls{
  position: absolute;
  top: calc(100% + 6px);   /* 6 px gap below the banner */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;              /* keep it above the map */
}

/* Normal (non-bold) text inside every Zoom-to <select> */
#banner-controls .zoom-select,
#zoomto-host select{
  font-weight: 400;
}

/* keep the map shifted when the sidebar is open …            */
/* …but let modals escape the transform so they centre nicely */
body.sidebar-open.modal-open { transform: none !important; }

/* ── Bootstrap info‑card modals (central white cards) ───────────── */


body.sidebar-open.modal-open {     /* sidebar slid out?  Ignore translate */
  transform: none !important;
}


/* keep footer visually separated from body text */
.modal-footer{padding-top:1rem;border-top:1px solid #e0e0e0}

.custom-info-footer {
  margin-top: auto;   /* pushes footer to the bottom of the flex column */
}

/* ── Feature‑info card look ───────────────────────────────────────── */
#feature-modal .modal-dialog  { max-width: 640px; }        /* keep 640 px cap */
#feature-modal .modal-content{
  padding: 1.5rem 1.75rem;        /* airier interior */
  border-radius: .5rem;           /* softer corners   */
}
#feature-modal .modal-title{
  font-size: 1.75rem;             /* larger headline  */
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ── FINAL Feature‑info overrides (place at end of map‑overrides.css) ───────── */
#feature-modal .modal-content{             /* ① un‑fix the legacy width     */
  width:auto!important;                    /* kill the 450 / 500 px rule    */
  max-width:none;
}
#feature-modal .modal-dialog{              /* ② set the real width cap      */
  max-width:640px;
}
body.modal-open{                           /* ③ keep Bootstrap centring     */
  transform:none!important;
}
#feature-modal .modal-title{               /* ④ beefier headline            */
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:1rem;
}

#feature-modal .modal-content,
.pd-style .modal-content{
  width:auto!important;
  max-width:none;
}


/* map‑overrides.css – place near the bottom */
/* Center every Bootstrap modal no‑matter what the sidebar is doing */ 
body.modal-open{transform:none!important;} 
/* keep it once – no “sidebar‑open” qualifier */


/* restore Bootstrap default centring */
#feature-modal .modal-dialog,
#legend-modal  .modal-dialog,
#tagModal      .modal-dialog,
#comment-modal .modal-dialog {
  margin: 1.75rem auto;             /* vertical | horizontal (auto = centred) */
}





/* ──────────────────────────────────────────────────────────────
   Force the Feature / Legend “white cards” to stay centred
   – works for show, fade‑in, fade‑out, sidebar‑open, etc.
   – zero side‑effects on other Bootstrap modals
   ──────────────────────────────────────────────────────────── */
/* map‑overrides.css – place near the end */



/* When centred, make sure the dialog itself has no stray margins */
#feature-modal .modal-dialog,
#legend-modal  .modal-dialog {
  margin: 0 auto;   /* horizontal centring fallback */
}





/* ────────────────────────────────────────────────
   1)  Every modal card needs a positioning root
   ──────────────────────────────────────────────── */
.modal-content{
  position: relative;          /* lets .btn‑close stick to the corners */
}

/* ────────────────────────────────────────────────
   2)  Close buttons – always upper‑right
   ──────────────────────────────────────────────── */
.modal-content .btn-close,   /* Bootstrap SVG “×” */
.modal-content .close{       /* fallback text “×”  */
  position: absolute;
  top: .65rem;
  right: .75rem;
  width: 1.6rem;             /* hit‑box ≈ 26 px   */
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;        /* glyph fallback    */
  line-height: 1;
  background: var(--bs-btn-close-bg) center/1.2rem no-repeat;
  border: 0;
  opacity: .8;
  transition: opacity .15s;
}
.modal-content .btn-close:hover,
.modal-content .close:hover{ opacity: 1; }

/* ────────────────────────────────────────────────
   3)  Headings – smaller & bold
   ──────────────────────────────────────────────── */
.modal-title,
.modal-content h2,
.modal-content h3{
  font-size: 1.35rem;         /* adjust to taste  */
  font-weight: 700;
  margin-bottom: 1rem;
}

.modal-title,
#feature-modal-title,
#surveyModal h2,
.pd-style h3 {
  font-size: 1.25rem;     /* ≈ 20 px */
  font-weight: 700;
  margin-bottom: .75rem;
}



.modal-title,
#feature-modal-title,
#surveyModal h2,
.pd-style h3 {
  font-size: 1.25rem;     /* ≈ 20 px */
  font-weight: 700;
  margin-bottom: .75rem;
}

/* --- force a consistent 340‑px card for every geometry‑category picker --- */
.wm-modal{                 /* class added by showCategoryIconModal() */
  max-width: 340px;
  width: 90%;              /* keeps it responsive on phones          */
  white-space: normal;     /* let long labels wrap                    */
}
.wm-modal .cat-option img{ /* tame over‑sized PNG/SVG icons           */
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
}
.wm-modal .cat-option{
  word-break: break-word;  /* wrap unbroken long names                */
}


/* utility: completely remove from the visual & pointer tree */
.wm-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
  pointer-events:none;       /* ⚠️ prevents accidental click‑blocking */
}

.visually-hidden { 
  position:absolute; 
  width:1px; height:1px; 
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.visually-hidden-focusable:focus { 
  position:static; width:auto; height:auto; margin:0; clip:auto; white-space:normal; 
}


/* make the wrapper stretch to the viewport height */
html, body, #map-wrapper      { height: 100%; }

 /* let the real map layer fill its parent */
#map { position: absolute; inset: 0; }   /* top:0 right:0 bottom:0 left:0 */



/* sidebar menu button */
.sidebar-btn{
  background:none; border:0; color:#333;
  display:flex; gap:.5rem; align-items:center; width:100%;
}
.sidebar-btn:hover{ background:#f0f0f0; }
.sidebar-btn i { min-width:1.25em; text-align:center; }


  :root{
  --menu-color:#0d6efd;
  --menu-offset:0px;          /* JS writes banner+topbar */
  --topbar-offset:0px;        /* JS writes topbar only   */
}
.round-btn{ background:var(--menu-color); }



.sidebar-btn i       { color: var(--menu-color); }   /* icon tint */

/* =========================================================================
   TEXT BUTTON BAR  ( #button-panel > .menu-buttons > .gbtn … )
   =========================================================================*/

/* host container ­– stays full-width, sticks to top on mobile */
#button-panel{
  display:block;                 /* already set inline, keep it */
  padding:0.5rem 0.75rem;
  background:#fff;
  border-bottom:1px solid #dee2e6;
  /* optional: keep on screen while scrolling */
  /* position:sticky; top:0; z-index:1020; */
}

/* flex wrapper – keeps buttons aligned & wraps when needed */
#button-panel .menu-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}

/* generic “green button” style (matches Bootstrap .btn-success) */
/* ---------------------------------------------------------------
   stronger override for .gbtn-success  (wins over Bootstrap)
---------------------------------------------------------------*/
.gbtn-success:not([style]){
  background  : var(--menu-color) !important;
  border-color: var(--menu-color) !important;
}

/* matching hover / focus — again only if no inline colour */
.gbtn-success:not([style]):hover,
.gbtn-success:not([style]):focus{
  background  : color-mix(in srgb, var(--menu-color) 90%, white) !important;
  border-color: color-mix(in srgb, var(--menu-color) 90%, white) !important;
}

/* pill-bar host: always on top, touches don't leak through */
  #button-panel{
    position: fixed;
    top: calc(16px + var(--menu-offset)) !important;
    left: 16px !important;
    z-index: 1052;
    pointer-events: auto;
 }

#button-panel .gbtn{
  display: flex;
  width: 148px;            /* keep a tidy column */
  justify-content: flex-start;
}




.round-btn{
  --size: 44px;                 /* dial once, everything scales    */
  width:var(--size); height:var(--size);
  border-radius:50%;
  background:var(--menu-color);        /* ← uses token */
  border:none;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;               /* Font-Awesome icon size          */
  cursor:pointer;
  transition:background .15s;
}

.round-btn:hover{ background:color-mix(in srgb, var(--menu-color) 85%, white);  /* % tint */ }

.round-btn:active{ transform:scale(.94); }

.round-btn .menu-label{         /* label shown on hover (tooltip)  */
  position:absolute;
  left:calc(100% + 6px);
  white-space:nowrap;
  padding:2px 6px;
  background:var(--menu-color);        /* ← uses token */
  color:#fff;
  font-size:13px;
  border-radius:3px;
  opacity:0; pointer-events:none;
  transition:opacity .12s;
}

.round-btn:hover .menu-label{ opacity:.8; }

/* ── NEVER let banner/topbar take up layout space ─────────────── */
body          { margin:0 !important; }      /* default user-agent margin */
#banner-area,
#banner-area.banner-stack,           /* when JS turns it into a stack */
#topbar {                            /* “text” UI theme title bar     */
  position:absolute !important;
  top:0; left:0; width:100%;
  background:transparent !important;
  z-index:5;                         /* stays above the map           */
  pointer-events:none;               /* clicks fall through           */
}

/* keep dropdown / title clickable */
#banner-area > *, #topbar > * { pointer-events:auto; }


#banner-area.banner-stack > .banner:first-child {
  margin-top: 14px;      /* pushes title down */
}

/* map-overrides.css – place near the end */
#feature-modal #feature-modal-comments-section{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* map-overrides.css – near the end */
#feature-modal .wm-modal{
  max-width:640px;    /* cap at 640 like the footer row */
  width:auto;         /* grow as wide as the dialog allows */
}
#feature-modal #feature-modal-comments-section{
  padding-left:0!important;
  padding-right:0!important;
}


/* This is the fixed rule */
.wm-modal{
  width     : 90vw               !important;   /* Use 90% width on mobile */
  max-width : var(--wm-modal-width,640px) !important; /* Cap it at 420px on desktop */
}


/* FINAL override – make the Feature card obey --wm-modal-width */
#feature-modal .wm-modal{
  width     : var(--wm-modal-width,640px) !important;  /* pick any default */
  max-width : 90vw                      !important;     /* stay responsive  */
}

/* keep the dialog centred */
#feature-modal .modal-dialog{ margin:1.75rem auto !important; }

/* bigger hit-box + sits above everything */
.modal-content .btn-close,
.modal-content .close{
  width:1.8rem;                 /* ≈ 28 px square – adjust to taste */
  height:1.8rem;
  padding:0;
  z-index:20;                   /* ensures nothing covers it        */
  pointer-events:auto;          /* belt & braces                    */
}

/* optional: glyph fallback if you removed Bootstrap’s SVG */
.modal-content .close::before{
  content:"×";
  font-size:1.4rem;
  line-height:1;
}

/* map-overrides.css  – make this the LAST stylesheet */
#topbar {
  background:var(--menu-color) !important;  /* Bootstrap “primary” */
  color: #fff;
}

/* map-overrides.css — unified, banner-aware replacement */

/* Fallback height for the blue bar (used if JS hasn’t written --topbar-offset yet) */
:root { --wm-topbar-h: 48px; }

/* Keep the hamburger pill the same height as the bar */
#hamburger-btn{
  height: var(--topbar-offset, var(--wm-topbar-h));
  display: flex;
  align-items: center;
}

/* put the banner (and the Zoom-to select inside it) 12 px below the blue bar */
#banner-area.banner-stack{
  position:fixed;                       /* stay with the bar */
  top:calc(var(--topbar-offset) + 24px);/* blue-bar height + 12 px */
  left:50%;
  transform:translateX(-50%);
  z-index:4;                            /* already set in JS, but keep it */
}

/* ========== tidy pill in the blue bar ========== */
#hamburger-btn{
  /* ← give the border breathing-room */
  margin:2px 0 !important;              /* 2 px gap above & below */

  /* keep the pill exactly inside that gap */
  height:calc(100% - 4px) !important;   /* bar-height minus both margins */
  box-sizing:border-box;                /* include the 3 px border */

  /* reset the old rules that made it too tall */
  padding:0 10px !important;            /* horizontal only */
  line-height:1 !important;             /* no extra vertical stretch */

  /* visual styling (unchanged) */
  border:3px solid #fff;
  border-radius:14px;
  background:var(--menu-color);
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:600 1.05rem/1 var(--bs-font-sans-serif);
}

/* icon a touch larger */
#hamburger-btn .fa-bars{ font-size:1.25rem; }

/* add the “menu” word */
#hamburger-btn::after{ content:'menu'; text-transform:lowercase; }

/* subtle hover / focus */
#hamburger-btn:hover,
#hamburger-btn:focus{
  background:color-mix(in srgb, var(--menu-color) 85%, white);
  outline:none;
}




/* banner & pills share the token */
#topbar,
  .round-btn {
  background:var(--menu-color); 
  border-color:var(--menu-color);
}

/* hover state keeps the family look */
.gbtn:hover,
.round-btn:hover,
.sidebar-btn:hover{
  background:color-mix(in srgb, var(--menu-color) 90%, white);
}

/* sidebar tweaks – add to any CSS file that loads after your main sheet */
.sidebar-btn{
  background:transparent;          /* base */
  border-color:transparent;
}
.sidebar-btn:hover,
.sidebar-btn:focus{
  background:#f1f1f1;              /* light grey instead of --menu-color */
  border-color:#f1f1f1;
}

 /* default look – applies **only** when NO inline background is set */
 .gbtn.gbtn-success:not([style*="background"])          {   /* normal   */
   background  : var(--menu-color);
   border-color: var(--menu-color);
   color:#fff;
 }
 .gbtn.gbtn-success:not([style*="background"]):hover,   /* hover/focus */
 .gbtn.gbtn-success:not([style*="background"]):focus{
   background  : color-mix(in srgb, var(--menu-color) 85%, white);
   border-color: color-mix(in srgb, var(--menu-color) 85%, white);
 }
 
 /* map-overrides.css – after your other rules */
.icon-muted{
  opacity: .5;        /* ≈ 50 % tint */
  filter : grayscale(1);
}

/* shrink textarea and comment list paddings */
#feature-modal textarea#feature-modal-new-comment {
  font-size: 0.85rem;       /* smaller text */
  padding: 0.35rem 0.5rem;  /* thinner padding */
  resize: vertical;         /* keep manual resize */
}

#feature-modal-comments-list {
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
}

/* anything inside #feature-modal-comments-section scrolls
   once it grows beyond 45 % of the viewport */
@media (min-width: 576px) {            /* modal-sm and up */
  #feature-modal-comments-section {
    max-height: 45vh;                  /* 45 % of viewport height */
    overflow-y: auto;
  }
}

#feature-modal .modal-body h3:first-child {
  padding-top: 0.75rem;   /* instead of Bootstrap’s 1.5rem */
}

#feature-modal .modal-body { padding-top: 0.75rem; }

#feature-modal .modal-footer {
  justify-content: center;
}

/* =====================================================
   Sticky header + footer for #feature-modal
   ===================================================== */
#feature-modal .modal-dialog {
  max-width: 500px;          /* keep your custom width */
  height: 75vh;              /* cap overall height */
}

#feature-modal .modal-content {
  display: flex;             /* enable flexbox layout */
  flex-direction: column;    /* header / body / footer vertical */
  height: 100%;              /* fill the 90 vh dialog */
}

#feature-modal .modal-body {
  flex: 1 1 auto;            /* grows & shrinks */
  overflow-y: auto;          /* scrolls when content long */
}

#feature-modal .modal-header,
#feature-modal .modal-footer {
  flex: 0 0 auto;            /* never shrink */
}

/* Remove the hairline above every modal footer */
.wm-modal .modal-footer {
  border-top: 0 !important;   /* ← overrides Bootstrap’s 1-pixel line */
}

/* ‣ 1. two-column grid: textarea grows, button hugs content
   ‣ 2. align-items:start makes their top borders flush      */
.comment-input-grid{
  display:grid;
  grid-template-columns: 1fr auto;   /* stretch | auto-width  */
  gap:.5rem;                         /* space between columns */
  align-items:start;                 /* top-align both cells  */
}

/* trim vertical padding so the button’s top border matches
   the textarea’s; adjust values if you prefer it even slimmer */
.comment-submit-btn{
  margin-top: 10px !important;
  padding:.35rem .9rem;  /*   ↓ vertical   |  ←→ horizontal */
  line-height:1.25;      /* keeps icon + text centred        */
}


/* ▸ a) tighten inner padding around the whole comments section */
#feature-modal-comments-section { padding-block: .5rem !important; }

/* ▸ b) zero-out the default paragraph margins inside a comment block */
.feature-comment-item p { margin: 0 0 .25rem 0; }        /* 4 px bottom gap */

/* ▸ c) single divider between comments instead of two <br>/<hr> lines */
.feature-comment-item + .feature-comment-item{
  margin-top: .5rem;                 /* 8 px between items           */
  padding-top: .5rem;                /* keeps text off the divider   */
  border-top: 1px solid #e5e5e5;     /* subtle hairline separator    */
}

/* ▸ d) input bar gap tightened a hair */
.comment-input-grid{ row-gap: .25rem; column-gap: .5rem; }

/* remove bottom-margin on the last <p> in each comment */
.feature-comment-item p:last-child { margin-bottom: 0; }

/* make the divider gap a hair narrower (optional) */
.feature-comment-item + .feature-comment-item{
  margin-top: .375rem;        /* 6 px instead of 8 px */
  padding-top: .375rem;
}

/* === MODAL COMMENTS — input row fixed, history scrolls ============= */

/* let the modal body grow (no internal scrollbar) */
.wm-modal .modal-body { overflow: visible; }

/* wrapper = flex column ➜ [input-row] + [history-pane] */
#feature-modal-comments-section{
  display: flex;
  flex-direction: column;
  max-height: 55vh;          /* keeps the whole block inside the modal */
}

/* === FINAL COMMENTS TWEAK  ======================================== */

/* container = column : [input-row] (fixed) + [history] (grows / scrolls) */
#feature-modal-comments-section{
  display:flex;
  flex-direction:column;
  max-height:55vh;               /* keeps comment block inside modal   */
}

/* --- input row ---------------------------------------------------- */
.comment-input-grid{
  display:flex;
  gap:.5rem;
  margin-bottom:.5rem;
}
.comment-input-grid textarea{ flex:1 1 auto; }
.comment-submit-btn       { align-self:flex-start; }   /* pin to top */

/* --- history pane (only part that scrolls) ------------------------ */
#feature-modal-comments-list{
  flex:1 1 0;                    /* ← grows to fill remaining space    */
  min-height:7rem;               /* still visible when few comments    */
  overflow-y:auto;
  border:1px solid #e1e5e8;
  border-radius:.25rem;
  padding:.75rem .75rem .5rem;   /* tighter vertical padding           */
  background:#fafafa;            /* subtle contrast (optional)         */
}

/* each comment block */
.feature-comment-item{ padding:.35rem 0; }

/* one thin divider between comments */
.feature-comment-item + .feature-comment-item{
  margin-top:.55rem;
  padding-top:.55rem;
  border-top:1px solid #e1e5e8;
}

/* remove extra paragraph gaps */
.feature-comment-item p{
  margin:0;
  line-height:1.35;
}

#feature-modal .modal-dialog.compact {
  height: auto !important;       /* no 90 vh cap           */
  max-height: 80vh;              /* optional – safety cap  */
}

/* map-feature-modal: let the body auto-size when .compact is present */
#feature-modal .modal-body.compact {
  max-height: none !important;
  overflow-y: visible !important;
}

/* ───── 2-A.  dialog shrinks when .compact is set ────────── */
#feature-modal .modal-dialog.compact{
  height: auto !important;     /* drop the 90 vh cap */
  max-height: 75vh;            /* optional overall cap */
  max-height: 550px;    /* absolute cap (≈100 px shorter) */
}

/* ───── 2-B.  comments history flexes to footer ──────────── */
#feature-modal-comments-list{
  flex: 1 1 0;                 /* grow / shrink to fill space   */
  overflow-y: auto;
  position: relative;          /* for the fade effect below     */
  border: 1px solid #e1e5e8;
  border-radius: .25rem;
  background: #fafafa;
  padding: .75rem .75rem .5rem;
}

/* subtle bottom-fade ⇒ hints there is more to scroll */
#feature-modal-comments-list::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height: 24px;                         /* fade height  */
  background: linear-gradient(to bottom,
                               rgba(250,250,250,0),
                               rgba(250,250,250,1));
  pointer-events:none;                  /* clicks pass through */
}

/* keeps the footer stuck to the bottom even with little content */
#feature-modal .modal-content{
  display:flex; flex-direction:column; height:100%;
}
#feature-modal .modal-body{
  flex:1 1 auto; overflow-y:auto;
}


/* ──────────────────────────────────────────────────────────────
   1.  Overall dialog height  →  min( 75 vh , 550 px )
   ────────────────────────────────────────────────────────────*/
#feature-modal .modal-dialog{
  max-width : 500px;     /* keep your width */
  height    : 75vh;      /* relative cap  */
  max-height: 450px;     /* absolute cap  */
}

/* ──────────────────────────────────────────────────────────────
   2.  Comments block fills the rest of the body
       (header ⇢ body ⇢ footer --> column flex)
   ────────────────────────────────────────────────────────────*/
#feature-modal-comments-section{
  flex: 1 1 0;           /* grow / shrink inside .modal-body  */
  display: flex;
  flex-direction: column;
  overflow: hidden;      /* keep borders tidy */
}

/* history pane gets the spare height and scrolls */
#feature-modal-comments-list{
  flex: 1 1 auto;
  overflow-y: auto;
  /* 3️⃣  tiny scroll cue */
  background:
     linear-gradient(#0001 30%, #0000) top   /100% 12px no-repeat,
     linear-gradient(#0000, #0001 70%) bottom/100% 12px no-repeat;
  background-attachment: local, local;   /* shadows stick to scroll */
}

/* optional: tighten the gap above the footer */
#feature-modal-comments-section + .modal-footer{
  margin-top: .25rem;    /* was much larger by default */
}

/* ------------- tighten bottom of the scroll area -------------- */
#feature-modal-comments-section{
  padding-bottom: 0   !important;   /* remove 1 rem from .px-3 */
}

/* ------------- tighten bottom of the whole body --------------- */
#feature-modal .modal-body{
  padding-bottom: .25rem !important; /* was 1 rem (Bootstrap)   */
}

/* (optional) remove the default top-margin on the footer */
#feature-modal .modal-footer     { margin-top: 0 !important; }

/* FINAL override – cap the feature card height: min(75vh, 550px) */
#feature-modal .modal-dialog{
  height    : auto !important;                             /* drop 90 vh */
  max-height: clamp(0px, 75vh, 550px) !important;          /* ← modern, widely-supported */
}


/* Enter-description modal — match Feature-modal look */
.wm-modal-title{
  font-size: 1.25rem;     /* same as #feature-modal-title */
  font-weight: 700;
  margin: 0 0 .75rem 0;   /* space below only */
  padding: 0;             /* kill any default h-tag padding */
}

/* footer aligns right & keeps spacing identical to feature modal */
.form-modal-footer{
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: .75rem;   /* keep a little breathing-room */
  padding-top: 0;       /* no extra stripe */
  border-top: none;     /* remove the line */
}

/* --- FIX: keep full checkbox / radio visible ----------------------- */
.wm-checkline {            /* each row created by survey-render.js */
  display: flex;
  align-items: center;
  gap: 4px;                /* space between box and label */
  overflow: visible !important;   /* nothing gets clipped */
  padding-left: 2px;       /* nudge whole row away from modal edge */
}

.wm-checkline input[type="checkbox"],
.wm-checkline input[type="radio"] {
  margin-left: 0 !important;      /* cancel any negative shift */
  transform: none !important;     /* cancel any unwanted scale */
}

/* ── LIVE-SURVEY answer rows – prevent left-edge crop ───────────── */
#liveSurveyFields > div {          /* each question wrapper            */
  padding-left: 4px;               /* 4 px keeps the full blue square  */
}

#liveSurveyFields input[type="checkbox"],
#liveSurveyFields input[type="radio"] {
  margin-left: 0 !important;       /* cancel any earlier negative push */
  overflow: visible !important;    /* nothing inside the box is hidden */
}




/* Aug 14 - v2 */

/* ==== banner/topbar-aware offsets – FINAL ==== */

/* Vars (JS writes --topbar-offset and --menu-offset dynamically) */
:root{
  --menu-color:#0d6efd;
  --topbar-offset:0px;   /* height of the blue bar      */
  --menu-offset:0px;     /* banner + topbar combined    */
}

/* Blue bar + hamburger */
#topbar{ background:var(--menu-color) !important; color:#fff; }
#hamburger-btn{
  height: var(--topbar-offset);
  display:flex; align-items:center;
}

html.offsets-ready #button-panel { visibility: visible; }


/* Banner stack position (when you use a stacked banner) */
#banner-area.banner-stack{
  position:fixed;
  top: calc(var(--topbar-offset) + 12px);
  left:50%;
  transform:translateX(-50%);
  z-index:1040;
}

/* Generic theme tints */
.round-btn{ background:var(--menu-color); }
.sidebar-btn i{ color:var(--menu-color); }

/*  mobile (to text title) Aug 14 */

/* Show image by default, text fallback on mobile */
#banner-area .banner--image { display:block; }
#banner-area .banner--text  { display:none; }

/* Tweak the threshold as you like (e.g., 640px or 768px) */
@media (max-width: 640px) {
  #banner-area .banner--image { display:none !important; }
  #banner-area .banner--text  { display:block !important; }
}

/* Simple readable “text banner” look */
#banner-area .banner--text{
  margin: 8px auto 0;
  padding: .5rem .75rem;
  font: 700 1rem/1.3 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:#fff;
  border-radius:.4rem;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  max-width: min(90vw, 960px);
}


/* TEXT theme: desktop = image, mobile = text */
html[data-ui-theme="text"] #banner-area .banner--image { display: block; }
html[data-ui-theme="text"] #banner-area .banner--text  { display: none; }

@media (max-width: 640px), (pointer: coarse) {
  html[data-ui-theme="text"] #banner-area .banner--image { display: none !important; }
  html[data-ui-theme="text"] #banner-area .banner--text  { display: block !important; }
}



/* August 18 */

/* Fallback text banner pill */
#banner-area .banner-text{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:9999px;
  font-weight:600;
  line-height:1;
  background: var(--menu-color, #0d6efd);
  color:#fff;
}

/* In the green-text-button UI, make the fallback more neutral */
html[data-ui-theme="text"] #banner-area .banner-text{
  background:#f4f6f9;
  color:#111;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
}

/* Sidebar: keep banner stacked below the navbar */
html[data-ui-theme="sidebar"] #banner-area.banner-stack{
  margin-top: .5rem;
}

/* Aug 19 */

/* Round (classic) buttons */
.controls .round-btn .menu-icon{
  background: var(--btn-color, var(--menu-color, #0d6efd));
  color:#fff;
}
.controls .round-btn .menu-label{
  background: var(--btn-color, var(--menu-color, #0d6efd));
  color:#fff;
  padding:.15rem .5rem;
  border-radius:.5rem;
  line-height:1.2;
}

/* Text (green) buttons – give their label the same coloured pill */
.menu-buttons .gbtn .menu-label{
  display:inline-block;
  background: var(--btn-color, var(--menu-color, #0d6efd));
  color:#fff;
  padding:.2rem .55rem;
  border-radius:.5rem;
  line-height:1.2;
}

/* === FINAL ROUND BUTTON + TOPBAR COLOUR RULES ================== */
/* Put this at the very end of map-overrides.css */

/* Round (classic) buttons pick up per-button tint if present */
.round-btn {
  --size: 44px;                       /* keep existing sizing */
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--btn-color, var(--menu-color)); /* <-- per button first */
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background .15s;
}

.round-btn:hover {
  background: color-mix(in srgb, var(--btn-color, var(--menu-color)) 85%, white);
}

.round-btn:active {
  transform: scale(.94);
}

/* The floating label pill uses the same tint */
.round-btn .menu-label {
  position: absolute;
  left: calc(100% + 6px);
  white-space: nowrap;
  padding: 2px 6px;
  background: var(--btn-color, var(--menu-color));
  color: #fff;
  font-size: 13px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.round-btn:hover .menu-label { opacity: .8; }

/* Topbar shares the same global token */
#topbar {
  background: var(--menu-color) !important;
  border-color: var(--menu-color) !important;
  color: #fff;
}

/* If you want per-button tint to apply here too, use this instead:
#topbar {
  background: var(--btn-color, var(--menu-color)) !important;
  border-color: var(--btn-color, var(--menu-color)) !important;
  color: #fff;
}
*/

/* === Authoritative fix: make round buttons use per-button tint === */
.controls button.round-btn{
  background:   var(--btn-color, var(--menu-color)) !important;
  border-color: var(--btn-color, var(--menu-color)) !important;
}


/* Aug 19 8:26 */

/* === TEXT THEME: per‑button tints + compact title ================= */

/* 1) Text buttons (green pills) — prefer the per‑button tint */
#button-panel .menu-buttons .gbtn.gbtn-success{
  background:   var(--btn-color, var(--menu-color)) !important;
  border-color: var(--btn-color, var(--menu-color)) !important;
  color: #fff !important;
}
#button-panel .menu-buttons .gbtn.gbtn-success:hover,
#button-panel .menu-buttons .gbtn.gbtn-success:focus{
  background:   color-mix(in srgb, var(--btn-color, var(--menu-color)) 85%, white) !important;
  border-color: color-mix(in srgb, var(--btn-color, var(--menu-color)) 85%, white) !important;
}

/* The small label chip already uses --btn-color via existing rules;
   keep it in sync just in case a theme overrides earlier styles */
#button-panel .menu-buttons .gbtn .menu-label{
  background: var(--btn-color, var(--menu-color)) !important;
  color:#fff !important;
}

/* 2) Title pill (banner text) — compact, above “Zoom to…”, theme‑tinted */
#banner-area .banner--text{
  display: inline-block !important;           /* shrink to content */
  background: var(--menu-color);              /* same as round‑btn default */
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  padding: .35rem .65rem;
  border-radius: .5rem;
  max-width: calc(100vw - 48px);              /* never span full viewport */
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  margin: 6px 0 0 0;                           /* a little air above Zoom */
}

/* Keep the stacked layout: title first, then Zoom select */
#banner-area.banner-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;                                    /* space between title & Zoom */
}

/* Optional: slightly tighten the Zoom select so it doesn’t feel wider
   than the title */
#banner-area .zoom-select{
  max-width: 220px;         /* was 180 in some themes — tweak to taste */
  width: auto;
  margin: 0;
  font-weight: 500;
}

/* Aug 19 8:34 */

/* =========================================================
   FINAL FIXES — text-buttons tint, title dedupe, mobile title
   ========================================================= */

/* 1) Text buttons: use per-button tint; remove inner halo chip */
#button-panel .menu-buttons .gbtn.gbtn-success{
  background:   var(--btn-color, var(--menu-color)) !important;
  border-color: var(--btn-color, var(--menu-color)) !important;
  color:#fff !important;
}
#button-panel .menu-buttons .gbtn.gbtn-success:hover,
#button-panel .menu-buttons .gbtn.gbtn-success:focus{
  background:   color-mix(in srgb, var(--btn-color, var(--menu-color)) 85%, white) !important;
  border-color: color-mix(in srgb, var(--btn-color, var(--menu-color)) 85%, white) !important;
}

/* kill the “halo” inside buttons: no background behind the label */
#button-panel .menu-buttons .gbtn .menu-label{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
}

/* 2) Keep only the compact title pill; remove the old wide bar */
#banner-area .banner-text{               /* legacy wide title */
  display: none !important;
}

/* Compact title pill (when used) */
#banner-area .banner--text{
  display: inline-block !important;      /* shrink to content */
  background: var(--menu-color);
  color:#fff;
  font-weight:700;
  line-height:1.25;
  padding:.35rem .65rem;
  border-radius:.5rem;
  max-width: calc(100vw - 48px);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  margin: 6px 0 0 0;                     /* sits above Zoom select */
}

/* Keep stacked layout: title on top, then “Zoom to…” */
#banner-area.banner-stack{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}

/* 3) If a banner image exists, hide text title on desktop; show on mobile */
#banner-area .banner--image { display:block; }
#banner-area .banner--text  { display:none; }

@media (max-width:640px), (pointer:coarse){
  #banner-area .banner--image { display:none !important; }
  #banner-area .banner--text  { display:inline-block !important; }
}

/* (optional) keep the Zoom select a sensible width next to the title */
#banner-area .zoom-select{ max-width:220px; width:auto; margin:0; font-weight:500; }

/* Aug 19 8:45 */

/* === Banner logic: image on desktop, colored text on mobile === */

/* 0) Colored text title pill (your preferred look) */
#banner-area .banner--text{
  display:inline-block;
  background: var(--menu-color);
  color:#fff;
  font-weight:700;
  line-height:1.25;
  padding:.45rem .75rem;
  border-radius:.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  max-width: calc(100vw - 48px);
}

/* 1) If an image banner exists → show image on desktop, hide text */
#banner-area:has(.banner--image) .banner--image{ display:block; }
#banner-area:has(.banner--image) .banner--text { display:none;  }

/* 2) On phones/tablets → hide image, show colored text title */
@media (max-width: 640px), (pointer: coarse){
  #banner-area:has(.banner--image) .banner--image{ display:none !important; }
  #banner-area:has(.banner--image) .banner--text { display:inline-block !important; }
}

/* 3) Sidebar theme: keep banner flush under the blue bar */
html[data-ui-theme="sidebar"] #banner-area.banner-stack{
  position: fixed;
  top: var(--topbar-offset);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;
}
#banner-area.banner-stack{ display:flex; flex-direction:column; align-items:center; gap:6px; }
#banner-area.banner-stack > .banner{ position:static !important; margin:0; transform:none !important; }


/* Aug 19 9:02 */

/* Colored text title pill */
#banner-area .banner--text{
  display:inline-block;
  background: var(--menu-color);
  color:#fff;
  font-weight:700;
  line-height:1.25;
  padding:.45rem .75rem;
  border-radius:.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  max-width: calc(100vw - 48px);
}

/* When there IS a banner image… */
@media (min-width: 451px){
  /* desktop/tablet: show image, hide text */
  #banner-area:has(.banner--image) .banner--image{ display:block !important; }
  #banner-area:has(.banner--image) .banner--text { display:none  !important; }
}
@media (max-width: 450px){
  /* phones: hide image, show colored text title */
  #banner-area:has(.banner--image) .banner--image{ display:none !important; }
  #banner-area:has(.banner--image) .banner--text { display:inline-block !important; }
}

/* Sidebar theme: keep banner flush below the blue bar */
html[data-ui-theme="sidebar"] #banner-area.banner-stack{
  position: fixed;
  top: var(--topbar-offset);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;
}
#banner-area.banner-stack{ display:flex; flex-direction:column; align-items:center; gap:6px; }
#banner-area.banner-stack > .banner{ position:static !important; margin:0; transform:none !important; }

/* Aug 19 9:15 */

/* === Compact, centered banner image bubble (all themes) === */

/* Keep the banner container from forcing full-width */
#banner-area.banner-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* Ensure the bubble itself is content-sized, not 100% */
#banner-area.banner-stack > .banner{
  position: static !important;
  margin: 0;
  transform: none !important;
  width: auto !important;        /* <-- key: don't stretch */
  max-width: none !important;
}

/* Image bubble look (same as your text-buttons page) */
#banner-area .banner--image img{
  display:block;
  max-width: min(90vw, 960px);   /* centered, compact */
  height:auto;
  border-radius: .6rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.20);
}

/* Keep the colored text title pill for small screens only.
   (Text title is already colored via --menu-color.) */
@media (min-width: 451px){
  #banner-area:has(.banner--image) .banner--text { display:none !important; }
  #banner-area:has(.banner--image) .banner--image{ display:block !important; }
}
@media (max-width: 450px), (pointer:coarse){
  #banner-area:has(.banner--image) .banner--image{ display:none !important; }
  #banner-area:has(.banner--image) .banner--text { display:inline-block !important; }
}

/* Aug 19 10:19 a */
/* === Unified banner (text & classic) — FINAL authoritative rules === */

/* keep both themes consistent: centered bubble, above map */
#banner-area {
  position: fixed;
  top: calc(var(--topbar-offset, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;
}

#banner-area.banner-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#banner-area .banner--image img {
  display: block;
  max-width: min(90vw, 960px);
  height: auto;
  border-radius: .6rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.20);
}

/* colored title pill (hidden on desktop if an image exists) */
#banner-area .banner--text {
  display: inline-block;
  background: var(--menu-color, #0d6efd);
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  padding: .45rem .75rem;
  border-radius: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  max-width: calc(100vw - 48px);
}

/* desktop: prefer image when present */
@media (min-width: 641px) {
  #banner-area:has(.banner--image) .banner--text { display: none; }
}

/* phones/tablets: swap to compact title, hide image */
@media (max-width: 640px), (pointer: coarse) {
  #banner-area:has(.banner--image) .banner--image { display: none !important; }
  #banner-area:has(.banner--image) .banner--text  { display: inline-block !important; }
}

/* === Keep stacks (round & text) aligned below the banner === */
.controls {
  top: calc(16px + var(--topbar-offset, 0px)) !important;
  left: 12px !important;
  z-index: 1030;
}
#button-panel {
  top: calc(16px + var(--topbar-offset, 0px)) !important;
  left: 16px !important;
  z-index: 1052;
  pointer-events: auto;
}


/* Aug 19 10:25a */
/* unified positioning for both button bars */
#button-panel {
  position: fixed;
  left: 16px !important;
  top: calc(16px + var(--menu-offset)) !important;
  z-index: 1052;
  pointer-events: auto;
}

.controls {
  position: fixed;
  left: 12px !important;
  top: calc(16px + var(--menu-offset)) !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1030;
}

/* Aug 19 11:11a */
/* === FINAL OFFSETS (authoritative) — keep this last === */
:root{
  --topbar-offset: 0px;   /* set by JS (height of blue bar)    */
  --menu-offset : 0px;    /* set by JS (topbar + banner total) */
}

/* Bubble banner (classic & text): fixed & centred below the bar */
#banner-area.banner-stack{
  position: fixed;
  top: calc(var(--topbar-offset) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;
}

/* Classic round stack (left) */
.controls{
  position: fixed;
  left: 12px !important;
  top: calc(16px + var(--menu-offset)) !important;
  z-index: 1030;
}

/* Mapbox built‑in controls (zoom/compass) — follow the same offset */
.mapboxgl-ctrl-top-left{
  transform: none !important;          /* kill old translateY offset */
  margin: 0 !important;
  margin-top: calc(12px + var(--menu-offset)) !important;
  margin-left: 12px !important;
  width: max-content;
}


/* Optional: image vs text in the bubble banner */
#banner-area .banner--image { display:block; }
#banner-area .banner--text  { display:none; }
@media (max-width: 640px), (pointer:coarse){
  #banner-area .banner--image { display:none !important; }
  #banner-area .banner--text  { display:inline-block !important; }
}


/* Show #site-banner only for sidebar theme */
#site-banner{ display:none; }
html[data-ui-theme="sidebar"] #site-banner{ display:block; }
#site-banner img{ display:block; width:100%; height:auto; }

/* Aug 19 1:21p */

/* === SIDEBAR FULL‑WIDTH BANNER (overlay above the navbar) ========== */
/* Host is present in map-view.ejs *above* #topbar */

#site-banner{ display:none; }

html[data-ui-theme="sidebar"] #site-banner{
  display:block;
  position:fixed;
  top:0; left:0; right:0;
  z-index:1040;                /* 👈 FIX: Lower z-index to sit behind modals (1050) */
  pointer-events:none;         /* clicks pass through to the map/navbar */
}

/* scale the banner image to the page width */
html[data-ui-theme="sidebar"] #site-banner img{
  display:block;
  width:100%;
  height:auto;
}

/* IMPORTANT: sidebar menus & controls DO NOT include banner height.
   They remain positioned using only the navbar height via --topbar-offset.
   (installMenuOffsets() must keep bannerH=0 for sidebar.) */

/* Sidebar: the navbar sits *under* the banner image */
html[data-ui-theme="sidebar"] #topbar{
  top: var(--site-banner-h, 0px);  /* NEW: move the navbar down by the image height */
}

/* Sidebar drawer should sit BELOW the banner image + navbar */
html[data-ui-theme="sidebar"] #sidebar{
  position: fixed;
  top: calc(var(--site-banner-h, 0px) + var(--topbar-offset));
  left: -260px;                      /* current closed position */
  width: 260px;
  height: calc(100% - (var(--site-banner-h, 0px) + var(--topbar-offset)));
  background: #fff;
  box-shadow: 2px 0 6px rgba(0,0,0,.2);
  transition: left .25s;
  z-index: 1200;                     /* under the banner (1300), above map */
}
html[data-ui-theme="sidebar"] body.sidebar-open #sidebar{
  left: 0;                           /* slide-in */
}

/* Keep the inner content tidy */
#sidebar .sidebar-inner{
  display:flex; flex-direction:column; padding:1rem; gap:.5rem;
  /* ensure content never hides under the bottom edge */
  max-height: 100%; overflow:auto;
}

/* Optional: center the top-right Mapbox controls using the same header offset */
.mapboxgl-ctrl-top-right{
  top: calc(10px + var(--menu-offset)) !important;
}

/* Hide banner entirely on phones / small touch devices */
@media (max-width: 640px), (pointer: coarse) {
  #banner-area,
  #banner-area.banner-stack,
  #banner-area .banner--image,
  #banner-area .banner--text {
    display: none !important;
  }
}


/* Button menus – vertical column */
#button-panel{
  position: fixed;
  top : calc(16px + var(--menu-offset)) !important;
  left: 16px !important;
}

/* Round icon stack */
.controls{
  position: fixed;
  top : calc(16px + var(--menu-offset)) !important;
  left: 12px !important;
}

/* Mapbox controls (both sides) */
.mapboxgl-ctrl-top-left{
  margin-top: calc(12px + var(--menu-offset)) !important;
}
.mapboxgl-ctrl-top-right{
  top: calc(10px + var(--menu-offset)) !important;
}

/* Sidebar: place navbar **under** the banner image */
html[data-ui-theme="sidebar"] #topbar{
  top: var(--site-banner-h, 0px);
}

/* map-overrides.css – near the end */
@media (max-width: 640px), (pointer:coarse) {
  #banner-area { display: none !important; }
}


/* Classic/Text keep the navbar at the very top (no change) */
/* #topbar { top: 0; }  ← already implied elsewhere */

/* Mapbox native controls & menus already use --menu-offset,
   so they will automatically land below (banner + navbar [+ bubble]). */

.mapboxgl-ctrl-top-right {
  top: calc(10px + var(--menu-offset)) !important;
}

/* map-overrides.css – keep Mapbox controls aligned with menus */

/* Top-left controls (zoom, compass, geolocate, etc.) */
.mapboxgl-ctrl-top-left {
  margin: 0 !important;
  transform: none !important; /* cancel Mapbox’s translate */
  margin-top: calc(12px + var(--menu-offset)) !important;
  margin-left: 12px !important;
  width: max-content; /* keeps them compact */
}

/* Top-right controls (fullscreen, nav, style switchers) */
.mapboxgl-ctrl-top-right {
  margin: 0 !important;
  transform: none !important;
  margin-top: calc(12px + var(--menu-offset)) !important;
  margin-right: 12px !important;
  width: max-content;
}


/* Aug 19 2:36 */

/* Button stacks follow banner+topbar automatically */
#button-panel { top: calc(16px + var(--menu-offset)) !important; left: 16px !important; }
.controls     { top: calc(16px + var(--menu-offset)) !important; left: 12px !important; }

/* Mapbox built‑ins follow the same offset (no hard-coded pixels) */
.mapboxgl-ctrl-top-left{
  transform: none !important;      /* don’t double-shift */
  margin: 0 !important;
  margin-top: calc(12px + var(--menu-offset)) !important;
  margin-left: 12px !important;
}

/* Sidebar drawer sits BELOW the banner image + the navbar */
html[data-ui-theme="sidebar"] #sidebar{
  position: fixed;
  top: calc(var(--site-banner-h, 0px) + var(--topbar-offset)) !important;
  height: calc(100% - (var(--site-banner-h, 0px) + var(--topbar-offset))) !important;
  left: -260px;                         /* closed position */
  width: 260px;
  background: #fff;
  box-shadow: 2px 0 6px rgba(0,0,0,.2);
  transition: left .25s;
  z-index: 1200;
}
html[data-ui-theme="sidebar"] body.sidebar-open #sidebar{ left: 0; }

/* Sidebar banner: go away on phones/tablets */
@media (max-width: 640px), (pointer: coarse) {
  html[data-ui-theme="sidebar"] #site-banner { display: none !important; }
}

/* Classic/Text on mobile: keep the banner container, show title pill, hide image */
@media (max-width: 640px), (pointer: coarse) {
  html:not([data-ui-theme="sidebar"]) #banner-area { display: flex !important; }
  html:not([data-ui-theme="sidebar"]) #banner-area .banner--image { display: none !important; }
  html:not([data-ui-theme="sidebar"]) #banner-area .banner--text  { display: inline-block !important; }
}

/* August 20 fix to legend modal */

/* === Legend modal: header+footer fixed, body scrolls ================== */
#legend-modal .modal-dialog{
  /* keep a gap from the viewport edges */
  margin: 1.25rem auto;               /* top/bottom | centered */
  max-width: 820px;                    /* tweak to taste */
}

#legend-modal .modal-content{
  display: flex;                       /* header / body / footer column */
  flex-direction: column;
  /* leave room above and below: 96px total (48px + 48px) */
  max-height: calc(100dvh - 96px);     /* use dvh so mobile toolbars don't lie */
  border-radius: .6rem;
}

/* header & footer never shrink; always visible */
#legend-modal .modal-header,
#legend-modal .modal-footer{
  flex: 0 0 auto;                      /* never shrink into the scroll area */
  /* optional: keep them visually fixed if body scrolls a lot */
  position: sticky;
  z-index: 1;
}
#legend-modal .modal-header{ top: 0; background: #fff; }
#legend-modal .modal-footer{ bottom: 0; background: #fff; }

/* body takes the remaining height and scrolls */
#legend-modal .modal-body{
  flex: 1 1 auto;                      /* grow & shrink */
  overflow: auto;                      /* scroll when content taller */
  min-height: 0;                       /* critical for Safari/iOS */
  -webkit-overflow-scrolling: touch;   /* smooth scroll on iOS */
}

/* On very small screens, keep a little extra gap */
@media (max-width: 480px){
  #legend-modal .modal-content{
    max-height: calc(100dvh - 80px);   /* slightly tighter frame */
  }
}

/* === Legend modal sizing & centering fixes === */

/* 1️⃣ Limit legend modal height so header/footer stay visible */
#legend-modal .modal-dialog {
  max-width: 600px;                          /* keep a reasonable width */
  height: auto !important;                   /* let flex handle height */
  max-height: 80vh !important;               /* never taller than 80% of screen */
  margin: 1.5rem auto;                       /* vertical & horizontal centering */
  display: flex;
  align-items: center;                       /* vertical centering */
}

#legend-modal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;                          /* ensure scrollable body */
}

#legend-modal .modal-header,
#legend-modal .modal-footer {
  flex: 0 0 auto;                            /* fixed header/footer */
}

#legend-modal .modal-body {
  flex: 1 1 auto;                            /* fill remaining space */
  overflow-y: auto;                          /* scroll inner content if needed */
}

/* 2️⃣ Center legend modal beneath navbar */
#legend-modal .modal-dialog {
  margin-top: calc(var(--topbar-offset) + 1.5rem) !important;
}

/* 3️⃣ Dark backdrop should cover *everything*, including navbar & menu btn */
.modal-backdrop.show {
  opacity: .5;                               /* keep Bootstrap dimming */
  z-index: 1050 !important;                  /* ensure it's above menus */
}
#legend-modal {
  z-index: 1060 !important;                  /* modal itself higher */
}

/* Sidebar: the drawer scrolls; inner content allows popouts to overflow */
html[data-ui-theme="sidebar"] #sidebar{
  overflow: auto;  /* drawer scrolls */
}

html[data-ui-theme="sidebar"] #sidebar .sidebar-inner{
  overflow: visible;    /* allow dropdown menus to overflow the inner wrapper */
  position: relative;   /* creates a safe anchor for absolute children */
}

/* Make sure the dropdown has a high-enough stacking level */
.dropdown-menu.language-dropdown{
  z-index: 2001 !important;  /* above map & sidebar content, below modals/backdrop */
  max-height: min(70vh, 360px);
  overflow: auto;            /* menu itself can scroll when tall */
}

/* (Good practice) ensure the trigger is a proper anchoring context */
#button-panel .dropdown,
.controls .dropdown,
#sidebar .dropdown{
  position: relative;  /* anchor for the absolute .dropdown-menu */
}

/* === Authoritative Mapbox control alignment === */
/* Always keep zoom/compass/etc. just below banners/navbars */

.mapboxgl-ctrl-top-left,
.mapboxgl-ctrl-top-right {
  position: absolute !important;
  top: calc(var(--menu-offset, 0px) + 12px) !important;
  margin: 0 !important;           /* nuke Mapbox defaults */
  transform: none !important;     /* nuke earlier translateY */
  width: max-content;             /* keep compact */
}

.mapboxgl-ctrl-top-left  { left: 12px !important; }
.mapboxgl-ctrl-top-right { right: 12px !important; }

[data-role="btn-minimizeMenu"] {
  font-weight: bold;
  background-color: #eee;
}

#button-panel.collapsed .menu-label {
  display: none !important;
}

#button-panel.collapsed .gbtn {
  padding-inline: 0.5rem;
  justify-content: center;
}

#button-panel.collapsed .gbtn i {
  margin-right: 0 !important;
}

/* Oct 6 */ 

.zoom-select {
  appearance: none;
  font: 600 0.9rem/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 1.5px solid #000;
  border-radius: 0.4rem;
  padding: 0.25rem 1.8rem 0.25rem 0.6rem;   /* space for icon */
  background: #fff;
  cursor: pointer;
  transition: width .15s ease;
  max-width: 90vw;        /* mobile cap */
  overflow: hidden;       /* prevent scrollbars if mis-measured */
  text-overflow: ellipsis;
}

html[data-ui-theme="sidebar"] #topbar .zoom-select {
  margin-left: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  background: #fff;
}

@media (max-width: 480px) {
  .zoom-select {
    font-size: 0.85rem;
    padding-right: 1.2rem;
  }
}

/* Oct 6 Annotations */

.anno-label[contenteditable="true"] {
  background:#fff !important;
  box-shadow:0 0 6px rgba(0,123,255,.3);
}
.anno-label.deleting {
  opacity:.5;
}

/* keep normal look on desktop */
.mapboxgl-ctrl-geocoder {
  max-width: 240px;
}

/* smaller footprint on narrow screens */
@media (max-width: 640px), (pointer: coarse) {
  .mapboxgl-ctrl-geocoder {
    max-width: 180px;
  }
}

/* ============================================================
   MAPBOX GEOCODER – unified alignment, spacing, and collapse
   ============================================================ */

/* base layout */
.mapboxgl-ctrl-geocoder {
  display: flex !important;
  align-items: center;
  transition: width .2s ease;
}

/* collapsed (icon-only) state */
.mapboxgl-ctrl-geocoder.mapboxgl-ctrl-geocoder--collapsed {
  width: 2.2rem !important;     /* magnifier only */
  overflow: hidden;
  background: #fff;
  border: none;
  box-shadow: none;
}

/* search icon – shared */
.mapboxgl-ctrl-geocoder--icon-search {
  position: absolute;
  top: 50%;
  left: 0.6rem;                 /* visually centered in collapsed state */
  transform: translateY(-50%);
  flex: 0 0 auto;
  pointer-events: none;
  margin-right: 0.45rem;
}

/* fine-tune collapsed look */
.mapboxgl-ctrl-geocoder.mapboxgl-ctrl-geocoder--collapsed
  .mapboxgl-ctrl-geocoder--icon-search {
  margin-left: 0.25rem !important;  /* shift left for optical centering */
  transform: translateY(-50%) scale(1.05); /* small vertical tweak */
}

/* input field */
.mapboxgl-ctrl-geocoder--input {
  flex: 1 1 auto;
  padding-left: 2.6rem !important;  /* generous space between icon & text */
  box-sizing: border-box;
}

/* keep text from touching icon when expanded */
.mapboxgl-ctrl-geocoder--icon-search + .mapboxgl-ctrl-geocoder--input {
  padding-left: 2.6rem !important;
}

/* responsive: narrower control on very small screens */
@media (max-width: 480px) {
  .mapboxgl-ctrl-geocoder.mapboxgl-ctrl-geocoder--collapsed {
    width: 2rem !important;
  }
  .mapboxgl-ctrl-geocoder--icon-search {
    left: 0.45rem;
  }
}
/* Mobile: place "Zoom to" centered on its own row under the blue bar */
@media (max-width: 768px) {
  /* allow the bar to wrap to a new line */
  #topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 6px;     /* small breathing room above the select */
  }

  /* make the zoom host take a full row and center its content */
  #zoomto-host {
    order: 99;               /* push to next line after title/buttons */
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin: 6px 0 0 !important;
    margin-left: 0 !important;   /* override inline "auto" */
    margin-right: 0 !important;  /* override inline "12px" */
    width: 100%;
  }

  /* size the dropdown comfortably and center it */
  #zoomto-host #zoom-to,
  #banner-area #zoom-to {        /* fallback if inserted in banner */
    display: block;
    width: 240px;
    max-width: 90vw;
    margin: 0 auto !important;  /* belt & suspenders centering */
    float: none !important;
  }

/* ──────────────────────────────────────────────────────────────
   Custom Modals – make them fit viewport on phones/tablets
   ────────────────────────────────────────────────────────────── */
.wm-modal {
  width: var(--wm-modal-width, 600px);
  max-width: 90vw;             /* never overflow small screens */
  max-height: 90vh;            /* fit vertically on phones */
  overflow-y: auto;            /* scroll if taller than viewport */
  margin-inline: auto;         /* center horizontally */
  border-radius: 0.75rem;
}

/* Fine-tune padding and typography inside custom modals */
.wm-modal .modal-body {
  padding: 1rem 1.25rem;
  overflow-wrap: break-word;
}

/* Responsive fallback for very small screens */
@media (max-width: 600px) {
  .wm-modal {
    width: 94vw !important;    /* nearly full width */
    max-height: 88vh !important;
    padding: 0.5rem !important;
  }

  .wm-modal .modal-body {
    padding: 0.75rem 0.9rem !important;
    font-size: 0.95rem;
    line-height: 1.35;
  }

  /* shrink embedded media (like YouTube iframes) */
  .wm-modal iframe {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Oct 13 */
/* kill modal fade transitions on map view */
.modal.fade,
.modal-backdrop.fade { transition: none !important; }

/* Nov 12 custom modals */

/* This is the fixed rule */
.wm-modal {
  /* This is the new logic:
    1. Be 90% wide on mobile.
    2. But never be wider than the "max-width" (which our JS sets).
  */
  width: 90vw !important;
  max-width: var(--wm-modal-width, 600px) !important; /* Use a larger default */
}

/* Safety net: if a custom modal was rendered without .wm-modal 
[id^="modal-"] .modal-content{
  width: var(--wm-modal-width, 420px);
  max-width: 90vw;
}
*/
/* Keep custom modals centered like Legend */
[id^="modal-"] .modal-dialog{ margin: 1.75rem auto; }


/* Unified modal sizing/centering for every WM modal */
.modal-dialog.wm-modal{
  width: 90vw !important;
  max-width: var(--wm-modal-width, 560px) !important; /* Legend default */
  margin: 1.75rem auto !important; /* centers on mobile & desktop */
}

/* Ensure close button is always clickable and visible */
.modal-content .btn-close{
  width: 1.8rem;
  height: 1.8rem;
  z-index: 20;
}

/* If you still need a 340px cap for the icon/category chooser,
   scope it so it doesn't affect other modals */
.category-chooser .modal-dialog.wm-modal{
  max-width: 340px !important;
}

/* Right-align all modal footers (robust against earlier overrides) */
.modal .modal-footer{
  display: flex !important;
  justify-content: flex-end !important;
  gap: .5rem !important;
}

/* Utility: if a modal has action buttons inside the body instead of the footer */
.wm-actions-right{
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

.map-search-bar {
  position: absolute;
  top: 70px; /* Below banner */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  z-index: 1050;
}

.map-search-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 40vh;
  background: white;
  z-index: 1050;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.map-search-drawer.collapsed {
  transform: translateY(calc(100% - 40px)); /* Keep header visible */
}

.drawer-content {
  overflow-y: auto;
  flex: 1;
}

:root{
  --wm-ctrl-left-gutter: 14px;   /* tweak → aligns with your button area */
  --wm-ctrl-bottom-gap:  12px;   /* default bottom gap */
  --wm-drawer-offset:    56px;   /* extra lift when drawer visible */
}

/* Geocoder spacing in bottom-left */
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-geocoder{
  margin-left:  var(--wm-ctrl-left-gutter);
  margin-bottom:var(--wm-ctrl-bottom-gap);
  transition: margin 120ms ease;
}