/*
 * World Engine Map
 * V2-style search + focused relationship graph.
 */


/* =========================================================
   FLOATING SEARCH
   ========================================================= */

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


.tm-map-column
.we-v2-floating-search {

    position:absolute !important;

    z-index:30000 !important;

    top:54px !important;
    left:18px !important;

    width:min(
        360px,
        calc(100% - 36px)
    ) !important;

    display:flex !important;

    margin:0 !important;

    padding:5px !important;

    border:
        1px solid
        rgba(77,144,166,.38) !important;

    border-radius:
        9px !important;

    background:
        rgba(4,15,22,.95) !important;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.42) !important;

    backdrop-filter:
        blur(12px);
}


.we-v2-floating-search
.tm-search {

    flex:1;

    min-width:0;

    margin:0 !important;

    border:0 !important;

    background:
        transparent !important;

    color:
        #e7f2f5 !important;
}


.we-v2-floating-search
.tm-search-clear {

    position:static !important;

    flex:0 0 34px;

    width:34px !important;
    height:34px !important;
}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

.we-v2-search-results {

    position:absolute;

    z-index:30010;

    top:
        calc(100% + 6px);

    left:0;
    right:0;

    max-height:420px;

    overflow-y:auto;

    border:
        1px solid
        rgba(100,218,255,.24);

    border-radius:10px;

    background:
        rgba(5,15,23,.985);

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


.we-v2-search-results[hidden] {
    display:none !important;
}


.we-v2-search-state {

    padding:
        8px 10px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    color:#69818f;

    font-size:8px;
}


.we-v2-search-result {

    display:flex;

    align-items:center;

    gap:5px;

    margin:4px;

    border:
        1px solid
        transparent;

    border-radius:7px;
}


.we-v2-search-result:hover,
.we-v2-search-result.selected {

    border-color:
        rgba(97,219,255,.18);

    background:
        rgba(97,219,255,.065);
}


.we-v2-search-main {

    flex:1;

    min-width:0;

    display:grid;

    gap:3px;

    padding:
        8px 9px;

    border:0;

    background:
        transparent;

    color:#eaf5fa;

    text-align:left;

    cursor:pointer;
}


.we-v2-search-main strong {

    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:10px;
}


.we-v2-search-main span {

    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    color:#738b98;

    font-size:8px;
}


.we-v2-search-network {

    margin-right:6px;

    padding:
        6px 8px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:5px;

    background:
        rgba(255,255,255,.025);

    color:#819aa7;

    font-size:8px;

    cursor:pointer;
}


.we-v2-search-network:hover {
    color:#6fddff;
}


.we-v2-search-empty {

    padding:20px;

    color:#617984;

    text-align:center;

    font-size:9px;
}


/* =========================================================
   CLUSTERS -> NORMAL NODES
   ========================================================= */

.tm-event-icon {

    background:none !important;
    border:0 !important;

    display:grid !important;
    place-items:center !important;
}


.tm-event-icon
.we-v2-event-dot {

    display:block !important;

    width:10px !important;
    height:10px !important;

    border:
        1px solid
        rgba(190,218,226,.45) !important;

    border-radius:
        50% !important;

    background:
        var(
            --tm-category-accent,
            #6f8d98
        ) !important;

    box-shadow:
        0 0 0 1px
        rgba(13,34,43,.55) !important;

    opacity:.82 !important;
}


/* =========================================================
   NETWORK FOCUS
   ========================================================= */

/*
 * Cluster markers and normal event markers are in
 * Leaflet's ordinary markerPane.
 *
 * Hide them ONLY after a valid network has rendered.
 */
.leaflet-container.we-v2-network-active
.leaflet-marker-pane {

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;
}


/*
 * The old TimeMap core can promote its own selected marker.
 * Our World Engine graph draws the selected root itself.
 */
.leaflet-container.we-v2-network-active
.tm-investigation-center-promoted {

    opacity:0 !important;

    visibility:hidden !important;
}


/*
 * Dedicated graph panes remain visible.
 */
.leaflet-container.we-v2-network-active
.leaflet-weNetworkLines-pane,
.leaflet-container.we-v2-network-active
.leaflet-weNetworkNodes-pane {

    opacity:1 !important;

    visibility:visible !important;

    display:block !important;
}


/* =========================================================
   NETWORK TOOLTIP
   ========================================================= */

.we-v2-network-tooltip {

    display:grid;

    gap:3px;

    min-width:130px;
}


.we-v2-network-tooltip strong {

    color:#eaf5fa;

    font:
        10px Georgia,
        serif;
}


.we-v2-network-tooltip span {

    color:#728c98;

    font-size:7px;
}


@media(max-width:700px) {

    .tm-map-column
    .we-v2-floating-search {

        left:10px !important;

        width:
            calc(100% - 20px)
            !important;
    }
}


/*
 * =========================================================
 * WORLD_ENGINE_TOOLBAR_SEARCH_CSS_V1
 * =========================================================
 */

.tm-map-toolbar-right {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        7px !important;

    min-width:
        0;
}


.we-toolbar-locality {

    flex:
        0 0 auto;

    white-space:
        nowrap;
}


/*
 * Existing search, now compact and inline.
 */
.tm-map-toolbar-right
.we-v2-toolbar-search {

    position:
        relative !important;

    inset:
        auto !important;

    z-index:
        auto !important;

    width:
        210px !important;

    max-width:
        24vw;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        none !important;
}


.tm-map-toolbar-right
.we-v2-toolbar-search
.tm-search {

    width:
        100% !important;

    height:
        30px !important;

    min-height:
        30px !important;

    padding:
        4px 28px 4px 9px !important;

    border-radius:
        7px !important;

    font-size:
        10px !important;

    line-height:
        20px !important;
}


.tm-map-toolbar-right
.we-v2-toolbar-search
.tm-search::placeholder {

    font-size:
        10px;
}


.tm-map-toolbar-right
.we-v2-toolbar-search
.tm-search-clear {

    right:
        6px !important;

    top:
        50% !important;

    width:
        18px !important;

    height:
        18px !important;

    transform:
        translateY(-50%) !important;

    font-size:
        14px !important;

    line-height:
        16px !important;
}


/*
 * Existing action buttons, compacted to toolbar size.
 */
.tm-map-toolbar-right
.we-v2-toolbar-action {

    flex:
        0 0 auto;

    width:
        auto !important;

    min-width:
        0 !important;

    height:
        30px !important;

    margin:
        0 !important;

    padding:
        4px 9px !important;

    border-radius:
        7px !important;

    white-space:
        nowrap;

    font-size:
        9px !important;

    line-height:
        20px !important;
}


/*
 * Search-result dropdown remains attached below the compact search.
 */
.tm-map-toolbar-right
.we-v2-toolbar-search
.we-v2-search-results {

    top:
        calc(100% + 7px);

    left:
        auto;

    right:
        0;

    width:
        min(
            420px,
            70vw
        );
}


/*
 * Small screens: keep toolbar useful without a giant search field.
 */
@media (max-width:900px) {

    .tm-map-toolbar-right
    .we-v2-toolbar-search {

        width:
            150px !important;

        max-width:
            28vw;
    }


    .tm-map-toolbar-right
    .we-v2-toolbar-action {

        padding:
            4px 6px !important;

        font-size:
            8px !important;
    }
}


@media (max-width:650px) {

    .we-toolbar-locality {
        display:
            none;
    }


    .tm-map-toolbar-right
    .we-v2-toolbar-search {

        width:
            130px !important;

        max-width:
            38vw;
    }
}


/*
 * =========================================================
 * WORLD_ENGINE_TOOLBAR_SEARCH_WIDTH_FIX_V1
 *
 * Prevent toolbar flex layout from collapsing search to 0px.
 * =========================================================
 */

.tm-map-toolbar-right
.tm-search-wrap.we-v2-toolbar-search {

    display:
        flex !important;

    position:
        relative !important;

    flex:
        0 0 220px !important;

    width:
        220px !important;

    min-width:
        220px !important;

    max-width:
        220px !important;

    height:
        30px !important;

    min-height:
        30px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    inset:
        auto !important;

    transform:
        none !important;
}


.tm-map-toolbar-right
.tm-search-wrap.we-v2-toolbar-search
#eventSearch {

    display:
        block !important;

    position:
        relative !important;

    flex:
        1 1 auto !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        30px !important;

    margin:
        0 !important;

    padding:
        4px 28px 4px 9px !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


.tm-map-toolbar-right
.tm-search-wrap.we-v2-toolbar-search
#clearSearch {

    display:
        block !important;

    position:
        absolute !important;

    right:
        6px !important;

    top:
        50% !important;

    transform:
        translateY(-50%) !important;
}


@media (max-width:900px) {

    .tm-map-toolbar-right
    .tm-search-wrap.we-v2-toolbar-search {

        flex-basis:
            170px !important;

        width:
            170px !important;

        min-width:
            170px !important;

        max-width:
            170px !important;
    }
}


/*
 * =========================================================
 * WORLD_ENGINE_TOOLBAR_SEARCH_REPAIR_CSS_V2
 * =========================================================
 */

#weToolbarSearch {

    position:
        relative !important;

    display:
        block !important;

    flex:
        0 0 200px !important;

    width:
        200px !important;

    min-width:
        200px !important;

    height:
        30px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    overflow:
        visible !important;
}


#weToolbarSearch
#eventSearch {

    display:
        block !important;

    position:
        relative !important;

    width:
        200px !important;

    min-width:
        200px !important;

    height:
        30px !important;

    margin:
        0 !important;

    padding:
        4px 28px 4px 9px !important;

    border:
        1px solid
        rgba(110,160,190,.38) !important;

    border-radius:
        7px !important;

    background:
        rgba(2,12,18,.78) !important;

    color:
        #dcebf2 !important;

    font-size:
        10px !important;

    line-height:
        20px !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


#weToolbarSearch
#eventSearch::placeholder {

    color:
        #718995 !important;

    opacity:
        1 !important;
}


#weToolbarSearch
#clearSearch {

    display:
        block !important;

    position:
        absolute !important;

    z-index:
        3 !important;

    top:
        50% !important;

    right:
        5px !important;

    left:
        auto !important;

    width:
        20px !important;

    height:
        20px !important;

    padding:
        0 !important;

    transform:
        translateY(-50%) !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #78909b !important;

    font-size:
        15px !important;

    line-height:
        20px !important;
}


#weToolbarSearch
.we-v2-search-results {

    position:
        absolute !important;

    z-index:
        50000 !important;

    top:
        36px !important;

    right:
        0 !important;

    left:
        auto !important;

    width:
        380px !important;

    max-width:
        70vw !important;
}


@media (max-width:800px) {

    #weToolbarSearch {

        flex-basis:
            150px !important;

        width:
            150px !important;

        min-width:
            150px !important;
    }


    #weToolbarSearch
    #eventSearch {

        width:
            150px !important;

        min-width:
            150px !important;
    }
}



/*
 * =========================================================
 * WORLD_ENGINE_TOOLBAR_FINAL_CONTROLS_CSS_V1
 * =========================================================
 */

#weToolbarSearch {

    display:
        block !important;

    position:
        relative !important;

    flex:
        0 0 190px !important;

    width:
        190px !important;

    min-width:
        190px !important;

    max-width:
        190px !important;

    height:
        30px !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    overflow:
        visible !important;
}


#weToolbarSearch
#eventSearch {

    display:
        block !important;

    width:
        190px !important;

    min-width:
        190px !important;

    max-width:
        190px !important;

    height:
        30px !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


#weClearNetwork {

    flex:
        0 0 auto !important;

    width:
        auto !important;

    min-width:
        0 !important;

    height:
        30px !important;

    margin:
        0 !important;

    padding:
        4px 9px !important;

    border:
        1px solid
        rgba(91,190,220,.28) !important;

    border-radius:
        7px !important;

    background:
        rgba(42,145,177,.08) !important;

    color:
        #74d9f3 !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    white-space:
        nowrap !important;
}


#weClearNetwork:hover:not(:disabled) {

    border-color:
        rgba(92,220,255,.55) !important;

    background:
        rgba(42,170,210,.16) !important;

    color:
        #c5f4ff !important;
}


#weClearNetwork:disabled {

    opacity:
        .28 !important;

    cursor:
        default !important;
}


/*
 * =========================================================
 * WORLD_ENGINE_NODE_TOOLTIP_COMPACT_V1
 * =========================================================
 */

.leaflet-tooltip.we-v2-network-tooltip-shell {

    padding:
        6px 9px !important;

    border:
        1px solid
        rgba(102,205,235,.24) !important;

    border-radius:
        7px !important;

    background:
        rgba(5,17,25,.96) !important;

    color:
        #e8d38d !important;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.42) !important;

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

    font-size:
        11px !important;

    line-height:
        1.25 !important;

    white-space:
        nowrap !important;
}


.leaflet-tooltip-top.we-v2-network-tooltip-shell::before {

    border-top-color:
        rgba(5,17,25,.96) !important;
}


.we-v2-network-tooltip {

    display:
        block !important;

    min-width:
        0 !important;

    max-width:
        320px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}



/*
 * =========================================================
 * WORLD_ENGINE_NETWORK_TOOLTIP_FIX_V1
 * =========================================================
 *
 * Network mode hides ordinary TimeMap markers, so tooltips
 * visible in this state belong to the focused graph.
 */

.leaflet-container.we-v2-network-active
.leaflet-tooltip {

    max-width:
        280px !important;

    min-width:
        0 !important;

    width:
        auto !important;

    padding:
        7px 10px !important;

    border:
        1px solid
        rgba(105,210,240,.28) !important;

    border-radius:
        7px !important;

    background:
        rgba(7,27,37,.96) !important;

    color:
        #eaf5fa !important;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.38) !important;

    white-space:
        normal !important;

    font-size:
        11px !important;

    line-height:
        1.3 !important;

    pointer-events:
        none !important;
}


.leaflet-container.we-v2-network-active
.leaflet-tooltip strong {

    color:
        #eaf5fa !important;

    font-size:
        12px !important;

    line-height:
        1.25 !important;
}


.leaflet-container.we-v2-network-active
.leaflet-tooltip span {

    color:
        #8ca7b3 !important;

    font-size:
        9px !important;
}


.leaflet-container.we-v2-network-active
.leaflet-tooltip-top::before {

    border-top-color:
        rgba(7,27,37,.96) !important;
}


.leaflet-container.we-v2-network-active
.leaflet-tooltip-bottom::before {

    border-bottom-color:
        rgba(7,27,37,.96) !important;
}


.leaflet-container.we-v2-network-active
.leaflet-tooltip-left::before {

    border-left-color:
        rgba(7,27,37,.96) !important;
}


.leaflet-container.we-v2-network-active
.leaflet-tooltip-right::before {

    border-right-color:
        rgba(7,27,37,.96) !important;
}



/*
 * =========================================================
 * WORLD_ENGINE_STABLE_EVENT_CARD_V2
 *
 * #eventModal remains TimeMap's event reader.
 * World Engine permanently presents it as a left-side card.
 *
 * This does NOT depend on network-active state.
 * =========================================================
 */

#eventModal.we-event-card-host {

    position:
        fixed !important;

    inset:
        auto !important;

    top:
        74px !important;

    left:
        14px !important;

    right:
        auto !important;

    bottom:
        16px !important;

    z-index:
        41000 !important;

    width:
        min(360px, calc(100vw - 28px)) !important;

    height:
        auto !important;

    padding:
        0 !important;

    background:
        transparent !important;

    align-items:
        initial !important;

    justify-content:
        initial !important;

    pointer-events:
        none !important;
}


/*
 * Closed event reader stays closed.
 */
#eventModal.we-event-card-host:not(.open) {

    display:
        none !important;
}


/*
 * Selected event = stable visible left card.
 */
#eventModal.we-event-card-host.open,
#eventModal.we-event-card-host.we-event-card-visible {

    display:
        block !important;
}


/*
 * Never show the fullscreen modal backdrop in World Engine.
 */
#eventModal.we-event-card-host
.tm-modal-backdrop {

    display:
        none !important;
}


/*
 * Existing TimeMap event article becomes the card.
 */
#eventModal.we-event-card-host
.tm-event-modal {

    position:
        relative !important;

    inset:
        auto !important;

    transform:
        none !important;

    width:
        100% !important;

    max-width:
        none !important;

    max-height:
        calc(100vh - 96px) !important;

    margin:
        0 !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    border-radius:
        12px !important;

    pointer-events:
        auto !important;
}


/*
 * Keep event imagery appropriate for a compact information card.
 */
#eventModal.we-event-card-host
.tm-event-image {

    height:
        125px !important;
}


#eventModal.we-event-card-host
.tm-event-content {

    padding:
        12px 16px 18px !important;
}


/*
 * Collapse / expand control.
 */
#eventModal.we-event-card-host
.we-event-card-toggle {

    position:
        absolute;

    z-index:
        20;

    top:
        10px;

    right:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    padding:
        0;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:
        8px;

    background:
        rgba(4,16,24,.92);

    color:
        #d7e9ef;

    font-size:
        20px;

    line-height:
        1;

    cursor:
        pointer;
}


/*
 * Collapsed state remains visibly present as a left-side tab.
 */
#eventModal.we-event-card-host.we-event-card-collapsed {

    width:
        44px !important;
}


#eventModal.we-event-card-host.we-event-card-collapsed
.tm-event-modal {

    width:
        44px !important;

    height:
        44px !important;

    min-height:
        44px !important;

    overflow:
        hidden !important;

    border-radius:
        9px !important;
}


#eventModal.we-event-card-host.we-event-card-collapsed
.tm-event-modal
> :not(.we-event-card-toggle) {

    display:
        none !important;
}


#eventModal.we-event-card-host.we-event-card-collapsed
.we-event-card-toggle {

    position:
        absolute;

    top:
        6px;

    left:
        6px;

    right:
        auto;

    width:
        32px;

    height:
        32px;
}


/*
 * Mobile: same behavior, slightly tighter.
 */
@media (max-width:700px) {

    #eventModal.we-event-card-host {

        top:
            64px !important;

        left:
            8px !important;

        bottom:
            58px !important;

        width:
            min(330px, calc(100vw - 16px)) !important;
    }


    #eventModal.we-event-card-host.we-event-card-collapsed {

        width:
            44px !important;
    }
}



/*
 * =========================================================
 * WORLD_ENGINE_EVENT_CARD_TITLE_V1
 *
 * Compact typography for the permanently docked
 * World Engine event information card only.
 * =========================================================
 */

#eventModal.we-event-card-host
.tm-event-content h2 {

    margin:
        8px 0 10px !important;

    font-size:
        28px !important;

    line-height:
        1.08 !important;

    font-weight:
        600 !important;

    letter-spacing:
        -0.02em !important;

    overflow-wrap:
        anywhere;
}


@media (max-width:700px) {

    #eventModal.we-event-card-host
    .tm-event-content h2 {

        font-size:
            24px !important;

        line-height:
            1.1 !important;
    }
}