/* ═══════════════════════════════════════════════════════════════════════════════
   GLASS v1.1 (15 Sep 2026, revised 22 Sep 2026): one surface for every panel
   Farhad likes the glassy instrument rail on the right and not the matte navy of the
   sidebar and the panels. This file gives every plate the same recipe as the rail:
   a translucent dark glass with a strong blur and a faint gold rim, so the map shows
   through everything. Loads after v3-atlas.css and readability-v1.css.
   (c) 2025-2026 Pyramason. All Rights Reserved.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* 22 Sep 2026 (Farhad): ONE level of glass for every plate: sidebar, rail, panels, site card,
       top bar elements. Change these two lines and the whole map follows. */
    --pyra-glass: linear-gradient(163deg, rgba(14, 21, 36, 0.76), rgba(8, 12, 21, 0.84));
    --pyra-glass-strong: var(--pyra-glass);
    --pyra-glass-blur: blur(22px) saturate(1.25);
    --pyra-glass-rim: 1px solid rgba(201, 162, 39, 0.30);
    --pyra-glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(245, 230, 176, 0.06);
    --pyra-plate: var(--pyra-glass);
}

/* sidebar and top bar */
#leftSidebar {
    background: var(--pyra-glass-strong) !important;
    backdrop-filter: var(--pyra-glass-blur) !important;
    -webkit-backdrop-filter: var(--pyra-glass-blur) !important;
    border-right: var(--pyra-glass-rim) !important;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35) !important;
}
/* 22 Sep 2026 (Farhad): the top bar has no plate at all, so the map runs to the top edge;
   the search box, the buttons and the account chip keep their own small glass plates. */
#topBar {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* the top bar's own elements each get a small glass plate so they stay readable over the map */
#topBar #searchContainer, #topBar .search-container,
#topBar .top-bar-history-controls,
#topBar .top-bar-actions > .v3-topbar-door,
#topBar .top-bar-actions > .v3-auth-ghost,
#topBar .top-bar-actions > .v3-user-chip, #topBar .top-bar-actions > [class*="user"],
#topBar .top-bar-actions > .icon-btn,
#topBar #zoomDisplayTop, #topBar #statsDisplay {
    background: var(--pyra-glass) !important;
    backdrop-filter: var(--pyra-glass-blur) !important;
    -webkit-backdrop-filter: var(--pyra-glass-blur) !important;
    border: var(--pyra-glass-rim) !important;
    border-radius: 10px;
}
#topBar .toolbar-separator { background: transparent !important; }
/* 22 Sep 2026 (Farhad): every top bar plate is the same height and radius, vertically centred;
   the logo has no plate at all and the version badge sits beside the wordmark, level with it. */
#topBar #searchContainer, #topBar .search-container,
#topBar .top-bar-history-controls,
#topBar .top-bar-actions > .v3-topbar-door,
#topBar .top-bar-actions > .v3-auth-ghost, #topBar .top-bar-actions > .v3-auth-gold,
#topBar .top-bar-actions > .v3-user-chip, #topBar .top-bar-actions > [class*="user"],
#topBar .top-bar-actions > .icon-btn,
#topBar #zoomDisplayTop, #topBar #statsDisplay {
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    align-items: center !important;   /* no display rule here: hidden elements must stay hidden */
    border-radius: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
#topBar .top-bar-actions > .v3-topbar-door, #topBar .top-bar-actions > .v3-auth-ghost,
#topBar .top-bar-actions > .v3-auth-gold { padding-top: 0 !important; padding-bottom: 0 !important; }
#topBar .logo {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 40px !important;
    padding: 0 !important;
}
#topBar .logo .version-badge {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
    line-height: 1 !important;
}

/* the instrument rail keeps its look, only matched to the same blur */
.map-controls-container, div.map-controls-container {
    background: var(--pyra-glass) !important;
    backdrop-filter: var(--pyra-glass-blur) !important;
    -webkit-backdrop-filter: var(--pyra-glass-blur) !important;
    border: var(--pyra-glass-rim) !important;
}

/* every tool plate */
#messageModal,
#geometryNetworkPanel, #astroLinesPanel, #alignmentLabPanel, #skyEventsPanel,
#astralPanel, #drawMeasurePanel, #mapStylePanel, #isochronePanel,
#directionsPanel, #snapshotPanel, #terrainReliefPanel, #contourPanel,
#tilt3DControlPanel, #communityHubPanel, #unifiedToolsToolbar,
#discoveryControls, #overlayControlPanel, #topBarClearMenu,
#chatPanel, #adminPanel, #directorBar, #cinematicDirectorPanel,
#searchResults, #placesResults, .search-results,
.user-dropdown, #userDropdown,
.unit-settings-panel,
div[id$="Panel"][style*="position:fixed"], div[id$="Panel"][style*="position: fixed"],
div[id$="Drawer"][style*="position:fixed"], div[id$="Drawer"][style*="position: fixed"] {
    background: var(--pyra-glass) !important;
    backdrop-filter: var(--pyra-glass-blur) !important;
    -webkit-backdrop-filter: var(--pyra-glass-blur) !important;
    border: var(--pyra-glass-rim) !important;
    box-shadow: var(--pyra-glass-shadow) !important;
}
/* the message plate carries its own inline gradient; the border colour follows the type */
#messageModal { border-color: rgba(201, 162, 39, 0.30) !important; }

/* headers inside plates stay readable on glass */
#messageModal > div:first-of-type,
#skyEventsPanel > div:first-of-type,
#leftSidebar .section-header {
    background: rgba(5, 7, 13, 0.28) !important;
}

/* site cards and popups: the same glass as everything else, now WITH the blur (before 22 Sep the
   card missed the blur, so it was see-through and hard to read) */
.site-info-popup .mapboxgl-popup-content > div,
.pyramason-info-popup .site-info-card, .site-info-card,
.site-card, .pyra-site-card {
    background: var(--pyra-glass) !important;
    backdrop-filter: var(--pyra-glass-blur) !important;
    -webkit-backdrop-filter: var(--pyra-glass-blur) !important;
    border: var(--pyra-glass-rim) !important;
    box-shadow: var(--pyra-glass-shadow) !important;
}

/* tour plate and modal overlays */
#pyramasonTourOverlay .tour-card, #pyramasonTourOverlay > div > div {
    background: var(--pyra-glass-strong) !important;
    backdrop-filter: var(--pyra-glass-blur) !important;
    -webkit-backdrop-filter: var(--pyra-glass-blur) !important;
}

/* recording: the Director hides the interface with H, nothing to do here.
   Reduced transparency for users who asked their OS for it. */
@media (prefers-reduced-transparency: reduce) {
    :root { --pyra-glass: linear-gradient(163deg, rgba(14, 21, 36, 0.92), rgba(8, 12, 21, 0.96)); --pyra-glass-blur: blur(8px); }
}