/* ═══════════════════════════════════════════════════════════════════════════════
   PYRA THEME v3 — slice 1 (2026-07-13): consistency layer for panels & modals.
   Goal per Farhad: "better fonts and sizes" — one shared visual language across
   every tool panel before the full ui-ux-pro-max restyle. Load AFTER all other
   CSS. Scoped to known panel ids/classes; deletes cleanly.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── shared panel skin ─────────────────────────────────────────────────────── */
#messageModal,
#directionsPanel, #isochronePanel, #astroLinesPanel, #skyEventsPanel,
#alignmentLabPanel, #geometryNetworkPanel, #astralPanel, #drawMeasurePanel,
#mapStylePanel, #snapshotPanel, #chatPanel, .map-controls-container {
    border-radius: 14px !important;
    border-color: rgba(201, 162, 39, 0.28) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), 0 0 22px rgba(201, 162, 39, 0.08) !important;
}

/* ── typography: readable body sizes, Cinzel display headers ───────────────── */
#messageModal, #directionsPanel, #isochronePanel, #astroLinesPanel,
#skyEventsPanel, #alignmentLabPanel, #geometryNetworkPanel, #astralPanel {
    font-size: 13px;
    line-height: 1.55;
}
#messageModal h3, #messageModal h4,
#astroLinesPanel h3, #skyEventsPanel h3, #alignmentLabPanel h3,
#geometryNetworkPanel h3 {
    font-family: 'Cinzel', 'Trajan Pro', Georgia, serif !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
}

/* section labels — one style everywhere (the tiny uppercase headers) */
#messageModal [style*="text-transform:uppercase"],
#directionsPanel [style*="text-transform:uppercase"],
#isochronePanel [style*="text-transform:uppercase"],
#astralPanel [style*="text-transform:uppercase"] {
    letter-spacing: 0.14em !important;
    font-weight: 600;
}

/* ── inputs: consistent, calm, gold on focus ───────────────────────────────── */
#messageModal input[type="text"], #messageModal input[type="number"],
#messageModal input[type="datetime-local"], #messageModal select,
#directionsPanel input, #isochronePanel input, #geometryNetworkPanel input,
#astroLinesPanel input, #astralPanel input, #chatPanel input {
    border-radius: 8px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#messageModal input:focus, #directionsPanel input:focus, #isochronePanel input:focus,
#geometryNetworkPanel input:focus, #astroLinesPanel input:focus,
#astralPanel input:focus, #chatPanel input:focus {
    border-color: rgba(232, 197, 71, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.12) !important;
    outline: none !important;
}

/* ── buttons: shared hover lift (no color hijack — keeps each tool's accent) ── */
#messageModal button, #directionsPanel button, #isochronePanel button,
#astroLinesPanel button, #skyEventsPanel button, #alignmentLabPanel button,
#geometryNetworkPanel button, #astralPanel button {
    transition: transform 0.14s ease, box-shadow 0.14s ease,
                background 0.14s ease, border-color 0.14s ease;
}
#messageModal button:hover, #directionsPanel button:hover, #isochronePanel button:hover,
#astroLinesPanel button:hover, #skyEventsPanel button:hover, #alignmentLabPanel button:hover,
#geometryNetworkPanel button:hover, #astralPanel button:hover {
    transform: translateY(-1px);
}
#messageModal button:active, #directionsPanel button:active, #isochronePanel button:active,
#geometryNetworkPanel button:active, #astralPanel button:active {
    transform: translateY(0);
}

/* ── scrollbars: thin, dark, gold thumb — everywhere panels scroll ─────────── */
#messageModal ::-webkit-scrollbar, #directionsPanel::-webkit-scrollbar,
#isochronePanel::-webkit-scrollbar, #astroLinesPanel ::-webkit-scrollbar,
#skyEventsPanel ::-webkit-scrollbar, #alignmentLabPanel ::-webkit-scrollbar,
#geometryNetworkPanel::-webkit-scrollbar, #geometryNetworkPanel ::-webkit-scrollbar,
#astralPanel::-webkit-scrollbar, #chatPanel ::-webkit-scrollbar,
#messageModal::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
#messageModal ::-webkit-scrollbar-thumb, #directionsPanel::-webkit-scrollbar-thumb,
#isochronePanel::-webkit-scrollbar-thumb, #astroLinesPanel ::-webkit-scrollbar-thumb,
#skyEventsPanel ::-webkit-scrollbar-thumb, #alignmentLabPanel ::-webkit-scrollbar-thumb,
#geometryNetworkPanel::-webkit-scrollbar-thumb, #geometryNetworkPanel ::-webkit-scrollbar-thumb,
#astralPanel::-webkit-scrollbar-thumb, #chatPanel ::-webkit-scrollbar-thumb,
#messageModal::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.35);
    border-radius: 4px;
}
#messageModal ::-webkit-scrollbar-track, #messageModal::-webkit-scrollbar-track,
#geometryNetworkPanel::-webkit-scrollbar-track, #astralPanel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}

/* ── SITE CARD: hands off (2026-07-14). Two attempts rejected by Farhad —
      the drawer AND the size boost. The card stays EXACTLY as the app renders
      it. Do not style .site-info-card from this file. ── */

/* ── kbd chips (help/settings shortcut cards) ──────────────────────────────── */
#messageModal kbd {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10.5px !important;
}

/* ── layout fix (2026-07-14): labeled controls dock grew taller and reached
      the vertically-centred zoom bar. Pin the zoom bar to the lower right and
      cap the dock's height (it scrolls internally if the screen is short). ── */
#mapNavToolbar {
    top: auto !important;
    bottom: 170px !important;   /* v6: raised — was colliding with the + quick-add and eye buttons */
    transform: none !important;
}
.map-controls-container {
    max-height: calc(100vh - 480px);   /* v6: dock ends ≥10px above the zoom bar on any screen */
    overflow-y: auto !important;
}
/* v6 (Farhad's screenshot): right-side panels were touching/overlapping the
   controls dock (dock is 156px wide since it got labels). Give every fixed
   right-side panel a consistent left edge with a clear gap. Desktop only —
   mobile turns these into bottom sheets and must stay untouched. */
@media (min-width: 769px) {
    #messageModal, #directionsPanel, #isochronePanel, #astralPanel,
    #geometryNetworkPanel, #astroLinesPanel, #skyEventsPanel, #alignmentLabPanel,
    #drawMeasurePanel,
    #chatPanel, #proChatPanel {   /* v9: chat was the one panel missing from the gap system */
        right: 182px !important;
    }
    /* chat: more room = less scrolling, and thin quiet scrollbars */
    #chatPanel {
        max-height: calc(100vh - 150px) !important;
        left: auto !important;
    }
    #chatPanel .chat-messages { scrollbar-width: thin; }
    #chatPanel ::-webkit-scrollbar { width: 6px; height: 6px; }
    #chatPanel ::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.3); border-radius: 3px; }
    #chatPanel ::-webkit-scrollbar-track { background: transparent; }
    /* the channel tab row was forcing a horizontal scrollbar — let it wrap */
    #chatPanel .chat-channels { flex-wrap: wrap; overflow-x: hidden !important; }
}
.map-controls-container::-webkit-scrollbar { width: 6px; }
.map-controls-container::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.3); border-radius: 3px; }

/* ── sidebar typography: Cinzel section titles, consistent tool labels ─────── */
#leftSidebar .section-title span {
    font-family: 'Cinzel', Georgia, serif !important;
    letter-spacing: 0.12em !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
#leftSidebar .tool-label {
    font-size: 10px !important;
    letter-spacing: 0.02em;
    line-height: 1.25;
}

/* ── sidebar: quiet group labels inside the Research Tools grid ────────────── */
.tools-group-label {
    grid-column: 1 / -1;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(232, 197, 71, 0.5);
    margin: 7px 0 1px;
    padding-left: 2px;
    font-weight: 600;
}
.tools-group-label:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SLICE 2 (2026-07-14) — NORMALIZATION LAYER, built with the ui-ux-pro-max
   rulebook (type-scale floor, touch targets, consistent radii/motion,
   tabular numbers). Farhad's complaints addressed: tiny unreadable texts
   raised to a 11.5px floor across panels; oversized Export/Import shrunk to a
   compact pair. Identity untouched (dark abyss + gold, Cinzel/Cormorant).
   SCOPE: panels + sidebar only. The site card (.site-info-card) is EXCLUDED
   by rule. ═══════════════════════════════════════════════════════════════ */

/* — type-scale floor: nothing in a panel below ~11.5px (was 8-10px all over) — */
#messageModal [style*="font-size:8px"],    #messageModal [style*="font-size:8.5px"],
#messageModal [style*="font-size:9px"],    #messageModal [style*="font-size:9.5px"],
#astralPanel [style*="font-size:8px"],     #astralPanel [style*="font-size:9px"],
#directionsPanel [style*="font-size:9px"], #isochronePanel [style*="font-size:9px"],
#geometryNetworkPanel [style*="font-size:9px"], #geometryNetworkPanel [style*="font-size:9.5px"],
#astroLinesPanel [style*="font-size:9px"], #skyEventsPanel [style*="font-size:9px"],
#alignmentLabPanel [style*="font-size:9px"], #communityHubPanel [style*="font-size:8.5px"],
#communityHubPanel [style*="font-size:9px"], #communityHubPanel [style*="font-size:9.5px"] {
    font-size: 11px !important;
    line-height: 1.45 !important;
}
#messageModal [style*="font-size:10px"],   #astralPanel [style*="font-size:10px"],
#directionsPanel [style*="font-size:10px"],#isochronePanel [style*="font-size:10px"],
#geometryNetworkPanel [style*="font-size:10px"], #geometryNetworkPanel [style*="font-size:10.5px"],
#astroLinesPanel [style*="font-size:10px"],#skyEventsPanel [style*="font-size:10px"],
#alignmentLabPanel [style*="font-size:10px"], #communityHubPanel [style*="font-size:10px"] {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
}
#messageModal [style*="font-size:11px"],   #astralPanel [style*="font-size:11px"],
#directionsPanel [style*="font-size:11px"],#isochronePanel [style*="font-size:11px"],
#geometryNetworkPanel [style*="font-size:11px"], #communityHubPanel [style*="font-size:11px"] {
    font-size: 12px !important;
}

/* — Export/Import: Farhad "too big" → compact side-by-side pair — */
#dataSection .data-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
#dataSection .data-actions .btn-secondary {
    padding: 8px 8px !important;
    font-size: 11px !important;
    letter-spacing: 0.02em;
    min-height: 36px;
    border-radius: 8px !important;
}
#dataSection .data-actions .btn-secondary svg,
#dataSection .data-actions .btn-secondary i { width: 13px; height: 13px; }

/* — consistent control geometry: one radius + one motion rhythm — */
#messageModal button, #astralPanel button, #directionsPanel button,
#isochronePanel button, #geometryNetworkPanel button, #astroLinesPanel button,
#skyEventsPanel button, #alignmentLabPanel button, #communityHubPanel button {
    min-height: 30px;
    transition-duration: 0.2s;
}

/* — numbers that don't wobble: coordinates, counters, distances — */
#mouseCoordinates, .coordinates, #messageModal [style*="monospace"],
#directionsPanel [style*="monospace"], .site-count {
    font-variant-numeric: tabular-nums;
}

/* — keyboard focus: visible gold ring (accessibility floor) — */
#messageModal button:focus-visible, #leftSidebar button:focus-visible,
#astralPanel button:focus-visible, #communityHubPanel button:focus-visible {
    outline: 2px solid rgba(232, 197, 71, 0.65) !important;
    outline-offset: 1px;
}

/* — respect reduced motion — */
@media (prefers-reduced-motion: reduce) {
    #messageModal button, #astralPanel button, #leftSidebar .tool-btn,
    .map-ctrl-btn, .pyra-chip { transition: none !important; }
}

/* ── ASTRAL PANEL type bump (2026-07-14, Farhad: still too small to read) ──── */
#astralPanel { font-size: 13.5px !important; }
#astralPanel [style*="font-size:8px"] { font-size: 10px !important; }
#astralPanel [style*="font-size:9px"], #astralPanel [style*="font-size:9.5px"] { font-size: 11px !important; }
#astralPanel [style*="font-size:10px"], #astralPanel [style*="font-size:10.5px"] { font-size: 12px !important; }
#astralPanel [style*="font-size:11px"], #astralPanel [style*="font-size:11.5px"] { font-size: 12.5px !important; }
#astralPanel [style*="font-size:12px"] { font-size: 13px !important; }
#astralPanel .ap-sec summary { font-size: 12px !important; }
#directorPanel [style*="font-size:10px"], #directorPanel [style*="font-size:10.5px"] { font-size: 12px !important; }
#directorPanel [style*="font-size:11px"], #directorPanel [style*="font-size:11.5px"] { font-size: 12.5px !important; }
#directorPanel [style*="font-size:8.5px"], #directorPanel [style*="font-size:9px"],
#directorPanel [style*="font-size:9.5px"] { font-size: 11px !important; }

/* ── the restore-chip dock (panel manager) matches the identity ────────────── */
.pyra-chip {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 12.5px !important;
}