/*
 * 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_NETWORK_COMPACT_EVENT_CARD_V1
 *
 * While the relationship graph is active, keep the normal
 * event reader available but shrink it into a floating summary.
 *
 * The map remains interactive around the card.
 * =========================================================
 */

body:has(#map.we-v2-network-active)
#eventModal.tm-modal.open {
    align-items:
        flex-start;

    justify-content:
        flex-end;

    padding:
        66px 18px 18px;

    pointer-events:
        none;
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-modal-backdrop {
    display:
        none;
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-event-modal {
    width:
        min(
            350px,
            calc(100vw - 36px)
        );

    max-height:
        220px;

    overflow:
        hidden;

    pointer-events:
        auto;

    border-radius:
        13px;

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

    box-shadow:
        0 14px 45px
        rgba(0,0,0,.48);

    backdrop-filter:
        blur(12px);
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-event-image {
    display:
        none !important;
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-event-content {
    padding:
        14px 44px 14px 16px;
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-event-content h2 {
    margin:
        4px 0;

    font-size:
        18px;

    line-height:
        1.18;
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-event-eyebrow {
    font-size:
        8px;
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-event-date {
    margin-top:
        4px;

    font-size:
        12px;
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-event-location {
    margin:
        4px 0 0;

    font-size:
        10px;
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-event-description,

body:has(#map.we-v2-network-active)
#eventModal
.tm-tags,

body:has(#map.we-v2-network-active)
#eventModal
.tm-event-detail-section,

body:has(#map.we-v2-network-active)
#eventModal
.tm-certainty,

body:has(#map.we-v2-network-active)
#eventModal
.tm-modal-actions {
    display:
        none !important;
}


body:has(#map.we-v2-network-active)
#eventModal
.tm-modal-close {
    top:
        8px;

    right:
        8px;

    width:
        28px;

    height:
        28px;

    font-size:
        18px;

    line-height:
        24px;
}


@media (max-width: 700px) {

    body:has(#map.we-v2-network-active)
    #eventModal.tm-modal.open {
        padding:
            58px 10px 10px;
    }


    body:has(#map.we-v2-network-active)
    #eventModal
    .tm-event-modal {
        width:
            min(
                330px,
                calc(100vw - 20px)
            );
    }
}



/*
 * =========================================================
 * WORLD_ENGINE_NETWORK_LEFT_COLLAPSIBLE_CARD_V1
 * =========================================================
 */

#eventModal.we-network-card-mode.tm-modal.open {
    display:
        block !important;

    padding:
        0 !important;

    pointer-events:
        none !important;
}


#eventModal.we-network-card-mode
.tm-modal-backdrop {
    display:
        none !important;
}


#eventModal.we-network-card-mode
.tm-event-modal {

    position:
        fixed !important;

    left:
        var(
            --we-network-card-left,
            18px
        ) !important;

    top:
        var(
            --we-network-card-top,
            110px
        ) !important;

    right:
        auto !important;

    bottom:
        auto !important;

    width:
        min(
            340px,
            calc(100vw - 40px)
        ) !important;

    max-height:
        230px !important;

    margin:
        0 !important;

    overflow:
        hidden !important;

    pointer-events:
        auto !important;

    border-radius:
        13px !important;

    background:
        rgba(
            5,
            15,
            23,
            .96
        ) !important;

    box-shadow:
        0 14px 45px
        rgba(0,0,0,.48) !important;

    backdrop-filter:
        blur(12px);

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


/*
 * Hide large/detail content while exploring relationships.
 */
#eventModal.we-network-card-mode
.tm-event-image,

#eventModal.we-network-card-mode
.tm-event-description,

#eventModal.we-network-card-mode
.tm-tags,

#eventModal.we-network-card-mode
.tm-event-detail-section,

#eventModal.we-network-card-mode
.tm-certainty,

#eventModal.we-network-card-mode
.tm-modal-actions {
    display:
        none !important;
}


#eventModal.we-network-card-mode
.tm-event-content {
    padding:
        15px 76px 15px 16px !important;
}


#eventModal.we-network-card-mode
.tm-event-content h2 {
    margin:
        4px 0 !important;

    font-size:
        18px !important;

    line-height:
        1.2 !important;
}


#eventModal.we-network-card-mode
.tm-event-eyebrow {
    font-size:
        8px !important;
}


#eventModal.we-network-card-mode
.tm-event-date {
    margin-top:
        4px !important;

    font-size:
        12px !important;
}


#eventModal.we-network-card-mode
.tm-event-location {
    margin:
        4px 0 0 !important;

    font-size:
        10px !important;
}


/*
 * Normal close button.
 */
#eventModal.we-network-card-mode
.tm-modal-close {

    top:
        8px !important;

    right:
        8px !important;

    width:
        28px !important;

    height:
        28px !important;

    font-size:
        18px !important;

    line-height:
        24px !important;
}


/*
 * Collapse control.
 */
#eventModal.we-network-card-mode
.we-network-card-toggle {

    position:
        absolute;

    z-index:
        20;

    top:
        8px;

    right:
        42px;

    width:
        28px;

    height:
        28px;

    padding:
        0;

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

    border-radius:
        7px;

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

    color:
        #b9d9e8;

    font-size:
        18px;

    line-height:
        26px;

    text-align:
        center;

    cursor:
        pointer;
}


#eventModal.we-network-card-mode
.we-network-card-toggle:hover {

    border-color:
        rgba(93,216,255,.4);

    color:
        #66dcff;

    background:
        rgba(93,216,255,.08);
}


/*
 * COLLAPSED
 *
 * Leaves only a narrow INFO tab on the map.
 */
#eventModal.we-network-card-mode.we-network-card-collapsed
.tm-event-modal {

    width:
        38px !important;

    height:
        104px !important;

    min-height:
        104px !important;

    max-height:
        104px !important;

    overflow:
        hidden !important;

    border-radius:
        0 10px 10px 0 !important;
}


#eventModal.we-network-card-mode.we-network-card-collapsed
.tm-event-content,

#eventModal.we-network-card-mode.we-network-card-collapsed
.tm-modal-close {
    display:
        none !important;
}


#eventModal.we-network-card-mode.we-network-card-collapsed
.we-network-card-toggle {

    position:
        absolute;

    inset:
        0;

    width:
        38px;

    height:
        104px;

    border:
        0;

    border-radius:
        0 10px 10px 0;

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

    color:
        #7edfff;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


/*
 * Mobile.
 */
@media (max-width:700px) {

    #eventModal.we-network-card-mode
    .tm-event-modal {

        width:
            min(
                300px,
                calc(100vw - 24px)
            ) !important;
    }


    #eventModal.we-network-card-mode.we-network-card-collapsed
    .tm-event-modal {

        width:
            36px !important;

        height:
            90px !important;

        min-height:
            90px !important;
    }


    #eventModal.we-network-card-mode.we-network-card-collapsed
    .we-network-card-toggle {

        width:
            36px;

        height:
            90px;
    }
}



/*
 * =========================================================
 * 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;
}