/* Explorer user guide — modal + standalone page */

:root {
    --eg-accent: var(--luma-color-accent, #00a3e0);
    --eg-accent-2: var(--luma-color-accent-2, #5ce1ff);
    --eg-surface-body: var(--luma-surface-body, #0b1117);
    --eg-surface-card: var(--luma-surface-card, #151d28);
    --eg-surface-input: var(--luma-surface-input, #1f2a38);
    --eg-surface-header: var(--luma-surface-header, #1a232f);
    --eg-surface-hover: var(--luma-surface-hover, #212c3b);
    --eg-text-main: var(--luma-text-main, #e0e0e0);
    --eg-text-heading: var(--luma-text-heading, #ffffff);
    --eg-text-muted: var(--luma-text-muted, #8b9bb4);
    --eg-text-faint: var(--luma-text-faint, #6b7280);
    --eg-border-soft: var(--luma-border-soft, #1f2a38);
    --eg-border: var(--luma-border, #2e3d52);
    --eg-border-strong: var(--luma-border-strong, #3d516d);
    --eg-touch-min: var(--luma-touch-min, 44px);
    --eg-glass-scrim: rgba(0, 0, 0, 0.72);
    --eg-accent-wash-18: rgba(0, 163, 224, 0.18);
    --eg-accent-wash-08: rgba(0, 163, 224, 0.08);
    --eg-vista-purple: #a78bfa;
    --eg-brand-red: #ed1c24;
    --eg-glass-card: rgba(21, 29, 40, 0.92);
}

.explorer-guide-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 15000; /* token-oneoff: guide above toast */
    background: var(--eg-glass-scrim);
    backdrop-filter: blur(4px); /* token-oneoff: glass */
    padding: max(var(--luma-space-4), env(safe-area-inset-top, 0px)) max(var(--luma-space-4), env(safe-area-inset-right, 0px)) max(var(--luma-space-4), env(safe-area-inset-bottom, 0px)) max(var(--luma-space-4), env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.explorer-guide-overlay.is-open {
    display: flex;
}

body.guide-open {
    overflow: hidden;
}

.explorer-guide-panel {
    width: min(920px, 100%);
    height: min(88dvh, 720px);
    max-height: min(88dvh, 720px);
    background: var(--eg-surface-card);
    border: 1px solid var(--eg-border-soft);
    border-radius: var(--luma-radius-md, 12px);
    box-shadow: var(--luma-shadow-lg, 0 24px 48px -12px rgba(0, 0, 0, 0.5));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.explorer-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--luma-space-4);
    padding: 16px 22px; /* token-oneoff: off-scale spacing */
    border-bottom: 1px solid var(--eg-border-soft);
    flex-shrink: 0;
}

.explorer-guide-header-brand {
    display: flex;
    align-items: center;
    gap: 18px; /* token-oneoff: off-scale spacing */
    min-width: 0;
}

.explorer-guide-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.explorer-guide-logo img {
    display: block;
    height: 12px;
    width: auto;
}

.explorer-guide-logo-product {
    margin: 3px 0 0; /* token-oneoff: hairline */
    font-size: 5px; /* token-oneoff: off-scale type */
    font-weight: var(--luma-weight-semibold);
    letter-spacing: 0.45em;
    text-indent: 0.45em;
    text-transform: uppercase;
    color: var(--luma-color-accent, #00a3e0);
}

.explorer-guide-header h1,
.explorer-guide-header h2 {
    margin: 0;
    font-size: 18px; /* token-oneoff: off-scale type */
    font-weight: var(--luma-weight-bold);
    color: var(--eg-text-heading);
}

.explorer-guide-close {
    width: var(--eg-touch-min);
    height: var(--eg-touch-min);
    min-width: var(--eg-touch-min);
    min-height: var(--eg-touch-min);
    border: 1px solid var(--eg-border);
    border-radius: var(--luma-radius-sm, 8px);
    background: var(--eg-surface-input);
    color: var(--eg-text-muted);
    font-size: 22px; /* token-oneoff: off-scale type */
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.16s var(--luma-ease-out), border-color 0.16s var(--luma-ease-out), background-color 0.16s var(--luma-ease-out);
}

.explorer-guide-close:active {
    color: var(--eg-text-heading);
    border-color: var(--eg-border-strong);
    background: var(--eg-surface-hover);
}

.explorer-guide-close:focus-visible {
    outline: 2px solid var(--eg-accent);
    outline-offset: 2px;
}

.explorer-guide-body {
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}

.explorer-guide {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.explorer-guide-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luma-space-2);
    padding: 16px 22px; /* token-oneoff: off-scale spacing */
    background: var(--eg-surface-body);
    border-bottom: 1px solid var(--eg-border-soft);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2; /* token-oneoff: local stacking */
}

.explorer-guide-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px; /* token-oneoff: off-scale spacing */
    min-height: var(--eg-touch-min);
    border-radius: var(--luma-radius-pill);
    background: var(--eg-surface-input);
    border: 1px solid var(--eg-border);
    color: var(--eg-text-main);
    font-size: var(--luma-font-md);
    font-weight: var(--luma-weight-semibold);
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2; /* token-oneoff: leading */
    transition: color 0.16s var(--luma-ease-out), border-color 0.16s var(--luma-ease-out), background-color 0.16s var(--luma-ease-out);
}

.explorer-guide-tab:active {
    color: var(--eg-text-heading);
    border-color: var(--eg-border-strong);
}

.explorer-guide-tab:focus-visible {
    outline: 2px solid var(--eg-accent);
    outline-offset: 2px;
}

.explorer-guide-tab.is-active {
    color: var(--eg-text-heading);
    background: var(--eg-accent-wash-18);
    border-color: var(--eg-accent);
}

.explorer-guide-panels {
    padding: 22px; /* token-oneoff: off-scale spacing */
}

.explorer-guide-panel-page {
    display: none;
}

.explorer-guide-panel-page.is-active {
    display: block;
}

.explorer-guide-panel-page[hidden] {
    display: none !important;
}

.explorer-guide-intro {
    margin: 0 0 18px; /* token-oneoff: off-scale spacing */
    font-size: 15px; /* token-oneoff: off-scale type */
    line-height: 1.6; /* token-oneoff: leading */
    color: var(--eg-text-muted);
}

.explorer-guide-section {
    margin-bottom: 0;
}

.explorer-guide-section h3 {
    margin: 0 0 14px; /* token-oneoff: off-scale spacing */
    font-size: var(--luma-font-xl);
    font-weight: var(--luma-weight-bold);
    color: var(--eg-text-heading);
    padding-bottom: var(--luma-space-2);
    border-bottom: 1px solid var(--eg-border-soft);
}

.explorer-guide-page {
    min-height: 100dvh;
    background: var(--eg-surface-body);
    color: var(--eg-text-main);
    font-family: var(--luma-font-family);
    padding: max(var(--luma-space-5), env(safe-area-inset-top, 0px)) max(var(--luma-space-5), env(safe-area-inset-right, 0px)) max(var(--luma-space-5), env(safe-area-inset-bottom, 0px)) max(var(--luma-space-5), env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

.explorer-guide-page .explorer-guide-panel {
    height: min(calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 720px);
    max-height: min(calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 720px);
    margin: 0 auto; /* token-oneoff: center */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.explorer-guide-section > p {
    margin: 0 0 14px; /* token-oneoff: off-scale spacing */
    font-size: 14px; /* token-oneoff: off-scale type */
    line-height: 1.6; /* token-oneoff: leading */
    color: var(--eg-text-muted);
}

.explorer-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--luma-space-3);
}

.explorer-guide-card {
    display: flex;
    gap: 14px; /* token-oneoff: off-scale spacing */
    padding: 14px; /* token-oneoff: off-scale spacing */
    background: var(--eg-surface-card);
    border: 1px solid var(--eg-surface-input);
    border-radius: 10px; /* token-oneoff: off-scale radius */
}

.explorer-guide-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px; /* token-oneoff: off-scale radius */
    background: var(--eg-surface-input);
    border: 1px solid var(--eg-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--eg-text-main);
}

.explorer-guide-card-icon svg {
    width: 22px;
    height: 22px;
}

.explorer-guide-card-body h4 {
    margin: 0 0 var(--luma-space-1);
    font-size: 14px; /* token-oneoff: off-scale type */
    font-weight: var(--luma-weight-bold);
    color: var(--eg-text-heading);
}

.explorer-guide-card-body p {
    margin: 0;
    font-size: var(--luma-font-lg);
    line-height: 1.55; /* token-oneoff: leading */
    color: var(--eg-text-muted);
}

.explorer-guide-pin-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--luma-space-2);
    margin-top: var(--luma-space-2);
}

.explorer-guide-pin-item {
    display: flex;
    align-items: center;
    gap: var(--luma-space-3);
    padding: var(--luma-space-3);
    background: var(--eg-surface-card);
    border: 1px solid var(--eg-surface-input);
    border-radius: 10px; /* token-oneoff: off-scale radius */
}

.explorer-guide-pin-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; /* token-oneoff: off-scale type */
    border: 2px solid rgba(255, 255, 255, 0.2); /* token-oneoff: glass */
}

.explorer-guide-pin-swatch.ground { background: var(--luma-color-danger, #ef4444); }
.explorer-guide-pin-swatch.drone { background: var(--eg-accent); }
.explorer-guide-pin-swatch.balloon { background: var(--eg-vista-purple); }
.explorer-guide-pin-swatch.comment { background: var(--eg-brand-red); border-radius: var(--luma-radius-2xs) var(--luma-radius-2xs) 50% 50%; height: 36px; width: 28px; }
.explorer-guide-pin-swatch.cluster {
    background: transparent;
    border: none;
    width: 48px;
    height: 48px;
    position: relative;
}
.explorer-guide-cluster-demo {
    position: relative;
    width: 44px;
    height: 44px;
    display: block;
}
.explorer-guide-cluster-demo__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px; /* token-oneoff: negative inset */
    border-radius: 50%;
    border: 2px solid var(--eg-accent);
    color: var(--eg-accent);
    font-weight: var(--luma-weight-bold);
    font-size: var(--luma-font-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eg-glass-card);
}
.explorer-guide-cluster-demo__type {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px; /* token-oneoff: negative inset */
    border-radius: 50%;
    border: 1.5px solid currentColor; /* token-oneoff: glass */
    background: var(--eg-surface-card);
}
.explorer-guide-cluster-demo__type--pano {
    color: var(--luma-color-accent, #00a3e0);
    transform: rotate(-90deg) translate(14px) rotate(90deg);
}
.explorer-guide-cluster-demo__type--comment {
    color: var(--eg-brand-red);
    border-radius: 2px 2px 50% 50%; /* token-oneoff: pin/circle geometry */
    transform: rotate(30deg) translate(14px) rotate(-30deg);
}
.explorer-guide-cluster-demo__type--image {
    color: var(--luma-vista-accent, #38bdf8);
    transform: rotate(150deg) translate(14px) rotate(-150deg);
}

.explorer-guide-pin-item strong {
    display: block;
    font-size: var(--luma-font-lg);
    color: var(--eg-text-heading);
    margin-bottom: 2px; /* token-oneoff: hairline */
}

.explorer-guide-pin-item span {
    font-size: var(--luma-font-md);
    color: var(--eg-text-muted);
    line-height: 1.45; /* token-oneoff: leading */
}

.explorer-guide-map-diagram {
    margin: 14px 0; /* token-oneoff: off-scale spacing */
    padding: var(--luma-space-4);
    background: var(--eg-surface-body);
    border: 1px solid var(--eg-border-soft);
    border-radius: 10px; /* token-oneoff: off-scale radius */
    position: relative;
    min-height: 180px;
}

.explorer-guide-map-diagram::before {
    content: '';
    position: absolute;
    inset: 16px;
    border: 2px dashed rgba(0, 163, 224, 0.45); /* token-oneoff: glass */
    border-radius: var(--luma-radius-sm);
    pointer-events: none;
}

.explorer-guide-map-label {
    position: absolute;
    font-size: var(--luma-font-xs);
    font-weight: var(--luma-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--eg-text-faint);
    background: var(--eg-surface-body);
    padding: 2px 6px; /* token-oneoff: off-scale spacing */
    border-radius: var(--luma-radius-2xs);
}

.explorer-guide-map-label.top-left { top: 8px; left: 8px; }
.explorer-guide-map-label.top-right { top: 8px; right: 8px; }
.explorer-guide-map-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.explorer-guide-map-label.center { top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--eg-text-muted); text-transform: none; font-weight: var(--luma-weight-semibold); letter-spacing: 0; font-size: var(--luma-font-md); }

.explorer-guide-details {
    margin-top: var(--luma-space-2);
    border: 1px solid var(--eg-surface-input);
    border-radius: 10px; /* token-oneoff: off-scale radius */
    background: var(--eg-surface-card);
    overflow: hidden;
}

.explorer-guide-details summary {
    padding: 12px 14px; /* token-oneoff: off-scale spacing */
    min-height: var(--eg-touch-min);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--luma-space-3);
    box-sizing: border-box;
    cursor: pointer;
    font-size: var(--luma-font-lg);
    font-weight: var(--luma-weight-semibold);
    color: var(--eg-text-heading);
    list-style: none;
    transition: color 0.16s var(--luma-ease-out);
}

.explorer-guide-details summary::-webkit-details-marker { display: none; }

.explorer-guide-details summary::after {
    content: '+';
    float: none;
    color: var(--eg-accent);
    font-weight: var(--luma-weight-bold);
    flex-shrink: 0;
}

.explorer-guide-details[open] summary::after { content: '−'; }

.explorer-guide-details summary:active {
    color: var(--eg-accent-2);
}

.explorer-guide-details summary:focus-visible {
    outline: 2px solid var(--eg-accent);
    outline-offset: -2px;
}

.explorer-guide-details .explorer-guide-steps {
    padding: 0 14px 14px; /* token-oneoff: off-scale spacing */
    margin: 0;
    font-size: var(--luma-font-lg);
    line-height: 1.6; /* token-oneoff: leading */
    color: var(--eg-text-muted);
}

.explorer-guide-steps li {
    margin-bottom: var(--luma-space-2);
}

.explorer-guide-steps li:last-child { margin-bottom: 0; }

.explorer-guide-note {
    margin-top: var(--luma-space-3);
    padding: 12px 14px; /* token-oneoff: off-scale spacing */
    border-radius: var(--luma-radius-sm, 8px);
    background: var(--eg-accent-wash-08);
    border: 1px solid rgba(0, 163, 224, 0.25); /* token-oneoff: glass */
    font-size: var(--luma-font-lg);
    line-height: 1.55; /* token-oneoff: leading */
    color: var(--eg-text-main);
}

.luma-logo-mark.luma-guide-trigger {
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
    min-width: var(--eg-touch-min);
    min-height: var(--eg-touch-min);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--luma-space-1);
    box-sizing: border-box;
    transition: color 0.16s var(--luma-ease-out);
}

.luma-logo-mark.luma-guide-trigger:active .luma-logo-product {
    color: var(--eg-accent);
}

.luma-logo-mark.luma-guide-trigger:focus-visible {
    outline: 2px solid var(--eg-accent);
    outline-offset: 3px;
    border-radius: var(--luma-radius-2xs);
}

.explorer-guide-jump {
    color: var(--eg-accent);
    background: none;
    border: none;
    padding: 0;
    min-height: var(--eg-touch-min);
    display: inline-flex;
    align-items: center;
    font: inherit;
    font-weight: var(--luma-weight-semibold);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.16s var(--luma-ease-out);
}

.explorer-guide-jump:active {
    color: var(--luma-vista-accent, #38bdf8);
}

.explorer-guide-jump:focus-visible {
    outline: 2px solid var(--eg-accent);
    outline-offset: 2px;
    border-radius: 2px; /* token-oneoff: off-scale radius */
}

@media (hover: hover) {
    .explorer-guide-close:hover {
        color: var(--eg-text-heading);
        border-color: var(--eg-border-strong);
    }

    .explorer-guide-tab:hover {
        color: var(--eg-text-heading);
        border-color: var(--eg-border-strong);
    }

    .luma-logo-mark.luma-guide-trigger:hover .luma-logo-product {
        color: var(--eg-accent);
    }

    .explorer-guide-jump:hover {
        color: var(--luma-vista-accent, #38bdf8);
    }

    .explorer-guide-details summary:hover {
        color: var(--eg-accent-2);
    }
}

@media (max-width: 768px) {
    .explorer-guide-header { padding: 14px 16px; /* token-oneoff: off-scale spacing */ }
    .explorer-guide-tabs { padding: var(--luma-space-3) var(--luma-space-4); }
    .explorer-guide-panels { padding: var(--luma-space-4); }
    .explorer-guide-grid { grid-template-columns: 1fr; }
    .explorer-guide-tab {
        font-size: var(--luma-font-sm);
        padding: var(--luma-space-1) var(--luma-space-2);
        min-height: var(--eg-touch-min);
    }

    .explorer-guide-close,
    .explorer-guide-jump,
    .luma-logo-mark.luma-guide-trigger,
    .explorer-guide-details summary {
        min-height: var(--eg-touch-min);
    }

    .explorer-guide-close {
        min-width: var(--eg-touch-min);
    }
}

@media (prefers-reduced-motion: reduce) {
    .explorer-guide-overlay { backdrop-filter: none; }

    .explorer-guide-close,
    .explorer-guide-tab,
    .explorer-guide-jump,
    .luma-logo-mark.luma-guide-trigger,
    .explorer-guide-details summary {
        transition: none !important; /* token-oneoff: motion */
    }
}