/*
 * @purpose Map panels, quiet by default (Cobalt full revision, 2026-10-05): Lens, Globe, Map symbols and the layer list
 *   open one at a time as a compact glass popover (right edge; phone: above the dock); chips readable in both themes;
 *   line-icon close buttons; the attribution as quiet text, not a circled button.
 * @owner Overwatch module (jcom_v0bb_overwatch). Replaces the wm01 chrome of the same file name (3b306b8).
 * @inputs body.ow-cd (events-sheet.js), body.ow-mp (map-buttons.js), cobalt/cobalt-tokens.css tokens.
 * @outputs Presentation only.
 * @seam ?cd=0 leaves both classes off, so every rule here is idle.
 * Contrast (computed, WCAG): text over the map sits on --glass-strong (92%) with --ink / --muted: light 13.6:1 / 4.95:1,
 *   dark 14.0:1 / 8.2:1 against a worst-case backdrop (black under light glass, white under dark glass). Pressed chip
 *   (accent wash on --card) with --ink: light 14.5:1, dark 10.1:1; chip counts in --muted on --card: 6.3:1 / 9.1:1.
 */

/* ---------- the four panels: closed unless asked for, then one compact popover ---------- */
body.ow-mp #mapView.ow-map-host :is(#owLenses,#owGlobeControls,#owMapLegend,#layerPanel){display:none!important}
body.ow-mp #owPhoneDrawerHost{display:contents!important}
body.ow-mp #mapView.ow-map-host :is(#owLenses,#owGlobeControls,#owMapLegend,#layerPanel)[data-ow-overlay-decorated="1"]:not([hidden]):not(.ow-overlay-collapsed),
body.ow-mp #mapView.ow-map-host :is(#owGlobeControls,#layerPanel).ow-cb-show:not([hidden]){
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;
  position:absolute!important;z-index:34!important;inset:auto!important;top:8px!important;right:calc(8px + var(--overlay-right))!important;left:auto!important;bottom:auto!important;
  width:auto!important;min-width:220px!important;max-width:min(320px,calc(100% - 16px - var(--overlay-left) - var(--overlay-right)))!important;
  height:auto!important;max-height:calc(100% - 16px - 56px - var(--safe-b))!important;
  margin:0!important;padding:0 0 8px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;
  border:1px solid var(--glass-line)!important;border-radius:var(--r-sheet)!important;box-shadow:var(--shadow)!important;
  background:var(--glass-strong)!important;-webkit-backdrop-filter:var(--blur)!important;backdrop-filter:var(--blur)!important;
  color:var(--ink)!important;font:400 var(--fs-body)/1.45 var(--font)!important;transform:none!important;
  transition:right var(--dur) var(--ease);
}
@media (prefers-reduced-transparency:reduce){
  body.ow-mp #mapView.ow-map-host :is(#owLenses,#owGlobeControls,#owMapLegend,#layerPanel){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* phone: the popover sits above the dock, full width less the gutters, at most half the frame */
body.ow-mp.ow-cb-phone #mapView.ow-map-host :is(#owLenses,#owGlobeControls,#owMapLegend,#layerPanel)[data-ow-overlay-decorated="1"]:not([hidden]):not(.ow-overlay-collapsed),
body.ow-mp.ow-cb-phone #mapView.ow-map-host :is(#owGlobeControls,#layerPanel).ow-cb-show:not([hidden]){
  position:fixed!important;top:auto!important;left:8px!important;right:8px!important;bottom:calc(62px + var(--safe-b))!important;
  min-width:0!important;max-width:none!important;max-height:50dvh!important;z-index:36!important;
}
body.ow-mp #mapView.ow-map-host :is(#owLenses,#owGlobeControls,#owMapLegend,#layerPanel) *{max-width:100%;box-sizing:border-box}

/* head: label left, line-icon close right, in flow */
body.ow-mp #mapView.ow-map-host :is(#owLenses,#owGlobeControls,#owMapLegend,#layerPanel) .ow-overlay-head{
  position:sticky!important;top:0;z-index:1;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px;
  margin:0!important;padding:6px 6px 4px 12px!important;border:0!important;background:var(--glass-strong)!important;min-height:0!important}
body.ow-mp #mapView.ow-map-host :is(#owLenses,#owGlobeControls,#owMapLegend,#layerPanel) .ow-overlay-title{margin:0!important;color:var(--muted)!important;font:700 var(--fs-label)/1 var(--font)!important;letter-spacing:.08em!important;text-transform:uppercase!important}
body.ow-mp #mapView.ow-map-host #layerPanel > h2{margin:0;padding:8px 12px 4px;color:var(--muted);font:700 var(--fs-label)/1 var(--font);letter-spacing:.08em;text-transform:uppercase}

/* close and dismiss buttons: a line icon in a quiet square, never a glyph in a circle */
body.ow-mp .ow-mp-x,body.ow-cd .ow-cb-x,body.ow-cd #owEventsDrawer .ow-overlay-min.c-x,body.ow-cd #mapView.ow-map-host #owEventPanel .c-x{
  position:relative!important;display:inline-grid!important;place-items:center!important;flex:none!important;
  width:var(--ctl)!important;height:var(--ctl)!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:var(--r-ctl)!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;font:0/0 a!important;cursor:pointer}
body.ow-mp .ow-mp-x:hover,body.ow-cd .ow-cb-x:hover,body.ow-cd #owEventsDrawer .ow-overlay-min.c-x:hover,body.ow-cd #mapView.ow-map-host #owEventPanel .c-x:hover{background:var(--accent-subtle)!important;color:var(--ink)!important}
body.ow-mp .ow-mp-x::after,body.ow-cd .ow-cb-x::after{content:"";position:absolute;inset:-8px}
body.ow-mp .ow-mp-x .c-ico,body.ow-cd .ow-cb-x .c-ico,body.ow-cd .c-x .c-ico{width:14px;height:14px}
/* the info control beside "unavailable": a line icon, no ring */
body.ow-cd .ow-cb-info{border-radius:var(--r-ctl)!important;width:20px!important;height:20px!important;vertical-align:-4px}
body.ow-cd .ow-cb-info .c-ico{width:14px;height:14px}
body.ow-cd #owEventPanel .ow-cb-back{display:inline-flex!important;align-items:center;gap:3px}
body.ow-cd #owEventPanel .ow-cb-back .c-ico{width:14px;height:14px}
body.ow-cd #owEventPanel .ow-event-share-btn .c-ico{width:14px;height:14px}

/* ---------- Lens: chips that wrap (no sideways scroll), line icon, name, layer count ---------- */
body.ow-mp #owLenses .ow-lens-row{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important;padding:2px 12px 0!important;margin:0!important;overflow:visible!important;width:auto!important}
body.ow-mp #owLenses .ow-lens-strip{display:flex!important;flex-wrap:wrap!important;gap:6px!important;padding:0!important;margin:0!important;overflow:visible!important;width:auto!important;max-width:100%!important;mask-image:none!important;-webkit-mask-image:none!important}
body.ow-mp #owLenses .ow-lens{
  display:inline-flex!important;align-items:center!important;gap:6px!important;flex:none!important;width:auto!important;
  height:var(--ctl)!important;min-height:0!important;min-width:0!important;padding:0 10px!important;margin:0!important;
  border:1px solid var(--rule)!important;border-radius:var(--r-ctl)!important;background:var(--card)!important;box-shadow:none!important;
  color:var(--ink)!important;font:400 12px/1 var(--font)!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap!important}
body.ow-mp #owLenses .ow-lens:hover{background:var(--accent-subtle)!important}
body.ow-mp #owLenses .ow-lens[aria-pressed="true"],body.ow-mp #owLenses .ow-lens.is-active{border-color:var(--cobalt)!important;background:var(--accent-subtle)!important;color:var(--ink)!important;font-weight:700!important}
body.ow-mp #owLenses .ow-lens[data-blocked]{border-style:dashed!important;color:var(--muted)!important}
body.ow-mp #owLenses .ow-mp-count{color:var(--muted);font:400 11px/1 var(--mono);font-variant-numeric:tabular-nums}
body.ow-mp #owLenses .ow-lens[data-blocked] .ow-mp-count{font-family:var(--font)}
body.ow-mp #owLenses .ow-mp-reset{border-color:transparent!important;background:transparent!important;color:var(--link)!important;font-weight:700!important;text-decoration:underline}
body.ow-mp #owLenses .ow-lens-note{margin:6px 12px 0!important;padding:0!important;color:var(--muted)!important;font-size:11px!important;line-height:1.4!important;min-height:0!important;height:auto!important}
body.ow-mp #owLenses .ow-lens-note:empty{display:none!important}
body.ow-mp .ow-mp-ico{fill:none}

/* ---------- Globe: toggles say their state with a dot and a word; everything wraps ---------- */
body.ow-mp #owGlobeControls .ow-g-buttons{display:flex!important;flex-wrap:wrap!important;gap:6px!important;padding:2px 12px 0!important;margin:0!important;overflow:visible!important}
body.ow-mp #owGlobeControls .ow-g-btn{
  display:inline-flex!important;align-items:center!important;gap:6px!important;flex:none!important;width:auto!important;
  height:var(--ctl)!important;min-height:0!important;min-width:0!important;padding:0 10px!important;margin:0!important;
  border:1px solid var(--rule)!important;border-radius:var(--r-ctl)!important;background:var(--card)!important;box-shadow:none!important;
  color:var(--ink)!important;font:400 12px/1 var(--font)!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap!important}
body.ow-mp #owGlobeControls .ow-g-btn:hover{background:var(--accent-subtle)!important}
body.ow-mp #owGlobeControls .ow-g-btn[aria-pressed="true"],body.ow-mp #owGlobeControls .ow-g-btn[data-on="yes"]{border-color:var(--cobalt)!important;background:var(--accent-subtle)!important;font-weight:700!important}
body.ow-mp #owGlobeControls .ow-mp-dot{width:7px;height:7px;flex:none;border-radius:50%;border:1.5px solid var(--muted);background:transparent}
body.ow-mp #owGlobeControls [aria-pressed="true"] .ow-mp-dot,body.ow-mp #owGlobeControls [data-on="yes"] .ow-mp-dot{border-color:var(--good);background:var(--good)}
body.ow-mp #owGlobeControls .ow-g-btn[data-g="spin"]{order:1}
body.ow-mp #owGlobeControls .ow-g-btn[data-g="sat"]{order:2}
body.ow-mp #owGlobeControls .ow-g-btn[data-g="dn"]{order:3}
body.ow-mp #owGlobeControls .ow-mp-rate{order:4}
body.ow-mp #owGlobeControls .ow-g-btn[data-g="earth"]{order:5}
body.ow-mp #owGlobeControls .ow-g-btn[data-g="motion"]{order:6}
body.ow-mp #owGlobeControls .ow-g-btn[data-g="location"]{order:7}
body.ow-mp #owGlobeControls .ow-mp-rate{display:inline-flex;align-items:center;flex:none;height:var(--ctl);border:1px solid var(--rule);border-radius:var(--r-ctl);background:var(--card);overflow:hidden}
body.ow-mp #owGlobeControls .ow-mp-rate .c-ico-btn{border-radius:0}
body.ow-mp #owGlobeControls .ow-mp-rate-read{padding:0 6px;color:var(--ink);font:400 11px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
body.ow-mp #owGlobeControls .ow-g-rate{display:none!important}
body.ow-mp #owGlobeControls .ow-g-padmount:empty{display:none!important}
body.ow-mp #owGlobeControls .ow-g-exact{margin:8px 12px 0!important;padding:0!important;border:0!important;background:none!important;color:var(--muted);font-size:11px}
body.ow-mp #owGlobeControls .ow-g-exact summary{cursor:pointer;color:var(--link);font-weight:700}
body.ow-mp #owGlobeControls .ow-g-exact label{display:inline-flex;align-items:center;gap:4px;margin:6px 8px 0 0;color:var(--ink)}
body.ow-mp #owGlobeControls .ow-g-exact input{width:90px;height:var(--ctl);padding:0 6px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:var(--card);color:var(--ink);font:400 16px/1 var(--mono)}

/* ---------- Map symbols: plain rows ---------- */
body.ow-mp #owMapLegend .ow-map-legend-list{display:grid!important;grid-auto-flow:row!important;gap:2px!important;padding:2px 12px 0!important;margin:0!important;width:auto!important}
body.ow-mp #owMapLegend .ow-map-legend-item{display:flex!important;align-items:center!important;gap:8px!important;min-height:24px;width:auto!important;padding:0!important;border:0!important;background:none!important}
body.ow-mp #owMapLegend .ow-map-legend-label{color:var(--ink)!important;font:400 12.5px/1.3 var(--font)!important;white-space:normal!important}
body.ow-mp #owMapLegend .ow-map-legend-hint{display:none!important}

/* ---------- layer list (embed: the sidebar's Layers tab; standalone: "All layers and editor") ---------- */
body.ow-mp #mapView.ow-map-host #layerPanel #layers{padding:0 12px;color:var(--ink)}
body.ow-mp #mapView.ow-map-host #layerPanel #mapStatus{margin:8px 12px 0;color:var(--muted);font-size:11px}
body.ow-mp #mapView.ow-map-host #layerPanel *{color:inherit}
body.ow-mp #mapView.ow-map-host #layerPanel :is(section,details,fieldset,.ow-layer-group,.ow-layer-editor-tools,.ow-profile-controls){margin:6px 0!important;padding:6px 0!important;border:0!important;border-top:1px solid var(--line-soft)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body.ow-mp #mapView.ow-map-host #layerPanel :is(label,summary,h3,h4,strong){color:var(--ink)!important;font-size:12.5px}
body.ow-mp #mapView.ow-map-host #layerPanel :is(p,small,.ow-layer-note){color:var(--muted)!important;font-size:11px!important;line-height:1.45}
body.ow-mp #mapView.ow-map-host #layerPanel button{height:var(--ctl)!important;min-height:0!important;min-width:0!important;padding:0 8px!important;border:1px solid var(--rule)!important;border-radius:var(--r-ctl)!important;background:var(--card)!important;color:var(--ink)!important;box-shadow:none!important;font:400 12px/1 var(--font)!important;text-transform:none!important;letter-spacing:0!important}
body.ow-mp #mapView.ow-map-host #layerPanel button.ow-mp-x{border:0!important;background:transparent!important}
body.ow-mp #mapView.ow-map-host #layerPanel :is(input[type=text],input[type=search],input:not([type]),select){height:var(--ctl);min-height:0;padding:0 8px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:var(--card);color:var(--ink);font:400 16px/1 var(--font)}
body.ow-mp #mapView.ow-map-host #layerPanel input[type=checkbox]{accent-color:var(--cobalt)}

/* ---------- the right-hand control stack is gone: the dock carries zoom, North, Reset and Rotate ---------- */
body.ow-mp #mapView.ow-map-host .maplibregl-ctrl-top-right{display:none!important}

/* ---------- one filter system: the events drawer chips; the bottom category strip and the legacy timeline stay off ---------- */
body.ow-mp #mapView.ow-map-host #owEventRail,body.ow-mp #mapView.ow-map-host #owTimeline,body.ow-mp #mapView.ow-map-host .ow-map-status-stack{display:none!important}

/* chips: ink on card, pressed = accent wash + ink (both themes, on the 92% glass) */
body.ow-cd #owEventsDrawer .c-chips.ow-cb-chips{flex-wrap:wrap;overflow:visible;gap:5px}
body.ow-cd.ow-cb-phone #owEventsDrawer .c-chips.ow-cb-chips{flex-wrap:nowrap;overflow-x:auto}
body.ow-cd #owEventsDrawer .c-chip{background:var(--card)!important;border-color:var(--rule)!important;color:var(--ink)!important}
body.ow-cd #owEventsDrawer .c-chip .ow-cb-n{color:var(--muted)!important}
body.ow-cd #owEventsDrawer .c-chip[aria-pressed="true"]{background:var(--accent-subtle)!important;border-color:var(--cobalt)!important;color:var(--ink)!important;font-weight:700!important}
body.ow-cd #owEventsDrawer .c-chip[aria-pressed="true"] .ow-cb-n{color:var(--ink)!important}
body.ow-cd .ow-cb-module .c-chip[aria-pressed="true"]{color:var(--ink)!important}

/* ---------- a shell hosts the map: its right sidebar (page 1) is the module panel ---------- */
body.ow-mp.ow-shell-hosted .ow-cb-module,body.ow-mp.ow-shell-hosted .ow-cb-open{display:none!important}

/* ---------- attribution: quiet text in the corner, no circled button ---------- */
body.ow-mp .maplibregl-ctrl-attrib-button{display:none!important}
body.ow-mp .maplibregl-ctrl-attrib{margin:0 8px 4px 0!important;padding:1px 6px!important;min-height:0!important;border-radius:var(--r-ctl)!important;background:var(--glass-strong)!important;color:var(--muted)!important;font:400 10px/1.4 var(--font)!important;max-width:min(420px,calc(100vw - 32px))}
body.ow-mp .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner{display:block!important;color:var(--muted)!important}
body.ow-mp .maplibregl-ctrl-attrib a{color:var(--muted)!important}
body.ow-mp.ow-cb-phone .maplibregl-ctrl-bottom-right{bottom:calc(62px + var(--safe-b))}
body.ow-mp.ow-cb-phone.ow-cb-events-open .maplibregl-ctrl-bottom-right{display:none}

/* ---------- the dock: share sits with the view controls ---------- */
body.ow-cd .ow-cb-dock .ow-cb-share{color:var(--ink)}

/* coarse pointers: 44px touch regions on every control here */
@media (pointer:coarse){
  body.ow-mp #owLenses .ow-lens,body.ow-mp #owGlobeControls .ow-g-btn,body.ow-mp #owGlobeControls .ow-mp-rate{height:var(--hit)!important}
  body.ow-mp .ow-mp-x,body.ow-cd .ow-cb-x,body.ow-cd #owEventsDrawer .ow-overlay-min.c-x,body.ow-cd #mapView.ow-map-host #owEventPanel .c-x{width:var(--hit)!important;height:var(--hit)!important}
}
@media (prefers-reduced-motion:reduce){
  body.ow-mp #mapView.ow-map-host :is(#owLenses,#owGlobeControls,#owMapLegend,#layerPanel){transition:none!important}
}
/* phone dock: Now and the time stay pinned over the scrolled controls, edge to edge (the dock's own padding no longer shows them) */
body.ow-cd.ow-cb-phone .ow-cb-dock .ow-cb-pin{position:sticky!important;right:-8px!important;z-index:3;margin-right:-8px;padding:0 8px 0 6px!important;align-self:stretch;background:var(--glass-strong)!important;box-shadow:-8px 0 8px -2px var(--glass-strong)}
body.ow-cd.ow-cb-phone .ow-cb-dock .ow-cb-scrub{position:relative;z-index:0}
/* a narrowed dock (shell panels open beside the map): Track, Spin, Zap, Reset, Rotate, Events and Share keep their icons
   and aria-labels; Space dreidel keeps its word, so the label and place match Weapons */
body.ow-mp.ow-mp-tight .ow-cb-dock :is(.ow-cb-wide,.ow-cb-icononly,.ow-cb-evbtn) span,body.ow-mp.ow-mp-tight .ow-cb-dock .ow-cb-zoomv{display:none}
body.ow-mp.ow-mp-tight .ow-cb-dock .c-btn{padding:0 7px}

/* Globe panel reads controls first; the touch motion pad sits last, under its own buttons. */
body.ow-mp #owGlobeControls .ow-overlay-head{order:-1}
body.ow-mp #owGlobeControls .ow-g-buttons{order:1}
body.ow-mp #owGlobeControls .ow-g-exact{order:2}
body.ow-mp #owGlobeControls .ow-g-padmount{order:3;margin:8px 12px 0}
/* Share (the paper airplane): a 44px touch target on phones (owner 2026-10-06). */
body.ow-cd :is(.ow-cb-share,.ow-event-share-btn)::after{width:max(100%,44px);height:max(100%,44px)}