/* ═══════════════════════════════════════════════════════════════════════════════
   PYRAMASON — ANCIENT IDENTITY THEME (v3 design system, phase 1)
   Loads AFTER styles.css and overrides it. Direction approved 2026-07-07:
   "carved, not drawn" — inscription capitals, aged gold, patina, temple-pace motion.
   Remove this single file to fully revert to the previous look.
   ═══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── 1. Palette: neon → ancient ─────────────────────────────────────────────── */
:root {
    --bg-primary: #0a0f1a;
    --bg-secondary: #0e1524;
    --bg-tertiary: #141d33;
    --bg-card: #101827;
    --bg-glass: rgba(12, 18, 32, 0.94);
    --bg-glass-light: rgba(12, 18, 32, 0.82);

    /* patina replaces neon cyan; lapis replaces violet; gold ages slightly */
    --accent-cyan: #43b3a0;
    --accent-cyan-dim: rgba(67, 179, 160, 0.45);
    --accent-purple: #5a74c4;
    --accent-purple-dim: rgba(90, 116, 196, 0.45);
    --accent-gold: #e8c547;
    --accent-gold-dim: rgba(201, 162, 39, 0.5);
    --accent-orange: #c0603a;

    --text-primary: rgba(238, 231, 214, 0.95);
    --text-secondary: rgba(238, 231, 214, 0.68);
    --text-tertiary: rgba(238, 231, 214, 0.5);
    --text-muted: rgba(238, 231, 214, 0.32);

    --border-light: rgba(201, 162, 39, 0.16);
    --border-medium: rgba(201, 162, 39, 0.32);
    --border-focus: var(--accent-gold);

    --gradient-primary: linear-gradient(135deg, #43b3a0, #5a74c4);
    --gradient-gold: linear-gradient(140deg, #a3821c, #e8c547 55%, #8a6d1c);
    --gradient-dark: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));

    --font-display: 'Cinzel', 'Trajan Pro', serif;
    --font-body: 'Cormorant Garamond', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ── 2. Typography: inscription & manuscript ───────────────────────────────── */
body {
    font-family: var(--font-body);
    font-size: 16.5px;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4,
.section-title,
.brand-link,
.modal-title,
#messageModal h3,
.chat-header,
.auth-modal h2,
.tool-label {
    font-family: var(--font-display) !important;
    letter-spacing: 0.09em;
}

.section-title {
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.28em;
    color: #d9c7a0;
}

.tool-label {
    font-size: 9.5px;
    letter-spacing: 0.1em;
}

button, input, select, textarea {
    font-family: var(--font-body);
}

.btn-primary, .btn-secondary, .pro-tag {
    font-family: var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

input, .coordinates, .stat, #visibleSitesCount {
    font-family: var(--font-mono);
}

/* ── 3. Chrome: top bar, sidebar, panels ───────────────────────────────────── */
#topBar {
    background: linear-gradient(180deg, rgba(10, 15, 26, 0.98), rgba(10, 15, 26, 0.92));
    border-bottom: 1px solid var(--border-light);
    backdrop-filter: blur(14px);
}

#leftSidebar {
    background: linear-gradient(180deg, rgba(12, 18, 32, 0.97), rgba(8, 12, 22, 0.97));
    border-right: 1px solid var(--border-light);
}

/* gold hairline under section headers, like a chisel line */
.section-header {
    position: relative;
}
.section-header::after {
    content: '';
    position: absolute;
    left: 0; right: 18%;
    bottom: -2px;
    height: 1px;
    background: linear-gradient(90deg, var(--border-medium), transparent);
}

/* ── 4. Modals & panels: stone tablets with gold corner marks ─────────────── */
#messageModal .modal-content,
.auth-modal,
.modal-content {
    background: linear-gradient(180deg, rgba(18, 26, 44, 0.97), rgba(10, 15, 26, 0.985)) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 10px;
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.6);
}

.modal-content { position: relative; }
.modal-content::before,
.modal-content::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border-color: var(--accent-gold);
    border-style: solid;
    opacity: 0.65;
    pointer-events: none;
}
.modal-content::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; border-radius: 10px 0 0 0; }
.modal-content::after { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; border-radius: 0 0 10px 0; }

/* ── 5. Buttons: temple-pace motion ────────────────────────────────────────── */
.btn-primary,
button[class*="upgrade"],
.tool-btn,
.chat-btn {
    transition: all 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btn-primary:hover,
.tool-btn:hover {
    transform: translateY(-2px);
}
.tool-btn:hover {
    border-color: var(--border-medium);
    box-shadow: 0 8px 22px rgba(201, 162, 39, 0.14);
}

.pro-tag {
    background: var(--gradient-gold) !important;
    color: #0a0f1a !important;
    font-weight: 700;
}

/* ── 6. Toasts: gold-edged messages ───────────────────────────────────────── */
/* v2 FIX: the old [id*="toast"] selector also matched #toastContainer — the
   invisible fullscreen tray — painting it dark. On mobile (where styles.css
   stretches the tray edge-to-edge) that rendered a black card covering the
   whole map. Style ONLY the toast messages themselves. */
#pyramasonToast, .toast, .toast-notification {
    border-left: 3px solid var(--accent-gold) !important;
    border-top: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    background: rgba(10, 15, 26, 0.96) !important;
    font-family: var(--font-body);
    font-size: 15.5px;
}
#toastContainer, .toast-container {
    background: transparent !important;
    border: none !important;
    pointer-events: none !important;
}
#toastContainer > *, .toast-container > * { pointer-events: auto; }

/* ── 7. Loading screen: monumental entrance ────────────────────────────────── */
#loadingScreen h1, .loading-title,
#loadingScreen [class*="title"] {
    font-family: var(--font-display) !important;
    letter-spacing: 0.22em;
    background: linear-gradient(105deg, #8a6d1c 0%, #e8c547 35%, #f5e6b0 50%, #e8c547 65%, #8a6d1c 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: pyrShimmer 6s linear infinite;
}
@keyframes pyrShimmer { to { background-position: -200% 0; } }

/* ── 8. Scrollbars: quiet bronze ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.25);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 39, 0.45); }

/* ── 9. Inputs: manuscript fields ──────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12) !important;
    outline: none;
}

/* ── 10. Cinematic entrance: the opening of the temple ─────────────────────── */
.initial-loader {
    background:
        radial-gradient(1100px 550px at 70% -10%, rgba(58, 93, 160, 0.12), transparent 60%),
        radial-gradient(800px 450px at 15% 110%, rgba(201, 162, 39, 0.06), transparent 60%),
        radial-gradient(1px 1px at 12% 24%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 62% 12%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 84% 44%, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 34% 72%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 90% 82%, rgba(255,255,255,0.3), transparent),
        #070b14 !important;
    transition: opacity 1.4s ease !important;
}

/* rotating sacred-geometry ring behind the logo */
.loader-icon {
    position: relative;
}
.loader-icon::before {
    content: '';
    position: absolute;
    inset: -26px;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.25);
    border-top-color: rgba(232, 197, 71, 0.75);
    animation: pyrRing 3.2s linear infinite;
}
.loader-icon::after {
    content: '';
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    border: 1px dashed rgba(201, 162, 39, 0.14);
    animation: pyrRing 26s linear infinite reverse;
}
@keyframes pyrRing { to { transform: rotate(360deg); } }

.loader-icon img {
    filter: drop-shadow(0 0 26px rgba(232, 197, 71, 0.35));
    animation: pyrBreathe 4s ease-in-out infinite;
}
@keyframes pyrBreathe {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(232, 197, 71, 0.25)); }
    50% { filter: drop-shadow(0 0 38px rgba(232, 197, 71, 0.5)); }
}

.loader-text {
    font-family: var(--font-display) !important;
    font-weight: 700;
    letter-spacing: 0.3em !important;
    background: linear-gradient(105deg, #8a6d1c 0%, #e8c547 35%, #f5e6b0 50%, #e8c547 65%, #8a6d1c 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: pyrShimmer 6s linear infinite;
}

.loader-subtitle {
    font-family: var(--font-body) !important;
    font-style: italic;
    font-size: 17px;
    color: #d9c7a0 !important;
    letter-spacing: 0.05em;
}

.loader-progress {
    background: rgba(201, 162, 39, 0.12) !important;
    height: 2px !important;
    border-radius: 2px;
}
.loader-progress-bar {
    background: var(--gradient-gold) !important;
    box-shadow: 0 0 12px rgba(232, 197, 71, 0.5);
}

.loader-status {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em;
    color: rgba(238, 231, 214, 0.4) !important;
    text-transform: uppercase;
}

/* interface rises like settling stones once the loader lifts */
#topBar { animation: pyrDescend 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s backwards; }
#leftSidebar { animation: pyrSlideIn 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards; }
@keyframes pyrDescend { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes pyrSlideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* ── 11. Readability pass (2026-07-07 feedback): bigger, clearer everywhere ── */
/* Cormorant renders small at equal px — compensate across the interface. */
body { font-size: 17.5px; }

.filter-label {
    font-size: 15.5px !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.filter-count {
    font-size: 11.5px !important;
    padding: 3px 8px !important;
}
.filter-item { min-height: 40px; }

.tool-label {
    font-size: 10.5px !important;
    letter-spacing: 0.03em;      /* wide Cinzel tracking was clipping "Frequencies" */
    font-weight: 600;
    white-space: normal !important;
    line-height: 1.3;
    text-align: center;
    overflow: visible !important;
    text-overflow: clip !important;
}
.tool-btn {
    padding-top: 12px;
    padding-bottom: 12px;
    height: auto !important;
    min-height: 64px;
}

.section-title { font-size: 12.5px; }

#searchInput { font-size: 14px !important; }

.modal-content p, .modal-content li, #messageModal p { font-size: 16.5px; }
.modal-content label { font-size: 12px !important; }

/* ── 12. Phones & small screens: everything grows, touch targets 44px+ ────── */
@media (max-width: 768px) {
    body { font-size: 19px; }
    .filter-label { font-size: 17.5px !important; }
    .filter-count { font-size: 13px !important; }
    .filter-item { min-height: 48px; }
    .tool-label { font-size: 12.5px !important; }
    .tool-btn { min-height: 62px; }
    .section-title { font-size: 14px; letter-spacing: 0.2em; }
    .btn-primary, .btn-secondary { font-size: 14.5px; padding: 14px 22px; }
    .modal-content p, #messageModal p { font-size: 18px; }
    input, select, textarea { font-size: 16.5px !important; } /* prevents iOS zoom-jump */
    .toast, #pyramasonToast { font-size: 16.5px; }
    .loader-text { font-size: 30px !important; }
    .loader-subtitle { font-size: 18px; }
}

/* ── 14. CODEX SIDEBAR: five carved chapters ───────────────────────────────── */
.codex-chapter {
    margin: 10px 0 2px;
    border: 1px solid rgba(201, 162, 39, 0.14);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.015);
}
.codex-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.07), rgba(201, 162, 39, 0.02));
    border: none;
    border-bottom: 1px solid rgba(201, 162, 39, 0.12);
    cursor: pointer;
    color: #d9c7a0;
    transition: background 0.3s;
}
.codex-head:hover { background: rgba(201, 162, 39, 0.1); }
.codex-glyph { width: 17px; height: 17px; color: var(--accent-gold); flex-shrink: 0; }
.codex-name {
    font-family: var(--font-display);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    flex: 1;
    text-align: left;
}
.codex-total {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: rgba(238, 231, 214, 0.4);
}
.codex-chevron {
    width: 14px; height: 14px;
    color: rgba(238, 231, 214, 0.4);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.codex-body {
    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s;
    opacity: 1;
    padding: 4px 4px 6px;
}
.codex-chapter.collapsed .codex-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.codex-chapter.collapsed .codex-chevron { transform: rotate(-90deg); }
.codex-chapter.collapsed .codex-head { border-bottom-color: transparent; }

/* category rows become plaques inside their chapter */
.codex-body .filter-item {
    border-radius: 6px;
    margin: 2px 0;
    padding-left: 8px;
    transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
    border-left: 2px solid transparent;
}
.codex-body .filter-item:hover {
    background: rgba(201, 162, 39, 0.07);
    border-left-color: var(--accent-gold);
    transform: translateX(2px);
}
/* favourites pinned plaque */
#filterList > .filter-item[data-type="favourites"] {
    border: 1px solid rgba(201, 162, 39, 0.14);
    border-radius: 8px;
    margin-bottom: 4px;
    padding: 4px 8px;
}

/* ── 15. Dropdowns & controls: no more OS-white menus ──────────────────────── */
:root { color-scheme: dark; }   /* native dropdown lists render dark */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c9a227' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px !important;
    border: 1px solid rgba(201, 162, 39, 0.25) !important;
    border-radius: 6px !important;
    background-color: rgba(12, 18, 32, 0.9) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
}

/* the right-hand controls cluster becomes a quiet bronze astrolabe */
.map-controls-container .nav-btn,
.map-controls-container button {
    background: rgba(12, 18, 32, 0.85) !important;
    border: 1px solid rgba(201, 162, 39, 0.18) !important;
    color: #d9c7a0 !important;
    transition: all 0.3s !important;
}
.map-controls-container .nav-btn:hover,
.map-controls-container button:hover {
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
    background: rgba(201, 162, 39, 0.1) !important;
    transform: translateY(-1px);
}
.map-controls-header {
    font-family: var(--font-display) !important;
    letter-spacing: 0.18em !important;
    color: #d9c7a0 !important;
}

/* ── 16. TOUR GUIDE: stone-tablet restyle + readable sizes ─────────────────── */
#pyramasonTourOverlay > div {
    background: linear-gradient(180deg, rgba(18, 26, 44, 0.98), rgba(10, 15, 26, 0.99)) !important;
    border: 1px solid rgba(201, 162, 39, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(201, 162, 39, 0.06) !important;
}
#pyramasonTourOverlay h3 {
    font-family: var(--font-display) !important;
    font-size: 23px !important;
    letter-spacing: 0.09em !important;
    color: var(--accent-gold) !important;
    margin-bottom: 12px !important;
}
/* Card must ALWAYS fit the viewport: hard cap + internal scroll as safety net */
#pyramasonTourOverlay > div {
    max-width: 560px !important;
    max-height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
    padding: 26px 30px !important;
}
#pyramasonTourOverlay div[style*="font-size: 15px"] {
    font-size: 17px !important;
    line-height: 1.62 !important;
    font-family: var(--font-body) !important;
    color: rgba(238, 231, 214, 0.92) !important;
    margin-bottom: 18px !important;
}
#pyramasonTourOverlay li, #pyramasonTourOverlay p { font-size: 17px !important; line-height: 1.62 !important; }
/* compact the inner feature cards — they carried too much padding and margin */
#pyramasonTourOverlay [style*="padding: 15px"], #pyramasonTourOverlay [style*="padding:15px"],
#pyramasonTourOverlay [style*="padding: 16px"], #pyramasonTourOverlay [style*="padding: 14px"] {
    padding: 11px 13px !important;
}
#pyramasonTourOverlay [style*="margin-bottom: 25px"] { margin-bottom: 14px !important; }
#pyramasonTourOverlay [style*="margin-bottom: 30px"] { margin-bottom: 16px !important; }
#pyramasonTourOverlay [style*="margin-bottom: 20px"] { margin-bottom: 12px !important; }
#pyramasonTourOverlay [style*="gap: 12px"] { gap: 9px !important; }
#pyramasonTourOverlay div[style*="font-size: 72px"] { font-size: 40px !important; margin-bottom: 8px !important; }
#pyramasonTourOverlay button {
    font-size: 14.5px !important;
    font-family: var(--font-display) !important;
    letter-spacing: 0.1em !important;
}
#pyramasonTourOverlay div[style*="linear-gradient(90deg"] {
    background: var(--gradient-gold) !important;
    box-shadow: 0 0 10px rgba(232, 197, 71, 0.45);
}

/* ── 19. Zoom / navigation toolbar joins the bronze astrolabe ──────────────── */
#mapNavToolbar .nav-btn, .map-ctrl-btn {
    background: rgba(12, 18, 32, 0.85) !important;
    border: 1px solid rgba(201, 162, 39, 0.18) !important;
    color: #d9c7a0 !important;
    transition: all 0.3s !important;
}
#mapNavToolbar .nav-btn:hover, .map-ctrl-btn:hover {
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
    background: rgba(201, 162, 39, 0.1) !important;
}
.map-ctrl-btn.active {
    background: rgba(201, 162, 39, 0.18) !important;
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
}

/* ── 20. Bottom bar: readable manuscript footer ────────────────────────────── */
#bottomBar {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: rgba(238, 231, 214, 0.55) !important;
    border-top: 1px solid rgba(201, 162, 39, 0.12);
    background: rgba(8, 12, 22, 0.92) !important;
}
#bottomBar a {
    color: #d9c7a0 !important;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.12em;
}
#bottomBar a:hover { color: var(--accent-gold) !important; }

/* ── 21. Community links: readable plaque buttons ──────────────────────────── */
.community-links .link-btn, .community-links.compact .link-btn {
    font-size: 13.5px !important;
    font-family: var(--font-body) !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(201, 162, 39, 0.12) !important;
    border-radius: 6px !important;
    transition: all 0.3s !important;
}
.community-links .link-btn:hover {
    border-color: rgba(201, 162, 39, 0.4) !important;
    background: rgba(201, 162, 39, 0.07) !important;
    transform: translateX(2px);
}

/* ── 18. TOP BAR buttons: bronze, not neon squares ─────────────────────────── */
#topBarChatBtn, #themeToggle, #topBar .toolbar-btn,
#topBar button[id*="Btn"], #topBar button[title] {
    background: rgba(12, 18, 32, 0.7) !important;
    border: 1px solid rgba(201, 162, 39, 0.18) !important;
    color: #d9c7a0 !important;
    transition: all 0.3s !important;
}
#topBarChatBtn:hover, #themeToggle:hover, #topBar .toolbar-btn:hover,
#topBar button[id*="Btn"]:hover, #topBar button[title]:hover {
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
    background: rgba(201, 162, 39, 0.1) !important;
}

/* ── 17. HELP & other modals: harmonised sizes (tuned after review) ────────── */
#messageModal { font-family: var(--font-body); }
/* modal must stay inside the frame — internal scroll takes any overflow */
#messageModal .modal-content, #messageModal > div {
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
}
#messageModal td { vertical-align: middle; padding: 6px 8px !important; }
#messageModal [style*="font-size:11px"], #messageModal [style*="font-size: 11px"] { font-size: 12.5px !important; }
#messageModal [style*="font-size:12px"], #messageModal [style*="font-size: 12px"] { font-size: 13.5px !important; }
#messageModal [style*="font-size:13px"], #messageModal [style*="font-size: 13px"] { font-size: 14.5px !important; }
#messageModal table { font-size: 14.5px; }
#messageModal h4, #messageModal h5 {
    font-family: var(--font-display) !important;
    letter-spacing: 0.08em;
    font-size: 15px !important;
}
#messageModal kbd {
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
}

/* ── 13. Loader geometry fix: rings must never touch the title ─────────────── */
.loader-icon {
    display: inline-block;
    margin-bottom: 52px;   /* clears the outer ring (inset -40px) plus breathing room */
    margin-top: 26px;
}
.loader-icon img { width: 96px; height: auto; }
.loader-text { font-size: 34px; margin-bottom: 6px; }
.loader-subtitle { margin-bottom: 26px; }
.loader-progress { width: 220px; margin: 0 auto 14px; }