/* Shared toast + confirm/notice modals — Version 1.5 */

:root {
    --lui-accent: var(--luma-color-accent, #00a3e0);
    --lui-accent-2: var(--luma-color-accent-2, #5ce1ff);
    --lui-bg: var(--luma-surface-header, #1a232f);
    --lui-border: var(--luma-border, #2e3d52);
    --lui-radius: 10px; /* off-scale toast radius — not a 7th primitive */
    --lui-ease: var(--luma-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
    --lui-ease-snap: var(--luma-ease-snap, cubic-bezier(0.16, 1, 0.3, 1));
}

#luma-toast-container,
#toast-container {
    position: fixed;
    /* Clear top HUD / map toolbar (≈15px + 46px controls + gap) */
    top: max(90px, calc(env(safe-area-inset-top, 0px) + 75px));
    right: max(20px, env(safe-area-inset-right, 0px));
    left: auto;
    z-index: var(--luma-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--luma-space-2);
    pointer-events: none;
    max-width: min(420px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
}

.luma-toast,
.toast {
    background: linear-gradient(160deg, rgba(31, 42, 56, 0.98), rgba(20, 28, 38, 0.98)); /* token-oneoff: gradient */
    color: var(--luma-text-heading, #ffffff);
    padding: 13px 18px; /* token-oneoff: off-scale spacing */
    border-radius: var(--lui-radius);
    border: 1px solid rgba(255, 255, 255, 0.08); /* token-oneoff: glass */
    border-left: 3px solid var(--lui-accent);
    box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; /* token-oneoff: shadow */
    backdrop-filter: blur(10px); /* token-oneoff: blur */
    -webkit-backdrop-filter: blur(10px);
    font-size: var(--luma-font-lg);
    font-weight: var(--luma-weight-semibold);
    line-height: 1.4; /* token-oneoff: leading */
    opacity: 0;
    transform: translateX(32px) scale(0.98);
    transition: opacity 0.3s var(--lui-ease), transform 0.3s var(--lui-ease);
    display: flex;
    align-items: flex-start;
    gap: var(--luma-space-2);
    pointer-events: auto;
    white-space: pre-wrap;
}

.luma-toast.show,
.toast.show {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.luma-toast.success,
.toast.success { border-left-color: var(--luma-color-success, #2ecc71); }
.luma-toast.error,
.toast.error { border-left-color: var(--luma-color-danger, #ef4444); }
.luma-toast.warning,
.toast.warning { border-left-color: var(--luma-color-warning, #f59e0b); }
.luma-toast.info,
.toast.info { border-left-color: var(--lui-accent); }

.luma-toast-icon { flex-shrink: 0; margin-top: 1px; /* token-oneoff: hairline */ }
.luma-toast.success .luma-toast-icon { color: var(--luma-color-success, #2ecc71); }
.luma-toast.error .luma-toast-icon { color: var(--luma-color-danger, #ef4444); }
.luma-toast.warning .luma-toast-icon { color: var(--luma-color-warning, #f59e0b); }
.luma-toast.info .luma-toast-icon { color: var(--lui-accent); }

.luma-ui-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 7, 12, 0.7); /* token-oneoff: glass */
    z-index: var(--luma-z-dialog);
    backdrop-filter: blur(4px); /* token-oneoff: blur */
    justify-content: center;
    align-items: center;
    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;
}

.luma-ui-overlay.is-open {
    display: flex;
    animation: luiFadeIn 0.18s var(--lui-ease);
}

@keyframes luiFadeIn { from { opacity: 0; } to { opacity: 1; } }

.luma-ui-dialog {
    background: linear-gradient(160deg, rgba(26, 36, 48, 0.98), rgba(16, 23, 32, 0.98)); /* token-oneoff: gradient */
    border-radius: 14px; /* token-oneoff: off-scale radius */
    width: 420px;
    max-width: 100%;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow: auto;
    padding: var(--luma-space-5);
    border: 1px solid var(--lui-border);
    box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; /* token-oneoff: shadow */
    color: var(--luma-text-main, #e0e0e0);
    animation: luiPopIn 0.26s var(--lui-ease-snap);
}

@keyframes luiPopIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.luma-ui-dialog h3 {
    margin: 0 0 var(--luma-space-2);
    font-size: 16.5px; /* token-oneoff: type */
    font-weight: var(--luma-weight-bold);
    color: var(--luma-text-heading, #ffffff);
    display: flex;
    align-items: center;
    gap: 9px; /* token-oneoff: off-scale spacing */
    letter-spacing: -0.01em;
}

.luma-ui-dialog.is-danger h3 { color: #f87171; /* token-oneoff: status */ }
.luma-ui-dialog.is-success h3 { color: var(--luma-color-success, #2ecc71); }
.luma-ui-dialog.is-warning h3 { color: var(--luma-color-warning, #f59e0b); }

.luma-ui-dialog p {
    margin: 0 0 20px; /* token-oneoff: off-scale spacing */
    font-size: 13.5px; /* token-oneoff: type */
    color: var(--luma-text-main, #e0e0e0);
    line-height: 1.55; /* token-oneoff: leading */
    white-space: pre-wrap;
}

.luma-ui-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--luma-space-2);
    flex-wrap: wrap;
}

.luma-ui-btn {
    padding: 9px 18px; /* token-oneoff: off-scale spacing */
    min-height: 40px;
    border-radius: var(--luma-radius-sm);
    border: 1px solid var(--lui-border);
    background: transparent;
    color: var(--luma-text-main, #e0e0e0);
    font-weight: var(--luma-weight-bold);
    font-size: var(--luma-font-lg);
    cursor: pointer;
    transition: background-color 0.16s var(--lui-ease), border-color 0.16s var(--lui-ease), transform 0.15s var(--lui-ease), box-shadow 0.2s var(--lui-ease), filter 0.16s var(--lui-ease);
}

.luma-ui-btn:active { transform: translateY(0) scale(0.97); }
.luma-ui-btn:focus-visible {
    outline: none;
    box-shadow: var(--luma-shadow-focus, 0 0 0 3px rgba(0, 163, 224, 0.28));
}

.luma-ui-btn-primary {
    border-color: var(--lui-accent);
    background: linear-gradient(135deg, var(--lui-accent-2), var(--lui-accent));
    color: var(--luma-text-heading, #ffffff);
    box-shadow: 0 6px 16px -4px rgba(0, 163, 224, 0.4); /* token-oneoff: shadow */
}

.luma-ui-btn-danger {
    border-color: var(--luma-color-danger, #ef4444);
    background: linear-gradient(135deg, #f87171, var(--luma-color-danger, #ef4444));
    color: var(--luma-text-heading, #ffffff);
    box-shadow: 0 6px 16px -4px rgba(239, 68, 68, 0.4); /* token-oneoff: shadow */
}

@media (hover: hover) {
    .luma-ui-btn:hover { background: rgba(255, 255, 255, 0.06); /* token-oneoff: glass */ transform: translateY(-1px); }
    .luma-ui-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 22px -4px rgba(0, 163, 224, 0.5); /* token-oneoff: shadow */ }
    .luma-ui-btn-danger:hover { filter: brightness(1.08); box-shadow: 0 10px 22px -4px rgba(239, 68, 68, 0.5); /* token-oneoff: shadow */ }
}

@media (prefers-reduced-motion: reduce) {
    .luma-toast,
    .toast,
    .luma-ui-dialog,
    .luma-ui-overlay.is-open,
    .luma-ui-btn {
        transition: none !important; /* token-oneoff: motion */
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
}

@media (max-width: 768px) {
    .luma-ui-btn {
        min-height: var(--luma-touch-min, 44px);
        min-width: var(--luma-touch-min, 44px);
    }
}

/* —— Glass tooltips (replaces native title tips) ——
 * Default placement: top-right of the anchor (cursor stays clear).
 * .is-start = flipped to top-left; .is-below = under the anchor.
 */
.luma-ui-tooltip {
    position: fixed;
    z-index: 14000; /* token-oneoff: tooltip above toast */
    left: 0;
    top: 0;
    max-width: min(280px, calc(100vw - 24px));
    padding: var(--luma-space-2) var(--luma-space-3);
    border-radius: 10px; /* token-oneoff: off-scale radius */
    background: linear-gradient(160deg, rgba(31, 42, 56, 0.98), rgba(16, 23, 32, 0.98)); /* token-oneoff: gradient */
    border: 1px solid var(--luma-border-strong);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset; /* token-oneoff: shadow */
    backdrop-filter: blur(12px); /* token-oneoff: blur */
    -webkit-backdrop-filter: blur(12px);
    color: var(--luma-text-main, #e0e0e0);
    font-size: var(--luma-font-md);
    font-weight: var(--luma-weight-semibold);
    line-height: 1.4; /* token-oneoff: leading */
    letter-spacing: 0.01em;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(4px, -6px) scale(0.98);
    transition: opacity 0.16s var(--lui-ease),
        transform 0.18s var(--lui-ease-snap),
        visibility 0.16s;
    white-space: pre-wrap;
}

.luma-ui-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0) scale(1);
}

.luma-ui-tooltip.is-start {
    transform: translate(-4px, -6px) scale(0.98);
}

.luma-ui-tooltip.is-start.is-visible {
    transform: translate(0, 0) scale(1);
}

.luma-ui-tooltip.is-below {
    transform: translate(4px, 6px) scale(0.98);
}

.luma-ui-tooltip.is-below.is-visible {
    transform: translate(0, 0) scale(1);
}

.luma-ui-tooltip.is-start.is-below {
    transform: translate(-4px, 6px) scale(0.98);
}

.luma-ui-tooltip.is-start.is-below.is-visible {
    transform: translate(0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .luma-ui-tooltip {
        transition: none !important; /* token-oneoff: motion */
        transform: translate(0, 0) !important;
    }
}

@media (hover: none) {
    /* Touch: avoid sticky float tips; aria-label still covers a11y. */
    .luma-ui-tooltip { display: none !important; }
}

/* ── One active context — Basic / Advanced + mode dimming ────────────────
   design/editor-ui-guide.md § One active context. Driven by luma_active_context.js.
   Inert without the markup, so the public tour is unaffected. */

.luma-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--luma-space-2);
    margin: var(--luma-space-2) 0 0;
    padding: var(--luma-space-1) var(--luma-space-2);
    border: 1px solid var(--luma-border-soft);
    border-radius: var(--luma-radius-2xs);
    background: transparent;
    color: var(--luma-text-muted);
    font-family: inherit;
    font-size: var(--luma-font-sm);
    font-weight: var(--luma-weight-semibold);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.16s var(--lui-ease), border-color 0.16s var(--lui-ease);
}

.luma-advanced-toggle:hover {
    color: var(--luma-text-main);
    border-color: var(--luma-border);
}

.luma-advanced-toggle:focus-visible {
    outline: 2px solid var(--luma-border-focus);
    outline-offset: 2px;
}

.luma-advanced-toggle::before {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor; /* token-oneoff: caret geometry */
    border-bottom: 2px solid currentColor; /* token-oneoff: caret geometry */
    transform: rotate(-45deg);
    transition: transform 0.16s var(--lui-ease-snap);
}

.luma-advanced-toggle.is-open::before {
    transform: rotate(45deg);
}

.luma-advanced {
    margin-top: var(--luma-space-2);
    padding-top: var(--luma-space-2);
    border-top: 1px solid var(--luma-border-soft);
}

.luma-advanced[hidden] {
    display: none;
}

/* Mode active on the shell root: unrelated chrome recedes but stays clickable. */
[data-luma-mode] [data-luma-mode-dim] {
    opacity: 0.45;
    transition: opacity 0.18s var(--lui-ease);
}

@media (prefers-reduced-motion: reduce) {
    .luma-advanced-toggle,
    .luma-advanced-toggle::before,
    [data-luma-mode] [data-luma-mode-dim] {
        transition: none !important; /* token-oneoff: motion */
    }
}

/* ── Shared authoring accordion (families keep their class names as aliases) ── */
.luma-acc,
.settings-accordion,
.workshop-right-acc,
.workshop-acc {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.luma-acc-trigger,
.settings-accordion-toggle,
.workshop-right-acc-toggle,
.workshop-acc-trigger {
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    min-height: var(--luma-hit-min, 24px);
}

.luma-acc-trigger:focus-visible,
.settings-accordion-toggle:focus-visible,
.workshop-right-acc-toggle:focus-visible,
.workshop-acc-trigger:focus-visible,
.workshop-subtab:focus-visible,
.pin-card-summary:focus-visible,
.viewer-tools button:focus-visible,
.ep-orient-step:focus-visible,
.ep-orient-step-head:focus-visible,
.upload-zone:focus-visible,
.gc-btn:focus-visible,
.area-icon-btn:focus-visible,
.segment-btn:focus-visible,
.lib-view-btn:focus-visible,
.viewer-plan-btn:focus-visible,
.pw-toggle-btn:focus-visible,
.gc-mode-tab:focus-visible,
.gc-menu-trigger:focus-visible,
.gc-menu-item:focus-visible {
    outline: 2px solid var(--luma-border-focus, #00a3e0);
    outline-offset: 2px;
}

/* ── Shared compact chrome button (page classes are aliases / modifiers) ── */
.luma-chrome-btn,
.area-icon-btn,
.segment-btn,
.lib-view-btn,
.viewer-plan-btn,
.pw-toggle-btn,
.gc-btn,
.gc-mode-tab,
.gc-zone-del,
.gc-menu-trigger,
.gc-menu-item {
    box-sizing: border-box;
    min-width: var(--luma-hit-min, 24px);
    min-height: var(--luma-hit-min, 24px);
    font-family: inherit;
    cursor: pointer;
}

/* Leaflet map tips share glass chrome; Leaflet owns position (not luma-ui-tooltip fixed). */
.leaflet-tooltip.custom-tooltip {
    background: linear-gradient(160deg, rgba(31, 42, 56, 0.98), rgba(16, 23, 32, 0.98)); /* token-oneoff: gradient */
    border: 1px solid var(--luma-border-strong);
    color: var(--luma-text-main, #e0e0e0);
    font-weight: var(--luma-weight-semibold);
    font-size: var(--luma-font-md);
    padding: var(--luma-space-2) var(--luma-space-3);
    border-radius: 10px; /* token-oneoff: off-scale radius */
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55); /* token-oneoff: shadow */
    backdrop-filter: blur(12px); /* token-oneoff: blur */
}

.luma-skip-link {
    position: absolute;
    left: var(--luma-space-2);
    top: var(--luma-space-2);
    z-index: 20000; /* token-oneoff: local stacking */
    padding: var(--luma-space-2) var(--luma-space-3);
    background: var(--luma-surface-card);
    color: var(--luma-text-heading);
    border: 1px solid var(--luma-border-focus);
    border-radius: var(--luma-radius-2xs);
    font-size: var(--luma-font-md);
    font-weight: var(--luma-weight-semibold);
    text-decoration: none;
    transform: translateY(-200%); /* token-oneoff: off-screen */
}

.luma-skip-link:focus,
.luma-skip-link:focus-visible {
    transform: none;
    outline: 2px solid var(--luma-border-focus);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .luma-chrome-btn,
    .area-icon-btn,
    .segment-btn,
    .lib-view-btn,
    .viewer-plan-btn,
    .pw-toggle-btn,
    .gc-btn,
    .gc-mode-tab,
    .gc-menu-trigger,
    .gc-menu-item,
    .luma-acc-trigger,
    .settings-accordion-toggle,
    .workshop-right-acc-toggle,
    .workshop-acc-trigger,
    .viewer-tools button,
    .upload-zone {
        min-height: var(--luma-touch-min, 44px);
        min-width: var(--luma-touch-min, 44px);
    }
}