.view-switch { display:flex; gap:6px; margin:0 0 12px; }
.view-switch button { flex:1; padding:9px; font-size:18px; color:#263b35; background:#e3e8e4; border:1px solid #8b9992; border-radius:5px; }
.view-switch button[aria-pressed="true"] { background:#314754; color:white; border-color:#172b34; }
.view-switch button:hover { outline:2px solid #526d60; outline-offset:1px; }
#directory-toggle, #map-node-toggle { display:none; }
#map-view { flex:1; min-height:0; position:relative; display:flex; flex-direction:column; background:#f5f6f3; overflow:hidden; }
#map-view[hidden], #messages[hidden] { display:none; }
.map-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:8px 12px; border-bottom:1px solid #adb5b0; flex-shrink:0; }
.map-toolbar button { border:1px solid #788c81; background:#fff; padding:6px 10px; }
.map-toolbar label { display:flex; gap:6px; align-items:center; }
.map-toolbar input { width:20px; height:20px; }
.map-toolbar select { font:16px var(--font); color:#263b35; background:#fff; border:1px solid #788c81; min-height:36px; max-width:190px; }
.map-link-legend { display:flex; flex-wrap:wrap; gap:6px 18px; padding:6px 12px; font-size:16px; background:#edf0f3; }
.map-link-legend .key-relay::before, .map-link-legend .key-direct::before { content:''; display:inline-block; vertical-align:middle; width:24px; margin-right:6px; }
.map-link-legend .key-relay::before { border-top:3px dashed #70459a; }
.map-link-legend .key-direct::before { border-top:3px solid #17683e; }
#map-routes { padding:6px 12px; border-top:1px solid #c5ceca; font-size:16px; background:#f5f6f3; }
#map-routes summary { cursor:pointer; min-height:26px; }
#map-routes p { margin:8px 0; line-height:1.5; }
#map-route-list { max-height:160px; overflow:auto; padding-left:22px; margin:8px 0; }
#map-route-list li { margin:8px 0; line-height:1.5; }
.map-popup-links { border-top:1px solid #a9b9af; padding-top:10px; }
.map-popup-links h4 { margin:0 0 6px; font-size:18px; }
.map-popup-links ul { margin:6px 0; padding-left:20px; }
.map-popup-links p, .map-popup-links li { margin:6px 0; font-size:16px; line-height:1.5; }
.map-link-label { font:16px/1.4 var(--font); color:#263b35; }
#map-count { font-size:16px; color:#263b35; }
#node-map { flex:1; min-height:0; background:#dce5e9; isolation:isolate; color:#263b35; }
#node-map:focus-visible { outline:3px solid #1d573e; outline-offset:-3px; }
.map-legend { display:flex; flex-wrap:wrap; gap:5px 18px; padding:6px 12px; font-size:16px; border-top:1px solid #adb5b0; }
.map-selection { flex-shrink:0; padding:8px 12px; font-size:16px; line-height:1.5; background:#e3e8e4; border-bottom:1px solid #adb5b0; }
.map-activity-note { padding:6px 12px; font-size:16px; line-height:1.5; color:#263b35; background:#f5f6f3; }
.legend-ours { color:#17683e; }
.legend-peer { color:#185ca0; }
#map-missing, .map-credit { padding:6px 12px; font-size:16px; border-top:1px solid #c5ceca; }
#map-missing summary, .map-credit summary { cursor:pointer; min-height:26px; }
#map-missing-list { display:flex; flex-wrap:wrap; gap:4px 16px; padding:0; list-style:none; max-height:150px; overflow:auto; margin:8px 0; }
.map-credit p { margin:8px 0; font-size:16px; line-height:1.5; }
.map-attribution { margin:0; padding:6px 12px; font-size:16px; line-height:1.4; color:#344b40; background:#e7ede8; }
.radio-map-marker { background:transparent; border:0; }
.map-marker-symbol { display:block; width:32px; height:32px; line-height:28px; text-align:center; color:#185ca0; background:white; border:2px solid #233c4a; border-radius:50%; font-size:24px; box-shadow:0 1px 4px #45585b; }
.map-marker-symbol.ours { color:#17683e; border-color:#17683e; border-radius:5px; }
.activity-active, .map-marker-symbol.activity-active { color:#17603b; }
.activity-quiet, .map-marker-symbol.activity-quiet { color:#805000; }
.activity-inactive, .map-marker-symbol.activity-inactive { color:#505b65; }
.map-marker-symbol.activity-active { background:#e0f2e4; border-color:#17603b; }
.map-marker-symbol.activity-quiet { background:#fff0c7; border-color:#805000; }
.map-marker-symbol.activity-inactive { background:#e6e9eb; border-color:#505b65; }
.map-marker-symbol.activity-unknown { color:#505b65; background:#fff; border:2px dashed #505b65; }
.map-activity { font-size:18px; font-weight:600; }
.radio-map-marker:focus-visible .map-marker-symbol { outline:4px solid #141b18; outline-offset:3px; }
#node-map .radio-map-label { font:600 16px/1.4 system-ui,sans-serif; color:#1c3029; background:white; border:1px solid #6b8175; padding:3px 6px; opacity:1; box-shadow:0 1px 3px #7f9088; }
#node-map .leaflet-popup-content { font:16px/1.5 system-ui,sans-serif; color:#263b35; margin:18px 22px 16px 16px; }
#node-map .leaflet-popup-close-button { width:32px; height:32px; font-size:26px; color:#263b35; }
.map-popup h3 { font-size:20px; margin:0 0 8px; }
.map-popup-badges { display:flex; gap:5px; flex-wrap:wrap; }
.map-popup-facts { margin:12px 0; }
.map-popup-facts > div { margin:7px 0; }
.map-popup-facts dt { font-weight:600; }
.map-popup-facts dd { margin:0; }
.map-popup button { border:1px solid #788c81; padding:6px 10px; }
#node-map .leaflet-control-zoom a { width:38px; height:38px; line-height:38px; color:#233c32; }
#node-map .leaflet-control-scale-line { font-size:16px; line-height:1.2; color:#172f24; background:#fff; border-color:#233c32; }
@media (max-width:640px) {
  .view-switch { margin-bottom:6px; }
  .view-switch button { padding:6px; }
  .map-toolbar { gap:6px; }
}

/* Map view hides the conversation and connection panels. */
body.map-active .chat-header,
body.map-active #connection-banner,
body.map-active #roof-status { display:none; }
body.map-active .workspace { height:100dvh; }
body.map-active .radio-panel { top:0; }
.map-node-panel { display:none; }
body.map-active .radio-panel { display:none; }
body.map-active .map-node-panel { display:block; min-height:0; overflow:auto; padding:16px; border-left:1px solid #adb5b0; background:#f6f7f1; color:#263b35; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.map-node-panel .map-popup > p { margin:8px 0; }
.map-node-panel .map-popup h3 { margin-top:0; }
#node-map .map-compact-popup .leaflet-popup-content { margin:10px 28px 10px 12px; }
.map-compact-popup .map-popup strong { display:block; font-size:18px; overflow-wrap:anywhere; }
.map-compact-popup .map-popup p { margin:3px 0 0; font-size:16px; }
@media (min-width:801px) and (max-width:1120px) {
  body.map-active .workspace { grid-template-columns:240px minmax(0,1fr) 280px; }
}
@media (min-width:641px) and (max-width:800px) {
  body.map-active .workspace { grid-template-columns:220px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  body.map-active .sidebar { grid-row:1 / 3; }
  body.map-active .map-node-panel { grid-column:2; max-height:30dvh; border-top:1px solid #adb5b0; }
}
@media (max-width:640px) {
  body.map-active .map-node-panel { flex-shrink:0; max-height:30dvh; border-top:1px solid #adb5b0; }
}
.map-corner { position:absolute; right:10px; z-index:2; max-width:calc(100% - 72px); max-height:calc(100% - 20px); overflow:auto; color:#263b35; background:#fff; border:1px solid #788c81; border-radius:5px; box-shadow:0 1px 5px #45585b55; }
.map-corner > summary { cursor:pointer; padding:8px 12px; font-size:16px; font-weight:600; }
.map-corner > summary:focus-visible { outline:3px solid #1d573e; outline-offset:2px; }
.map-corner[open] { width:400px; }
.map-corner-body { max-height:65dvh; overflow:auto; overscroll-behavior:contain; border-top:1px solid #adb5b0; }
.map-controls { top:10px; }
.map-info { bottom:10px; }
.map-corner-body .map-toolbar { align-items:flex-start; flex-direction:column; }
.map-corner-body .map-legend { flex-direction:column; }
.map-corner-body .map-selection { margin:0; }
.map-corner-body .map-attribution { overflow-wrap:anywhere; }
@media (max-width:640px) {
  .map-corner-body { max-height:45dvh; }
  .sidebar { position:relative; z-index:6; max-height:none; overflow:visible; padding:6px 10px; }
  .sidebar .view-switch { display:flex; margin:0 0 6px; }
  .view-switch button { min-height:44px; }
  #directory-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:6px 10px; border:1px solid var(--muted); border-radius:5px; color:var(--ink); background:var(--paper); font-size:18px; text-align:left; }
  #directory-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #directory-toggle[aria-expanded="false"] + #conversation-directory { display:none; }
  #conversation-directory { position:absolute; top:100%; left:0; right:0; max-height:65dvh; overflow:auto; overscroll-behavior:contain; padding:12px; color:var(--ink); background:var(--paper); border-bottom:2px solid var(--muted); box-shadow:0 5px 12px #0004; }
  #conversation-directory .search { display:flex; margin-bottom:10px; }
  #conversation-directory nav { display:block; }
  #conversation-directory .nav-item { width:100%; margin:0; min-height:44px; }
  #conversation-directory .nav-symbol { display:flex; }
  #conversation-directory #contacts::before { content:none; }
  .composer { padding:8px 10px max(8px,env(safe-area-inset-bottom)); }
  .compose-box { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:6px 10px; padding:8px 10px; }
  .compose-box textarea { grid-column:1; grid-row:1; min-height:48px; line-height:1.35; padding:0; }
  .compose-actions { display:contents; }
  #send { grid-column:2; grid-row:1; min-height:44px; padding:8px 12px; }
  #byte-count { grid-column:1 / -1; font-size:16px; }
  .compose-foot { margin-top:4px; }
  .compose-foot > span:last-child { display:block; }
  .messages { gap:14px; padding:14px 10px; }
  .message-summary .bubble { min-width:0; padding:10px 12px; }
  .message-meta { gap:4px 12px; }
  .radio-panel { width:min(100%,360px); z-index:8; }
  body.map-active .map-node-panel { padding:0; max-height:35dvh; }
  body.map-active .map-node-panel:not([data-has-selection="true"]) { display:none; }
  #map-node-toggle { display:block; width:100%; min-height:44px; padding:10px 14px; color:var(--ink); background:var(--paper); font-size:18px; text-align:left; }
  .map-node-panel:not([data-expanded="true"]) #map-node-content { display:none; }
  #map-node-content { padding:12px; }
  .map-corner > summary { min-height:44px; padding:10px; }
}