/* ── Theme tokens ─────────────────────────────────────────────────────────── */
:root {
    /* Dark mode (default) */
    --bg-base:    #0d1117;
    --bg-surface: #161b22;
    --bg-raised:  #21262d;
    --bg-hover:   #30363d;
    --bg-map:     #060d18;
    --bg-pinned:  #1c2a3a;

    --border:        #21262d;
    --border-strong: #30363d;

    --text-primary:   #f0f6ff;
    --text-body:      #c9d1d9;
    --text-secondary: #e6edf3;
    --text-muted:     #8b949e;
    --text-faint:     #6e7681;
    --text-ghost:     #484f58;

    --accent:              #58a6ff;
    --accent-active-bg:    #1f6feb;
    --accent-active-border:#388bfd;

    --country-empty:        #1a2235;
    --country-stroke:       #0d1117;
    --country-hover-stroke: #e6edf3;
    --graticule-stroke:     #111827;

    --tooltip-bg: rgba(13, 17, 23, 0.97);
    --shadow:     rgba(0, 0, 0, 0.6);
    --overlay-bg: rgba(0, 0, 0, 0.55);
    --zoom-btn-bg:rgba(22, 27, 34, 0.92);
}

:root[data-theme="light"] {
    --bg-base:    #f6f8fa;
    --bg-surface: #ffffff;
    --bg-raised:  #eaeef2;
    --bg-hover:   #d0d7de;
    --bg-map:     #b8d4e8;
    --bg-pinned:  #dbeafe;

    --border:        #d0d7de;
    --border-strong: #b0bec5;

    --text-primary:   #1f2328;
    --text-body:      #24292f;
    --text-secondary: #32383f;
    --text-muted:     #57606a;
    --text-faint:     #6e7781;
    --text-ghost:     #8c959f;

    --accent:              #0969da;
    --accent-active-bg:    #0969da;
    --accent-active-border:#0550ae;

    --country-empty:        #dce3ea;
    --country-stroke:       #f0f4f7;
    --country-hover-stroke: #1f2328;
    --graticule-stroke:     #c2cfd9;

    --tooltip-bg: rgba(255, 255, 255, 0.97);
    --shadow:     rgba(0, 0, 0, 0.12);
    --overlay-bg: rgba(0, 0, 0, 0.3);
    --zoom-btn-bg:rgba(255, 255, 255, 0.92);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family:
        'Segoe UI',
        system-ui,
        -apple-system,
        sans-serif;
    background: var(--bg-base);
    color: var(--text-body);
    height: 100vh;
    height: 100svh; /* use small viewport height so footer stays visible when mobile browser chrome is shown */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

/* ── Header ── */
#header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem 1rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 10;
}
#header h1 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
#year-display {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    min-width: 130px;
}
#era-count {
    font-size: 0.78rem;
    color: var(--text-faint);
    white-space: nowrap;
}
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

button {
    background: var(--bg-raised);
    color: var(--text-body);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 0.28rem 0.65rem;
    cursor: pointer;
    font-size: 0.82rem;
    transition:
        background 0.12s,
        border-color 0.12s;
}
button:hover {
    background: var(--bg-hover);
}
button.active {
    background: var(--accent-active-bg);
    border-color: var(--accent-active-border);
    color: #fff;
}

select {
    background: var(--bg-raised);
    color: var(--text-body);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 0.28rem 0.45rem;
    font-size: 0.8rem;
    cursor: pointer;
}

/* ── Main row ── */
#main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── SVG map ── */
#map-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-map);
}
#map {
    width: 100%;
    height: 100%;
    display: block;
}

.sphere {
    fill: var(--bg-map);
}
.graticule {
    fill: none;
    stroke: var(--graticule-stroke);
    stroke-width: 0.4;
}
.country {
    stroke: var(--country-stroke);
    stroke-width: 0.4;
    cursor: pointer;
    transition: fill 0.25s;
}
.country:hover {
    stroke: var(--country-hover-stroke);
    stroke-width: 1.2;
}
.borders {
    fill: none;
    stroke: var(--country-stroke);
    stroke-width: 0.4;
    pointer-events: none;
}

/* ── Tooltip ── */
#tooltip {
    position: fixed;
    z-index: 200;
    background: var(--tooltip-bg);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    max-width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px var(--shadow);
}
#tooltip.visible {
    opacity: 1;
}
#tooltip::-webkit-scrollbar {
    width: 4px;
}
#tooltip::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 2px;
}

.tt-country {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.tt-entry {
    padding: 0.45rem 0;
    border-top: 1px solid var(--border);
}
.tt-entry:first-of-type {
    border-top: none;
}
.tt-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.tt-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}
.tt-title {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.3;
}
.tt-years {
    font-size: 0.72rem;
    color: var(--text-faint);
    margin: 0.1rem 0;
}
.tt-capital {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.tt-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.15rem 0;
}
.tt-summary {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    line-height: 1.4;
}
.tt-chain {
    font-size: 0.7rem;
    color: var(--text-ghost);
    margin-top: 0.25rem;
}
.tt-more {
    font-size: 0.72rem;
    color: var(--text-ghost);
    margin-top: 0.4rem;
}

/* ── Side panel ── */
#side-panel {
    width: 300px;
    flex-shrink: 0;
    background: var(--bg-base);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-title {
    padding: 0.55rem 0.9rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--text-ghost);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
#entry-list {
    overflow-y: auto;
    flex: 1;
}
#entry-list::-webkit-scrollbar {
    width: 5px;
}
#entry-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.entry-card {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--bg-surface);
    cursor: pointer;
    transition: background 0.12s;
}
.entry-card:hover {
    background: var(--bg-surface);
}
.entry-card.pinned {
    background: var(--bg-pinned);
    border-left: 3px solid var(--accent);
    padding-left: calc(0.9rem - 3px);
}

.ec-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.ec-flag {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
}
.ec-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
}
.ec-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.25rem;
}
.ec-years {
    font-size: 0.72rem;
    color: var(--text-ghost);
}
.ec-badge {
    font-size: 0.62rem;
    padding: 0.06rem 0.3rem;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ec-capital {
    font-size: 0.72rem;
    color: var(--text-faint);
    margin-bottom: 0.2rem;
}
.ec-summary {
    font-size: 0.77rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 0.25rem;
}
.ec-chain {
    font-size: 0.7rem;
    color: var(--text-ghost);
    margin-bottom: 0.2rem;
    line-height: 1.4;
}
.ec-link {
    font-size: 0.72rem;
    color: var(--accent);
    text-decoration: none;
}
.ec-link:hover {
    text-decoration: underline;
}

/* ── Slider / footer ── */
#footer {
    flex-shrink: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    padding: 0.55rem 1.2rem 0.5rem;
}
#slider-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.3rem;
}
#year-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-hover);
    outline: none;
    cursor: pointer;
}
#year-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.25);
}
#year-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}
#year-input {
    width: 110px;
    background: var(--bg-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.82rem;
    text-align: center;
    flex-shrink: 0;
    outline: none;
    transition: border-color 0.12s;
}
#year-input:focus {
    border-color: var(--accent);
}
#year-input.error {
    border-color: #f85149;
    color: #f85149;
}

#epoch-labels {
    position: relative;
    height: 1rem;
    margin: 0 7px;
}
.epoch-tick {
    position: absolute;
    font-size: 0.62rem;
    color: var(--border-strong);
    transform: translateX(-50%);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s;
}
.epoch-tick:hover {
    color: var(--text-muted);
}

/* ── Legend ── */
#legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 0.4rem 1.2rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--text-faint);
}
.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Zoom controls ── */
#zoom-controls {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 10;
}
#zoom-controls button {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zoom-btn-bg);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-body);
}
#zoom-controls button:active {
    background: var(--bg-hover);
}
#zoom-reset {
    font-size: 0.7rem !important;
    margin-top: 3px;
}
#map {
    cursor: grab;
    touch-action: none;
}
#map.grabbing {
    cursor: grabbing;
}

/* ── Loading overlay ── */
#loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-map);
    z-index: 50;
    flex-direction: column;
    gap: 1rem;
}
#loading.hidden {
    display: none;
}
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Mobile-only elements (hidden on desktop) ── */
#panel-toggle {
    display: none;
}
#panel-close {
    display: none;
}
#panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
#panel-overlay.visible {
    opacity: 1;
    pointer-events: all;
}
#tooltip-close {
    display: none;
}

/* ── Mobile layout ── */
@media (max-width: 640px) {
    /* Header */
    #header {
        gap: 0.5rem;
        padding: 0.35rem 0.75rem;
    }
    #header h1 {
        display: none;
    }
    #year-display {
        font-size: 1.15rem;
        min-width: 80px;
    }
    #speed-sel,
    #step-sel,
    #reset-btn {
        display: none;
    }
    #play-btn {
        padding: 0.35rem 0.8rem;
    }
    #panel-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.65rem;
        margin-left: auto;
    }

    /* Panel → fixed bottom drawer */
    #side-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 65vh;
        border-left: none;
        border-top: 1px solid var(--border-strong);
        border-radius: 14px 14px 0 0;
        z-index: 99;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #side-panel.open {
        transform: translateY(0);
    }
    #panel-close {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0.9rem;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        font-size: 0.8rem;
        color: var(--text-muted);
    }
    #panel-close button {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1.1rem;
        padding: 0.1rem 0.3rem;
        line-height: 1;
    }
    #panel-overlay {
        display: block;
    }

    /* Tooltip → bottom card on tap */
    #tooltip {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        max-width: 100%;
        max-height: 50vh;
        border-radius: 14px 14px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        transform: translateY(100%);
        transition:
            transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0s;
        pointer-events: all;
        opacity: 1;
    }
    #tooltip.visible {
        transform: translateY(0);
        opacity: 1;
    }
    #tooltip-close {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    #tooltip-close button {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1.1rem;
        padding: 0.1rem 0.3rem;
        line-height: 1;
        cursor: pointer;
    }

    /* Bigger slider + footer */
    #footer {
        padding: 0.6rem 0.9rem 0.45rem;
    }
    #year-slider {
        height: 6px;
    }
    #year-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
        box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.2);
    }
    #year-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
    #year-input {
        width: 90px;
        font-size: 0.85rem;
        padding: 0.3rem 0.4rem;
    }

    /* Fewer epoch labels handled in JS via .mobile-hide */
    .epoch-tick.mobile-hide {
        display: none;
    }

    /* Legend hidden */
    #legend {
        display: none;
    }
}