/* ═══════════════════════════════════════════════════════════════════════════════
   PYRAMASON MAP v3 — THE GOLDEN ATLAS (complete theme layer)
   Reference: design/design-v3-preview-11.html (locked 2026-07-30).
   Loads LAST of all stylesheets. Colors were migrated at the source (palette
   sweep); this file carries the poster's STRUCTURE: type, plates, engraved
   furniture, panel anatomy. !important is used deliberately where the app
   writes inline styles.  © 2026 Pyramason.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    --pyra-abyss: #05070d;
    --pyra-abyss-2: #0a0f1a;
    --pyra-abyss-3: #0e1524;
    --pyra-gold-deep: #c9a227;
    --pyra-gold-mid: #e8c547;
    --pyra-gold-hi: #f5e6b0;
    --pyra-sand: #d9c7a0;
    --pyra-ink: rgba(245, 230, 176, 0.92);
    --pyra-line-1: rgba(201, 162, 39, 0.20);
    --pyra-line-2: rgba(201, 162, 39, 0.40);
    --pyra-line-3: rgba(232, 197, 71, 0.70);
    --pyra-r-panel: 14px;
    --pyra-r-ctl: 9px;
    --pyra-shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.65), 0 0 22px rgba(201, 162, 39, 0.08);
    --pyra-plate: linear-gradient(163deg, rgba(14, 21, 36, 0.97), rgba(8, 12, 21, 0.985));
    --pyra-font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --pyra-font-body: 'Cormorant Garamond', Georgia, serif;
    --pyra-font-mono: 'JetBrains Mono', monospace;
    --pyra-t-fast: 0.15s;
    --pyra-t-med: 0.25s;
}

/* ═══ 1 · TYPE — the folio voice ════════════════════════════════════════════ */
body {
    font-family: var(--pyra-font-body);
    background: var(--pyra-abyss);
}
button, input, select, textarea { font-family: var(--pyra-font-body); }
.section-title, .modal-title, .panel-title,
.tools-group-label, .chat-header h3 {
    font-family: var(--pyra-font-display) !important;
    letter-spacing: 0.16em !important;
}

/* ═══ 2 · TOP BAR ═══════════════════════════════════════════════════════════ */
#topBar {
    background: linear-gradient(180deg, rgba(5, 7, 13, 0.96), rgba(8, 12, 21, 0.88)) !important;
    border-bottom: 1px solid var(--pyra-line-1) !important;
    backdrop-filter: blur(10px);
}
/* height matches the lockup below so a 48px logo never overflows the 60px bar */
#brandLogo { display: inline-flex; align-items: center; height: 48px !important; }
/* The one place the header mark size is set. app-ui.js re-renders this <img>
   at runtime, so it keeps the class and matches this height. */
#brandLogo .pyra-mark { height: 48px !important; width: auto !important; display: block; }
/* the mobile bar is 52px: keep the mark inside it, and leave the narrow
   portrait bar room for the search pill (styles.css shrinks .logo-icon there) */
@media (max-width: 768px) {
    #brandLogo { height: 40px !important; }
    #brandLogo .pyra-mark { height: 40px !important; }
}
@media (max-width: 480px) {
    #brandLogo { height: 32px !important; }
    #brandLogo .pyra-mark { height: 32px !important; }
}
#brandLogo i, #brandLogo svg.lucide { display: none !important; }
/* Brand, 2026-09-03 (final): the map uses the same single lockup image as
   pyramason.com (assets/brand/lockup-2026.png, 1200x326) at the same 48px
   box, so both headers are identical. The old separate wordmark is hidden. */
.logo-text { display: none !important; }
.version-badge {
    font-family: var(--pyra-font-mono) !important;
    font-size:10px !important;
    color: rgba(217, 199, 160, 0.5) !important;
    border: 1px solid var(--pyra-line-1) !important;
    background: transparent !important;
}
#topBar .icon-btn { border-radius: var(--pyra-r-ctl) !important; transition: background var(--pyra-t-fast) ease, color var(--pyra-t-fast) ease; }
#topBar .icon-btn:hover { background: rgba(201, 162, 39, 0.12) !important; }

/* the search pill */
.search-container {
    background: rgba(10, 15, 26, 0.85) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(8px);
    transition: border-color var(--pyra-t-fast) ease, box-shadow var(--pyra-t-fast) ease;
}
.search-container:focus-within {
    border-color: var(--pyra-line-3) !important;
    box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.12), 0 0 24px rgba(232, 197, 71, 0.12) !important;
}
.search-container input {
    font-family: var(--pyra-font-body) !important;
    font-size: 15px !important;
    color: var(--pyra-ink) !important;
}
.search-container input::placeholder { color: rgba(217, 199, 160, 0.42) !important; }
.search-shortcut {
    font-family: var(--pyra-font-mono) !important;
    font-size:11px !important;
    color: rgba(217, 199, 160, 0.55) !important;
    border: 1px solid var(--pyra-line-1) !important;
    border-radius: 6px !important;
    background: transparent !important;
}
.stats-display, .zoom-display-top {
    font-variant-numeric: tabular-nums;
    font-family: var(--pyra-font-mono) !important;
    font-size:12.5px !important;
    color: var(--pyra-gold-mid) !important;
}
.stats-display .stats-label {
    font-family: var(--pyra-font-body) !important;
    font-size:12.5px !important;
    letter-spacing: 0.08em;
    color: rgba(217, 199, 160, 0.55) !important;
    text-transform: uppercase;
}

/* search dropdown — the gold plate */
#searchResults, #placesResults, .search-results {
    background: var(--pyra-plate) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: 12px !important;
    box-shadow: var(--pyra-shadow-panel) !important;
    overflow: hidden;
    backdrop-filter: blur(10px);
}
#searchResults > div[style*="uppercase"] {
    background: rgba(201, 162, 39, 0.06) !important;
    color: rgba(217, 199, 160, 0.55) !important;
    font-family: var(--pyra-font-mono) !important;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--pyra-line-1) !important;
}
.search-result { font-family: var(--pyra-font-body) !important; border-bottom: 1px solid rgba(201, 162, 39, 0.08) !important; }
.search-result:hover { background: rgba(201, 162, 39, 0.07) !important; }

/* user menu */
.user-dropdown {
    background: var(--pyra-plate) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: 12px !important;
    box-shadow: var(--pyra-shadow-panel) !important;
}
.pro-badge, #proBadge {
    font-family: var(--pyra-font-mono) !important;
    letter-spacing: 0.1em;
}

/* ═══ 3 · SIDEBAR — the codex ═══════════════════════════════════════════════ */
#leftSidebar {
    background: linear-gradient(180deg, rgba(8, 12, 21, 0.97), rgba(5, 7, 13, 0.98)) !important;
    border-right: 1px solid var(--pyra-line-1) !important;
}
.sidebar-section { border-bottom: 1px solid rgba(201, 162, 39, 0.10) !important; }
.section-title { color: var(--pyra-sand) !important; font-size:12.5px !important; }
.codex-head .codex-name { font-family: var(--pyra-font-display) !important; letter-spacing: 0.12em !important; }
.codex-total { font-family: var(--pyra-font-mono) !important; color: rgba(217, 199, 160, 0.5) !important; }
.filter-item { border-radius: 9px !important; }
.filter-item:hover { background: rgba(201, 162, 39, 0.06) !important; }
.filter-item .filter-count, #filterList .filter-count {
    font-family: var(--pyra-font-mono) !important;
    font-size:11.5px !important;
    color: rgba(217, 199, 160, 0.55) !important;
    background: rgba(201, 162, 39, 0.08) !important;
    border-radius: 6px !important;
}
.tool-btn {
    background: rgba(201, 162, 39, 0.04) !important;
    border: 1px solid var(--pyra-line-1) !important;
    border-radius: 10px !important;
    transition: border-color var(--pyra-t-fast) ease, background var(--pyra-t-fast) ease !important;
}
.tool-btn:hover { border-color: var(--pyra-line-3) !important; background: rgba(201, 162, 39, 0.09) !important; transform: none !important; }
.tool-btn .tool-label { color: rgba(217, 199, 160, 0.8) !important; letter-spacing: 0.05em; }
.pro-tag {
    font-family: var(--pyra-font-mono) !important;
    background: linear-gradient(135deg, #c9a227, #e8c547) !important;
    color: #0a0f1a !important;
    letter-spacing: 0.08em !important;
}
.sidebar-toggle {
    background: rgba(8, 12, 21, 0.88) !important;
    border: 1px solid var(--pyra-line-2) !important;
    color: var(--pyra-gold-mid) !important;
}
.sidebar-footer { color: rgba(217, 199, 160, 0.4) !important; font-family: var(--pyra-font-body) !important; }

/* ═══ 4 · THE RIGHT LANE — instrument rail ══════════════════════════════════ */
.map-controls-container {
    top: 84px !important;
    bottom: auto !important;
    right: 14px !important;
    max-height: calc(100vh - 400px) !important;
    overflow-y: auto !important;
    scrollbar-width: none;
    border-radius: 16px !important;
    border: 1px solid var(--pyra-line-2) !important;
    background: rgba(8, 12, 21, 0.88) !important;
    box-shadow: var(--pyra-shadow-panel) !important;
    backdrop-filter: blur(10px);
}
.map-controls-container::-webkit-scrollbar { display: none; }
.map-controls-header {
    background: rgba(201, 162, 39, 0.06) !important;
    border-bottom: 1px solid var(--pyra-line-1) !important;
    color: var(--pyra-gold-mid) !important;
}
.map-controls-header svg { stroke: var(--pyra-gold-mid) !important; }
.map-controls-header span span {
    font-family: var(--pyra-font-display) !important;
    letter-spacing: 0.2em !important;
    color: var(--pyra-sand) !important;
}
.map-ctrl-btn {
    background: transparent !important;
    border: 1px solid rgba(201, 162, 39, 0.14) !important;
    border-radius: 8px !important;
    color: rgba(217, 199, 160, 0.8) !important;
    transition: border-color var(--pyra-t-fast) ease, color var(--pyra-t-fast) ease, background var(--pyra-t-fast) ease;
}
.map-ctrl-btn:hover { border-color: var(--pyra-line-3) !important; color: var(--pyra-gold-hi) !important; background: rgba(201, 162, 39, 0.07) !important; }
.map-ctrl-btn.active {
    background: rgba(201, 162, 39, 0.14) !important;
    border-color: var(--pyra-line-3) !important;
    color: var(--pyra-gold-mid) !important;
    box-shadow: 0 0 10px rgba(232, 197, 71, 0.15) !important;
}
.map-ctrl-btn span { font-family: var(--pyra-font-body) !important; letter-spacing: 0.04em; }
/* the poster's instrument-rail captions, carved into the dividers */
#mapControlsGrid .ctrl-divider {
    grid-column: 1 / -1;
    height: auto !important;
    background: none !important;
    border-top: 1px solid var(--pyra-line-1) !important;
    margin: 5px 0 1px !important;
    position: relative;
}
#mapControlsGrid .ctrl-divider::after {
    display: block;
    font-family: var(--pyra-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.2em;
    color: rgba(217, 199, 160, 0.45);
    padding-top: 3px;
}
#mapControlsGrid::before {
    content: 'BASE';
    grid-column: 1 / -1;
    font-family: var(--pyra-font-mono);
    font-size: 7.5px;
    letter-spacing: 0.2em;
    color: rgba(217, 199, 160, 0.45);
    padding: 1px 0 0 2px;
}
#mapControlsGrid .ctrl-divider:nth-of-type(1)::after { content: 'DIMENSION'; }
#mapControlsGrid .ctrl-divider:nth-of-type(2)::after { content: 'CAMERA'; }
#mapControlsGrid .ctrl-divider:nth-of-type(3)::after { content: 'SITES'; }
#mapControlsGrid .ctrl-divider:nth-of-type(4)::after { content: 'OVERLAYS'; }

/* zoom + camera toolbar: high in the lane, never glued to the bottom edge */
#mapNavToolbar {
    top: calc(100vh - 306px) !important;
    bottom: auto !important;
    right: 14px !important;
    transform: none !important;
    border-radius: 10px !important;
    border: 1px solid var(--pyra-line-2) !important;
    background: rgba(8, 12, 21, 0.88) !important;
    box-shadow: var(--pyra-shadow-panel) !important;
}
#mapNavToolbar button {
    color: var(--pyra-gold-mid) !important;
    font-family: var(--pyra-font-mono) !important;
    transition: background var(--pyra-t-fast) ease;
}
#mapNavToolbar button:hover { background: rgba(201, 162, 39, 0.12) !important; }

/* ═══ 5 · PANEL PLATE ANATOMY — one grammar, every tool ═════════════════════ */
#messageModal,
#geometryNetworkPanel, #astroLinesPanel, #alignmentLabPanel, #skyEventsPanel,
#astralPanel, #drawMeasurePanel, #mapStylePanel, #isochronePanel,
#directionsPanel, #snapshotPanel, #terrainReliefPanel, #contourPanel,
#tilt3DControlPanel, #communityHubPanel, #unifiedToolsToolbar,
#discoveryControls, #overlayControlPanel, #topBarClearMenu,
.unit-settings-panel {
    background: var(--pyra-plate) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: var(--pyra-r-panel) !important;
    box-shadow: var(--pyra-shadow-panel) !important;
    backdrop-filter: blur(10px);
}
/* panel headers — folio captions (inline-styled headers inherit the color fixes;
   this carries the display face onto every first header row) */
#messageModal h2, #messageModal h3:first-of-type,
.dm-header .dm-title, .toolbar-title,
#communityHubPanel h3, #geometryNetworkPanel h3 {
    font-family: var(--pyra-font-display) !important;
    letter-spacing: 0.18em !important;
    color: var(--pyra-sand) !important;
    text-transform: uppercase;
}
/* the modal shell system */
.modal-container, .modal {
    background: var(--pyra-plate) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: var(--pyra-r-panel) !important;
    box-shadow: var(--pyra-shadow-panel) !important;
}
.modal-overlay { background: rgba(3, 4, 10, 0.72) !important; backdrop-filter: blur(3px); }
.modal-title { color: var(--pyra-gold-hi) !important; }
.modal-close:hover { color: var(--pyra-gold-hi) !important; }

/* auth + upgrade — the gold plates */
.auth-modal .modal-container, .upgrade-modal .modal-container { border-color: var(--pyra-line-2) !important; }
.auth-modal input {
    background: rgba(10, 15, 26, 0.8) !important;
    border: 1px solid var(--pyra-line-1) !important;
    border-radius: 9px !important;
    color: var(--pyra-ink) !important;
}
.auth-modal input:focus { border-color: var(--pyra-line-3) !important; }
.btn-primary, .auth-submit-btn, .upgrade-btn {
    font-family: var(--pyra-font-display) !important;
    letter-spacing: 0.14em !important;
    background: linear-gradient(135deg, #c9a227, #e8c547) !important;
    color: #0a0f1a !important;
    border: none !important;
    border-radius: 10px !important;
}
.btn-primary:hover, .auth-submit-btn:hover, .upgrade-btn:hover {
    box-shadow: 0 0 20px rgba(232, 197, 71, 0.3) !important;
    transform: translateY(-1px);
}
.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--pyra-line-2) !important;
    color: var(--pyra-sand) !important;
    border-radius: 10px !important;
}
.btn-secondary:hover { border-color: var(--pyra-line-3) !important; color: var(--pyra-gold-hi) !important; }

/* ═══ 6 · THE SITE CARD — the plate ═════════════════════════════════════════ */
.site-info-card, .simple-place-card {
    background: var(--pyra-plate) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: var(--pyra-r-panel) !important;
    box-shadow: var(--pyra-shadow-panel) !important;
    font-family: var(--pyra-font-body) !important;
    overflow: hidden;
}
.site-info-card > div:first-of-type {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.08), rgba(201, 162, 39, 0.02)) !important;
    border-bottom: 1px solid var(--pyra-line-1) !important;
}
.site-info-card h3, .simple-place-card h3 {
    font-family: var(--pyra-font-display) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: var(--pyra-gold-hi) !important;
}
.site-info-card span[style*="monospace"], .simple-place-card span[style*="monospace"] {
    font-family: var(--pyra-font-mono) !important;
    color: var(--pyra-gold-mid) !important;
}
.site-info-card button[onclick^="safeCopyToClipboard"],
.simple-place-card button[onclick^="safeCopyToClipboard"] {
    background: rgba(201, 162, 39, 0.10) !important;
    border: 1px solid var(--pyra-line-2) !important;
    color: var(--pyra-gold-mid) !important;
}
.site-info-card button[onclick^="getAIResearch"] {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.13), rgba(201, 162, 39, 0.04)) !important;
    border: 1px solid var(--pyra-line-2) !important;
    color: var(--pyra-ink) !important;
}
.site-info-card button[onclick^="getAIResearch"]:hover {
    border-color: var(--pyra-line-3) !important;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.20), rgba(201, 162, 39, 0.07)) !important;
}
.site-info-card button[onclick^="saveSiteToFavorites"],
.simple-place-card button[onclick^="saveSiteToFavorites"] {
    background: linear-gradient(135deg, #c9a227, #e8c547) !important;
    color: #0a0f1a !important;
    border: none !important;
}
.site-info-card button:not([onclick^="APP_STATE"]):not([onclick^="safeCopyToClipboard"]):not([onclick^="getAIResearch"]):not([onclick^="saveSiteToFavorites"]):not([onclick^="removeFromFavorites"]),
.simple-place-card button:not([onclick^="APP_STATE"]):not([onclick^="safeCopyToClipboard"]):not([onclick^="saveSiteToFavorites"]):not([onclick^="removeFromFavorites"]) {
    background: rgba(201, 162, 39, 0.04) !important;
    border: 1px solid var(--pyra-line-1) !important;
    transition: border-color var(--pyra-t-fast) ease, background var(--pyra-t-fast) ease;
}
.site-info-card button:not([onclick^="APP_STATE"]):not([onclick^="safeCopyToClipboard"]):not([onclick^="getAIResearch"]):not([onclick^="saveSiteToFavorites"]):not([onclick^="removeFromFavorites"]):hover,
.simple-place-card button:not([onclick^="APP_STATE"]):not([onclick^="safeCopyToClipboard"]):not([onclick^="saveSiteToFavorites"]):not([onclick^="removeFromFavorites"]):hover {
    border-color: var(--pyra-line-3) !important;
    background: rgba(201, 162, 39, 0.09) !important;
}
.site-info-card button span[style*="font-size:10.5px"],
.site-info-card button span[style*="font-size:10.5px"] { color: rgba(217, 199, 160, 0.7) !important; }
.site-info-card div[style*="justify-content:space-between"][style*="rgba(201, 162, 39, 0.06)"] {
    background: rgba(201, 162, 39, 0.045) !important;
    border: 1px solid var(--pyra-line-1) !important;
}
/* mapbox popup wrapper stays invisible; tip retired */
.mapboxgl-popup-content { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.mapboxgl-popup-tip { display: none !important; }

/* ═══ 7 · BOTTOM BAR + FURNITURE ════════════════════════════════════════════ */
#bottomBar {
    background: linear-gradient(0deg, rgba(5, 7, 13, 0.92), rgba(5, 7, 13, 0.75)) !important;
    border-top: 1px solid rgba(201, 162, 39, 0.12) !important;
    font-family: var(--pyra-font-body) !important;
}
#bottomBar .coordinates, #bottomBar .site-count { font-family: var(--pyra-font-mono) !important; color: rgba(217, 199, 160, 0.6) !important; }
#bottomBar .copyright-text { color: rgba(217, 199, 160, 0.4) !important; }
#bottomBar .brand-link { color: var(--pyra-gold-deep) !important; }

/* FAB — engraved seal */
.fab-main {
    background: linear-gradient(135deg, #c9a227, #e8c547) !important;
    color: #0a0f1a !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(232, 197, 71, 0.2) !important;
}
.fab-item {
    background: rgba(8, 12, 21, 0.92) !important;
    border: 1px solid var(--pyra-line-2) !important;
    color: var(--pyra-sand) !important;
}
.fab-item:hover { border-color: var(--pyra-line-3) !important; color: var(--pyra-gold-hi) !important; }

/* context menu — the plate again */
.context-menu {
    background: var(--pyra-plate) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: 12px !important;
    box-shadow: var(--pyra-shadow-panel) !important;
    font-family: var(--pyra-font-body) !important;
}
.context-menu-item:hover { background: rgba(201, 162, 39, 0.08) !important; color: var(--pyra-gold-hi) !important; }
.context-menu-divider { background: var(--pyra-line-1) !important; }

/* toasts — folio slips */
#toast, .toast {
    background: var(--pyra-plate) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: 12px !important;
    box-shadow: var(--pyra-shadow-panel) !important;
    font-family: var(--pyra-font-body) !important;
    color: var(--pyra-ink) !important;
}

/* loader — the gateway scene: through the portal, onto the map */
.initial-loader {
    /* near-pure black so the plate's crushed blacks dissolve seamlessly */
    background: radial-gradient(1100px 700px at 50% 56%, #090e18 0%, #050810 48%, #020409 100%) !important;
    overflow: hidden;
}
.v3-portal-rays {
    position: absolute;
    left: 50%; top: 54%;
    width: 190vmax; height: 190vmax;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg,
        rgba(232,197,71,0.05) 0deg 1.1deg,
        transparent 1.1deg 7.3deg);
    -webkit-mask-image: radial-gradient(circle, transparent 8%, #000 26%, transparent 62%);
    mask-image: radial-gradient(circle, transparent 8%, #000 26%, transparent 62%);
    mix-blend-mode: screen;
    animation: v3rayWheel 140s linear infinite;
    opacity: 0.8;
}
@keyframes v3rayWheel { to { transform: translate(-50%, -50%) rotate(360deg); } }
.v3-portal-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}
.v3-loader-stars {
    position: absolute;
    inset: -10%;
    background-image:
        radial-gradient(1.2px 1.2px at 12% 22%, rgba(245,230,176,0.9), transparent 60%),
        radial-gradient(1px 1px at 31% 68%, rgba(237,210,122,0.7), transparent 60%),
        radial-gradient(1.6px 1.6px at 54% 14%, rgba(245,230,176,0.85), transparent 60%),
        radial-gradient(1px 1px at 72% 41%, rgba(217,199,160,0.6), transparent 60%),
        radial-gradient(1.3px 1.3px at 86% 74%, rgba(245,230,176,0.8), transparent 60%),
        radial-gradient(0.9px 0.9px at 44% 86%, rgba(237,210,122,0.55), transparent 60%),
        radial-gradient(1px 1px at 64% 60%, rgba(245,230,176,0.5), transparent 60%),
        radial-gradient(1.4px 1.4px at 23% 47%, rgba(232,197,71,0.6), transparent 60%),
        radial-gradient(1px 1px at 92% 18%, rgba(217,199,160,0.65), transparent 60%);
    background-size: 640px 460px, 520px 380px, 760px 540px, 460px 420px, 700px 500px, 560px 440px, 480px 360px, 820px 560px, 600px 480px;
    animation: v3starDrift 90s linear infinite;
    opacity: 0.9;
}
@keyframes v3starDrift { to { transform: translate3d(-60px, -30px, 0); } }
#v3PortalImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;                 /* the panorama owns the whole stage */
    object-position: 50% 55%;
    mix-blend-mode: screen;            /* the plate's black melts into the abyss */
    filter: brightness(1.04);
    animation: v3approach 34s ease-in-out infinite alternate;
    transform-origin: 50% 54%;         /* the arch opening — where we fly through */
}
@keyframes v3approach {
    from { transform: scale(1.02); }
    to   { transform: scale(1.14); }
}
.v3-portal-glow {
    position: absolute;
    left: 50%; top: 54%;
    width: 40vmin; height: 40vmin;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(232,197,71,0.14) 0%, rgba(232,197,71,0.05) 42%, transparent 70%);
    animation: v3gatePulse 4.6s ease-in-out infinite;
}
@keyframes v3gatePulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.loader-content {
    position: relative;
    z-index: 2;
    /* the identity must read against the engraving: a night scrim behind it */
    padding: 34px 64px 26px;
    border-radius: 22px;
    background: radial-gradient(closest-side, rgba(2, 4, 9, 0.88), rgba(2, 4, 9, 0.55) 62%, transparent);
}
.loader-text {
    font-size: 40px !important;
    text-shadow: 0 0 26px rgba(232, 197, 71, 0.45), 0 2px 10px rgba(0, 0, 0, 0.9);
}
.loader-subtitle {
    font-size: 17px !important;
    color: rgba(233, 223, 192, 0.92) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.loader-status { font-size:12.5px !important; color: rgba(217, 199, 160, 0.75) !important; }
.loader-icon img { filter: drop-shadow(0 0 26px rgba(232, 197, 71, 0.55)) drop-shadow(0 2px 8px rgba(0,0,0,0.9)); }
/* the crossing: gate rushes past, the map is revealed beneath */
.initial-loader.v3-warp { transition: opacity 0.7s ease !important; }
.initial-loader.v3-warp #v3PortalImg {
    animation: v3warp 1.25s cubic-bezier(0.55, 0, 0.85, 0.35) forwards !important;
}
@keyframes v3warp {
    to { transform: scale(4.2); opacity: 0; }
}
.initial-loader.v3-warp .loader-content {
    animation: v3contentOut 0.45s ease forwards;
}
@keyframes v3contentOut { to { opacity: 0; transform: scale(0.92); } }
.initial-loader.v3-warp .v3-portal-glow { animation: none; opacity: 0; transition: opacity 0.4s; }
.initial-loader.v3-warp .v3-portal-rays { animation: none; opacity: 0; transition: opacity 0.4s; }
@media (prefers-reduced-motion: reduce) {
    #v3PortalImg, .v3-loader-stars, .v3-portal-glow, .v3-portal-rays { animation: none !important; }
    .initial-loader.v3-warp #v3PortalImg { animation: none !important; opacity: 0; transition: opacity 0.5s; }
}
.loader-icon {
    position: relative;
    display: inline-block;
    padding: 34px;
}
.loader-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(201, 162, 39, 0.35);
    animation: v3orbit 40s linear infinite;
}
.loader-icon::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.15);
}
.loader-icon img {
    width: 150px !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 26px rgba(232, 197, 71, 0.35));
    animation: v3breathe 3.2s ease-in-out infinite;
}
@keyframes v3orbit { to { transform: rotate(360deg); } }
@keyframes v3breathe {
    0%, 100% { filter: drop-shadow(0 0 18px rgba(232, 197, 71, 0.25)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 40px rgba(232, 197, 71, 0.5)); transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
    .loader-icon::before, .loader-icon img { animation: none !important; }
}
.loader-text {
    font-family: var(--pyra-font-display) !important;
    letter-spacing: 0.34em !important;
    color: var(--pyra-gold-hi) !important;
}
.loader-subtitle {
    font-family: var(--pyra-font-body) !important;
    font-style: italic;
    color: rgba(217, 199, 160, 0.7) !important;
}
.loader-progress { background: rgba(201, 162, 39, 0.12) !important; }
.loader-progress-bar { background: linear-gradient(90deg, #c9a227, #e8c547) !important; }
.loader-status { font-family: var(--pyra-font-mono) !important; font-size:11.5px !important; color: rgba(217, 199, 160, 0.5) !important; }
.loading-overlay { background: rgba(3, 4, 10, 0.8) !important; }
.loading-content { font-family: var(--pyra-font-body) !important; }

/* chat panel */
.chat-panel {
    background: var(--pyra-plate) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: var(--pyra-r-panel) !important;
    box-shadow: var(--pyra-shadow-panel) !important;
}
.chat-header { background: rgba(201, 162, 39, 0.06) !important; border-bottom: 1px solid var(--pyra-line-1) !important; }
#chatInput { background: rgba(10, 15, 26, 0.8) !important; border: 1px solid var(--pyra-line-1) !important; color: var(--pyra-ink) !important; border-radius: 10px !important; }

/* overlay control panel */
#overlayControlPanel .overlay-controls button:hover { border-color: var(--pyra-line-3) !important; }

/* panel-manager chip dock */
#pyraChipDock .pyra-chip {
    font-family: var(--pyra-font-display) !important;
    letter-spacing: 0.1em !important;
    background: rgba(8, 12, 21, 0.9) !important;
    border: 1px solid var(--pyra-line-2) !important;
    color: var(--pyra-sand) !important;
}

/* scrollbars — a gold thread */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(5, 7, 13, 0.6); }
::-webkit-scrollbar-thumb { background: rgba(201, 162, 39, 0.28); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 39, 0.45); }
* { scrollbar-color: rgba(201, 162, 39, 0.28) rgba(5, 7, 13, 0.6); }

::selection { background: rgba(201, 162, 39, 0.35); color: var(--pyra-gold-hi); }

input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: #c9a227; }

/* welcome tour overlay */
#pyramasonTourOverlay > div {
    font-family: var(--pyra-font-body) !important;
}

/* ═══ 8 · DESKTOP COMPOSITION (poster furniture; mobile keeps its grammar) ══ */
@media (min-width: 769px) {
    /* instrument HUD plate, bottom-left */
    #v3Hud {
        position: fixed;
        left: 14px;
        bottom: 44px;
        z-index: 900;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 14px;
        background: rgba(8, 12, 21, 0.88);
        border: 1px solid var(--pyra-line-2);
        border-radius: 12px;
        box-shadow: var(--pyra-shadow-panel);
        backdrop-filter: blur(10px);
        font-family: var(--pyra-font-mono);
        font-size:12.5px;
        color: var(--pyra-gold-mid);
        font-variant-numeric: tabular-nums;
        pointer-events: auto;
    }
    #v3Hud .v3hud-label {
        font-family: var(--pyra-font-body);
        font-size:12.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(217, 199, 160, 0.55);
    }
    #v3Hud .v3hud-div { width: 1px; height: 14px; background: var(--pyra-line-1); }
    #v3Hud .v3hud-zoom { cursor: pointer; }
    #v3Hud .v3hud-zoom:hover { color: var(--pyra-gold-hi); }
    /* the HUD replaces these on desktop — their updaters keep feeding it */
    #statsDisplay, #zoomDisplayTop, #mouseCoordinates { display: none !important; }
    body:not(.left-collapsed) #v3Hud { left: 294px; }
    body.left-collapsed #v3Hud { left: 14px; }

    /* corner scale ruler, engraved (km + MY handled by the app's own control) */
    .mapboxgl-ctrl-scale {
        position: fixed !important;
        left: auto !important;
        right: 64px !important;
        bottom: 42px !important;
        background: rgba(8, 12, 21, 0.75) !important;
        border: none !important;
        border-bottom: 1.5px solid var(--pyra-gold-deep) !important;
        border-left: 1.5px solid var(--pyra-gold-deep) !important;
        border-right: 1.5px solid var(--pyra-gold-deep) !important;
        border-radius: 0 !important;
        color: var(--pyra-sand) !important;
        font-family: var(--pyra-font-mono) !important;
        font-size:11px !important;
        letter-spacing: 0.08em;
        padding: 1px 6px 0 !important;
    }

    .search-container .voice-search-btn { right: 8px !important; }

    /* left edge rails */
    #v3Rails {
        position: fixed;
        top: 88px;
        z-index: 850;
        display: flex;
        flex-direction: column;
        gap: 10px;
        left: 0;
        transition: left 0.3s ease;
    }
    body:not(.left-collapsed) #v3Rails { left: 280px; }
    .v3-rail-tab {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-family: var(--pyra-font-display);
        font-size:10.5px;
        font-weight: 600;
        letter-spacing: 0.22em;
        color: rgba(217, 199, 160, 0.65);
        background: rgba(8, 12, 21, 0.88);
        border: 1px solid var(--pyra-line-1);
        border-right: none;
        border-radius: 8px 0 0 8px;
        padding: 12px 4px;
        cursor: pointer;
        backdrop-filter: blur(8px);
        transition: color var(--pyra-t-fast) ease, border-color var(--pyra-t-fast) ease;
    }
    .v3-rail-tab:hover { color: var(--pyra-gold-hi); border-color: var(--pyra-line-3); }
    .v3-rail-tab .v3rail-glyph {
        display: block;
        font-size:13.5px;
        color: var(--pyra-gold-deep);
        margin: 0 0 6px;
        transform: rotate(90deg);
    }
    .v3-rail-tab.v3-rail-on {
        color: var(--pyra-gold-mid);
        border-color: var(--pyra-line-3);
        background: rgba(201, 162, 39, 0.10);
    }
    #leftSidebarToggle {
        background: rgba(8, 12, 21, 0.88) !important;
        border: 1px solid var(--pyra-line-2) !important;
        color: var(--pyra-gold-mid) !important;
        top: auto !important;
        bottom: 140px !important;
    }

    /* SIGN IN ghost · GO PRO gold */
    .v3-auth-ghost, .v3-auth-gold {
        font-family: var(--pyra-font-display);
        font-size:12.5px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        border-radius: 18px;
        padding: 8px 16px;
        cursor: pointer;
        margin-right: 8px;
        transition: box-shadow var(--pyra-t-fast) ease, border-color var(--pyra-t-fast) ease;
        white-space: nowrap;
    }
    .v3-auth-ghost { background: transparent; border: 1px solid var(--pyra-line-2); color: var(--pyra-sand); }
    .v3-auth-ghost:hover { border-color: var(--pyra-line-3); color: var(--pyra-gold-hi); }
    .v3-auth-gold { background: linear-gradient(135deg, #c9a227, #e8c547); border: none; color: #0a0f1a; }
    .v3-auth-gold:hover { box-shadow: 0 0 18px rgba(232, 197, 71, 0.35); }

    /* TYPE chip + its gold dropdown (poster) */
    #v3TypeChip {
        font-family: var(--pyra-font-mono);
        font-size:11px;
        letter-spacing: 0.12em;
        color: rgba(217, 199, 160, 0.75);
        background: transparent;
        border: 1px solid var(--pyra-line-1);
        border-radius: 12px;
        padding: 4px 10px;
        margin: 0 46px 0 6px;
        cursor: pointer;
        flex-shrink: 0;
        transition: border-color var(--pyra-t-fast) ease, color var(--pyra-t-fast) ease;
    }
    #v3TypeChip:hover { border-color: var(--pyra-line-3); color: var(--pyra-gold-hi); }
    #v3TypeChip .v3chip-caret { font-size: 8px; opacity: 0.7; }
    #v3TypeDD {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 262px;
        display: none;
        z-index: 1200;
        background: var(--pyra-plate);
        border: 1px solid var(--pyra-line-2);
        border-radius: 12px;
        box-shadow: var(--pyra-shadow-panel);
        padding: 6px;
        backdrop-filter: blur(10px);
        max-height: 60vh;
        overflow-y: auto;
    }
    #v3TypeDD.open { display: block; }
    .v3dd-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 10px;
        border-radius: 8px;
        cursor: pointer;
        font-family: var(--pyra-font-body);
        font-size: 14px;
        color: rgba(217, 199, 160, 0.85);
        transition: 0.12s;
    }
    .v3dd-row i { font-style: normal; color: var(--pyra-gold-mid); width: 15px; text-align: center; flex: none; }
    .v3dd-row b { margin-left: auto; font-family: var(--pyra-font-mono); font-size:11.5px; font-weight: 400; color: rgba(217, 199, 160, 0.45); }
    .v3dd-row:hover { background: rgba(201, 162, 39, 0.08); color: var(--pyra-gold-hi); }
    .v3dd-row.on { background: rgba(201, 162, 39, 0.12); color: var(--pyra-gold-hi); }
    .v3dd-all {
        justify-content: center;
        font-size: 12.5px;
        color: rgba(232, 197, 71, 0.7);
        border-top: 1px dashed var(--pyra-line-1);
        border-radius: 0;
        margin-top: 4px;
        padding-top: 9px;
    }
    .v3-flash { outline: 1px solid var(--pyra-line-3); outline-offset: 2px; border-radius: 10px; transition: outline-color 1.2s ease; }
}

/* ═══ 8b · ROUTES & TRAVEL — stronger presence ══════════════════════════════ */
#directionsPanel input, #isochronePanel input, #directionsPanel select {
    background: rgba(10, 15, 26, 0.85) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: 9px !important;
    color: var(--pyra-ink) !important;
    font-size: 14px !important;
}
#dirResult, #isoStatus {
    font-family: var(--pyra-font-body) !important;
    font-size: 14px !important;
    color: rgba(245, 230, 176, 0.9) !important;
}
#dirResult b, #isoStatus b { color: var(--pyra-gold-mid) !important; font-family: var(--pyra-font-mono) !important; }

/* ═══ 9 · MOTION DISCIPLINE ═════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .search-container, #topBar .icon-btn, #mapNavToolbar button,
    .site-info-card button, .v3-auth-ghost, .v3-auth-gold, #v3TypeChip,
    .v3-rail-tab, .tool-btn, .map-ctrl-btn { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ═══ 10 · THE V3 SHELL — the poster's composition (desktop ≥ 769px) ═══════════
   Full-bleed map. No sidebar (the codex lives behind the rails). Whisper top
   bar. One slim instrument rail. Atmosphere: stars · dawn · rays · vignette ·
   grain. Mobile keeps the v2 grammar untouched.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* ── the stage: map fills everything ── */
    #map { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; }
    body.left-collapsed #map, body:not(.left-collapsed) #map { left: 0 !important; }

    /* ── atmosphere stack (built by v3-atlas.js, pointer-events none) ── */
    #v3Atmo { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
    #v3Atmo .v3-tooth { display: none; }
    #v3Atmo .v3-stars { position: absolute; inset: 0; opacity: .55; }
    #v3Atmo .v3-stars circle { animation: v3tw 7s ease-in-out infinite; }
    #v3Atmo .v3-stars circle:nth-child(3n) { animation-delay: 2.3s; animation-duration: 9s; }
    #v3Atmo .v3-stars circle:nth-child(3n+1) { animation-delay: 4.6s; animation-duration: 11s; }
    @keyframes v3tw { 50% { opacity: .12; } }
    #v3Atmo .v3-grat { position: absolute; inset: 0; opacity: .5;
        background-image:
            linear-gradient(rgba(201, 162, 39, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(201, 162, 39, 0.05) 1px, transparent 1px);
        background-size: 132px 132px; }
    #v3Atmo .v3-dawn { position: absolute; right: -6%; top: -14%; width: 620px; height: 620px;
        background: radial-gradient(circle, rgba(232, 197, 71, 0.16) 0%, rgba(201, 162, 39, 0.06) 42%, transparent 68%);
        animation: v3dawn 26s ease-in-out infinite alternate; }
    @keyframes v3dawn { from { opacity: .85; transform: scale(1); } to { opacity: 1; transform: scale(1.045); } }
    #v3Atmo .v3-rays { position: absolute; right: -4%; top: -10%; width: 760px; height: 760px; opacity: .5;
        background: repeating-conic-gradient(from 205deg at 78% 22%,
            rgba(232, 197, 71, 0.045) 0deg 2deg, transparent 2deg 11deg);
        -webkit-mask: radial-gradient(circle at 78% 22%, #000 0%, transparent 62%);
                mask: radial-gradient(circle at 78% 22%, #000 0%, transparent 62%);
        animation: v3ray 44s ease-in-out infinite alternate; }
    @keyframes v3ray { from { opacity: .42; } to { opacity: .58; } }
    #v3Atmo .v3-haze { position: absolute; inset: 0;
        background: linear-gradient(200deg, transparent 40%, rgba(5, 7, 13, 0.34) 78%, rgba(5, 7, 13, 0.6) 100%); }
    #v3Atmo .v3-vig { position: absolute; inset: 0;
        background: radial-gradient(120% 95% at 50% 42%, transparent 55%, rgba(3, 4, 10, 0.55) 100%); }
    #v3Atmo .v3-grain { position: absolute; inset: 0; opacity: .35; }
    @media (prefers-reduced-motion: reduce) {
        #v3Atmo .v3-dawn, #v3Atmo .v3-rays, #v3Atmo .v3-stars circle { animation: none !important; }
    }

    /* ── whisper top bar: mark · search+TYPE · SIGN IN / GO PRO / account ── */
    #topBar {
        background: linear-gradient(180deg, rgba(5, 7, 13, 0.92), rgba(5, 7, 13, 0.5) 70%, transparent) !important;
        border-bottom: none !important;
        backdrop-filter: none;
        box-shadow: none !important;
    }
    /* retire the busy icon row — every function keeps a home:
       undo/redo/clear → overlay controls; chat → COMMUNITY rail; theme → Map
       Style panel; globe → dock DIMENSION. All reported in the change log. */
    /* theme + globe toggles live in the dock/Map Style panel (duplicates);
       chat and undo/redo/clear STAY, engraved (Farhad 2026-07-31) */
    #themeToggle, #globeToggleBtn, #topBarChatBtn,
    #zoomDisplayTop, #statsDisplay { display: none !important; }
    #topBar .top-bar-history-controls .icon-btn,
    #topBarChatBtn {
        border: 1px solid rgba(201, 162, 39, 0.16) !important;
        border-radius: 9px !important;
    }
    .version-badge { opacity: .75; }

    /* ── the codex is a summoned plate, not a permanent wall ── */
    #leftSidebar {
        position: fixed !important;
        top: 64px !important;
        bottom: 60px !important;
        left: 34px !important;
        width: 300px !important;
        height: auto !important;
        border: 1px solid var(--pyra-line-2) !important;
        border-radius: var(--pyra-r-panel) !important;
        background: var(--pyra-plate) !important;
        box-shadow: var(--pyra-shadow-panel) !important;
        backdrop-filter: blur(10px);
        z-index: 940 !important;
        transition: transform .3s ease, opacity .3s ease !important;
    }
    body.left-collapsed #leftSidebar {
        transform: translateX(-120%) !important;
        opacity: 0;
        pointer-events: none;
    }
    body:not(.left-collapsed) #leftSidebar { transform: none !important; opacity: 1; }
    /* rails stay on the window edge — they ARE the way in */
    #v3Rails { left: 0 !important; }
    body:not(.left-collapsed) #v3Rails { left: 0 !important; }
    /* the old edge toggle retires — rails + the ✕ close do its job */
    #leftSidebarToggle { display: none !important; }
    /* HUD sits on the abyss floor regardless of the codex */
    body:not(.left-collapsed) #v3Hud { left: 14px; }

    /* the static (pre-v9) controls panel and native mapbox nav never show */
    #mapControlsPanel.map-controls-panel { display: none !important; }
    .mapboxgl-ctrl-top-right { display: none !important; }

    /* ── the instrument rail: slim, icons only, captions carved ── */
    div.map-controls-container, .map-controls-container {
        width: 138px !important;
        min-width: 138px !important;
        max-width: 138px !important;
        right: 16px !important;
        top: 78px !important;
        padding: 0 !important;
        max-height: calc(100vh - 380px) !important;
    }
    .map-controls-header { display: none !important; }
    #mapControlsGrid {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 3px !important;
        padding: 8px 6px !important;
    }
    .map-ctrl-btn {
        height: 38px !important;
        width: 100% !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    .map-ctrl-btn:hover { background: rgba(201, 162, 39, 0.10) !important; border: none !important; }
    .map-ctrl-btn.active { background: rgba(201, 162, 39, 0.16) !important; outline: 1px solid var(--pyra-line-2); box-shadow: none !important; }
    .map-ctrl-btn span { display: none !important; }   /* names live in the tooltips */
    .map-ctrl-btn:not(:has(svg)) span {
        display: block !important;
        font-family: var(--pyra-font-mono) !important;
        font-size:11.5px !important;
        color: rgba(217, 199, 160, 0.8) !important;
    }
    .map-ctrl-btn svg { width: 17px !important; height: 17px !important; }
    #mapControlsGrid .ctrl-divider { margin: 4px 0 1px !important; }
    #mapControlsGrid::before, #mapControlsGrid .ctrl-divider::after { text-align: center; padding-left: 0; }

    /* tooltips flow to the LEFT of the rail */
    .map-ctrl-btn { position: relative; }

    /* zoom + camera column beneath the rail */
    #mapNavToolbar {
        top: auto !important;
        bottom: 158px !important;
        right: 16px !important;
        width: 46px !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 12px !important;
    }
    #mapNavToolbar button { height: 34px !important; }
    #mapNavToolbar button { width: 100% !important; height: 36px !important; }

    /* ── the floor: HUD + ruler only ── */
    #bottomBar { display: none !important; }
    #v3Hud { bottom: 18px; }
    .mapboxgl-ctrl-scale { bottom: 20px !important; right: 90px !important; }

    /* FAB in the right-edge line: eye at the foot, FAB above it, zoom above that */
    .fab-container { bottom: 88px !important; right: 12px !important; }
    .fab-main { width: 36px !important; height: 36px !important; }
    .fab-main .fab-icon { font-size: 18px !important; }

    /* panels clear the instrument rail entirely — no overlaps */
    #messageModal, #communityHubPanel, #geometryNetworkPanel, #astroLinesPanel,
    #alignmentLabPanel, #skyEventsPanel, #mapStylePanel, #isochronePanel,
    #directionsPanel, #snapshotPanel, #terrainReliefPanel, #contourPanel,
    #drawMeasurePanel { right: 170px !important; left: auto !important; }
}

/* ═══ 11 · HELP — the reading room ═════════════════════════════════════════ */
[id^="helpTab"] {
    font-family: var(--pyra-font-display) !important;
    font-size:11.5px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    border: 1px solid var(--pyra-line-1) !important;
    border-radius: 14px !important;
    color: var(--pyra-sand) !important;
    transition: border-color var(--pyra-t-fast) ease, color var(--pyra-t-fast) ease !important;
}
[id^="helpTab"]:hover { border-color: var(--pyra-line-3) !important; color: var(--pyra-gold-hi) !important; }
[id^="helpContent"] h3, [id^="helpContent"] h4 {
    font-family: var(--pyra-font-display) !important;
    letter-spacing: 0.1em !important;
    color: var(--pyra-gold-hi) !important;
}
[id^="helpContent"] p, [id^="helpContent"] li {
    font-family: var(--pyra-font-body) !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
}
#messageModal kbd, #pyramasonTourOverlay kbd {
    font-family: var(--pyra-font-mono) !important;
    font-size:11.5px !important;
    background: rgba(201, 162, 39, 0.10) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: 5px !important;
    color: var(--pyra-gold-mid) !important;
    padding: 2px 7px !important;
}

/* ═══ 12 · SITE-CARD HERO ENGRAVINGS (art-kit plates) ══════════════════════ */
.v3-hero {
    position: relative;
    height: 128px;
    margin: -1px -1px 0;
    overflow: hidden;
    background: transparent;            /* the engraving floats on the plate itself */
    border-radius: var(--pyra-r-panel) var(--pyra-r-panel) 0 0;
}
.v3-hero img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 112%;
    mix-blend-mode: screen;             /* black night dissolves — only gold lines remain */
    filter: brightness(1.25) contrast(1.05);
    /* edges melt into the card: fade every border of the plate */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 72%, transparent 100%),
                        linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 72%, transparent 100%),
                linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-composite: intersect;
}
.v3-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, transparent 58%, rgba(10,15,26,0.9));
}

/* ═══ 13 · THE CODEX INTERIOR — sidebar reborn in the atlas grammar ════════ */
/* whisper scrollbars everywhere — thin, gold, trackless */
* { scrollbar-width: thin; scrollbar-color: rgba(201,162,39,0.30) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.26); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(201,162,39,0.5); }
*::-webkit-scrollbar-corner { background: transparent; }

/* sections dissolve into the plate: hairline chapters, not navy boxes */
#leftSidebar .sidebar-section {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(201,162,39,0.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 12px 18px !important;
    margin: 0 !important;
}
#leftSidebar .sidebar-section:last-child { border-bottom: none !important; }
#leftSidebar .section-header { background: transparent !important; border: none !important; }
#leftSidebar .section-title {
    font-family: var(--pyra-font-display) !important;
    font-size:13.5px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    color: var(--pyra-gold-hi) !important;
}
#leftSidebar .section-icon { color: var(--pyra-gold-deep) !important; width: 15px !important; height: 15px !important; }
#leftSidebar .section-action, #leftSidebar .section-toggle {
    background: transparent !important;
    border: 1px solid rgba(201,162,39,0.18) !important;
    border-radius: 50% !important;
    color: rgba(217,199,160,0.75) !important;
}
#leftSidebar .section-action:hover, #leftSidebar .section-toggle:hover {
    border-color: rgba(201,162,39,0.5) !important;
    color: var(--pyra-gold-hi) !important;
}

/* chapter cards: engraved folio entries */
.codex-chapter {
    background: linear-gradient(163deg, rgba(201,162,39,0.05), rgba(8,13,24,0.35)) !important;
    border: 1px solid rgba(201,162,39,0.16) !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.codex-head {
    background: transparent !important;
    border: none !important;
    padding: 12px 14px !important;
}
.codex-head:hover { background: rgba(201,162,39,0.07) !important; }
.codex-head .codex-name {
    font-size:12.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: var(--pyra-ink) !important;
}
.codex-count, .codex-head .codex-count {
    font-family: var(--pyra-font-mono) !important;
    font-size:12px !important;
    color: var(--pyra-gold) !important;
    background: transparent !important;
}
.codex-body .filter-item {
    border-radius: 8px !important;
    background: transparent !important;
}
.codex-body .filter-item:hover { background: rgba(201,162,39,0.07) !important; }
#leftSidebar .filter-label {
    font-family: var(--pyra-font-body) !important;
    font-size: 14px !important;
    color: rgba(238,231,214,0.88) !important;
}
#leftSidebar .filter-count {
    font-family: var(--pyra-font-mono) !important;
    font-size:11.5px !important;
    color: rgba(201,162,39,0.85) !important;
    background: transparent !important;
    border: none !important;
}

/* group labels: carved captions with a trailing hairline */
.tools-group-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-family: var(--pyra-font-mono) !important;
    font-size:10px !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase;
    color: rgba(201,162,39,0.78) !important;
    background: transparent !important;
    border: none !important;
    margin: 10px 0 8px !important;
}
.tools-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(201,162,39,0.25), transparent);
}

/* the tools: engraved seals, not navy squares */
.tool-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 7px !important;
    padding: 8px 2px 6px !important;
    min-height: 0 !important;
    position: relative;
}
.tool-btn .tool-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 12px !important;
    border: 1px solid rgba(201,162,39,0.30) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 28%, rgba(232,197,71,0.10), rgba(8,13,24,0.65)) !important;
    color: var(--pyra-gold) !important;
    box-shadow: inset 0 0 12px rgba(201,162,39,0.06);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.tool-btn:hover { background: transparent !important; transform: none !important; box-shadow: none !important; border: none !important; }
.tool-btn:hover .tool-icon {
    border-color: rgba(232,197,71,0.75) !important;
    box-shadow: 0 0 18px rgba(232,197,71,0.28), inset 0 0 12px rgba(201,162,39,0.12);
    transform: translateY(-2px);
}
.tool-btn .tool-label {
    font-family: var(--pyra-font-display) !important;
    font-size:10px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: rgba(217,199,160,0.9) !important;
    line-height: 1.35;
}
.tool-btn .pro-tag {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translateX(30px);
    font-family: var(--pyra-font-mono) !important;
    font-size: 7px !important;
    letter-spacing: 0.12em;
    padding: 1.5px 5px !important;
    border-radius: 7px !important;
    background: rgba(8,13,24,0.9) !important;
    border: 1px solid rgba(201,162,39,0.55) !important;
    color: var(--pyra-gold) !important;
}

/* pro tools are seals too — kill the v2 square chip with max specificity */
#leftSidebar .tool-btn.pro-feature, .tool-btn.pro-feature,
#leftSidebar button.tool-btn, #astroLinesBtn, #skyEventsBtn, #alignLabBtn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.tool-btn.pro-feature:hover, #astroLinesBtn:hover, #skyEventsBtn:hover, #alignLabBtn:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.tool-btn.pro-feature .tool-icon { opacity: 1 !important; }
/* labels never clip — wrap beneath the seal */
.tool-btn { overflow: visible !important; }
.tool-btn .tool-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: 100%;
    text-align: center;
    font-size: 8px !important;
    letter-spacing: 0.09em !important;
}

/* ═══ 14 · THE TOOL REGISTER — rows, not cramped cells ═════════════════════
   Root cause of the ghost clicks: .tool-btn::before (the shine sweep) parks
   at left:-100% and NEEDS overflow:hidden; visible overflow hung every
   button's sweep box over its left neighbour. Rows restore the clip, give
   the sweep its stage back, and make every tool a full-width target. */
#leftSidebar .tools-grid, #leftSidebar .tools-grid.three-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    grid-template-columns: none !important;
}
#leftSidebar .tool-btn, #leftSidebar .tool-btn.pro-feature,
#leftSidebar button.tool-btn, #astroLinesBtn, #skyEventsBtn, #alignLabBtn {
    position: relative !important;
    overflow: hidden !important;          /* the sweep's clip — never remove */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 5px 12px 5px 8px !important;
    border-radius: 11px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    text-align: left;
}
#leftSidebar .tool-btn:hover, #leftSidebar .tool-btn.pro-feature:hover,
#astroLinesBtn:hover, #skyEventsBtn:hover, #alignLabBtn:hover {
    background: rgba(201, 162, 39, 0.07) !important;
    border-color: rgba(201, 162, 39, 0.28) !important;
    transform: none !important;
    box-shadow: none !important;
}
/* the light reflection, exactly as designed — a gold sweep across the row */
#leftSidebar .tool-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(232, 197, 71, 0.13), transparent);
    transition: left 0.45s ease;
    pointer-events: none;
}
#leftSidebar .tool-btn:hover::before { left: 100%; }
#leftSidebar .tool-btn .tool-icon {
    flex: 0 0 auto;
    width: 36px !important;
    height: 36px !important;
    padding: 9px !important;
    border: 1px solid rgba(201, 162, 39, 0.30) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 28%, rgba(232, 197, 71, 0.10), rgba(8, 13, 24, 0.65)) !important;
    color: var(--pyra-gold) !important;
    box-shadow: inset 0 0 10px rgba(201, 162, 39, 0.06);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    transform: none !important;
}
#leftSidebar .tool-btn:hover .tool-icon {
    border-color: rgba(232, 197, 71, 0.8) !important;
    box-shadow: 0 0 16px rgba(232, 197, 71, 0.30), inset 0 0 10px rgba(201, 162, 39, 0.12);
    transform: none !important;          /* no movement — no hover flicker */
}
#leftSidebar .tool-btn .tool-label {
    flex: 1 1 auto;
    font-family: var(--pyra-font-display) !important;
    font-size:12px !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase;
    color: rgba(233, 223, 192, 0.92) !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.35;
}
#leftSidebar .tool-btn:hover .tool-label { color: var(--pyra-gold-hi) !important; }
#leftSidebar .tool-btn .pro-tag {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--pyra-font-mono) !important;
    font-size: 7.5px !important;
    letter-spacing: 0.12em;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    background: rgba(8, 13, 24, 0.9) !important;
    border: 1px solid rgba(201, 162, 39, 0.55) !important;
    color: var(--pyra-gold) !important;
    box-shadow: none !important;
}

/* ═══ 15 · FAB opens WESTWARD — the zoom column is sacred ground ═══════════ */
.fab-menu {
    bottom: 0 !important;
    right: calc(100% + 10px) !important;
    left: auto !important;
    top: auto !important;
    flex-direction: row-reverse !important;
    gap: 8px !important;
}
.fab-container.open .fab-menu { transform: translateX(0) !important; }
.fab-menu { transform: translateX(10px); }

/* ═══ 16 · THE EMBLEM BACKDROPS — the unused art kit finds its panels ══════
   Faint engraved emblems breathe behind panel content: radially faded,
   screen-blended, pointer-transparent — never a square, never in the way. */
#communityHubPanel, #messageModal .modal-content, #messageModal,
#astroLinesPanel, #skyEventsPanel, #alignmentLabPanel,
#isochronePanel, #directionsPanel, #geometryNetworkPanel,
#mapStylePanel, #snapshotPanel { position: relative; }
.v3-emblem {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 300px;
    height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.09;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

/* top-bar doors: quiet engraved pills — Cinzel, gold hairline, no bulk */
.v3-topbar-door {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid rgba(201, 162, 39, 0.30);
    border-radius: 18px;
    color: rgba(233, 223, 192, 0.9);
    font-family: var(--pyra-font-display);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.v3-topbar-door:hover {
    border-color: rgba(232, 197, 71, 0.75);
    background: rgba(201, 162, 39, 0.10);
    color: var(--pyra-gold-hi);
}
.v3-topbar-door .v3-door-glyph { color: var(--pyra-gold-deep); font-size: 12px; }

/* hover labels must escape the rail — the container clip cut them in half */
.map-controls-container { overflow: visible !important; }
.map-controls-container.collapsed { overflow: hidden !important; }
.map-controls-grid { overflow: visible !important; }

/* ═══ 17 · THE COLONNADE OPENING — the homepage film carries into the map ══
   The torch-lit colonnade clip flies toward the glowing door while the map
   loads; the engraved panorama stands beneath as poster and fallback. On
   completion the warp accelerates THROUGH the door onto the map. */
#v3FilmClip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 48%;          /* the glowing door */
    opacity: 0;
    transition: opacity 0.9s ease;
    transform-origin: 50% 48%;
}
.initial-loader.v3-film #v3FilmClip { opacity: 1; }
.initial-loader.v3-film #v3PortalImg,
.initial-loader.v3-film .v3-portal-rays,
.initial-loader.v3-film .v3-loader-stars,
.initial-loader.v3-film .v3-portal-glow { opacity: 0 !important; transition: opacity 0.9s ease; }
.initial-loader.v3-warp #v3FilmClip {
    animation: v3warp 1.25s cubic-bezier(0.55, 0, 0.85, 0.35) forwards !important;
}
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
    #v3FilmClip { display: none !important; }
}

/* ═══ 18 · TRAVEL AREA + DIRECTIONS — the navigator's plates ═══════════════ */
#isochronePanel, #directionsPanel {
    background: var(--pyra-plate) !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-radius: var(--pyra-r-panel) !important;
    box-shadow: var(--pyra-shadow-panel) !important;
}
#isochronePanel h3, #directionsPanel h3,
#isochronePanel h4, #directionsPanel h4 {
    font-family: var(--pyra-font-display) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    color: var(--pyra-gold-hi) !important;
}
#isochronePanel label, #directionsPanel label {
    font-family: var(--pyra-font-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: rgba(201, 162, 39, 0.85) !important;
}
#isochronePanel input, #isochronePanel select, #isochronePanel textarea,
#directionsPanel input, #directionsPanel select, #directionsPanel textarea {
    background: rgba(8, 13, 24, 0.85) !important;
    border: 1px solid rgba(201, 162, 39, 0.28) !important;
    border-radius: 9px !important;
    color: var(--pyra-ink) !important;
    font-family: var(--pyra-font-body) !important;
    font-size: 14.5px !important;
}
#isochronePanel input:focus, #directionsPanel input:focus,
#isochronePanel select:focus, #directionsPanel select:focus {
    border-color: rgba(232, 197, 71, 0.7) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.12) !important;
}
#isochronePanel button, #directionsPanel button {
    font-family: var(--pyra-font-display) !important;
    letter-spacing: 0.1em !important;
    border-radius: 10px !important;
}
/* the primary act: a gold seal */
#isochronePanel button[onclick*="_runIsochrone"],
#directionsPanel button[onclick*="_runDirections"], #directionsPanel button[onclick*="getDirections"] {
    background: linear-gradient(135deg, #c9a227, #e8c547) !important;
    color: #0a0f1a !important;
    border: none !important;
    text-transform: uppercase;
    font-weight: 700 !important;
}
#isochronePanel button[onclick*="_clearIsochrone"],
#directionsPanel button[onclick*="_clearDirections"] {
    background: transparent !important;
    border: 1px solid rgba(212, 115, 90, 0.45) !important;
    color: #d4735a !important;
}
/* quick chips and result rows */
#isochronePanel [style*="border-radius"] button, #directionsPanel [style*="border-radius"] button { transition: border-color .2s ease, background .2s ease; }
#isochronePanel hr, #directionsPanel hr { border-color: rgba(201, 162, 39, 0.12) !important; }

/* ═══ 19 · NAVIGATOR PLATES — quieter voice, no sideways scroll ════════════ */
#isochronePanel, #directionsPanel { font-size: 13px !important; overflow-x: hidden !important; }
#isochronePanel h3, #directionsPanel h3 { font-size: 12.5px !important; }
#isochronePanel label, #directionsPanel label { font-size: 9.5px !important; letter-spacing: 0.15em !important; }
#isochronePanel input, #isochronePanel select, #directionsPanel input, #directionsPanel select { font-size: 13px !important; padding: 7px 10px !important; }
#isochronePanel button, #directionsPanel button { font-size: 11.5px !important; letter-spacing: 0.08em !important; }
/* chip rows wrap instead of overflowing sideways */
#isochronePanel div[style*="flex"], #directionsPanel div[style*="flex"] { flex-wrap: wrap !important; }
#isochronePanel div, #directionsPanel div { max-width: 100%; }
/* no horizontal scrollbars in ANY panel — sideways scroll is never wanted */
#leftSidebar, #messageModal, #communityHubPanel, .chat-panel,
[id$="Panel"], .mapboxgl-popup-content { overflow-x: hidden !important; }

/* ═══ 20 · GRID CHIPS NEVER CLIP ═══════════════════════════════════════════
   The mode/time rows are CSS grids with 1fr columns. `1fr` = minmax(auto,1fr),
   and `auto` floors at min-content — so "Driving" refused to shrink and spilled
   past the plate edge (clipped once overflow-x was banned). Zeroing the items'
   min-width lets the columns size honestly. */
#isochronePanel button, #directionsPanel button { min-width: 0 !important; }
#isochronePanel .iso-mode-btn, #directionsPanel .dir-mode-btn {
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
    padding: 8px 4px !important;
    white-space: nowrap !important;
    text-align: center;
}
#isochronePanel input, #directionsPanel input { min-width: 0 !important; }

/* the emblem sat 40px outside the plate and was the last thing forcing a
   horizontal scroll region — bring it flush inside the corner */
.v3-emblem { right: 0 !important; bottom: 0 !important; width: 240px; height: 240px; }

/* ═══ 21 · AUDIT PASS ══════════════════════════════════════════════════════
   Small badges were still below the readable floor. */
.beta-badge, [class*="beta"], .version-badge { font-size: 9.5px !important; }

/* ═══ 22 · THE PHONE — the atlas in the hand ═══════════════════════════════
   Everything above this point is desktop composition. On a phone the same
   grammar has to survive a 390px stage: the dock becomes a bottom sheet,
   panels become full-width sheets, and nothing is smaller than a thumb. */
@media (max-width: 768px) {

  /* ── the instrument dock becomes a bottom sheet ── */
  #mapControlsPanel {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    z-index: 1400 !important;
  }
  #mapControlsPanel .map-controls-container {
    width: 100% !important;
    max-width: none !important;
    border-radius: 18px 18px 0 0 !important;
    border: 1px solid var(--pyra-line-2) !important;
    border-bottom: none !important;
    background: var(--pyra-plate) !important;
    box-shadow: 0 -14px 40px rgba(0,0,0,0.6) !important;
    max-height: 46vh;
    display: flex; flex-direction: column;
  }
  #mapControlsPanel .map-controls-header {
    padding: 12px 16px !important;
    flex: 0 0 auto;
    position: relative;
  }
  /* a grab handle, so it reads as a sheet */
  #mapControlsPanel .map-controls-header::before {
    content: ''; position: absolute; top: 5px; left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 3px; border-radius: 2px;
    background: rgba(201,162,39,0.45);
  }
  #mapControlsPanel .map-controls-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 8px !important;
    padding: 10px 12px 18px !important;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  .map-ctrl-btn { min-height: 56px !important; border-radius: 12px !important; }
  .map-ctrl-btn span { font-size: 9px !important; }
  /* hover labels are meaningless on touch — the caption under each icon speaks */
  .map-ctrl-btn:hover::after, .map-ctrl-btn:hover::before,
  .nav-btn:hover::after, .nav-btn:hover::before { display: none !important; }

  /* ── thumbs, not pinpricks ── */
  #topBar button, #topBar .icon-btn, .nav-btn,
  .section-action, .section-toggle, .voice-search-btn,
  .fab-main, .fab-item { min-width: 40px !important; min-height: 40px !important; }
  .section-header { min-height: 44px !important; }

  /* ── panels and modals become full-width sheets ── */
  #messageModal, #communityHubPanel, #isochronePanel, #directionsPanel,
  #astroLinesPanel, #skyEventsPanel, #alignmentLabPanel, #mapStylePanel,
  #snapshotPanel, #drawMeasurePanel, #geometryNetworkPanel, #contourPanel {
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    top: auto !important; bottom: 0 !important;
    max-height: 82vh !important;
    border-radius: 18px 18px 0 0 !important;
    overflow-y: auto !important; overflow-x: hidden !important;
  }
  .modal-content { border-radius: 18px 18px 0 0 !important; }

  /* ── the top bar keeps its name ── */
  #topBar { padding: 0 10px !important; }
  .logo-text { display: inline !important; font-size: 12px !important; letter-spacing: 0.16em !important; }
  #topBar .version-badge { display: none !important; }
  .search-container { border-radius: 20px !important; }

  /* ── the floor stays clear of the sheet ── */
  .fab-container { bottom: 52vh !important; right: 12px !important; z-index: 1450 !important; }
  #v3Hud, .mapboxgl-ctrl-scale { display: none !important; }

  /* ── the codex drawer in grammar ── */
  #leftSidebar {
    width: min(86vw, 330px) !important;
    background: var(--pyra-plate) !important;
    border-right: 1px solid var(--pyra-line-2) !important;
  }
  #leftSidebar .tool-btn { min-height: 52px !important; }

  /* the emblem backdrops are desktop grace notes — they only crowd a phone */
  .v3-emblem { display: none !important; }
}

/* ═══ 23 · ANTIQUITY ═══════════════════════════════════════════════════════ */
body.antiquity #v3Atmo .v3-dawn { opacity: 0.5; }
body.antiquity .mapboxgl-canvas { filter: sepia(0.14) contrast(1.03); }
#btnAntiquity { transition: background .25s ease, border-color .25s ease, color .25s ease; }

/* ═══ 24 · PHONE COROLLARIES ═══════════════════════════════════════════════
   .map-controls-container carries its OWN position:fixed;top:70px;right:12px —
   pinning the wrapper was never going to move it. Pin the container itself. */
@media (max-width: 768px) {
  #mapControlsPanel .map-controls-container {
    position: fixed !important;
    top: auto !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    z-index: 1400 !important;
  }
  /* the quick-action seal rides just above the collapsed sheet */
  .fab-container { bottom: 78px !important; right: 14px !important; }
  #mapControlsPanel .map-controls-container:not(.collapsed) ~ * .fab-container,
  body.sheet-open .fab-container { bottom: 50vh !important; }
  /* the name stays, even on a small stage */
  #topBar .logo-text, .logo-text { display: inline-block !important; }
  /* the drawer toggle must not sit under the sheet header */
  #leftSidebarToggle { top: 62px !important; }
}

/* On a 390px stage the wordmark costs ~110px and pushes the account chip off
   the edge. Below 430px the mark alone carries the brand; tablets keep both. */
@media (max-width: 430px) {
  #topBar .logo-text, .logo-text { display: none !important; }
}
@media (max-width: 768px) {
  #topBar { overflow: hidden; }
  #topBar > * { flex-shrink: 1; min-width: 0; }
}

/* ═══ 25 · EMPIRES — the docked card ══════════════════════════════════════
   Farhad: the card must sit beside the controls like every other panel, not
   float over the middle of the map. The controls column is 118px wide with a
   12px gutter, so the card parks just inboard of it and the map centre stays
   clear. The chronology rail is gone — the seals are the index. */
#civPanel {
  position: fixed;
  top: 70px;
  right: 142px;
  width: 336px;
  max-height: calc(100vh - 96px);
  z-index: 900;
  display: flex; flex-direction: column;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12,16,26,.975), rgba(8,11,18,.985));
  border: 1px solid rgba(201,162,39,.34);
  box-shadow: 0 18px 46px rgba(0,0,0,.6), inset 0 1px 0 rgba(232,197,71,.13);
  backdrop-filter: blur(14px);
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #e9dfc0;
  opacity: 0; pointer-events: none;
  transform: translateX(10px);
  transition: opacity .2s ease, transform .2s ease;
}
#civPanel.open { opacity: 1; pointer-events: auto; transform: none; }
#civPanel.pinned { border-color: rgba(232,197,71,.6); }

.civ-panel-head {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px 10px;
  background: linear-gradient(180deg, rgba(232,197,71,.10), rgba(232,197,71,0));
  border-bottom: 1px solid rgba(201,162,39,.24);
}
.civ-panel-seal {
  width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(232,197,71,.35));
}
.civ-panel-id { min-width: 0; flex: 1 1 auto; }
.civ-panel-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14.5px; letter-spacing: .08em; line-height: 1.25; color: #f5e6b0;
}
.civ-panel-apex {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .14em; margin-top: 3px; color: rgba(201,162,39,.92);
}
.civ-panel-nav { display: flex; gap: 4px; flex: 0 0 auto; }
.civ-panel-nav button {
  width: 26px; height: 26px; min-width: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1;
  border-radius: 7px;
  background: rgba(232,197,71,.06);
  border: 1px solid rgba(201,162,39,.28);
  color: rgba(233,223,192,.8);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.civ-panel-nav button:hover {
  background: rgba(232,197,71,.18); border-color: rgba(232,197,71,.7); color: #f5e6b0;
}

.civ-panel-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 12px;
  padding: 11px 14px 4px; font-size: 13.5px; line-height: 1.45;
}
.civ-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .13em; padding-top: 4px;
  color: rgba(201,162,39,.74); white-space: nowrap;
}
.civ-v { min-width: 0; }
.civ-sub {
  display: block; font-size: 12px; font-style: italic; line-height: 1.35;
  color: rgba(233,223,192,.62);
}
.civ-panel-note {
  margin: 0; padding: 8px 14px 12px;
  font-size: 13.5px; line-height: 1.5; color: rgba(233,223,192,.88);
}
.civ-panel-foot {
  padding: 8px 14px 11px;
  border-top: 1px solid rgba(201,162,39,.18);
  background: rgba(232,197,71,.035);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; line-height: 1.55; letter-spacing: .06em;
  color: rgba(201,162,39,.78);
}

#btnEmpires { transition: background .25s ease, border-color .25s ease, color .25s ease; }

/* Narrow desktops: the controls column still owns the right edge, so the card
   tucks under it rather than fighting it for the same band. */
@media (max-width: 1120px) {
  #civPanel { right: 12px; top: auto; bottom: 16px; width: 320px; max-height: 56vh; overflow-y: auto; }
}
@media (max-width: 768px) {
  #civPanel {
    left: 8px; right: 8px; width: auto; top: auto; bottom: 96px;
    max-height: 52vh; overflow-y: auto;
    transform: translateY(10px);
  }
  #civPanel.open { transform: none; }
  .civ-panel-nav button { width: 34px; height: 34px; font-size: 16px; }
}

/* ═══ 26 · A TOGGLE THAT LOOKS ON WHEN IT IS ON ════════════════════════════
   The dock's active tint was faint enough to read as off. Every toggle in the
   controls column now declares itself, and the two ancient-world modes carry a
   lit rim so you can tell at a glance which lens you are looking through. */
#mapControlsGrid .map-ctrl-btn.active,
.map-controls-grid .map-ctrl-btn.active {
  background: rgba(232,197,71,.22) !important;
  border-color: rgba(232,197,71,.72) !important;
  color: #f5e6b0 !important;
  box-shadow: inset 0 0 0 1px rgba(232,197,71,.18), 0 0 12px rgba(232,197,71,.22);
}
#btnAntiquity.active, #btnEmpires.active {
  background: rgba(232,197,71,.28) !important;
  border-color: rgba(232,197,71,.85) !important;
}


/* ═══ 27 · THE CANVAS CONTAINER MUST NOT MOVE ═════════════════════════════
   Mapbox computes every pointer coordinate (ev.point) from the bounding rect
   of .mapboxgl-canvas-container. A blanket `#map > div { height:100% }` rule
   inflated Mapbox's 1x1 .mapboxgl-canary probe into a full-viewport block in
   normal flow, shunting the container exactly one screen down. The map still
   LOOKED correct — the canvas is absolutely positioned — but every hover and
   hit-test was reading a point one viewport away from the cursor. Fixed at
   source in styles.css; restated here because this stylesheet loads last and
   nothing should ever be able to reintroduce it. */
#map .mapboxgl-canary {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  top: 0 !important; left: 0 !important;
}
#map .mapboxgl-canvas-container {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
}

/* ═══ 28 · MY PROFILE ══════════════════════════════════════════════════════
   A banner, an avatar that sits astride its edge, and — the actual bug —
   nothing that can produce a horizontal scrollbar. The old header used a
   negative margin to bleed to the modal edge, which overflowed by the width of
   its own border. The banner now bleeds with calc() and the whole card clips. */
.pyra-profile {
  /* The banner bleeds to the modal's edge, so this must cancel the modal's own
     padding EXACTLY. Guessing 20px against a 16px padding overflowed by 4px and
     produced the horizontal scrollbar. The real value is measured at render and
     written into --pyra-bleed; 16px is only the fallback. */
  margin-left: calc(var(--pyra-bleed, 16px) * -1);
  margin-right: calc(var(--pyra-bleed, 16px) * -1);
  margin-top: calc(var(--pyra-bleed, 16px) * -1);
  overflow-x: hidden;
  overflow-y: visible;
}
.pyra-profile * { box-sizing: border-box; max-width: 100%; }

.pyra-profile-banner {
  position: relative;
  height: 132px;
  width: 100%;
  background:
    radial-gradient(120% 160% at 50% -40%, rgba(232,197,71,.20), rgba(232,197,71,0) 60%),
    linear-gradient(135deg, rgba(201,162,39,.22), rgba(10,13,20,.92));
  border-bottom: 1px solid rgba(201,162,39,.26);
}
/* a faint engraved rule, so the default banner is not simply a gradient */
.pyra-profile-banner::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(232,197,71,.055) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg,  rgba(232,197,71,.055) 0 1px, transparent 1px 13px);
  mask-image: radial-gradient(120% 120% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 30%, #000 20%, transparent 78%);
  pointer-events: none;
}

.pyra-banner-edit {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(10,13,20,.62);
  border: 1px solid rgba(201,162,39,.34);
  color: rgba(245,230,176,.85);
  backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.pyra-banner-edit:hover {
  background: rgba(232,197,71,.20); border-color: rgba(232,197,71,.75); color: #f5e6b0;
}

.pyra-profile-head {
  position: relative;
  padding: 0 24px 22px;
  text-align: center;
  border-bottom: 1px solid rgba(217,199,160,.08);
}
.pyra-avatar-ring {
  width: 120px; height: 120px;
  margin: -60px auto 13px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, rgba(217,199,160,.30), rgba(217,199,160,.12));
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.pyra-avatar-ring.is-pro {
  background: linear-gradient(135deg, #e8c547, #c9a227 55%, #e8c547);
  box-shadow: 0 8px 30px rgba(201,162,39,.42);
}
.pyra-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #c9a227, #e8c547);
  color: #0a0f1a;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 44px; line-height: 1;
  border: 3px solid rgba(10,13,20,.92);
}
.pyra-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the content below the header keeps the modal's own padding back */
.pyra-profile > *:not(.pyra-profile-banner):not(.pyra-profile-head) {
  margin-left: var(--pyra-bleed, 16px);
  margin-right: var(--pyra-bleed, 16px);
}
/* the stat tiles must be allowed to shrink or they force the card wide */
.pyra-profile [style*="grid-template-columns:repeat(4,1fr)"] > div { min-width: 0; }

/* ── the banner chooser ──────────────────────────────────────────────────── */
.pyra-banner-picker { max-width: 100%; }
.pyra-banner-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
}
.pyra-banner-chip {
  display: flex; flex-direction: column; gap: 6px; padding: 0;
  background: none; border: none; cursor: pointer; min-width: 0;
}
.pyra-banner-thumb {
  display: block; height: 46px; border-radius: 8px;
  border: 1px solid rgba(201,162,39,.28);
  /* the plates are dark engravings on black — at 46px they read as a black
     rectangle unless they are lifted and given something to sit against */
  background-color: rgba(232,197,71,.09);
  filter: brightness(1.55) contrast(1.04);
  transition: border-color .18s ease, transform .18s ease, filter .18s ease;
}
.pyra-banner-chip:hover .pyra-banner-thumb,
.pyra-banner-chip.on .pyra-banner-thumb { filter: brightness(1.85) contrast(1.06); }
.pyra-banner-chip:hover .pyra-banner-thumb { border-color: rgba(232,197,71,.7); transform: translateY(-2px); }
.pyra-banner-chip.on .pyra-banner-thumb { border-color: #e8c547; box-shadow: 0 0 0 1px rgba(232,197,71,.5); }
.pyra-banner-name {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em;
  color: rgba(233,223,192,.66); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pyra-banner-chip.on .pyra-banner-name { color: #f5e6b0; }

@media (max-width: 480px) {
  .pyra-banner-grid { grid-template-columns: repeat(3, 1fr); }
  .pyra-avatar-ring { width: 104px; height: 104px; margin-top: -52px; }
  .pyra-avatar { font-size: 38px; }
}

/* ═══ 29 · A SMALLER WAY BACK ══════════════════════════════════════════════ */
.admin-back-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(217,199,160,.06);
  border: 1px solid rgba(217,199,160,.20);
  color: rgba(245,230,176,.82);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.admin-back-btn:hover {
  background: rgba(232,197,71,.16); border-color: rgba(232,197,71,.6); color: #f5e6b0;
}

/* ══ v3.9 (2026-08-26) — Farhad's phone screenshots ══════════════════════
   1) The + quick-actions FAB sat ON the zoom toolbar: the top-level rule
      above (`#mapNavToolbar { top: calc(100vh - 306px) }`) was winning on
      phones too. Lift the toolbar clear of the FAB (FAB is 44px tall at
      bottom:~78px, so the toolbar's floor is 146px).
   2) Log-in / profile was invisible on phones: the user-menu button renders
      avatar + name + PRO badge (105px) and overflowed past the right edge
      of the bar. Avatar-only button on phones, theme toggle hidden to make
      room, search pill capped so the whole actions row always fits, and the
      bar must never clip the dropdown. Verified at 390x844: button fits
      (right edge 378/386) and the dropdown opens fully on screen. */
@media (max-width: 768px) {
    #mapNavToolbar {
        top: auto !important;
        bottom: 146px !important;
        right: 14px !important;
    }
    #topBar { overflow: visible !important; }
    #topBar .user-name,
    #topBar .pro-badge { display: none !important; }
    #userMenuButton { padding: 6px !important; min-width: 0 !important; }
    #themeToggle { display: none !important; }   /* freed 46px for the profile button */
    #topBar .user-menu { flex-shrink: 0 !important; }
    #topBar .search-container { max-width: calc(100vw - 250px) !important; }
    .user-dropdown { right: 8px !important; }
}

/* ══ v3.9.1 (2026-08-26) — Farhad: bottom Controls options unreachable ═══
   The Controls bottom sheet's .map-controls-container is capped at 440px but
   the grid inside runs ~585px, and overflow computed to `visible`, so the
   last rows drew past the bottom of the phone screen with no way to scroll.
   Verified at 390x844: with auto overflow the sheet scrolls and the grid's
   last row lands exactly at the viewport bottom. */
@media (max-width: 768px) {
    .map-controls-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #mapControlsGrid { padding-bottom: 28px !important; }
}

/* ═══ 26 · SITE CARD — THE SCROLLBAR THAT NARROWED THE CARD ═════════════════
   Reported 31 Aug 2026: opening AI Research made the site card go narrow and
   its insides look broken.

   Cause: the card is a FIXED 360px (set inline in app-map.js) living inside
   .mapboxgl-popup-content, which is the scroller (overflow-y:auto) and which
   rule 19 above gives overflow-x:hidden. So the moment the research report made
   the card taller than the popup, a classic ~15px scrollbar appeared and took
   its width out of the content box. The 360px card no longer fitted, and the
   overflow it created was clipped on the right — the card looked narrowed and
   everything inside it reflowed.

   Fix: give the scroller a definite width, reserve a slim gutter whether it
   scrolls or not (so the width never jumps between the two states), and let the
   card fill whatever is left instead of insisting on 360px. Scoped with :has()
   so the geometry, ley line, antipode and natal popups keep their own sizing. */
.mapboxgl-popup-content:has(> .site-info-card),
.mapboxgl-popup-content:has(> .simple-place-card) {
    width: min(360px, 86vw) !important;
    box-sizing: border-box !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 39, 0.5) transparent;
}
.mapboxgl-popup-content:has(> .site-info-card) > .site-info-card,
.mapboxgl-popup-content:has(> .simple-place-card) > .simple-place-card {
    width: 100% !important;
    max-width: 100% !important;
}
/* A 6px rail instead of the platform default 15px: the gutter costs almost
   nothing, and the card reads as one plate rather than a scrolling box. */
.mapboxgl-popup-content::-webkit-scrollbar { width: 6px; }
.mapboxgl-popup-content::-webkit-scrollbar-track { background: transparent; }
.mapboxgl-popup-content::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.45);
    border-radius: 3px;
}
.mapboxgl-popup-content::-webkit-scrollbar-thumb:hover { background: rgba(232, 197, 71, 0.7); }

/* The research report is injected into the card, so anything wide inside it
   (a long URL, a source list) must wrap rather than push the plate open. */
.site-info-card .research-category,
.site-info-card .research-sources { min-width: 0; }
.site-info-card .research-sources a { overflow-wrap: anywhere; }