.measurement-map { border: 1px solid #d4dfd8; border-radius: 18px; background: #fff; overflow: hidden; margin: 1.25rem 0; color: #263e33; }
.measurement-map-header { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: 1.35rem 1.5rem 1rem; }
.measurement-map-eyebrow { font-size: .69rem; text-transform: uppercase; letter-spacing: .12em; color: #63766b; font-weight: 700; }
.measurement-map-header h2 { margin: .3rem 0; font-size: 1.3rem; }
.measurement-map-header p { margin: 0; font-size: .8rem; color: #677b70; }
.measurement-map-header label { display: grid; gap: .35rem; min-width: 200px; font-size: .76rem; }
.measurement-map-header select { width: 100%; border: 1px solid #bbcfc2; border-radius: 8px; padding: .65rem .8rem; background: #fff; color: inherit; }
.measurement-map-summary { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; align-items: baseline; padding: 0 1.5rem 1rem; font-size: .8rem; }
.measurement-map-summary strong { font-size: 1.6rem; }
.measurement-map-summary strong span { font-size: .8rem; font-weight: 500; }
.measurement-map-warning { color: #855a18; }
.measurement-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; border-block: 1px solid #dce5df; }
.measurement-map-stage { position: relative; min-width: 0; background: #e9eee7; }
.measurement-map-canvas { height: 450px; width: 100%; }
.measurement-map .mapboxgl-canvas { outline-offset: -3px; }
.measurement-map .mapboxgl-ctrl button { padding: 0; border: 0; border-radius: 0; }
.measurement-map .mapboxgl-popup-content { max-width: 250px; font: 600 .8rem/1.4 system-ui, sans-serif; padding: .8rem; }
.measurement-map-fit { position: absolute; top: 12px; left: 12px; border: 1px solid #b8c8be; background: #fff; color: #264d3c; border-radius: 8px; padding: .55rem .7rem; font: 600 .76rem system-ui, sans-serif; box-shadow: 0 2px 8px #173c2b12; }
.measurement-map-status { position: absolute; left: 12px; right: 48px; bottom: 30px; padding: .7rem .9rem; margin: 0; border-radius: 8px; background: #fffef7ed; font-size: .8rem; pointer-events: none; }
.measurement-map-status[hidden] { display: none; }
.measurement-map-aside { min-width: 0; background: #f8faf7; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 450px; }
.measurement-map-detail { padding: 1.2rem; border-bottom: 1px solid #dce5df; }
.measurement-map-detail h3 { margin: .4rem 0 .65rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.measurement-map-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.measurement-map-value span { font-size: .76rem; font-weight: 400; }
.measurement-map-detail p, .measurement-map-detail small { font-size: .73rem; color: #61776a; line-height: 1.5; }
.measurement-map-channels { display: flex; justify-content: space-between; gap: .6rem; margin: .9rem 0 .6rem; }
.measurement-map-channels dt { color: #64776d; font-size: .68rem; }
.measurement-map-channels dd { margin: .2rem 0 0; font-size: .95rem; font-weight: 600; }
.measurement-map-list { overflow-y: auto; padding: .45rem; }
.measurement-map-list button { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: .65rem .75rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #395247; font: .76rem/1.35 system-ui, sans-serif; text-align: left; }
.measurement-map-list button[aria-pressed=true] { background: #e5eee8; border-color: #b8ccbf; color: #1c4f37; }
.measurement-map-list button:hover { background: #edf2ed; }
.measurement-map-legend { padding: .9rem 1.5rem; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.2rem; font-size: .73rem; color: #556d60; }
.measurement-map-legend span { display: flex; align-items: center; gap: .4rem; }
.measurement-map-legend circle { fill: #756caa; fill-opacity: .65; stroke: white; stroke-width: 1; }
.measurement-map:not(.is-checkins) .measurement-map-legend circle { fill: #16765d; }
.measurement-map-legend i { width: 10px; height: 10px; border: 2px solid #677b73; border-radius: 50%; }
.measurement-map-legend small { flex-basis: 100%; }
.measurement-map-method { padding: .8rem 1.5rem; border-top: 1px solid #e1e8e2; font-size: .76rem; color: #63766a; line-height: 1.6; }
.measurement-map-method summary { cursor: pointer; font-weight: 600; color: #375746; }
.measurement-map-empty { padding: 1rem 1.5rem; color: #63766a; font-size: .85rem; }
@media (max-width: 1000px) {
  .measurement-map-layout { grid-template-columns: 1fr; }
  .measurement-map-canvas { height: 380px; }
  .measurement-map-aside { height: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; border-top: 1px solid #dce5df; }
  .measurement-map-list { max-height: 260px; }
}
@media (max-width: 580px) {
  .measurement-map-header { display: grid; padding: 1rem; }
  .measurement-map-header label { min-width: 0; }
  .measurement-map-summary, .measurement-map-legend, .measurement-map-method { padding-inline: 1rem; }
  .measurement-map-canvas { height: 340px; }
  .measurement-map-aside { grid-template-columns: 1fr; }
  .measurement-map-list { max-height: 170px; }
}