/* Track controls use the shared spectator tokens and stable replay dock. */
/* Participant identity colors come from the shared perceptual palette, independent of UI theme. */
.public-viewer-shell .viewer-page .viewer-track-menu { position:relative; margin-left:auto; color:var(--public-text); }
.public-viewer-shell .viewer-page .viewer-track-menu > summary { display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 12px; border:1px solid var(--public-line); border-radius:6px; background:var(--public-surface); font-size:13px; font-weight:650; list-style:none; white-space:nowrap; cursor:pointer; }
.public-viewer-shell .viewer-page .viewer-track-menu > summary::-webkit-details-marker { display:none; }
.public-viewer-shell .viewer-page .viewer-track-menu[open] > summary { border-color:var(--public-accent); color:var(--public-accent); }
.public-viewer-shell .viewer-page .viewer-track-popover { position:absolute; bottom:calc(100% + 12px); right:0; width:344px; max-width:calc(100vw - 24px); max-height:min(650px,calc(100dvh - 170px)); overflow:auto; overscroll-behavior:contain; padding:14px; border:1px solid var(--public-line); border-radius:10px; background:var(--public-surface); box-shadow:0 12px 36px color-mix(in srgb,var(--public-text) 12%,transparent); text-align:left; }
.public-viewer-shell .viewer-page .viewer-track-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.public-viewer-shell .viewer-page .viewer-track-heading h3 { margin:0; font-size:16px; font-weight:750; }
.public-viewer-shell .viewer-page .viewer-track-heading button { min-height:32px; width:32px; padding:4px; }
.public-viewer-shell .viewer-page .viewer-track-popover label { display:block; margin:8px 0 4px; font-size:12px; color:var(--public-muted); font-weight:600; }
.public-viewer-shell .viewer-page .viewer-track-popover select { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--public-line); border-radius:6px; color:var(--public-text); background:var(--public-surface); font-size:13px; }
.public-viewer-shell .viewer-page .viewer-track-style-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.public-viewer-shell .viewer-page .viewer-track-help { margin:10px 0 6px; font-size:12px; line-height:1.5; color:var(--public-muted); }
.public-viewer-shell .viewer-page .viewer-track-legend { max-height:220px; overflow:auto; overscroll-behavior:contain; border-top:1px solid var(--public-line); }
.public-viewer-shell .viewer-page .viewer-track-legend-row { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:8px; min-height:44px; border-bottom:1px solid var(--public-line); }
.public-viewer-shell .viewer-page .viewer-track-visibility { width:32px; min-height:36px; padding:6px; border:0; border-radius:5px; background:transparent; cursor:pointer; }
.public-viewer-shell .viewer-page .viewer-track-visibility[aria-pressed="false"] { opacity:.3; }
.public-viewer-shell .viewer-page .viewer-track-legend-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:600; }
.public-viewer-shell .viewer-page .viewer-track-legend select { min-height:34px; padding:6px 4px; font-size:11px; }
.public-viewer-shell .viewer-page .viewer-track-load-status { margin:8px 0; font-size:12px; line-height:1.5; color:var(--public-muted); }
.public-viewer-shell .viewer-page .viewer-track-load-status:empty { display:none; }
.public-viewer-shell .viewer-page .viewer-track-reset { display:block; min-height:36px; margin-top:10px; padding:0; border:0; background:transparent; color:var(--public-accent); font-size:12px; font-weight:650; cursor:pointer; }
.public-viewer-shell .viewer-page #viewer-track-retry[hidden] { display:none; }
.public-viewer-shell .viewer-page .viewer-track-shortcuts { margin-bottom:0; font-size:10px; }
.public-viewer-shell .viewer-page .viewer-step-action { flex:0 0 36px; width:36px; min-height:40px; padding:6px; }
.public-viewer-shell .viewer-page .viewer-image-track { vector-effect:non-scaling-stroke; fill:none; pointer-events:none; }
.public-viewer-shell .viewer-page .viewer-track-pane > svg { overflow:visible; }
.public-viewer-shell .viewer-page .viewer-track-section { margin-top:6px; border-top:1px solid var(--public-line); }
.public-viewer-shell .viewer-page .viewer-track-section > summary { display:flex; align-items:center; justify-content:space-between; min-height:42px; gap:12px; padding:8px 0; list-style:none; color:var(--public-text); font-size:12px; font-weight:650; cursor:pointer; }
.public-viewer-shell .viewer-page .viewer-track-section > summary::-webkit-details-marker { display:none; }
.public-viewer-shell .viewer-page .viewer-track-section[open] > summary > .viewer-icon { transform:rotate(180deg); }
.public-viewer-shell .viewer-page .viewer-track-colors { margin-top:12px; max-height:180px; overflow:auto; overscroll-behavior:contain; }
.public-viewer-shell .viewer-page .viewer-track-color-row { display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:center; gap:10px; min-height:46px; border-top:1px solid var(--public-line); }
.public-viewer-shell .viewer-page .viewer-track-color-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.public-viewer-shell .viewer-page .viewer-track-color-row > select { min-height:34px; padding:6px; font-size:12px; }
.public-viewer-shell .viewer-page .viewer-participant-swatch { display:inline-block; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--viewer-participant-color); vertical-align:middle; }
.public-viewer-shell .viewer-page .focused-card .panel-title { position:relative; padding-left:14px; }
.public-viewer-shell .viewer-page .focused-card .panel-title .viewer-participant-swatch { position:absolute; left:0; top:.55em; }
.public-viewer-shell .viewer-page .roster-entry.is-active { box-shadow:inset 3px 0 var(--viewer-participant-color); }
.public-viewer-shell .viewer-page .roster-entry.is-active .roster-avatar .viewer-avatar-disc { stroke:var(--viewer-participant-color); }
.public-viewer-shell .viewer-page .roster-entry.is-active .roster-avatar svg { color:var(--viewer-participant-color); }
.public-viewer-shell .viewer-page .viewer-selected-marker .viewer-selected-avatar .viewer-avatar-disc,
.public-viewer-shell .viewer-page .viewer-image-marker.is-focused .viewer-selected-avatar .viewer-avatar-disc { stroke:var(--viewer-participant-color); }
.public-viewer-shell .viewer-page .viewer-image-marker .viewer-image-marker-dot { fill:var(--viewer-participant-color); stroke:var(--public-surface); stroke-width:1; }
.public-viewer-shell .viewer-page .viewer-image-marker.is-favorite .viewer-image-marker-dot { fill:var(--viewer-participant-color); stroke-width:1.5; }
.public-viewer-shell .viewer-page .viewer-camera-resume { pointer-events:auto; min-height:36px; padding:7px 12px; font-size:12px; background:var(--public-surface); box-shadow:0 2px 8px color-mix(in srgb,var(--public-text) 8%,transparent); }
.public-viewer-shell .viewer-page .viewer-camera-resume[hidden] { display:none; }
/* Names stay attached to coordinates, using the map engine's own positioning. */
.public-viewer-shell .viewer-page .viewer-participant-label { padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.public-viewer-shell .viewer-page .viewer-participant-label::before { display:none; }
.public-viewer-shell .viewer-page .viewer-map-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:max-content; max-width:min(216px,calc(50vw - 40px)); min-height:30px; padding:6px 10px; overflow:hidden; text-overflow:ellipsis; white-space:normal; overflow-wrap:anywhere; border:1px solid var(--public-line); border-radius:6px; background:var(--public-surface); color:var(--public-text); font-family:var(--dm-font-body); font-size:12px; font-weight:500; line-height:16px; box-shadow:0 2px 6px color-mix(in srgb,var(--public-text) 10%,transparent); pointer-events:none; }
.public-viewer-shell .viewer-page .viewer-map-name.is-focused { border-color:var(--viewer-participant-color); font-weight:600; }
.public-viewer-shell .viewer-page .viewer-map-name.is-favorite,
.public-viewer-shell .viewer-page .viewer-map-name.is-active { border-color:var(--viewer-participant-color); box-shadow:none; }
.public-viewer-shell .viewer-page .viewer-map-name.is-stale { border-style:dashed; }
.public-viewer-shell .viewer-page[data-participant-scope="all"] .viewer-image-marker.is-stale .viewer-image-marker-dot { fill:var(--viewer-participant-color); stroke-dasharray:2 2; }
.public-viewer-shell .viewer-page .viewer-map-name.is-muted { color:var(--public-muted); border-color:var(--public-line); box-shadow:none; opacity:.6; font-size:11px; line-height:14px; min-height:26px; padding:5px 8px; max-width:min(160px,calc(50vw - 40px)); font-weight:400; }
.public-viewer-shell .viewer-page .viewer-map-name.is-occluded { visibility:hidden; }
.public-viewer-shell .viewer-page .viewer-map-name { pointer-events:auto; cursor:pointer; }
.public-viewer-shell .viewer-page .viewer-map-name:focus-visible { outline:2px solid var(--public-accent); outline-offset:2px; }
.public-viewer-shell .viewer-page .leaflet-overlay-pane .leaflet-interactive[data-map-participant] { stroke:#f8fafc; stroke-width:2; paint-order:stroke fill; }
.public-viewer-shell .viewer-page .viewer-image-marker .viewer-image-marker-dot { stroke:#f8fafc; stroke-width:2; vector-effect:non-scaling-stroke; paint-order:stroke fill; }
.public-viewer-shell .viewer-page .viewer-position-group { background:none; border:0; }
.public-viewer-shell .viewer-page .viewer-position-count { display:grid; place-items:center; width:26px; height:24px; min-width:26px; min-height:24px; padding:0 2px; border:1px solid var(--public-line); border-radius:6px; background:var(--public-surface); color:var(--public-text); font:600 11px/1 var(--dm-font-body); box-shadow:0 1px 4px #0003; cursor:pointer; pointer-events:auto; }
.public-viewer-shell .viewer-page .viewer-position-count.has-selected { border-color:var(--public-accent); }
.public-viewer-shell .viewer-page .viewer-position-count:hover { background:var(--public-surface-soft); }
.public-viewer-shell .viewer-page .viewer-position-count:focus-visible { outline:2px solid var(--public-accent); outline-offset:3px; }
.public-viewer-shell .viewer-page .viewer-position-panel { position:absolute; z-index:1100; display:flex; flex-direction:column; width:min(280px,calc(100% - 24px)); margin:0; padding:0; overflow:hidden; border:1px solid var(--public-line); border-radius:10px; background:var(--public-surface); color:var(--public-text); box-shadow:0 8px 24px #0003; font:12px/1.4 var(--dm-font-body); }
.public-viewer-shell .viewer-page .viewer-position-panel-header { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:6px 8px 6px 14px; border-bottom:1px solid var(--public-line); }
.public-viewer-shell .viewer-page .viewer-position-panel-header strong { font-size:12px; font-weight:600; }
.public-viewer-shell .viewer-page .viewer-position-close { display:grid; place-items:center; flex:none; width:32px; height:32px; min-height:32px; padding:7px; border:0; border-radius:6px; color:var(--public-muted); background:transparent; cursor:pointer; }
.public-viewer-shell .viewer-page .viewer-position-close svg { width:18px; height:18px; }
.public-viewer-shell .viewer-page .viewer-position-list { min-height:0; padding:4px; overflow-y:auto; overscroll-behavior:contain; }
.public-viewer-shell .viewer-page .viewer-position-person { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:9px 10px; border:0; border-radius:6px; background:transparent; color:var(--public-text); font:inherit; text-align:left; cursor:pointer; }
.public-viewer-shell .viewer-page .viewer-position-person:hover,.public-viewer-shell .viewer-page .viewer-position-person[aria-pressed="true"] { background:var(--public-surface-soft); }
.public-viewer-shell .viewer-page .viewer-position-person:focus-visible,.public-viewer-shell .viewer-page .viewer-position-close:focus-visible { outline:2px solid var(--public-accent); outline-offset:-2px; }
.public-viewer-shell .viewer-page .viewer-position-person > span:last-child { min-width:0; overflow-wrap:anywhere; }
.public-viewer-shell .viewer-page .viewer-position-swatch { display:block; flex:none; width:9px; height:9px; border-radius:50%; background:var(--viewer-participant-color); }
.public-viewer-shell .viewer-page .viewer-image-marker { pointer-events:visiblePainted; cursor:pointer; }
.public-viewer-shell .viewer-page .viewer-image-name, .public-viewer-shell .viewer-page .viewer-image-name foreignObject { pointer-events:none; }
.public-viewer-shell .viewer-page .viewer-selected-avatar.is-stale .viewer-avatar-disc { stroke:var(--viewer-participant-color); }
.public-viewer-shell .viewer-page .viewer-image-track-halo { fill:none; stroke:#fff; opacity:.75; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:none; }
@media (max-width:960px) {
  .public-viewer-shell .viewer-page .viewer-camera-controls { max-width:calc(100vw - 24px); }
  .public-viewer-shell .viewer-page .viewer-camera-button { padding:7px 8px; font-size:11px; white-space:nowrap; }
  .public-viewer-shell .viewer-page .viewer-camera-button .viewer-icon { display:none; }
  .public-viewer-shell .viewer-page .viewer-replay-controls { display:grid; grid-template-columns:30px 40px 30px 50px minmax(0,1fr) 44px; gap:6px; }
  .public-viewer-shell .viewer-page .viewer-step-action { width:30px; min-height:40px; padding:4px; }
  .public-viewer-shell .viewer-page .viewer-replay-controls #viewer-play-toggle { width:40px; min-width:40px; }
  .public-viewer-shell .viewer-page .viewer-speed { min-width:0; width:50px; }
  .public-viewer-shell .viewer-page .timeline-current-time { position:absolute; bottom:8px; right:12px; margin:0; font-size:10px; }
  .public-viewer-shell .viewer-page .timeline-summary { padding-right:64px; }
  .public-viewer-shell .viewer-page .viewer-track-menu { justify-self:end; margin:0; }
  .public-viewer-shell .viewer-page .viewer-track-menu > summary { width:40px; padding:8px; }
  .public-viewer-shell .viewer-page #viewer-track-menu-label { display:none; }
  .public-viewer-shell .viewer-page .viewer-replay-controls .viewer-live-action { min-width:44px; width:44px; padding:6px; }
  .public-viewer-shell .viewer-page .viewer-live-action .viewer-action-label { display:none; }
  .public-viewer-shell .viewer-page .viewer-track-popover { position:fixed; right:12px; left:12px; bottom:calc(var(--viewer-sheet-height) + var(--viewer-dock-height) + 8px); width:auto; max-width:none; max-height:calc(100dvh - var(--viewer-header-height) - var(--viewer-sheet-height) - var(--viewer-dock-height) - 24px); }
  .public-viewer-shell .viewer-page .viewer-track-shortcuts { display:none; }
  .public-viewer-shell .viewer-page .viewer-track-popover :is(select,.viewer-track-visibility) { min-height:44px; }
  .public-locked-shell .viewer-page .viewer-track-popover { bottom:calc(var(--viewer-dock-height) + 8px); max-height:calc(100dvh - var(--viewer-dock-height) - 24px); }
}
@media (max-width:960px) and (max-height:550px) and (orientation:landscape) {
  .public-viewer-shell .viewer-page .viewer-track-popover { left:12px; right:calc(var(--viewer-landscape-panel) + 12px); bottom:calc(var(--viewer-dock-height) + 8px); max-height:calc(100dvh - var(--viewer-header-height) - var(--viewer-dock-height) - 24px); }
  .public-locked-shell .viewer-page .viewer-track-popover { right:12px; }
}