/* Stage 29 — coherent, responsive map workspace layout. */
:root { --saj-ui-gap:8px; --saj-ui-radius:12px; }
#root { min-width:0; }
/* Top editing toolbar: retain every tool, give controls predictable hit areas. */
#root div[style*="z-index: 10003"][id="jnaf-editing-toolbar-stage13"],
#root div[style*="z-index: 10003"]:has(> button) {
  box-sizing:border-box !important; max-width:calc(100vw - 220px) !important;
  min-width:0 !important; gap:7px !important; padding:7px 9px !important;
  align-items:center !important; justify-content:flex-start !important;
  flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important;
  scrollbar-width:thin !important; overscroll-behavior-x:contain !important;
  -webkit-overflow-scrolling:touch !important;
}
#root div[style*="z-index: 10003"][id="jnaf-editing-toolbar-stage13"] button,
#root div[style*="z-index: 10003"]:has(> button) button {
  box-sizing:border-box !important; flex:0 0 auto !important; min-height:36px !important;
  min-width:38px !important; max-width:190px !important; padding:6px 10px !important;
  border-radius:10px !important; line-height:1.25 !important; white-space:nowrap !important;
  font-size:12px !important; gap:6px !important; touch-action:manipulation !important;
}
#root div[style*="z-index: 10003"] button svg { flex:0 0 auto !important; width:15px !important; height:15px !important; }
/* Right drawer: compact, scroll internally, never cover the entire map on desktop. */
#root #jnaf-tools-layers-drawer-stage13 { box-sizing:border-box !important; width:min(310px,31vw) !important; max-width:calc(100vw - 18px) !important; }
#root #jnaf-tools-layers-drawer-stage13[data-stage13-open="true"] { width:min(310px,31vw) !important; }
#root #jnaf-tools-layers-drawer-stage13 > div:not(:first-child) { min-width:0 !important; }
#root #jnaf-tools-layers-drawer-stage13 button { min-height:34px !important; max-width:100% !important; }
/* Floating map actions: aligned stack with smaller, consistent touch targets. */
#root div[style*="bottom: 90px"][style*="left: 12px"][style*="z-index: 10001"] {
  bottom:78px !important; left:12px !important; gap:8px !important;
}
#root div[style*="bottom: 90px"][style*="left: 12px"][style*="z-index: 10001"] > button {
  width:42px !important; min-width:42px !important; height:42px !important; min-height:42px !important;
  border-width:1px !important; border-radius:12px !important; font-size:22px !important;
}
/* Keep map widgets and attribution clear of the drawer and screen edges. */
#root .leaflet-control-container .leaflet-bottom { bottom:8px !important; }
#root .leaflet-control-container .leaflet-left { left:8px !important; }
#root .leaflet-control-container .leaflet-right { right:8px !important; }
#root button, #root select, #root input { touch-action:manipulation; }
@media (max-width:1100px) {
  #root div[style*="z-index: 10003"][id="jnaf-editing-toolbar-stage13"],
  #root div[style*="z-index: 10003"]:has(> button) { max-width:calc(100vw - 90px) !important; }
  #root #jnaf-tools-layers-drawer-stage13,
  #root #jnaf-tools-layers-drawer-stage13[data-stage13-open="true"] { width:min(300px,38vw) !important; }
}
@media (max-width:700px) {
  #root div[style*="z-index: 10003"][id="jnaf-editing-toolbar-stage13"],
  #root div[style*="z-index: 10003"]:has(> button) {
    top:8px !important; left:8px !important; right:58px !important; width:auto !important;
    max-width:none !important; max-height:58px !important; padding:6px !important;
    border-radius:13px !important;
  }
  #root div[style*="z-index: 10003"] button { min-height:38px !important; padding:6px 8px !important; font-size:11px !important; }
  #root #jnaf-tools-layers-drawer-stage13,
  #root #jnaf-tools-layers-drawer-stage13[data-stage13-open="true"] {
    top:70px !important; right:6px !important; left:auto !important;
    width:min(310px,calc(100vw - 12px)) !important; max-width:calc(100vw - 12px) !important;
    height:calc(100% - 80px) !important; max-height:calc(100% - 80px) !important;
  }
  #root div[style*="bottom: 90px"][style*="left: 12px"][style*="z-index: 10001"] {
    bottom:82px !important; left:8px !important; gap:6px !important;
  }
  #root div[style*="bottom: 90px"][style*="left: 12px"][style*="z-index: 10001"] > button {
    width:38px !important; min-width:38px !important; height:38px !important; min-height:38px !important; font-size:20px !important;
  }
}
@media (max-width:390px) {
  #root div[style*="z-index: 10003"] button { min-width:34px !important; padding:5px 6px !important; }
  #root #jnaf-tools-layers-drawer-stage13,
  #root #jnaf-tools-layers-drawer-stage13[data-stage13-open="true"] { width:calc(100vw - 12px) !important; }
}