.tm-playback {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(199,166,94,.34);
    border-radius: 12px;
    background:
        linear-gradient(
            180deg,
            rgba(199,166,94,.075),
            rgba(6,17,26,.18)
        );
}

.tm-playback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tm-playback-title {
    color: #efdaa0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    letter-spacing: .025em;
}

.tm-playback-current {
    color: #efdaa0;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.tm-playback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}

.tm-playback button {
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #425c6e;
    border-radius: 8px;
    background: #0b1b27;
    color: #d9e2e7;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}

.tm-playback button:hover {
    border-color: #c7a65e;
    color: #efdaa0;
}

.tm-playback button.tm-play-primary {
    border-color: #a98a49;
    background: #c7a65e;
    color: #111820;
    font-weight: 800;
}

.tm-playback-start-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.tm-playback-label {
    color: #899daa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tm-playback-start {
    width: 100%;
    accent-color: #c7a65e;
}

.tm-playback-start-value {
    min-width: 76px;
    color: #d8c38d;
    font-size: 11px;
    text-align: right;
}

.tm-playback-track {
    position: relative;
    height: 6px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #152b39;
}

.tm-playback-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #75643e,
            #c7a65e
        );
    transition: width .22s linear;
}

.tm-playback-caption {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    color: #647b8b;
    font-size: 9px;
}

.tm-playback-status {
    margin-top: 9px;
    color: #8196a4;
    font-size: 10px;
    line-height: 1.4;
}

@media (max-width: 520px) {
    .tm-playback-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .tm-playback-start-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .tm-playback-start-value {
        text-align: left;
    }
}


/* =========================================
   MAP PLAYBACK EXPERIENCE
========================================= */

.tm-map-column {
    position: relative;
}


.tm-playback-map-year {
    position: absolute;

    top: 76px;
    left: 50%;

    z-index: 900;

    transform:
        translateX(-50%)
        translateY(-8px);

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 210px;

    padding: 11px 26px 10px;

    border:
        1px solid
        rgba(199,166,94,.55);

    border-radius: 16px;

    background:
        rgba(4,14,23,.88);

    box-shadow:
        0 12px 38px
        rgba(0,0,0,.46);

    backdrop-filter:
        blur(10px);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .22s ease,
        transform .22s ease;
}


.tm-playback-map-year.active {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}


.tm-playback-map-year strong {
    color: #f5e7c5;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;

    line-height: 1.05;
}


.tm-playback-map-year span {
    margin-top: 3px;

    color: #d5ad55;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.tm-playback-map-year small {
    margin-top: 4px;

    color: #8aa4b6;

    font-size: 10px;
}


.tm-map.tm-playback-map-tick {
    animation:
        tmPlaybackTick
        .35s ease;
}


.tm-map.tm-playback-map-event {
    animation:
        tmPlaybackEvent
        .58s ease;
}


@keyframes tmPlaybackTick {

    0% {
        box-shadow:
            inset 0 0 0
            rgba(199,166,94,0);
    }

    45% {
        box-shadow:
            inset 0 0 38px
            rgba(80,145,190,.08);
    }

    100% {
        box-shadow:
            inset 0 0 0
            rgba(199,166,94,0);
    }
}


@keyframes tmPlaybackEvent {

    0% {
        box-shadow:
            inset 0 0 0
            rgba(199,166,94,0);
    }

    40% {
        box-shadow:
            inset 0 0 58px
            rgba(199,166,94,.17);
    }

    100% {
        box-shadow:
            inset 0 0 0
            rgba(199,166,94,0);
    }
}


@media (max-width: 759px) {

    .tm-playback-map-year {
        top: 62px;

        min-width: 165px;

        padding:
            8px
            16px;
    }


    .tm-playback-map-year strong {
        font-size: 21px;
    }
}



/* TIME MAP EVENT ARRIVAL ANIMATIONS */

/*
 * Do not animate the Leaflet marker element itself.
 * Leaflet uses transform on that element for positioning.
 * Animate the marker's inner visual instead.
 */

.tm-playback-running
.tm-event-marker
.tm-marker-core,

.tm-playback-preview
.tm-event-marker
.tm-marker-core,

.tm-playback-running
.tm-event-marker > div,

.tm-playback-preview
.tm-event-marker > div {
    transform-origin:
        50% 80%;

    animation:
        tmEventArrival
        .64s
        cubic-bezier(.18,.85,.24,1.18)
        both;
}


@keyframes tmEventArrival {

    0% {
        opacity:
            0;

        transform:
            translateY(10px)
            scale(.28);

        filter:
            brightness(1.9)
            drop-shadow(
                0 0 0
                rgba(221,184,96,0)
            );
    }


    45% {
        opacity:
            1;

        transform:
            translateY(-2px)
            scale(1.28);

        filter:
            brightness(1.45)
            drop-shadow(
                0 0 15px
                rgba(221,184,96,.9)
            );
    }


    72% {
        transform:
            translateY(0)
            scale(.94);
    }


    100% {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1)
            drop-shadow(
                0 0 4px
                rgba(221,184,96,.24)
            );
    }
}


/*
 * Existing marker pulse receives a stronger one-shot
 * arrival burst while history is moving.
 */

.tm-playback-running
.tm-marker-pulse,

.tm-playback-preview
.tm-marker-pulse {
    animation:
        tmHistoricalPulse
        .9s
        ease-out
        both;
}


@keyframes tmHistoricalPulse {

    0% {
        opacity:
            .95;

        transform:
            scale(.35);
    }


    55% {
        opacity:
            .58;

        transform:
            scale(2.4);
    }


    100% {
        opacity:
            0;

        transform:
            scale(3.8);
    }
}


/*
 * Clusters also visibly reform as history changes.
 */

.tm-playback-running
.tm-cluster-core,

.tm-playback-preview
.tm-cluster-core {
    transform-origin:
        center;

    animation:
        tmClusterArrival
        .58s
        cubic-bezier(.18,.82,.3,1.15)
        both;
}


@keyframes tmClusterArrival {

    0% {
        opacity:
            .15;

        transform:
            scale(.55);

        box-shadow:
            0 0 0
            rgba(221,184,96,0);
    }


    55% {
        opacity:
            1;

        transform:
            scale(1.18);

        box-shadow:
            0 0 24px
            rgba(221,184,96,.48);
    }


    100% {
        opacity:
            1;

        transform:
            scale(1);

        box-shadow:
            0 0 9px
            rgba(221,184,96,.18);
    }
}


/*
 * Featured Event changes with the moving historical moment.
 */

.tm-playback-running
.tm-feature-button,

.tm-playback-preview
.tm-feature-button {
    animation:
        tmFeaturedArrival
        .52s
        ease-out
        both;
}


@keyframes tmFeaturedArrival {

    0% {
        opacity:
            0;

        transform:
            translateX(-8px);
    }


    100% {
        opacity:
            1;

        transform:
            translateX(0);
    }
}


/*
 * First visible event receives a subtle arrival cue too.
 */

.tm-playback-running
.tm-event-list-item:first-child,

.tm-playback-preview
.tm-event-list-item:first-child {
    animation:
        tmListArrival
        .45s
        ease-out
        both;
}


@keyframes tmListArrival {

    0% {
        opacity:
            .25;

        transform:
            translateY(5px);
    }


    100% {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* EVENT-DRIVEN PLAYBACK */

.tm-playback-status::before {
    content:
        "EVENT-DRIVEN";

    display:
        inline-block;

    margin-right:
        7px;

    padding:
        2px 5px;

    border:
        1px solid
        rgba(199,166,94,.35);

    border-radius:
        4px;

    color:
        #c7a65e;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    vertical-align:
        1px;
}


.tm-playback-actions button:disabled {
    opacity:
        .55;

    cursor:
        wait;
}


/* TIMELINE YEAR CHIP OVERRIDE */

.tm-playback-map-year {
    position: static;

    top: auto;
    left: auto;
    z-index: auto;

    transform: none;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    width: fit-content;
    min-width: 0;
    max-width: 100%;

    margin: 10px 0 0 auto;

    padding: 8px 14px;

    border: 1px solid rgba(199,166,94,.40);
    border-radius: 12px;

    background: rgba(4,14,23,.72);
    box-shadow: none;
    backdrop-filter: none;

    opacity: 1;
    pointer-events: none;
    transition: none;
}

.tm-playback-map-year.active {
    opacity: 1;
    transform: none;
}

.tm-playback-map-year strong {
    font-size: 18px;
    line-height: 1.05;
}

.tm-playback-map-year span {
    margin-top: 2px;
    font-size: 10px;
}

.tm-playback-map-year small {
    margin-top: 3px;
    font-size: 10px;
}

.tm-playback-running .tm-playback-map-year,
.tm-playback-preview .tm-playback-map-year {
    animation: tmTimelineYearChip .28s ease-out;
}

@keyframes tmTimelineYearChip {

    0% {
        opacity: .25;
        transform: translateY(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 759px) {

    .tm-playback-map-year {
        margin-top: 8px;
        padding: 7px 12px;
    }

    .tm-playback-map-year strong {
        font-size: 16px;
    }
}


/* INDIVIDUAL PLAYBACK EVENT PINS */

.tm-playback-running
.tm-event-icon
.tm-event-pin,

.tm-playback-preview
.tm-event-icon
.tm-event-pin {
    transform-origin: center;

    animation:
        tmPlaybackPinArrival
        .62s
        cubic-bezier(.16,.85,.24,1.28)
        both;
}


@keyframes tmPlaybackPinArrival {

    0% {
        opacity: 0;

        transform:
            scale(.15);

        box-shadow:
            0 0 0 0
            rgba(226,188,91,0);
    }


    42% {
        opacity: 1;

        transform:
            scale(1.65);

        box-shadow:
            0 0 0 10px
            rgba(226,188,91,.16),
            0 0 26px
            rgba(226,188,91,.85);
    }


    70% {
        transform:
            scale(.88);
    }


    100% {
        opacity: 1;

        transform:
            scale(1);
    }
}


/*
 * Plain playback pins sit above the geography
 * while remaining fully clickable.
 */

.tm-playback-running
.tm-event-icon,

.tm-playback-preview
.tm-event-icon {
    z-index: 750 !important;
}


/* =========================================================
   PLAYBACK EVENT WINDOWS
   ========================================================= */

.tm-playback-event-icon {
    background:
        transparent !important;

    border:
        0 !important;

    overflow:
        visible !important;
}


.tm-playback-event-window {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    width:
        220px;

    min-height:
        74px;

    padding:
        10px
        12px
        11px;

    border:
        1px solid
        rgba(216,189,118,.82);

    border-radius:
        10px;

    background:
        linear-gradient(
            180deg,
            rgba(13,31,43,.97),
            rgba(5,17,26,.98)
        );

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.58),
        0 0 20px
        rgba(210,173,90,.16);

    color:
        #e9e0cb;

    cursor:
        pointer;

    transform-origin:
        50%
        100%;

    animation:
        tmPlaybackWindowArrival
        .55s
        cubic-bezier(.16,.82,.25,1.15)
        both;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}


.tm-playback-event-window:hover {
    z-index:
        1000;

    transform:
        translateY(-3px)
        scale(1.035);

    border-color:
        #f0d486;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.7),
        0 0 28px
        rgba(210,173,90,.32);
}


.tm-playback-window-date {
    overflow:
        hidden;

    color:
        #d5ad55;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .035em;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-playback-window-title {
    display:
        -webkit-box;

    overflow:
        hidden;

    color:
        #f1e7ce;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        13px;

    line-height:
        1.22;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


.tm-playback-window-place {
    overflow:
        hidden;

    margin-top:
        2px;

    color:
        #7893a6;

    font-size:
        9px;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-playback-window-pointer {
    position:
        absolute;

    left:
        50%;

    bottom:
        -8px;

    width:
        14px;

    height:
        14px;

    transform:
        translateX(-50%)
        rotate(45deg);

    border-right:
        1px solid
        rgba(216,189,118,.82);

    border-bottom:
        1px solid
        rgba(216,189,118,.82);

    background:
        #06131d;
}


.tm-playback-window-pointer::after {
    content:
        "";

    position:
        absolute;

    left:
        10px;

    top:
        10px;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #e0bb61;

    box-shadow:
        0 0 0 4px
        rgba(224,187,97,.12),
        0 0 10px
        rgba(224,187,97,.65);
}


@keyframes tmPlaybackWindowArrival {

    0% {
        opacity:
            0;

        transform:
            translateY(14px)
            scale(.72);
    }


    58% {
        opacity:
            1;

        transform:
            translateY(-2px)
            scale(1.035);
    }


    100% {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


/*
 * During playback the card itself is the event marker,
 * so suppress the old pin-arrival animation underneath it.
 */

.tm-playback-running
.tm-playback-event-icon,

.tm-playback-preview
.tm-playback-event-icon {
    z-index:
        800 !important;
}


@media (max-width: 759px) {

    .tm-playback-event-window {
        width:
            175px;

        min-height:
            65px;

        padding:
            8px
            10px;
    }


    .tm-playback-window-title {
        font-size:
            12px;
    }
}


/* =========================================================
   SMOOTH HISTORICAL WINDOW TRANSITIONS
   ========================================================= */

/*
 * Leaflet controls marker opacity inline.
 * Animate that opacity rather than repeatedly running
 * a pop animation on every playback frame.
 */

.tm-playback-event-icon {
    transition:
        opacity .58s ease,
        filter .58s ease !important;

    will-change:
        opacity;
}


.tm-playback-event-window {
    animation:
        none !important;

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        opacity .58s ease;
}


/*
 * Event is leaving the historical window.
 */

.tm-playback-event-icon.tm-playback-leaving {
    pointer-events:
        none;
}


.tm-playback-event-icon.tm-playback-leaving
.tm-playback-event-window {
    transform:
        translateY(-5px)
        scale(.97);

    filter:
        saturate(.7);

    opacity:
        .15;
}


/*
 * Pause is still an active historical scene.
 */

.tm-playback-paused
.tm-playback-event-window {
    opacity:
        1;
}


/*
 * Disable earlier whole-map pulse animations.
 */

.tm-map.tm-playback-map-tick,
.tm-map.tm-playback-map-event {
    animation:
        none !important;
}


/*
 * Do not repeatedly pulse the old pin animation
 * while event cards are being displayed.
 */

.tm-playback-running
.tm-playback-event-icon
.tm-marker-pulse,

.tm-playback-preview
.tm-playback-event-icon
.tm-marker-pulse,

.tm-playback-paused
.tm-playback-event-icon
.tm-marker-pulse {
    animation:
        none !important;
}


/*
 * Featured event updates smoothly instead of blinking.
 */

.tm-playback-running
.tm-feature-button,

.tm-playback-preview
.tm-feature-button,

.tm-playback-paused
.tm-feature-button {
    animation:
        tmFeaturedSoft
        .38s ease
        both;
}


@keyframes tmFeaturedSoft {

    0% {
        opacity:
            .55;
    }

    100% {
        opacity:
            1;
    }
}


/* =========================================================
   HISTORICAL EVENT LINGER
   ========================================================= */

/*
 * Events remain fully readable while they are within
 * the five-year historical linger window.
 */

.tm-playback-running
.tm-playback-event-window,

.tm-playback-paused
.tm-playback-event-window {
    transition:
        opacity .85s ease,
        transform .85s ease,
        filter .85s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}


/*
 * Once the historical clock passes the linger window,
 * the event exits gradually rather than vanishing.
 */

.tm-playback-event-icon.tm-playback-leaving
.tm-playback-event-window {
    opacity:
        0 !important;

    transform:
        translateY(-7px)
        scale(.94);

    filter:
        saturate(.55)
        brightness(.75);
}


/* MANUAL EVENT JOURNEY CONTROLS */

.tm-playback-step {
    min-height:
        36px;

    padding:
        7px
        10px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #d8e0e4;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .16s ease,
        background .16s ease,
        color .16s ease;
}


.tm-playback-step:hover {
    border-color:
        #b99852;

    background:
        #122734;

    color:
        #f1dfae;
}


.tm-playback-step:disabled {
    opacity:
        .45;

    cursor:
        wait;
}


/* =========================================================
   FOLLOW EVENTS
   ========================================================= */

.tm-playback-follow {
    min-height:
        36px;

    padding:
        7px 11px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #8299aa;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.tm-playback-follow.active {
    border-color:
        rgba(210,173,90,.72);

    background:
        rgba(210,173,90,.08);

    color:
        #e6ca86;

    box-shadow:
        inset 0 0 0 1px
        rgba(210,173,90,.08);
}


.tm-playback-follow:hover {
    border-color:
        #d2ad5a;

    color:
        #f1dfae;
}


/* =========================================================
   CINEMATIC EVENT CROSS-FADE
   ========================================================= */

/*
 * The Leaflet marker itself fades slowly.
 */

.tm-playback-event-icon {
    transition:
        opacity 1.25s
        cubic-bezier(.22,.61,.36,1),
        filter 1.25s
        ease !important;
}


/*
 * New historical event:
 * subtle rise + fade, no pop.
 */

.tm-playback-event-icon.tm-playback-arriving
.tm-playback-event-window {
    opacity:
        0;

    transform:
        translateY(7px)
        scale(.985);

    filter:
        saturate(.8)
        brightness(.82);
}


.tm-playback-event-icon.tm-playback-present
.tm-playback-event-window {
    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

    filter:
        saturate(1)
        brightness(1);
}


.tm-playback-event-window {
    transition:
        opacity 1.25s
        cubic-bezier(.22,.61,.36,1),
        transform 1.25s
        cubic-bezier(.22,.61,.36,1),
        filter 1.25s
        ease,
        border-color .24s
        ease,
        box-shadow .24s
        ease !important;
}


/*
 * Departing historical event:
 * linger visually, then gently dissolve.
 */

.tm-playback-event-icon.tm-playback-leaving {
    transition:
        opacity 1.6s
        cubic-bezier(.4,0,.2,1),
        filter 1.6s
        ease !important;
}


.tm-playback-event-icon.tm-playback-leaving
.tm-playback-event-window {
    opacity:
        0 !important;

    transform:
        translateY(-5px)
        scale(.985);

    filter:
        saturate(.65)
        brightness(.78);

    transition:
        opacity 1.6s
        cubic-bezier(.4,0,.2,1),
        transform 1.6s
        cubic-bezier(.4,0,.2,1),
        filter 1.6s
        ease !important;
}


/*
 * Paused historical scenes stay fully stable.
 */

.tm-playback-paused
.tm-playback-event-icon.tm-playback-present
.tm-playback-event-window {
    opacity:
        1 !important;

    transform:
        translateY(0)
        scale(1) !important;

    filter:
        none !important;
}


/*
 * Remove any remaining pulse/pop behavior on
 * playback event windows.
 */

.tm-playback-running
.tm-playback-event-window,

.tm-playback-preview
.tm-playback-event-window,

.tm-playback-paused
.tm-playback-event-window {
    animation:
        none !important;
}


/* =========================================================
   HISTORICAL TRAIL DEPTH
   ========================================================= */

/*
 * Current year: strongest visual emphasis.
 */

.tm-playback-age-current
.tm-playback-event-window {
    opacity:
        1;

    filter:
        saturate(1)
        brightness(1);

    border-color:
        rgba(232,202,124,.92);

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.62),
        0 0 24px
        rgba(210,173,90,.22);
}


/*
 * One or two years behind the historical clock.
 */

.tm-playback-age-recent
.tm-playback-event-window {
    opacity:
        .84;

    transform:
        scale(.99);

    filter:
        saturate(.88)
        brightness(.92);

    border-color:
        rgba(190,166,108,.62);
}


/*
 * Older cards inside the five-year trail remain readable
 * but visually move into the background.
 */

.tm-playback-age-trail
.tm-playback-event-window {
    opacity:
        .62;

    transform:
        scale(.975);

    filter:
        saturate(.7)
        brightness(.83);

    border-color:
        rgba(126,140,143,.48);

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.46);
}


/*
 * Hover brings any historical card back into focus.
 */

.tm-playback-age-recent
.tm-playback-event-window:hover,

.tm-playback-age-trail
.tm-playback-event-window:hover {
    opacity:
        1;

    transform:
        translateY(-3px)
        scale(1.025);

    filter:
        saturate(1)
        brightness(1);

    border-color:
        #e0bd6b;

    box-shadow:
        0 14px 34px
        rgba(0,0,0,.66),
        0 0 24px
        rgba(210,173,90,.24);
}


/* =========================================================
   SMART PLAYBACK CARD BUDGET
   ========================================================= */

/*
 * Events that cannot safely fit as readable cards remain
 * visible as strong interactive historical points.
 */

.tm-playback-compact-event
.tm-event-pin {
    width:
        14px;

    height:
        14px;

    border-width:
        2px;

    border-color:
        #f0cf7a;

    background:
        #d4a844;

    box-shadow:
        0 0 0 5px
        rgba(210,173,90,.13),
        0 0 18px
        rgba(210,173,90,.72);

    opacity:
        .94;

    transition:
        transform .25s ease,
        opacity .4s ease,
        box-shadow .25s ease;
}


.tm-playback-compact-event:hover
.tm-event-pin {
    transform:
        scale(1.45);

    opacity:
        1;

    box-shadow:
        0 0 0 7px
        rgba(210,173,90,.14),
        0 0 25px
        rgba(235,200,112,.9);
}


/*
 * Full cards should sit above compact historical pins.
 */

.tm-playback-event-icon {
    z-index:
        850 !important;
}


.tm-playback-compact-event {
    z-index:
        760 !important;
}


/* =========================================================
   DENSE LOCATION EVENT STACKS
   ========================================================= */

.tm-playback-stack-icon {
    overflow:
        visible !important;

    background:
        transparent !important;

    border:
        0 !important;

    z-index:
        790 !important;
}


.tm-playback-stack-core {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    border:
        1px solid
        rgba(232,202,124,.88);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            #29475a 0%,
            #102b3b 48%,
            #071720 100%
        );

    color:
        #f0d38c;

    box-shadow:
        0 0 0 5px
        rgba(210,173,90,.11),
        0 8px 22px
        rgba(0,0,0,.5),
        0 0 20px
        rgba(210,173,90,.3);

    cursor:
        pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.tm-playback-stack-core strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px;

    line-height:
        1;
}


.tm-playback-stack-core small {
    margin-top:
        2px;

    color:
        #93a8b5;

    font-size:
        7px;

    line-height:
        1;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


.tm-playback-stack-marker:hover
.tm-playback-stack-core {
    transform:
        scale(1.12);

    box-shadow:
        0 0 0 6px
        rgba(210,173,90,.14),
        0 10px 28px
        rgba(0,0,0,.62),
        0 0 27px
        rgba(230,196,106,.48);
}


/* Stack popup */

.tm-playback-stack-popup-shell
.leaflet-popup-content-wrapper,

.tm-playback-stack-popup-shell
.leaflet-popup-tip {
    background:
        #091a25;

    color:
        #e9e0cb;

    border:
        1px solid
        rgba(210,173,90,.42);
}


.tm-playback-stack-popup-shell
.leaflet-popup-content {
    margin:
        12px;

    width:
        auto !important;
}


.tm-playback-stack-popup {
    min-width:
        220px;
}


.tm-playback-stack-popup-title {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #e8ca7c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px;
}


.tm-playback-stack-popup-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    max-height:
        270px;

    overflow-y:
        auto;
}


.tm-playback-stack-popup-event {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    width:
        100%;

    padding:
        7px 8px;

    border:
        1px solid
        rgba(81,110,129,.5);

    border-radius:
        6px;

    background:
        #0b202d;

    color:
        #e8e0cd;

    text-align:
        left;

    cursor:
        pointer;
}


.tm-playback-stack-popup-event:hover {
    border-color:
        #c3a45e;

    background:
        #102b3a;
}


.tm-playback-stack-popup-event span {
    color:
        #cca956;

    font-size:
        9px;
}


.tm-playback-stack-popup-event strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        11px;

    line-height:
        1.25;
}


.tm-playback-stack-popup-more {
    display:
        block;

    margin-top:
        7px;

    color:
        #7893a6;

    font-size:
        9px;
}


/* =========================================================
   HISTORICAL JOURNEY STRIP
   ========================================================= */

.tm-journey-strip {
    margin-top:
        10px;

    padding-top:
        9px;

    border-top:
        1px solid
        rgba(63,91,109,.45);
}


.tm-journey-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        7px;
}


.tm-journey-heading strong {
    color:
        #d7b45d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        11px;

    letter-spacing:
        .035em;
}


.tm-journey-heading span {
    color:
        #6f899b;

    font-size:
        8px;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}


.tm-journey-track {
    display:
        flex;

    align-items:
        stretch;

    gap:
        6px;

    overflow-x:
        auto;

    padding:
        2px
        1px
        5px;

    scrollbar-width:
        thin;
}


.tm-journey-node {
    position:
        relative;

    flex:
        0 0 auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    min-width:
        92px;

    min-height:
        44px;

    padding:
        6px
        9px;

    border:
        1px solid
        rgba(65,91,108,.72);

    border-radius:
        7px;

    background:
        #091a25;

    color:
        #8298a7;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        opacity .2s ease,
        transform .2s ease;
}


.tm-journey-node::before {
    content:
        "";

    position:
        absolute;

    left:
        -7px;

    top:
        50%;

    width:
        6px;

    height:
        1px;

    background:
        #425b6c;
}


.tm-journey-node:first-child::before {
    display:
        none;
}


.tm-journey-node strong {
    color:
        #d9c99f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        11px;
}


.tm-journey-node span {
    margin-top:
        2px;

    color:
        #708a9c;

    font-size:
        8px;
}


.tm-journey-node.past {
    opacity:
        .52;
}


.tm-journey-node.future {
    opacity:
        .8;
}


.tm-journey-node.current {
    border-color:
        #dfbb62;

    background:
        rgba(210,173,90,.12);

    opacity:
        1;

    transform:
        translateY(-1px);

    box-shadow:
        inset 0 0 0 1px
        rgba(210,173,90,.08);
}


.tm-journey-node.current strong {
    color:
        #f0d384;
}


.tm-journey-node:hover {
    border-color:
        #c7a65e;

    background:
        #102734;

    opacity:
        1;
}


@media (max-width: 759px) {

    .tm-journey-node {
        min-width:
            82px;
    }
}


/* =========================================================
   SMART BROWSE CLUSTER POPUP
   ========================================================= */

.tm-cluster-event-popup-shell
.leaflet-popup-content-wrapper,

.tm-cluster-event-popup-shell
.leaflet-popup-tip {
    background:
        #081923;

    color:
        #e8dfca;

    border:
        1px solid
        rgba(210,173,90,.42);
}


.tm-cluster-event-popup-shell
.leaflet-popup-content {
    width:
        auto !important;

    margin:
        12px;
}


.tm-cluster-event-popup {
    min-width:
        255px;
}


.tm-cluster-event-popup-title {
    display:
        block;

    color:
        #e3c475;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        15px;

    line-height:
        1.2;
}


.tm-cluster-event-popup-summary {
    display:
        block;

    margin-top:
        3px;

    margin-bottom:
        9px;

    color:
        #70899b;

    font-size:
        9px;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


.tm-cluster-event-popup-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    max-height:
        330px;

    overflow-y:
        auto;
}


.tm-cluster-event-popup-item {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    width:
        100%;

    padding:
        7px
        8px;

    border:
        1px solid
        rgba(68,95,113,.55);

    border-radius:
        6px;

    background:
        #0b202c;

    color:
        #e8dfca;

    text-align:
        left;

    cursor:
        pointer;
}


.tm-cluster-event-popup-item:hover {
    border-color:
        #c8a75e;

    background:
        #102a38;
}


.tm-cluster-event-popup-item span {
    color:
        #d1ad58;

    font-size:
        9px;
}


.tm-cluster-event-popup-item strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        11px;

    line-height:
        1.25;
}


.tm-cluster-event-popup-item small {
    color:
        #70899a;

    font-size:
        8px;
}


.tm-cluster-event-popup-more {
    display:
        block;

    margin-top:
        8px;

    color:
        #71899a;

    font-size:
        9px;
}


/* =========================================================
   ADAPTIVE HISTORICAL SCENE
   ========================================================= */

.tm-scene-window {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(89,116,132,.55);

    border-radius:
        8px;

    background:
        rgba(7,24,35,.72);

    color:
        #89a0af;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

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


.tm-playback-running
.tm-scene-window {
    border-color:
        rgba(210,173,90,.48);

    background:
        rgba(210,173,90,.06);

    color:
        #d3b66f;
}


/* =========================================================
   JOURNEY MODE
   ========================================================= */

.tm-journey-mode {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        36px;

    padding:
        0 7px 0 9px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #71899a;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;
}


.tm-journey-mode select {
    min-width:
        102px;

    padding:
        5px 22px 5px 6px;

    border:
        0;

    outline:
        0;

    background:
        #0b1b27;

    color:
        #e2d8bf;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;
}


.tm-journey-mode:focus-within {
    border-color:
        #c8a75e;

    box-shadow:
        0 0 0 2px
        rgba(210,173,90,.08);
}


/* =========================================================
   JOURNEY DENSITY RAIL
   ========================================================= */

.tm-density-wrap {
    margin-top:
        8px;
}


.tm-density-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        4px;
}


.tm-density-meta span {
    color:
        #6f899a;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.tm-density-meta small {
    color:
        #567182;

    font-size:
        7px;

    letter-spacing:
        .035em;
}


.tm-density-rail {
    display:
        flex;

    align-items:
        flex-end;

    gap:
        1px;

    width:
        100%;

    height:
        34px;

    padding:
        3px 2px;

    border-top:
        1px solid
        rgba(55,82,98,.34);

    border-bottom:
        1px solid
        rgba(55,82,98,.34);
}


.tm-density-bin {
    position:
        relative;

    flex:
        1 1 0;

    align-self:
        stretch;

    min-width:
        2px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    cursor:
        pointer;
}


.tm-density-bin::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        var(
            --density-height,
            20%
        );

    min-height:
        2px;

    border-radius:
        1px 1px 0 0;

    background:
        rgba(78,122,146,.62);

    transition:
        height .2s ease,
        background .2s ease,
        opacity .2s ease;
}


.tm-density-bin.past::after {
    background:
        rgba(83,103,113,.34);
}


.tm-density-bin.current::after {
    background:
        #d5b25f;

    box-shadow:
        0 0 9px
        rgba(210,173,90,.42);
}


.tm-density-bin:hover::after {
    background:
        #bfa35f;

    opacity:
        1;
}


/* =========================================================
   KEYBOARD HINTS
   ========================================================= */

.tm-playback::after {
    content:
        "Space Play/Pause  ·  ← → Events  ·  F Follow  ·  G Journey";

    display:
        block;

    margin-top:
        6px;

    color:
        #4f697a;

    font-size:
        7px;

    letter-spacing:
        .035em;
}


@media (max-width: 759px) {

    .tm-density-rail {
        height:
            28px;
    }


    .tm-playback::after {
        display:
            none;
    }
}


/* =========================================================
   CINEMATIC STORY MODE
   ========================================================= */

.tm-playback-pace {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        36px;

    padding:
        0 7px 0 9px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #71899a;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;
}


.tm-playback-pace select {
    min-width:
        78px;

    padding:
        5px 21px 5px 6px;

    border:
        0;

    outline:
        0;

    background:
        #0b1b27;

    color:
        #e2d8bf;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;
}


.tm-playback-pace:focus-within {
    border-color:
        #c8a75e;

    box-shadow:
        0 0 0 2px
        rgba(210,173,90,.08);
}


.tm-story-indicator {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(213,178,95,.56);

    border-radius:
        999px;

    background:
        rgba(210,173,90,.09);

    color:
        #e2c878;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .025em;

    white-space:
        nowrap;
}


.tm-story-indicator[hidden] {
    display:
        none !important;
}


/*
 * Cinematic mode stays restrained.
 * The current story moment is emphasized without
 * flashing or obscuring the map.
 */

.tm-story-moment
.tm-playback-age-current
.tm-playback-event-window {
    border-color:
        rgba(242,211,131,.98);

    box-shadow:
        0 14px 36px
        rgba(0,0,0,.64),
        0 0 30px
        rgba(210,173,90,.3);
}


.tm-story-moment
.tm-scene-window {
    border-color:
        rgba(219,184,99,.72);

    color:
        #ebcf85;
}


.tm-story-level-4
.tm-story-indicator,

.tm-story-level-5
.tm-story-indicator {
    border-color:
        rgba(236,202,116,.78);

    background:
        rgba(210,173,90,.14);

    color:
        #f0d994;
}


/*
 * The density rail marks the current cinematic moment
 * more clearly while preserving the full history shape.
 */

.tm-cinematic-active
.tm-density-bin.current::after {
    box-shadow:
        0 0 12px
        rgba(225,190,101,.58);
}


/* =========================================================
   HISTORICAL CONTEXT BAR
   ========================================================= */

.tm-historical-context {
    display:
        grid;

    grid-template-columns:
        minmax(180px, 1.35fr)
        minmax(0, 2.65fr);

    gap:
        12px;

    align-items:
        center;

    margin-top:
        10px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(56,84,101,.5);

    border-radius:
        9px;

    background:
        linear-gradient(
            90deg,
            rgba(9,26,37,.88),
            rgba(7,22,32,.6)
        );

    transition:
        border-color .35s ease,
        background .35s ease;
}


.tm-historical-context.active-scene {
    border-color:
        rgba(94,119,132,.62);
}


.tm-historical-context.dense {
    border-color:
        rgba(210,173,90,.44);

    background:
        linear-gradient(
            90deg,
            rgba(32,31,24,.72),
            rgba(8,25,35,.72)
        );
}


.tm-context-primary {
    min-width:
        0;
}


.tm-context-kicker {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #647f91;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.tm-context-primary > strong {
    display:
        block;

    overflow:
        hidden;

    color:
        #e4c875;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        17px;

    line-height:
        1.05;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-context-primary > span:last-child {
    display:
        block;

    overflow:
        hidden;

    margin-top:
        2px;

    color:
        #9aaebb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        10px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-context-facts {
    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
        6px;
}


.tm-context-fact {
    min-width:
        0;

    padding:
        5px 7px;

    border-left:
        1px solid
        rgba(66,91,107,.42);
}


.tm-context-fact small {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #587182;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.tm-context-fact strong {
    display:
        block;

    overflow:
        hidden;

    color:
        #cbd6dc;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-context-place strong {
    color:
        #dec47a;
}


.tm-story-moment
.tm-historical-context {
    border-color:
        rgba(219,184,99,.6);
}


@media (max-width: 1050px) {

    .tm-historical-context {
        grid-template-columns:
            1fr;
    }


    .tm-context-facts {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 650px) {

    .tm-context-facts {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   NOW IN HISTORY
   ========================================================= */

.tm-now-history {
    margin-top:
        10px;

    padding:
        9px 10px 10px;

    border:
        1px solid
        rgba(54,81,98,.5);

    border-radius:
        9px;

    background:
        rgba(7,22,32,.58);
}


.tm-now-history-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        7px;
}


.tm-now-history-heading > div {
    min-width:
        0;
}


.tm-now-history-heading
div > span {
    display:
        block;

    color:
        #587384;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.tm-now-history-heading
div > strong {
    display:
        block;

    margin-top:
        1px;

    color:
        #dfc473;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        13px;
}


.tm-now-history-heading
> span {
    color:
        #6e899a;

    font-size:
        8px;

    white-space:
        nowrap;
}


.tm-now-history-list {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                175px,
                1fr
            )
        );

    gap:
        5px;

    max-height:
        145px;

    overflow-y:
        auto;

    padding-right:
        2px;
}


.tm-now-history-event {
    min-width:
        0;

    padding:
        7px 8px;

    border:
        1px solid
        rgba(64,91,108,.48);

    border-radius:
        7px;

    background:
        #091d29;

    color:
        #dfe5e7;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        opacity .18s ease,
        transform .18s ease;
}


.tm-now-history-event.current {
    border-color:
        rgba(210,173,90,.65);

    background:
        rgba(210,173,90,.075);
}


.tm-now-history-event.trail {
    opacity:
        .67;
}


.tm-now-history-event:hover {
    opacity:
        1;

    transform:
        translateY(-1px);

    border-color:
        #c5a45d;

    background:
        #102936;
}


.tm-now-history-event-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        7px;
}


.tm-now-history-event-meta
strong {
    overflow:
        hidden;

    color:
        #d7b35d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        9px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-now-history-event-meta
small {
    color:
        #607b8c;

    font-size:
        7px;

    white-space:
        nowrap;
}


.tm-now-history-event-title {
    display:
        -webkit-box;

    overflow:
        hidden;

    margin-top:
        3px;

    color:
        #e4ded0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        10px;

    line-height:
        1.25;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


.tm-now-history-event-place {
    display:
        block;

    overflow:
        hidden;

    margin-top:
        3px;

    color:
        #657f90;

    font-size:
        7px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-now-history-empty {
    grid-column:
        1 / -1;

    padding:
        8px;

    color:
        #5e7889;

    font-size:
        9px;

    text-align:
        center;
}


.tm-playback-paused
.tm-now-history {
    border-color:
        rgba(210,173,90,.32);
}


@media (max-width: 700px) {

    .tm-now-history-list {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   ACTIVE COUNTRIES
   ========================================================= */

.tm-active-countries {
    margin-top:
        9px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(52,80,97,.46);

    border-radius:
        9px;

    background:
        rgba(6,21,31,.52);
}


.tm-active-countries-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        7px;
}


.tm-active-countries-heading
div > span {
    display:
        block;

    color:
        #597485;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.tm-active-countries-heading
div > strong {
    display:
        block;

    color:
        #d9bd70;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;
}


.tm-active-countries-heading
> small {
    color:
        #658091;

    font-size:
        7px;

    white-space:
        nowrap;
}


.tm-active-country-list {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;
}


.tm-country-chip {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        29px;

    padding:
        4px 8px;

    border:
        1px solid
        rgba(65,93,109,.6);

    border-radius:
        999px;

    background:
        #091d29;

    color:
        #9aadb8;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


.tm-country-chip strong {
    font-size:
        8px;

    font-weight:
        700;
}


.tm-country-chip span {
    display:
        grid;

    place-items:
        center;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 4px;

    border-radius:
        999px;

    background:
        rgba(91,120,137,.15);

    color:
        #758f9f;

    font-size:
        7px;
}


.tm-country-chip:hover {
    transform:
        translateY(-1px);

    border-color:
        #b99a52;

    color:
        #e5d8b7;
}


.tm-country-chip.active {
    border-color:
        rgba(210,173,90,.72);

    background:
        rgba(210,173,90,.1);

    color:
        #efd58d;
}


.tm-country-chip.active span {
    background:
        rgba(210,173,90,.14);

    color:
        #e2c678;
}


/* =========================================================
   GUIDED JOURNEY TRAIL
   ========================================================= */

.tm-guided-trail-line {
    stroke:
        #c7a75d !important;

    stroke-width:
        2.25px !important;

    stroke-opacity:
        .52 !important;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    stroke-dasharray:
        4 7;

    pointer-events:
        none;
}


.tm-guided-trail-node {
    stroke:
        #dbc175 !important;

    stroke-width:
        1.5px !important;

    stroke-opacity:
        .7 !important;

    fill:
        #9a824d !important;

    fill-opacity:
        .55 !important;

    pointer-events:
        none;
}


.tm-guided-trail-node.current {
    stroke:
        #f1d78a !important;

    stroke-width:
        2px !important;

    fill:
        #d5ad51 !important;

    fill-opacity:
        1 !important;

    filter:
        drop-shadow(
            0 0 5px
            rgba(221,184,96,.72)
        );
}


.tm-journey-trail-toggle {
    min-height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #718999;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.tm-journey-trail-toggle.active {
    border-color:
        rgba(210,173,90,.68);

    background:
        rgba(210,173,90,.075);

    color:
        #e2c674;
}


.tm-journey-trail-toggle:hover {
    border-color:
        #c7a65e;

    color:
        #edd792;
}


/* =========================================================
   SMART CHAPTERS
   ========================================================= */

.tm-chapter-toggle {
    min-height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #718999;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.tm-chapter-toggle.active {
    border-color:
        rgba(210,173,90,.68);

    background:
        rgba(210,173,90,.075);

    color:
        #e5ca7e;
}


.tm-chapter-toggle:hover {
    border-color:
        #c7a65e;

    color:
        #edd792;
}


/*
 * A chapter scene can contain more events than an exact
 * event-year, so keep the stable timeline panels readable.
 */

.tm-cinematic-active
.tm-now-history {
    transition:
        border-color .3s ease,
        background .3s ease;
}


/* =========================================================
   SCENE SPOTLIGHT
   ========================================================= */

.tm-scene-spotlight-outer {
    stroke:
        #e0bd68 !important;

    stroke-width:
        1.5px !important;

    stroke-opacity:
        .42 !important;

    fill:
        #d4ad51 !important;

    fill-opacity:
        .045 !important;

    pointer-events:
        none;

    animation:
        tmSceneSpotlightOuter
        2.8s
        ease-in-out
        infinite;
}


.tm-scene-spotlight-inner {
    stroke:
        #f0d58c !important;

    stroke-width:
        2px !important;

    stroke-opacity:
        .85 !important;

    fill:
        #d6ae50 !important;

    fill-opacity:
        .15 !important;

    pointer-events:
        none;

    animation:
        tmSceneSpotlightInner
        2.8s
        ease-in-out
        infinite;
}


@keyframes tmSceneSpotlightOuter {

    0%,
    100% {
        stroke-opacity:
            .25;

        fill-opacity:
            .025;
    }

    50% {
        stroke-opacity:
            .55;

        fill-opacity:
            .075;
    }
}


@keyframes tmSceneSpotlightInner {

    0%,
    100% {
        stroke-opacity:
            .65;

        fill-opacity:
            .09;
    }

    50% {
        stroke-opacity:
            1;

        fill-opacity:
            .2;
    }
}


/*
 * The selected/current scene remains dominant while
 * historical trail cards stay visible but quieter.
 */

.tm-playback-running
.tm-playback-age-trail
.tm-playback-event-window {
    opacity:
        .48;
}


.tm-playback-paused
.tm-playback-age-trail
.tm-playback-event-window:hover {
    opacity:
        1;
}


.tm-spotlight-toggle {
    min-height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #718999;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.tm-spotlight-toggle.active {
    border-color:
        rgba(210,173,90,.68);

    background:
        rgba(210,173,90,.075);

    color:
        #e7cb7b;
}


.tm-spotlight-toggle:hover {
    border-color:
        #c7a65e;

    color:
        #edd792;
}


@media (prefers-reduced-motion: reduce) {

    .tm-scene-spotlight-outer,
    .tm-scene-spotlight-inner {
        animation:
            none !important;
    }
}


/* =========================================================
   SCENE MEMORY
   ========================================================= */

.tm-save-scene {
    min-height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #8195a2;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.tm-save-scene:hover {
    border-color:
        #c7a65e;

    background:
        rgba(210,173,90,.06);

    color:
        #edd792;
}


.tm-scene-memory {
    margin-top:
        9px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(54,81,98,.46);

    border-radius:
        9px;

    background:
        rgba(7,22,32,.5);
}


.tm-scene-memory-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        7px;
}


.tm-scene-memory-heading
> div:first-child
> span {
    display:
        block;

    color:
        #597485;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.tm-scene-memory-heading
> div:first-child
> strong {
    display:
        block;

    color:
        #d9bd70;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;
}


.tm-scene-memory-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.tm-scene-memory-actions small {
    color:
        #627e8f;

    font-size:
        7px;
}


.tm-scene-memory-actions button {
    padding:
        2px 5px;

    border:
        0;

    background:
        transparent;

    color:
        #718897;

    font-size:
        7px;

    cursor:
        pointer;
}


.tm-scene-memory-actions button:hover {
    color:
        #d9bd70;
}


.tm-scene-memory-list {
    display:
        flex;

    gap:
        5px;

    overflow-x:
        auto;

    padding-bottom:
        2px;
}


.tm-scene-memory-item {
    position:
        relative;

    flex:
        0 0
        170px;

    min-width:
        0;

    border:
        1px solid
        rgba(64,91,108,.45);

    border-radius:
        7px;

    background:
        #091d29;
}


.tm-scene-memory-open {
    display:
        block;

    width:
        100%;

    min-height:
        65px;

    padding:
        7px 24px 7px 8px;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;
}


.tm-scene-memory-open strong {
    display:
        block;

    overflow:
        hidden;

    color:
        #dfbd69;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        9px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-scene-memory-open span {
    display:
        block;

    overflow:
        hidden;

    margin-top:
        3px;

    color:
        #d8d7d0;

    font-size:
        9px;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-scene-memory-open small {
    display:
        block;

    overflow:
        hidden;

    margin-top:
        4px;

    color:
        #637e8e;

    font-size:
        7px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-scene-memory-item:hover {
    border-color:
        rgba(201,168,91,.7);

    background:
        #102936;
}


.tm-scene-memory-remove {
    position:
        absolute;

    top:
        4px;

    right:
        4px;

    display:
        grid;

    place-items:
        center;

    width:
        18px;

    height:
        18px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(0,0,0,.22);

    color:
        #647d8c;

    font-size:
        13px;

    line-height:
        1;

    cursor:
        pointer;
}


.tm-scene-memory-remove:hover {
    background:
        rgba(210,173,90,.12);

    color:
        #e1c777;
}


.tm-scene-memory-empty {
    width:
        100%;

    padding:
        7px;

    color:
        #5e7889;

    font-size:
        8px;

    text-align:
        center;
}


/* =========================================================
   COUNTRY LENS
   ========================================================= */

.tm-playback-country-muted {
    opacity:
        .18 !important;

    filter:
        saturate(.35)
        brightness(.72);

    transition:
        opacity .28s ease,
        filter .28s ease;
}


.tm-playback-country-focus {
    opacity:
        1 !important;

    filter:
        none;

    z-index:
        900 !important;

    transition:
        opacity .28s ease,
        filter .28s ease;
}


.tm-playback-country-focus
.tm-playback-event-window {
    border-color:
        rgba(224,190,103,.82);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.58),
        0 0 16px
        rgba(210,173,90,.17);
}


.tm-playback-country-focus
.tm-playback-compact-event {
    filter:
        drop-shadow(
            0 0 6px
            rgba(218,182,91,.55)
        );
}


.tm-now-history-event.country-muted {
    opacity:
        .25;

    filter:
        saturate(.4);
}


.tm-now-history-event.country-focus {
    opacity:
        1;

    border-color:
        rgba(210,173,90,.75);

    background:
        rgba(210,173,90,.09);
}


.tm-now-history-event.country-muted:hover {
    opacity:
        .72;

    filter:
        none;
}


.tm-country-chip.active {
    box-shadow:
        0 0 0 1px
        rgba(210,173,90,.12),
        0 0 12px
        rgba(210,173,90,.08);
}


/* =========================================================
   PATTERN CONNECTIONS
   ========================================================= */

.tm-pattern-link {
    fill:
        none !important;

    stroke-linecap:
        round;

    pointer-events:
        none;

    transition:
        opacity .3s ease;
}


.tm-pattern-same-place {
    stroke:
        #dfbd68 !important;

    stroke-width:
        2px !important;

    stroke-opacity:
        .48 !important;

    stroke-dasharray:
        2 5;
}


.tm-pattern-local {
    stroke:
        #8eaaae !important;

    stroke-width:
        1.6px !important;

    stroke-opacity:
        .34 !important;

    stroke-dasharray:
        4 7;
}


.tm-pattern-regional {
    stroke:
        #668696 !important;

    stroke-width:
        1.2px !important;

    stroke-opacity:
        .25 !important;

    stroke-dasharray:
        3 8;
}


.tm-pattern-site {
    stroke:
        #d7b45f !important;

    stroke-width:
        1.25px !important;

    stroke-opacity:
        .32 !important;

    fill:
        #d7b45f !important;

    fill-opacity:
        .035 !important;

    pointer-events:
        none;

    animation:
        tmPatternSitePulse
        3.4s
        ease-in-out
        infinite;
}


@keyframes tmPatternSitePulse {

    0%,
    100% {
        stroke-opacity:
            .22;

        fill-opacity:
            .025;
    }

    50% {
        stroke-opacity:
            .46;

        fill-opacity:
            .065;
    }
}


.tm-pattern-toggle {
    min-height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #718999;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.tm-pattern-toggle.active {
    border-color:
        rgba(210,173,90,.62);

    background:
        rgba(210,173,90,.07);

    color:
        #dec475;
}


.tm-pattern-toggle:hover {
    border-color:
        #c7a65e;

    color:
        #edd792;
}


@media (prefers-reduced-motion: reduce) {

    .tm-pattern-site {
        animation:
            none !important;
    }
}


/* =========================================================
   HISTORICAL ACTIVITY FIELD
   ========================================================= */

.tm-activity-field-outer {
    stroke:
        #bba35e !important;

    stroke-width:
        1px !important;

    stroke-opacity:
        .12 !important;

    fill:
        #b08c3e !important;

    fill-opacity:
        .055 !important;

    pointer-events:
        none;

    filter:
        blur(.15px);
}


.tm-activity-field-inner {
    stroke:
        #dfbd69 !important;

    stroke-width:
        1px !important;

    stroke-opacity:
        .18 !important;

    fill:
        #c89d43 !important;

    fill-opacity:
        .11 !important;

    pointer-events:
        none;

    filter:
        drop-shadow(
            0 0 7px
            rgba(205,165,76,.22)
        );
}


.tm-cinematic-active
.tm-activity-field-outer {
    fill-opacity:
        .07 !important;

    stroke-opacity:
        .16 !important;
}


.tm-cinematic-active
.tm-activity-field-inner {
    fill-opacity:
        .14 !important;

    stroke-opacity:
        .23 !important;
}


.tm-activity-toggle {
    min-height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #718999;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.tm-activity-toggle.active {
    border-color:
        rgba(210,173,90,.62);

    background:
        rgba(210,173,90,.07);

    color:
        #dfc676;
}


.tm-activity-toggle:hover {
    border-color:
        #c7a65e;

    color:
        #edd792;
}


/* =========================================================
   SCENE INSIGHT + HISTORICAL PULSE
   ========================================================= */

.tm-scene-insight {
    display:
        grid;

    grid-template-columns:
        minmax(190px, 1.3fr)
        minmax(300px, 2fr);

    gap:
        12px;

    align-items:
        stretch;

    margin-top:
        7px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(51,80,97,.42);

    border-radius:
        8px;

    background:
        rgba(6,20,30,.46);

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


.tm-scene-insight[data-momentum="peak"] {
    border-color:
        rgba(211,175,88,.48);

    background:
        linear-gradient(
            90deg,
            rgba(36,31,18,.48),
            rgba(6,20,30,.45)
        );
}


.tm-scene-insight-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        8px;
}


.tm-scene-insight-heading
div > span {
    display:
        block;

    color:
        #577283;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.tm-scene-insight-heading
div > strong {
    display:
        block;

    color:
        #d9bd70;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        11px;
}


.tm-scene-insight-heading
> small {
    overflow:
        hidden;

    color:
        #607c8d;

    font-size:
        7px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-scene-pulse {
    display:
        flex;

    align-items:
        flex-end;

    gap:
        2px;

    height:
        25px;

    margin-top:
        5px;

    padding:
        2px 1px;

    border-bottom:
        1px solid
        rgba(54,82,99,.32);
}


.tm-scene-pulse-bar {
    position:
        relative;

    flex:
        1;

    align-self:
        stretch;

    min-width:
        4px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    cursor:
        pointer;
}


.tm-scene-pulse-bar::after {
    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        var(
            --pulse-height,
            15%
        );

    min-height:
        2px;

    border-radius:
        2px 2px 0 0;

    background:
        rgba(79,112,130,.58);

    transition:
        height .18s ease,
        background .18s ease,
        opacity .18s ease;
}


.tm-scene-pulse-bar.past::after {
    background:
        rgba(66,87,99,.34);
}


.tm-scene-pulse-bar.current::after {
    background:
        #d6b15a;

    box-shadow:
        0 0 8px
        rgba(214,177,90,.4);
}


.tm-scene-pulse-bar:hover::after {
    background:
        #c7a65c;
}


.tm-scene-insight-facts {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    align-items:
        center;
}


.tm-scene-insight-facts
> span {
    min-width:
        0;

    padding:
        5px 8px;

    border-left:
        1px solid
        rgba(58,85,101,.38);
}


.tm-scene-insight-facts small {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #577181;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.tm-scene-insight-facts strong {
    display:
        block;

    overflow:
        hidden;

    color:
        #c9d4d9;

    font-size:
        8px;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-scene-insight[data-momentum="peak"]
[data-insight-momentum] {
    color:
        #e2c472;
}


.tm-scene-insight[data-momentum="rising"]
[data-insight-momentum] {
    color:
        #cbd79b;
}


.tm-scene-insight[data-momentum="cooling"]
[data-insight-momentum] {
    color:
        #8299a6;
}


@media (max-width: 1050px) {

    .tm-scene-insight {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 650px) {

    .tm-scene-insight-facts {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   COMPACT VIEW TOOLS
   ========================================================= */

.tm-view-tools {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    z-index:
        1200;
}


.tm-view-tools-toggle {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        36px;

    padding:
        7px 9px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #9aadb8;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.tm-view-tools-toggle:hover,
.tm-view-tools.open
.tm-view-tools-toggle {
    border-color:
        rgba(210,173,90,.7);

    background:
        rgba(210,173,90,.07);

    color:
        #ead18b;
}


.tm-view-tools-icon {
    color:
        #d3b666;

    font-size:
        12px;
}


.tm-view-tools-toggle small {
    display:
        grid;

    place-items:
        center;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 4px;

    border-radius:
        999px;

    background:
        rgba(210,173,90,.1);

    color:
        #d8bd72;

    font-size:
        7px;
}


.tm-view-tools-panel {
    position:
        absolute;

    right:
        0;

    bottom:
        calc(100% + 7px);

    width:
        300px;

    padding:
        10px;

    border:
        1px solid
        rgba(210,173,90,.38);

    border-radius:
        10px;

    background:
        rgba(7,21,31,.98);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.52);

    backdrop-filter:
        blur(8px);
}


.tm-view-tools-panel[hidden] {
    display:
        none !important;
}


.tm-view-tools-heading {
    padding:
        1px 2px 8px;

    border-bottom:
        1px solid
        rgba(62,88,104,.38);
}


.tm-view-tools-heading span {
    display:
        block;

    color:
        #587384;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.tm-view-tools-heading strong {
    display:
        block;

    margin-top:
        1px;

    color:
        #dec374;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;
}


.tm-view-tools-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        6px;

    padding-top:
        8px;
}


/*
 * Secondary controls become consistent drawer buttons.
 */

.tm-view-tools-grid
> button {
    width:
        100%;

    min-height:
        34px;

    margin:
        0;

    justify-content:
        center;
}


.tm-view-tools-grid
.tm-save-scene {
    grid-column:
        1 / -1;
}


@media (max-width: 700px) {

    .tm-view-tools-panel {
        position:
            fixed;

        right:
            12px;

        bottom:
            12px;

        left:
            12px;

        width:
            auto;

        max-height:
            55vh;

        overflow-y:
            auto;
    }


    .tm-view-tools-grid {
        grid-template-columns:
            1fr;
    }


    .tm-view-tools-grid
    .tm-save-scene {
        grid-column:
            auto;
    }
}


/* =========================================================
   FOCUS MODE
   ========================================================= */

.tm-focus-mode-toggle {
    min-height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #718999;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.tm-focus-mode-toggle.active {
    border-color:
        rgba(210,173,90,.72);

    background:
        rgba(210,173,90,.1);

    color:
        #ebd18a;
}


.tm-focus-mode-toggle:hover {
    border-color:
        #c7a65e;

    color:
        #edd792;
}


/*
 * Remove the research sidebar and give the map column
 * the full application width.
 */

html.tm-focus-mode
.tm-sidebar,
body.tm-focus-mode
.tm-sidebar {
    display:
        none !important;
}


html.tm-focus-mode
.tm-main,
body.tm-focus-mode
.tm-main {
    grid-template-columns:
        minmax(0, 1fr) !important;
}


html.tm-focus-mode
.tm-map-column,
body.tm-focus-mode
.tm-map-column {
    width:
        100% !important;

    max-width:
        none !important;

    grid-column:
        1 / -1 !important;
}


/*
 * Hide secondary research panels while preserving:
 * - playback controls
 * - timeline controls
 * - era navigator
 * - journey strip
 * - density rail
 */

html.tm-focus-mode
.tm-historical-context,

html.tm-focus-mode
.tm-scene-insight,

html.tm-focus-mode
.tm-scene-memory,

html.tm-focus-mode
.tm-active-countries,

html.tm-focus-mode
.tm-now-history,

body.tm-focus-mode
.tm-historical-context,

body.tm-focus-mode
.tm-scene-insight,

body.tm-focus-mode
.tm-scene-memory,

body.tm-focus-mode
.tm-active-countries,

body.tm-focus-mode
.tm-now-history {
    display:
        none !important;
}


/*
 * Compact the remaining timeline area so the map receives
 * substantially more vertical space.
 */

html.tm-focus-mode
.tm-timeline,

body.tm-focus-mode
.tm-timeline {
    max-height:
        215px !important;
}


/*
 * Give the map a stronger presentation frame.
 */

html.tm-focus-mode
.tm-map,

body.tm-focus-mode
.tm-map {
    min-height:
        430px;
}


html.tm-focus-mode
.tm-map-column {
    transition:
        width .22s ease;
}


/*
 * Focus Mode hint.
 */

html.tm-focus-mode
.tm-playback::after {
    content:
        "FOCUS MODE  ·  M or ESC to exit  ·  Space Play/Pause  ·  ← → Events";

    color:
        #8b7950;
}


/*
 * Normal-mode keyboard hint.
 */

html:not(.tm-focus-mode)
.tm-playback::after {
    content:
        "Space Play/Pause  ·  ← → Events  ·  B Bookmark  ·  F Follow  ·  G Journey  ·  M Focus";
}


@media (max-width: 1099px) {

    html.tm-focus-mode
    .tm-map,

    body.tm-focus-mode
    .tm-map {
        min-height:
            380px;
    }


    html.tm-focus-mode
    .tm-timeline,

    body.tm-focus-mode
    .tm-timeline {
        max-height:
            230px !important;
    }
}


@media (max-width: 700px) {

    html.tm-focus-mode
    .tm-map,

    body.tm-focus-mode
    .tm-map {
        min-height:
            58vh;
    }


    html.tm-focus-mode
    .tm-timeline,

    body.tm-focus-mode
    .tm-timeline {
        max-height:
            none !important;
    }
}


/* =========================================================
   SHAREABLE VIEWS
   ========================================================= */

.tm-share-view {
    min-height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid
        #425c6e;

    border-radius:
        8px;

    background:
        #0b1b27;

    color:
        #8499a5;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.tm-share-view:hover {
    border-color:
        rgba(210,173,90,.75);

    background:
        rgba(210,173,90,.075);

    color:
        #edd792;
}


.tm-view-tools-grid
.tm-save-scene,

.tm-view-tools-grid
.tm-share-view {
    grid-column:
        1 / -1;
}


@media (max-width: 700px) {

    .tm-view-tools-grid
    .tm-share-view {
        grid-column:
            auto;
    }
}


/* =========================================================
   ACTIVE LIBRARY CATEGORIES
   ========================================================= */

.tm-active-categories {
    margin-top:
        7px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(52,80,97,.46);

    border-radius:
        9px;

    background:
        rgba(6,21,31,.48);
}


.tm-active-categories-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        7px;
}


.tm-active-categories-heading
div > span {
    display:
        block;

    color:
        #597485;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.tm-active-categories-heading
div > strong {
    display:
        block;

    color:
        #d9bd70;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;
}


.tm-active-categories-heading
> small {
    color:
        #658091;

    font-size:
        7px;

    white-space:
        nowrap;
}


.tm-active-category-list {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;
}


.tm-category-chip {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        28px;

    max-width:
        220px;

    padding:
        4px 8px;

    border:
        1px solid
        rgba(65,93,109,.6);

    border-radius:
        999px;

    background:
        #091d29;

    color:
        #9aadb8;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        opacity .18s ease,
        transform .18s ease;
}


.tm-category-chip strong {
    overflow:
        hidden;

    font-size:
        8px;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-category-chip span {
    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 4px;

    border-radius:
        999px;

    background:
        rgba(91,120,137,.15);

    color:
        #758f9f;

    font-size:
        7px;
}


.tm-category-chip:hover {
    transform:
        translateY(-1px);

    border-color:
        #b99a52;

    color:
        #e5d8b7;
}


.tm-category-chip.active {
    border-color:
        rgba(210,173,90,.76);

    background:
        rgba(210,173,90,.1);

    color:
        #efd58d;

    box-shadow:
        0 0 11px
        rgba(210,173,90,.08);
}


.tm-category-chip.active span {
    background:
        rgba(210,173,90,.14);

    color:
        #e2c678;
}


/*
 * Category Lens and Country Lens deliberately share the
 * same focus treatment so intersecting them remains clear.
 */

.tm-active-categories
+
.tm-now-history {
    margin-top:
        7px;
}


/* =========================================================
   CATEGORY-AWARE MAP MARKERS
   ========================================================= */

.tm-category-marker
.tm-event-pin {
    box-shadow:
        0 0 0 2px
        var(
            --tm-category-accent,
            #d7b45f
        ),
        0 3px 10px
        rgba(0,0,0,.55) !important;
}


.tm-category-marker
.tm-playback-event-window {
    border-left:
        3px solid
        var(
            --tm-category-accent,
            #d7b45f
        ) !important;
}


.tm-category-marker
.tm-playback-compact-event {
    box-shadow:
        0 0 0 2px
        var(
            --tm-category-accent,
            #d7b45f
        ),
        0 0 10px
        rgba(0,0,0,.42);
}


/* =========================================================
   MAP CATEGORY LEGEND
   ========================================================= */

.tm-map-category-legend {
    position:
        absolute;

    top:
        12px;

    right:
        12px;

    z-index:
        850;

    width:
        190px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(54,81,98,.66);

    border-radius:
        9px;

    background:
        rgba(6,20,29,.9);

    box-shadow:
        0 9px 24px
        rgba(0,0,0,.32);

    backdrop-filter:
        blur(5px);
}


.tm-map-category-legend[hidden] {
    display:
        none !important;
}


.tm-map-category-legend-toggle {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    width:
        100%;

    min-height:
        30px;

    padding:
        5px 8px;

    border:
        0;

    border-bottom:
        1px solid
        rgba(55,82,98,.45);

    background:
        rgba(8,26,37,.94);

    color:
        #b6c2c8;

    cursor:
        pointer;
}


.tm-map-category-legend-toggle
span {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        10px;

    font-weight:
        700;
}


.tm-map-category-legend-toggle
small {
    display:
        grid;

    place-items:
        center;

    min-width:
        18px;

    height:
        18px;

    border-radius:
        999px;

    background:
        rgba(210,173,90,.11);

    color:
        #d7bc73;

    font-size:
        7px;
}


.tm-map-category-legend-list {
    display:
        grid;

    gap:
        2px;

    padding:
        5px;
}


.tm-map-category-legend.collapsed
.tm-map-category-legend-list {
    display:
        none;
}


.tm-map-category-legend.collapsed
.tm-map-category-legend-toggle {
    border-bottom:
        0;
}


.tm-map-category-item {
    display:
        grid;

    grid-template-columns:
        9px
        minmax(0, 1fr)
        auto;

    gap:
        6px;

    align-items:
        center;

    width:
        100%;

    min-height:
        25px;

    padding:
        3px 5px;

    border:
        1px solid
        transparent;

    border-radius:
        5px;

    background:
        transparent;

    color:
        #8fa2ad;

    text-align:
        left;

    cursor:
        pointer;
}


.tm-map-category-item:hover {
    border-color:
        rgba(210,173,90,.34);

    background:
        rgba(210,173,90,.055);

    color:
        #e6d9b8;
}


.tm-map-category-item i {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(
            --tm-category-accent,
            #d7b45f
        );

    box-shadow:
        0 0 5px
        var(
            --tm-category-accent,
            #d7b45f
        );
}


.tm-map-category-item strong {
    overflow:
        hidden;

    font-size:
        7px;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-map-category-item span {
    color:
        #607b8c;

    font-size:
        7px;
}


.tm-map-category-more {
    width:
        100%;

    padding:
        4px;

    border:
        0;

    background:
        transparent;

    color:
        #806f49;

    font-size:
        7px;

    cursor:
        pointer;
}


.tm-map-category-more:hover {
    color:
        #d6ba71;
}


html.tm-focus-mode
.tm-map-category-legend {
    top:
        14px;

    right:
        14px;
}


@media (max-width: 700px) {

    .tm-map-category-legend {
        top:
            8px;

        right:
            8px;

        width:
            155px;
    }
}


/* =========================================================
   LIVE CATEGORY HOVER LENS
   ========================================================= */

.tm-map.tm-category-hover-active
.tm-category-marker {
    transition:
        opacity .18s ease,
        filter .18s ease;
}


.tm-map.tm-category-hover-active
.tm-category-marker.tm-category-hover-muted {
    opacity:
        .16 !important;

    filter:
        grayscale(.65)
        saturate(.35)
        brightness(.7);
}


.tm-map.tm-category-hover-active
.tm-category-marker.tm-category-hover-match {
    opacity:
        1 !important;

    filter:
        none;

    z-index:
        1100 !important;
}


.tm-map.tm-category-hover-active
.tm-category-marker.tm-category-hover-match
.tm-event-pin {
    scale:
        1.16;

    box-shadow:
        0 0 0 2px
        var(
            --tm-category-accent,
            #d7b45f
        ),
        0 0 15px
        color-mix(
            in srgb,
            var(
                --tm-category-accent,
                #d7b45f
            )
            55%,
            transparent
        ),
        0 4px 13px
        rgba(0,0,0,.62) !important;
}


.tm-map.tm-category-hover-active
.tm-category-marker.tm-category-hover-match
.tm-playback-event-window {
    border-color:
        var(
            --tm-category-accent,
            #d7b45f
        ) !important;

    box-shadow:
        0 15px 38px
        rgba(0,0,0,.62),
        0 0 20px
        color-mix(
            in srgb,
            var(
                --tm-category-accent,
                #d7b45f
            )
            24%,
            transparent
        );
}


.tm-map.tm-category-hover-active
.tm-category-marker.tm-category-hover-match
.tm-playback-compact-event {
    scale:
        1.18;

    box-shadow:
        0 0 0 2px
        var(
            --tm-category-accent,
            #d7b45f
        ),
        0 0 14px
        color-mix(
            in srgb,
            var(
                --tm-category-accent,
                #d7b45f
            )
            52%,
            transparent
        );
}


/*
 * Legend and Active Category panels mirror the same
 * temporary hover state.
 */

.tm-map-category-item.tm-category-hover-muted,
.tm-category-chip.tm-category-hover-muted {
    opacity:
        .3;
}


.tm-map-category-item.tm-category-hover-match,
.tm-category-chip.tm-category-hover-match {
    opacity:
        1;

    border-color:
        rgba(225,193,110,.82);

    background:
        rgba(210,173,90,.105);

    color:
        #f0d995;
}


.tm-map-category-item.tm-category-hover-match i {
    transform:
        scale(1.32);

    box-shadow:
        0 0 9px
        var(
            --tm-category-accent,
            #d7b45f
        );
}


/*
 * Hover Lens is intentionally temporary.
 * Country Lens / Category Lens click behavior remains
 * independent and persistent.
 */

@media (prefers-reduced-motion: reduce) {

    .tm-map.tm-category-hover-active
    .tm-category-marker,

    .tm-map-category-item,

    .tm-category-chip {
        transition:
            none !important;
    }
}


/* =========================================================
   TEMPORALLY EXPRESSIVE PLAYBACK MARKERS
   ========================================================= */

/*
 * The Leaflet marker wrapper already receives:
 *
 * tm-playback-age-current
 * tm-playback-age-recent
 * tm-playback-age-trail
 *
 * We turn those states into an actual map language.
 */


/* ---------------------------------------------------------
   NOW
   Full strength, circular beacon.
   --------------------------------------------------------- */

.tm-category-marker.tm-playback-age-current {
    opacity:
        1 !important;

    z-index:
        1150 !important;
}


.tm-category-marker.tm-playback-age-current::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        17px;

    height:
        17px;

    border:
        2px solid
        var(
            --tm-category-accent,
            #d7b45f
        );

    border-radius:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    opacity:
        .72;

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(
                --tm-category-accent,
                #d7b45f
            )
            52%,
            transparent
        );

    pointer-events:
        none;

    animation:
        tmTemporalNow
        2.4s
        ease-in-out
        infinite;
}


.tm-category-marker.tm-playback-age-current
.tm-playback-compact-event {
    scale:
        1.08;

    opacity:
        1;
}


.tm-category-marker.tm-playback-age-current
.tm-playback-event-window {
    opacity:
        1;

    border-left-width:
        4px !important;
}


/* ---------------------------------------------------------
   RECENT
   Still important, but quieter than the exact moment.
   --------------------------------------------------------- */

.tm-category-marker.tm-playback-age-recent {
    opacity:
        .78 !important;

    z-index:
        1020 !important;
}


.tm-category-marker.tm-playback-age-recent::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        10px;

    height:
        10px;

    border:
        1px solid
        var(
            --tm-category-accent,
            #d7b45f
        );

    border-radius:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    opacity:
        .55;

    pointer-events:
        none;
}


.tm-category-marker.tm-playback-age-recent
.tm-playback-compact-event {
    scale:
        .9;

    opacity:
        .84;
}


.tm-category-marker.tm-playback-age-recent
.tm-playback-event-window {
    opacity:
        .76;
}


/* ---------------------------------------------------------
   HISTORICAL TRAIL
   Hollow diamond = earlier context.
   --------------------------------------------------------- */

.tm-category-marker.tm-playback-age-trail {
    opacity:
        .47 !important;

    z-index:
        880 !important;
}


.tm-category-marker.tm-playback-age-trail::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        8px;

    height:
        8px;

    border:
        1px solid
        var(
            --tm-category-accent,
            #d7b45f
        );

    border-radius:
        1px;

    background:
        rgba(5,18,27,.62);

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            45deg
        );

    opacity:
        .52;

    pointer-events:
        none;
}


.tm-category-marker.tm-playback-age-trail
.tm-playback-compact-event {
    scale:
        .72;

    opacity:
        .58;
}


.tm-category-marker.tm-playback-age-trail
.tm-playback-event-window {
    opacity:
        .5;

    filter:
        saturate(.72);
}


/*
 * Pause keeps the temporal hierarchy but makes historical
 * context easier to inspect.
 */

.tm-playback-paused
.tm-category-marker.tm-playback-age-trail:hover {
    opacity:
        1 !important;

    z-index:
        1200 !important;
}


.tm-playback-paused
.tm-category-marker.tm-playback-age-trail:hover
.tm-playback-event-window {
    opacity:
        1;

    filter:
        none;
}


/* ---------------------------------------------------------
   Current moment animation
   --------------------------------------------------------- */

@keyframes tmTemporalNow {

    0%,
    100% {
        opacity:
            .42;

        scale:
            .82;
    }

    50% {
        opacity:
            .88;

        scale:
            1.18;
    }
}


/* =========================================================
   TIME STATE LEGEND
   ========================================================= */

.tm-time-state-legend {
    position:
        absolute;

    bottom:
        47px;

    left:
        12px;

    z-index:
        845;

    display:
        none;

    min-width:
        185px;

    padding:
        7px 8px;

    border:
        1px solid
        rgba(55,82,98,.58);

    border-radius:
        8px;

    background:
        rgba(6,20,29,.88);

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.3);

    backdrop-filter:
        blur(5px);

    pointer-events:
        none;
}


.tm-map.tm-playback-running
.tm-time-state-legend,

.tm-map.tm-playback-paused
.tm-time-state-legend,

.tm-map.tm-playback-preview
.tm-time-state-legend {
    display:
        block;
}


.tm-time-state-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    margin-bottom:
        6px;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        rgba(55,82,98,.35);
}


.tm-time-state-heading span {
    color:
        #617b8a;

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.tm-time-state-heading strong {
    overflow:
        hidden;

    max-width:
        120px;

    color:
        #dec172;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        8px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.tm-time-state-items {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.tm-time-state-item {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    color:
        #7d929e;
}


.tm-time-state-item strong {
    font-size:
        6px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.tm-time-state-item i {
    display:
        inline-block;

    width:
        8px;

    height:
        8px;

    flex:
        0 0 auto;
}


.tm-time-state-item.now i {
    border:
        2px solid
        #d7b45f;

    border-radius:
        50%;

    box-shadow:
        0 0 5px
        rgba(215,180,95,.5);
}


.tm-time-state-item.recent i {
    border:
        1px solid
        #9fa992;

    border-radius:
        50%;
}


.tm-time-state-item.trail i {
    width:
        7px;

    height:
        7px;

    border:
        1px solid
        #71838b;

    transform:
        rotate(
            45deg
        );
}


/*
 * Category Hover Lens remains stronger than temporal
 * fading when the user deliberately investigates a type.
 */

.tm-map.tm-category-hover-active
.tm-category-marker.tm-category-hover-match {
    opacity:
        1 !important;
}


/*
 * Country / Category persistent lenses also remain stronger
 * than trail fading.
 */

.tm-playback-country-focus.tm-playback-age-trail {
    opacity:
        .85 !important;
}


@media (prefers-reduced-motion: reduce) {

    .tm-category-marker.tm-playback-age-current::after {
        animation:
            none !important;

        opacity:
            .7;
    }
}


@media (max-width: 700px) {

    .tm-time-state-legend {
        bottom:
            42px;

        left:
            8px;

        min-width:
            150px;
    }


    .tm-time-state-item {
        gap:
            3px;
    }


    .tm-time-state-items {
        gap:
            7px;
    }
}


/* =========================================================
   PLAYBACK SCROLL STABILITY
   ========================================================= */

/*
 * Playback constantly updates dynamic content. The browser
 * must not move the Chronology Window to compensate for
 * changing panel heights.
 */

.tm-timeline-panel {
    overflow-anchor:
        none !important;

    scroll-behavior:
        auto !important;
}


.tm-timeline-panel
.tm-playback,

.tm-timeline-panel
.tm-historical-context,

.tm-timeline-panel
.tm-scene-insight,

.tm-timeline-panel
.tm-scene-memory,

.tm-timeline-panel
.tm-active-countries,

.tm-timeline-panel
.tm-active-categories,

.tm-timeline-panel
.tm-now-history,

.tm-timeline-panel
.tm-journey-strip,

.tm-timeline-panel
.tm-density-wrap {
    overflow-anchor:
        none !important;
}


/* =========================================================
   PLAYBACK / BROWSE STATE FAILSAFE
   ========================================================= */

/*
 * JavaScript marks leaked/broad-range playback state as
 * browse. Rich playback windows may never remain visible
 * in that state.
 */

html[data-timemap-playback-state="browse"]
.tm-playback-event-icon,

html[data-timemap-playback-state="browse"]
.tm-playback-event-window {
    display:
        none !important;
}