/* Processed-data workspace: data tabs with layers already on the map, static notices, loading state. */
.ltab-map { position: relative; flex: 1; min-height: 0; }
.ltab-raw { position: absolute; inset: 44px 0 0 0; }
.ltab-pick { width: auto; max-width: min(460px, 70vw); }
.ltab-op { flex: 0 0 110px; width: 110px; accent-color: var(--accent); }
#modeBadge { white-space: normal; line-height: 1.35; max-width: 100%; }
.view[aria-busy="true"]::after {
  content: "Loading…"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 700;
  background: var(--panel); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: var(--fs-12); pointer-events: none;
}
.static-raw { position: absolute; inset: 0; overflow: auto; padding: 16px; }
.static-h { font-size: var(--fs-18); margin: 0 0 8px; }
.static-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.static-card { margin: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.static-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--bg-2); }
.static-card figcaption { padding: 6px 8px; font-size: var(--fs-12); }
.leaflet-container .hanoi-mask { pointer-events: none; }
@media (max-width: 560px) {
  .ltab-op { flex-basis: 80px; width: 80px; }
  .static-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
.seg[hidden] { display: none; }
.lead-s { font-size: var(--fs-14); line-height: 1.5; color: var(--text-2); margin: 0 0 10px; max-width: 62ch; }
details.more { border-top: 1px solid var(--border); padding: 8px 0; }
details.more > summary { cursor: pointer; font-weight: 600; color: var(--text-2); }
details.more > summary:hover { color: var(--text); }
/* first-visit guide: one card over the status bar, a ring on the control being explained */
.guide-card { position: fixed; right: 16px; bottom: 16px; z-index: 1200; width: min(340px, calc(100vw - 32px)); background: var(--panel-2);
  border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.guide-step { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.guide-title { margin: 2px 0 6px; font-size: var(--fs-18); }
.guide-text { margin: 0 0 12px; font-size: var(--fs-14); line-height: 1.5; color: var(--text-2); }
.guide-actions { display: flex; justify-content: flex-end; gap: 8px; }
.guide-ring { position: fixed; z-index: 1150; border: 2px solid var(--accent); border-radius: var(--radius-sm); pointer-events: none; box-shadow: 0 0 0 4px #22d3ee33; }
.guide-ring[hidden] { display: none; }
#guideBtn { margin-left: 4px; }
#view-3d { position: absolute; inset: 0; height: 100%; }