/* ---- Size knobs ---- */
			#usm {
			  --map-max-width: 1500px;
			  --map-height-vh: 100%;
			  --map-min-height: 540px;
			  --inset-width: 13%;
			  --inset-min-width: 120px;
			  --inset-aspect:  5 / 3;
			  margin-top: 3rem;
			}
			
			/* Map canvas */
			#usm .us-map-wrap {
			  position: relative;
			  width: 100%;
			  max-width: var(--map-max-width);
			  margin: 0 auto;
			}
			
			/* Keep maps tight and responsive (CONUS only) */
			#usm .map {
			  width: 100%;
			  height: var(--map-height-vh);
			  min-height: var(--map-min-height);
			  border: 1px solid #ddd;
			  background: #fff;
			}
			
			/* Leaflet containers fill their parent boxes */
			#usm #map-conus,
			#usm #map-pr, 
			#usm #map-ak, 
			#usm #map-hi
            {
			  width: 100%;
			  height: 100%;
			}
			
			/* Insets */
			#usm .inset {
			  position: absolute;
			  width: var(--inset-width);
			  aspect-ratio: 4/3;
			  min-width: var(--inset-min-width);
			  background: #fff;
			  z-index: 2;
			  overflow: hidden;
			}
			#usm .inset-ak { left:-20%; bottom: 60%;  width: 30%; height: 230px; padding-bottom: 3rem; }
			#usm .inset-hi { left: -5%; bottom: 15%;  width: 22%; }
			#usm .inset-pr { right: 10%; bottom: -10%; width:23%;}
			
/*			#usm .inset-pr { right:22%; bottom: -2%; width: 18%;}   */
			 }
			
			/* East-coast legend */
			#usm .legend-eastcoast {
			  position: absolute;
			  top: 5%;
			  right: 5%;
			  list-style: none;
			  margin: 0;
			  padding: .5rem .75rem;
			  max-width: 160px;
			  background: transparent;
			  border: none;
			  z-index: 3;
			  pointer-events: auto;
			}
			
			#usm .legend-eastcoast li { cursor: pointer; font-size: .9rem; }
			#usm .legend-eastcoast li.selected { color: #000; }
			
			/* Leaflet look & labels (scoped) */
			#usm .leaflet-container { background: #fff; border: none; }
			#usm .state-label {
			  background: transparent; border: 0; color: #222;
			  font-weight: 600; font-size: 9px; pointer-events: none;
			}
			
			/* Region legend */
			#usm .region-legend{
			  position:absolute; right:1.5rem; top:5%;
			  background:#fff; border:1px solid #ddd; border-radius:10px;
			  box-shadow:0 2px 10px rgba(0,0,0,.08);
			  padding:8px 10px; z-index:600;
			  font:13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
			}
			#usm .region-legend ul{ margin:0; padding:0; list-style:none; }
			#usm .region-legend li{ display:flex; align-items:center; gap:8px; margin:4px 0; }
			#usm .region-legend .swatch{ width:14px; height:14px; border-radius:3px; border:1px solid rgba(0,0,0,.2); }
			
			/* Territories legend as a SEPARATE card (same width) */
			#usm .legend-territories{
			  position:absolute; right:-2%; top:110%;
			  width:var(--legend-card-w);
			  list-style:none; margin:0; padding:.45rem .6rem;
			  background:#fff; border:1px solid #ddd; border-radius:10px;
			  box-shadow:0 2px 10px rgba(0,0,0,.06);
			  z-index:600;
			  font:12px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
			}
			
			#usm .legend-territories li{
			  display:flex; align-items:flex-start; gap:8px;
			  margin:4px 0; cursor:pointer;
			  padding-left: .5rem !important;
			}
			
			#usm .legend-territories .abbr{
			  display:inline-block; min-width:22px; text-align:center; font-weight:700;
			  padding:2px 4px; border-radius:4px; background:#eee;
			  border:1px solid rgba(0,0,0,.15); flex:0 0 auto;
			}
			
			#usm .legend-territories .name{
			  white-space:normal;            /* allow wrapping */
			  overflow-wrap:anywhere;        /* break long words if needed */
			  word-break:break-word;
			  flex:1 1 auto;
			}
			
			/* Hover/selected affordances */
			#usm .legend-territories li:hover { background:rgba(0,0,0,.04); border-radius:6px; }
			#usm .legend-territories li.selected { outline:1px solid #333; border-radius:6px; }
			
			
			/* Small screens: stack it a bit lower and narrow the names */
			@media (max-width: 992px){
			  #usm .legend-territories{
			    right:12%;
			    top:56%;
			    max-width: 220px;
			  }
			  #usm .legend-territories .name{
			    max-width:140px;
			  }
			}
			
			/* Very small screens: dock to the right edge */
			@media (max-width: 600px){
			  #usm .legend-territories{
			    right:6%;
			    top:58%;
			    max-width: 200px;
			    padding:.4rem .5rem;
			  }
			}
						
		#usm .legend-title{
		  font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em;
		  color:#333; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid #eee;
		}
		#usm .legend-territories .legend-title{ cursor:default; }			
			
			