/* Room mesh on the live map (web/mesh.js): links, tags, auto-placed rings, the located sound and the Tools drawer
   section. Loaded after audio.css and reuses the style.css tokens. Never red (design.md §3: red means an alert);
   the line pattern carries a link's source as well as its colour. */

/* links: sound = solid cyan (cm), UWB = long dash light cyan (cm), Bluetooth = muted dots (about a metre) */
.mesh-link { stroke: var(--color-signal); stroke-width: 2px; stroke-opacity: .75; stroke-linecap: round; fill: none; }
.mesh-link.src-uwb { stroke: var(--color-signal-highlight); stroke-dasharray: 10 4; }
.mesh-link.src-ble { stroke: var(--color-text-muted); stroke-width: 1.5px; stroke-opacity: .6; stroke-dasharray: 1 5; }
.mesh-link.conflict { stroke: var(--color-warning); }                       /* the chirp disagreed with UWB and was dropped */
.mesh-link.bad { stroke: var(--color-warning); stroke-dasharray: 4 4; }      /* the layout does not fit this distance */
.mesh-link.leaflet-interactive { cursor: help; }

/* the located sound, in Fusion violet */
.mesh-sound { stroke: var(--color-fusion); stroke-width: 2px; fill: var(--color-fusion); fill-opacity: .25; }
.leaflet-tooltip.mesh-sound-tip { background: var(--color-fusion); color: var(--color-bg); border: 0; font-weight: 600; }
.leaflet-tooltip.mesh-sound-tip.leaflet-tooltip-right:before { border-right-color: var(--color-fusion); }
/* style.css recolours only the top arrow; sticky link tooltips open left or right */
.leaflet-tooltip.mesh-link-tip { font-family: var(--font-mono); font-size: 11px; }
.leaflet-tooltip.mesh-link-tip.leaflet-tooltip-right:before { border-right-color: var(--color-surface-raised); }
.leaflet-tooltip.mesh-link-tip.leaflet-tooltip-left:before { border-left-color: var(--color-surface-raised); }

/* tags: a badge row right of the ring (pills sit above it, the label below) */
.mesh-tags { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.mesh-tag { font: 600 9px/12px var(--font-mono); letter-spacing: .05em; padding: 1px 4px; border-radius: 3px; background: rgba(5,11,20,.88); border: 1px solid; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.mesh-tag-pin { color: var(--color-signal-highlight); border-color: rgba(34,211,238,.6); }
.mesh-tag-gps { color: var(--color-text-secondary); border-color: rgba(216,229,238,.45); }
.mesh-tag-auto { color: var(--color-text-muted); border-color: var(--color-text-muted); border-style: dashed; }
.mesh-tag-m1 { color: var(--color-text-secondary); border-color: rgba(143,166,183,.55); }
.mesh-tag-m3 { color: #fcd34d; border-color: rgba(245,158,11,.55); }

/* auto-placed rings (web/audio.css styles .node-ring / .node-label): dashed, as the spot is display-only. Only the
   ring takes the pointer, so a 140 px label box never covers a neighbour a metre away. */
.leaflet-marker-icon.mesh-auto.leaflet-interactive { pointer-events: none; }
.mesh-auto .node-ring { border-style: dashed; }
/* the same phone's audio-lane marker (web/audio.js) while its auto ring stands in for it: one marker per phone */
.node-marker.mesh-hidden { display: none; }
body:not(.operator) .mesh-auto .node-ring { cursor: default; }
/* while the mesh shows auto-placed phones the map is not empty, whatever the fusion picture says (web/app.js) */
#app.mesh-auto-on #empty { display: none !important; }

/* Tools drawer: #mesh-tools */
.mesh-geo { margin: 0 0 8px; font-size: 13px; line-height: 18px; color: var(--color-text-secondary); }
.mesh-geo.todo { color: #fcd34d; }
.mesh-ble { margin-top: 6px; }
.mesh-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mesh-controls .btn:disabled { opacity: .5; cursor: default; }
#mesh-auto[aria-pressed="true"] { background: var(--color-signal); color: var(--color-bg); border-color: transparent; font-weight: 600; }