.instruction-tabs { max-width: 1100px; margin: 16px auto 0; padding: 0 16px; display: flex; gap: 8px; border-bottom: 1px solid #cbd5e0; }
.instruction-tabs [role="tab"] { border-radius: 6px 6px 0 0; padding: 12px 18px; background: #e2e8f0; color: #1f3a5f; font-weight: 700; border: 1px solid transparent; border-bottom: 3px solid transparent; }
.instruction-tabs [role="tab"][aria-selected="true"] { background: #fff; border-color: #cbd5e0; border-bottom-color: #2b6cb0; }
.instruction-tabs [role="tab"]:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
/* Keep Leaflet's measured width while a panel is inactive. display:none would
   reset its pixel origin and also break searches completing in a hidden tab. */
#basic-app[hidden], #nearby-app[hidden], #instruction-app[hidden] { display: block !important; position: fixed; left: -200vw; top: 0; width: calc(100% - 32px); max-width: 1100px; margin: 16px 0; visibility: hidden; pointer-events: none; }
@media (max-width: 520px) { .instruction-tabs { gap: 4px; } .instruction-tabs [role="tab"] { flex: 1; padding: 10px 6px; font-size: 13px; } }