/* =========================================================
   MAP-FIRST EXPLORER
   ========================================================= */

/*
 * The legacy sidebar stays in the DOM for compatibility,
 * but it is no longer part of the visible interface.
 */

html.tm-sidebar-retired
.tm-sidebar {
    display:
        none !important;
}


/*
 * Give the entire application width to the map/timeline.
 */

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


html.tm-sidebar-retired
.tm-map-column {
    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    max-width:
        none !important;
}


/* =========================================================
   MAP TOOLBAR
   ========================================================= */

.tm-map-toolbar {
    position:
        relative;

    display:
        grid !important;

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

    gap:
        14px;

    align-items:
        center;
}


.tm-map-context {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-width:
        0;
}


.tm-map-context
.tm-big-year,

.tm-map-context
.tm-era-name,

.tm-map-context
.tm-event-count {
    margin:
        0 !important;

    padding:
        0 !important;

    line-height:
        1.1;
}


.tm-map-context-year
.tm-big-year {
    color:
        #d7b75f;

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

    font-size:
        14px !important;

    font-weight:
        700;
}


.tm-map-context-era
.tm-era-name {
    color:
        #8ea2ad;

    font-size:
        8px !important;

    font-weight:
        700;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}


.tm-map-context-count
.tm-event-count {
    color:
        #617d8d;

    font-size:
        8px !important;
}


.tm-map-toolbar-right {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        6px;
}


/* =========================================================
   TOOLBAR ACTIONS
   ========================================================= */

.tm-toolbar-action,
.tm-filter-drawer-toggle {
    min-height:
        31px;

    padding:
        5px 9px;

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

    border-radius:
        7px;

    background:
        #081c28;

    color:
        #93a5af;

    font-size:
        8px;

    font-weight:
        700;

    cursor:
        pointer;

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


.tm-toolbar-action:hover,
.tm-filter-drawer-toggle:hover {
    border-color:
        rgba(210,173,90,.68);

    color:
        #e7d6a5;
}


.tm-filter-drawer-toggle {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;
}


.tm-filter-drawer-toggle small {
    display:
        grid;

    place-items:
        center;

    min-width:
        18px;

    height:
        18px;

    padding:
        0 4px;

    border-radius:
        999px;

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

    color:
        #ddc274;

    font-size:
        7px;
}


.tm-filter-drawer-toggle small[hidden] {
    display:
        none !important;
}


.tm-filter-drawer-toggle.has-filters {
    border-color:
        rgba(210,173,90,.72);

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

    color:
        #edd48c;
}


/* =========================================================
   FILTER DRAWER
   ========================================================= */

.tm-filter-drawer {
    position:
        absolute;

    top:
        calc(100% + 7px);

    right:
        10px;

    z-index:
        5000;

    width:
        min(
            540px,
            calc(100vw - 40px)
        );

    max-height:
        min(
            680px,
            calc(100vh - 190px)
        );

    overflow-y:
        auto;

    padding:
        11px;

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

    border-radius:
        12px;

    background:
        rgba(5,20,30,.985);

    box-shadow:
        0 24px 65px
        rgba(0,0,0,.62);

    backdrop-filter:
        blur(10px);
}


.tm-filter-drawer[hidden] {
    display:
        none !important;
}


.tm-filter-drawer-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        2px 3px 10px;

    border-bottom:
        1px solid
        rgba(59,85,100,.44);
}


.tm-filter-drawer-head
div > span {
    display:
        block;

    color:
        #5f7a89;

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.tm-filter-drawer-head
div > strong {
    display:
        block;

    margin-top:
        2px;

    color:
        #dfc476;

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

    font-size:
        15px;
}


.tm-filter-drawer-head
> button {
    display:
        grid;

    place-items:
        center;

    width:
        28px;

    height:
        28px;

    padding:
        0;

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

    border-radius:
        50%;

    background:
        #081b27;

    color:
        #8398a4;

    font-size:
        17px;

    cursor:
        pointer;
}


.tm-filter-drawer-head
> button:hover {
    border-color:
        rgba(210,173,90,.7);

    color:
        #efd48b;
}


/* =========================================================
   FILTER SECTIONS
   ========================================================= */

.tm-filter-drawer-section {
    padding:
        11px 3px;

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


.tm-filter-drawer-section:last-child {
    border-bottom:
        0;
}


.tm-filter-section-heading {
    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        8px;
}


.tm-filter-section-heading strong {
    color:
        #d2b463;

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

    font-size:
        11px;
}


.tm-filter-section-heading small {
    color:
        #607b8c;

    font-size:
        7px;
}


/* =========================================================
   REUSED SEARCH
   ========================================================= */

.tm-filter-drawer
.tm-search-wrap {
    position:
        relative;

    display:
        block;

    margin:
        0 !important;
}


.tm-filter-drawer
.tm-search {
    width:
        100%;

    min-height:
        36px;
}


/* =========================================================
   REUSED CATEGORY FILTERS
   ========================================================= */

.tm-filter-drawer
#categoryFilters {
    display:
        flex !important;

    flex-wrap:
        wrap;

    gap:
        6px;

    max-height:
        245px !important;

    overflow-y:
        auto !important;

    padding:
        1px 2px 2px 0;
}


.tm-filter-drawer
#categoryFilters
.tm-chip {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        5px 9px;

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

    border-radius:
        999px;

    background:
        #081d29;

    color:
        #96a8b1;

    font-size:
        8px;

    cursor:
        pointer;
}


.tm-filter-drawer
#categoryFilters
.tm-chip:hover {
    border-color:
        rgba(210,173,90,.6);

    color:
        #e4d7b8;
}


.tm-filter-drawer
#categoryFilters
.tm-chip.active {
    border-color:
        rgba(210,173,90,.82);

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

    color:
        #f0d58b;

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


/* =========================================================
   REUSED TAG FILTERS
   ========================================================= */

.tm-filter-drawer
.tm-tag-search {
    width:
        100%;

    margin:
        0 0 7px !important;
}


.tm-drawer-tag-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    min-height:
        24px;

    margin-bottom:
        6px;

    color:
        #667f8e;

    font-size:
        7px;
}


.tm-filter-drawer
#tagFilters {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    max-height:
        230px !important;

    overflow-y:
        auto !important;
}


/* =========================================================
   FULL WIDTH MAP
   ========================================================= */

html.tm-sidebar-retired
.tm-map {
    width:
        100%;
}


html.tm-sidebar-retired
.tm-timeline-panel {
    width:
        100%;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.tm-filter-drawer::-webkit-scrollbar,
.tm-filter-drawer
#categoryFilters::-webkit-scrollbar,
.tm-filter-drawer
#tagFilters::-webkit-scrollbar {
    width:
        5px;
}


.tm-filter-drawer::-webkit-scrollbar-thumb,
.tm-filter-drawer
#categoryFilters::-webkit-scrollbar-thumb,
.tm-filter-drawer
#tagFilters::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        rgba(84,111,126,.55);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .tm-map-toolbar {
        grid-template-columns:
            auto
            1fr;
    }


    .tm-map-context {
        display:
            none;
    }


    .tm-map-toolbar-right {
        min-width:
            0;
    }


    .tm-filter-drawer {
        position:
            fixed;

        top:
            72px;

        right:
            10px;

        bottom:
            10px;

        left:
            10px;

        width:
            auto;

        max-height:
            none;
    }


    .tm-toolbar-action {
        display:
            none;
    }
}


@media (max-width: 520px) {

    .tm-map-toolbar-right {
        gap:
            4px;
    }


    .tm-filter-drawer-toggle {
        padding:
            5px 7px;
    }
}