/* =========================================
   THE TIMEMAP — EVENT DENSITY
========================================= */

.event-density{
    position:relative;
    z-index:4;

    max-width:1180px;

    margin:
        0 auto
        30px;

    padding:
        20px;

    border:
        1px solid
        rgba(169,133,69,.17);

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.84),
            rgba(249,245,236,.72)
        );

    box-shadow:
        0 12px 32px
        rgba(65,49,22,.055),
        inset 0 1px 0
        rgba(255,255,255,.9);

    overflow:hidden;
}


/* =========================================
   HEADER
========================================= */

.event-density-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:30px;

    margin-bottom:22px;
}


.event-density-head > div:first-child{
    min-width:0;
}


.event-density-kicker{
    margin-bottom:5px;

    color:#8b7350;

    font-size:8px;
    font-weight:850;

    letter-spacing:.15em;
    text-transform:uppercase;
}


.event-density h3{
    margin:0;

    color:#243042;

    font-size:22px;
    font-weight:900;

    line-height:1.1;
}


.event-density-head p{
    max-width:610px;

    margin:
        7px 0
        0;

    color:#6d7785;

    font-size:11px;
    line-height:1.55;
}


/* =========================================
   SUMMARY
========================================= */

.event-density-summary{
    flex:0 0 auto;

    display:grid;

    grid-template-columns:
        auto
        auto
        1px
        auto
        auto;

    align-items:center;

    gap:7px;

    min-height:40px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(30,64,175,.10);

    border-radius:12px;

    background:
        rgba(255,255,255,.58);
}


.event-density-summary strong{
    color:#1E40AF;

    font-size:13px;
    font-weight:900;
}


.event-density-summary span{
    color:#7a8490;

    font-size:8px;
    font-weight:750;

    letter-spacing:.04em;
}


.event-density-summary i{
    width:1px;
    height:18px;

    margin:
        0 5px;

    background:
        rgba(169,133,69,.18);
}


/* =========================================
   CHART FRAME
========================================= */

.event-density-chart{
    position:relative;

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

    gap:5px;

    min-height:245px;

    padding:
        24px 16px
        10px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    scrollbar-width:thin;

    border:
        1px solid
        rgba(30,64,175,.08);

    border-radius:16px;

    background:
        linear-gradient(
            180deg,
            rgba(30,64,175,.022),
            rgba(255,255,255,.56)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.85);
}


/* Horizontal guide lines */

.event-density-chart::before{
    content:'';

    position:absolute;

    top:24px;
    right:16px;
    bottom:39px;
    left:16px;

    pointer-events:none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(30,64,175,.065) 0,
            rgba(30,64,175,.065) 1px,
            transparent 1px,
            transparent 25%
        );
}


/* Baseline */

.event-density-chart::after{
    content:'';

    position:absolute;

    right:16px;
    bottom:39px;
    left:16px;

    height:1px;

    pointer-events:none;

    background:
        rgba(30,64,175,.15);
}


/* =========================================
   YEAR BAR
========================================= */

.event-density-bar{
    position:relative;
    z-index:2;

    flex:
        0 0 30px;

    height:205px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;

    gap:8px;

    color:#778292;

    text-decoration:none;

    border-radius:8px;

    outline:none;
}


.event-density-bar-column{
    position:relative;

    display:block;

    width:14px;

    height:
        var(
            --event-density-height,
            6%
        );

    min-height:5px;

    border-radius:
        6px 6px
        2px 2px;

    background:
        linear-gradient(
            180deg,
            #3B82F6,
            #1E40AF
        );

    box-shadow:
        0 3px 9px
        rgba(30,64,175,.12);

    transform-origin:bottom;

    transition:
        width .16s ease,
        transform .16s ease,
        box-shadow .16s ease,
        opacity .16s ease;
}


.event-density-bar-year{
    display:block;

    width:100%;

    overflow:hidden;

    color:#8a929e;

    font-size:7px;
    font-weight:800;

    line-height:1;

    text-align:center;

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

    transition:
        color .16s ease,
        font-weight .16s ease;
}


/* =========================================
   HOVER
========================================= */

.event-density-bar:hover
.event-density-bar-column{
    width:18px;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 16px
        rgba(30,64,175,.20);
}


.event-density-bar:hover
.event-density-bar-year{
    color:#1E40AF;

    font-weight:900;
}


/* Tooltip */

.event-density-bar::before{
    content:
        attr(data-year)
        " · "
        attr(data-count)
        " events";

    position:absolute;

    left:50%;
    bottom:
        calc(
            var(
                --event-density-height,
                6%
            ) + 43px
        );

    min-width:max-content;

    padding:
        6px 8px;

    border:
        1px solid
        rgba(30,64,175,.12);

    border-radius:8px;

    background:
        rgba(36,48,66,.96);

    color:#fff;

    box-shadow:
        0 6px 18px
        rgba(17,24,39,.15);

    font-size:8px;
    font-weight:750;

    pointer-events:none;

    opacity:0;

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

    transition:
        opacity .14s ease,
        transform .14s ease;

    white-space:nowrap;
}


.event-density-bar:hover::before,
.event-density-bar:focus-visible::before{
    opacity:1;

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


/* =========================================
   SELECTED YEAR
========================================= */

.event-density-bar.is-selected
.event-density-bar-column{
    width:18px;

    background:
        linear-gradient(
            180deg,
            #c89a44,
            #9b7026
        );

    box-shadow:
        0 5px 14px
        rgba(155,112,38,.20);
}


.event-density-bar.is-selected
.event-density-bar-year{
    color:#8b651f;

    font-weight:900;
}


.event-density-bar.is-selected::after{
    content:'';

    position:absolute;

    bottom:29px;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#b98935;

    box-shadow:
        0 0 0 4px
        rgba(185,137,53,.10);
}


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

.event-density-bar:focus-visible{
    border-radius:8px;

    outline:
        3px solid
        rgba(37,99,235,.23);

    outline-offset:2px;
}


/* =========================================
   FOOTER
========================================= */

.event-density-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-top:12px;

    padding:
        0 3px;
}


.event-density-foot > span{
    color:#8a929e;

    font-size:8px;
    line-height:1.45;
}


.event-density-foot > a{
    flex:0 0 auto;

    color:#1E40AF;

    font-size:9px;
    font-weight:800;

    text-decoration:none;
}


.event-density-foot > a:hover{
    text-decoration:underline;
}


/* =========================================
   SCROLLBAR
========================================= */

.event-density-chart::-webkit-scrollbar{
    height:7px;
}


.event-density-chart::-webkit-scrollbar-track{
    background:
        rgba(30,64,175,.035);

    border-radius:999px;
}


.event-density-chart::-webkit-scrollbar-thumb{
    background:
        rgba(30,64,175,.18);

    border-radius:999px;
}


.event-density-chart::-webkit-scrollbar-thumb:hover{
    background:
        rgba(30,64,175,.28);
}


/* =========================================
   TABLET
========================================= */

@media (max-width:850px){

    .event-density{
        margin-left:14px;
        margin-right:14px;
    }


    .event-density-head{
        flex-direction:column;

        gap:14px;
    }


    .event-density-summary{
        align-self:flex-start;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:600px){

    .event-density{
        padding:15px;

        border-radius:16px;
    }


    .event-density h3{
        font-size:19px;
    }


    .event-density-head p{
        font-size:10px;
    }


    .event-density-summary{
        width:100%;

        justify-content:start;
    }


    .event-density-chart{
        min-height:220px;

        padding:
            20px 10px
            9px;

        gap:4px;
    }


    .event-density-chart::before{
        top:20px;
        right:10px;
        left:10px;
    }


    .event-density-chart::after{
        right:10px;
        left:10px;
    }


    .event-density-bar{
        flex-basis:27px;

        height:185px;
    }


    .event-density-bar-column{
        width:13px;
    }


    .event-density-bar:hover
    .event-density-bar-column,
    .event-density-bar.is-selected
    .event-density-bar-column{
        width:16px;
    }


    .event-density-foot{
        align-items:flex-start;

        flex-direction:column;

        gap:6px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .event-density-chart{
        scroll-behavior:auto;
    }


    .event-density-bar-column,
    .event-density-bar-year,
    .event-density-bar::before{
        transition:none;
    }

}


/* =========================================
   GRAPH PAGE
========================================= */

.graph-page{
    width:100%;

    padding:
        28px 20px
        70px;
}


.graph-page .event-density{
    max-width:1280px;

    margin:
        0 auto;
}


/* =========================================
   EXPLORATION CONTROLS
========================================= */

.event-density-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin:
        0 2px
        10px;
}


.event-density-controls-group{
    display:flex;
    align-items:center;

    gap:5px;

    padding:4px;

    border:
        1px solid
        rgba(30,64,175,.09);

    border-radius:10px;

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

    box-shadow:
        0 3px 12px
        rgba(30,41,59,.035);
}


.event-density-control{
    min-width:32px;
    height:28px;

    padding:
        0 9px;

    border:
        1px solid
        transparent;

    border-radius:7px;

    background:
        transparent;

    color:#526071;

    font-family:inherit;

    font-size:11px;
    font-weight:850;

    line-height:1;

    cursor:pointer;

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


.event-density-control:hover:not(:disabled){
    border-color:
        rgba(30,64,175,.10);

    background:
        rgba(30,64,175,.065);

    color:#1E40AF;
}


.event-density-control:active:not(:disabled){
    transform:
        translateY(1px);
}


.event-density-control:focus-visible{
    outline:
        3px solid
        rgba(37,99,235,.18);

    outline-offset:1px;
}


.event-density-control:disabled{
    color:
        rgba(82,96,113,.32);

    cursor:not-allowed;
}


.event-density-fit{
    min-width:44px;

    color:#1E40AF;

    font-size:8px;

    letter-spacing:.04em;

    text-transform:uppercase;
}


/* =========================================
   CURRENT GRAPH RANGE
========================================= */

.event-density-position{
    min-width:0;

    color:#7a8490;

    font-size:8px;
    font-weight:750;

    letter-spacing:.035em;

    text-align:right;

    white-space:nowrap;
}


/* =========================================
   DRAGGING
========================================= */

.event-density-chart{
    cursor:grab;

    user-select:none;

    -webkit-user-select:none;

    touch-action:
        pan-y;
}


.event-density-chart.is-dragging{
    cursor:grabbing;
}


.event-density-chart.is-dragging
.event-density-bar{
    pointer-events:none;
}


/* =========================================
   GRAPH FOCUS
========================================= */

.event-density-chart:focus-visible{
    outline:
        3px solid
        rgba(37,99,235,.14);

    outline-offset:3px;
}


/* =========================================
   GRAPH PAGE — TABLET
========================================= */

@media (max-width:850px){

    .graph-page{
        padding:
            20px 0
            55px;
    }


    .graph-page .event-density{
        max-width:none;
    }

}


/* =========================================
   GRAPH PAGE — MOBILE
========================================= */

@media (max-width:600px){

    .event-density-controls{
        align-items:flex-start;

        flex-direction:column;

        gap:7px;
    }


    .event-density-position{
        width:100%;

        padding-left:2px;

        text-align:left;
    }


    .event-density-controls-group{
        width:100%;
    }


    .event-density-control{
        flex:1 1 auto;
    }


    .event-density-fit{
        flex:
            2 1 auto;
    }

}


/* =========================================
   REDUCED MOTION — CONTROLS
========================================= */

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

    .event-density-control{
        transition:none;
    }

}


/* =========================================
   PREMIUM GRAPH PASS
========================================= */

.graph-page .event-density{
    position:relative;

    padding:
        26px;

    border:
        1px solid
        rgba(148,117,62,.20);

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(248,245,238,.90)
        );

    box-shadow:
        0 26px 70px
        rgba(40,49,65,.08),
        0 4px 15px
        rgba(40,49,65,.04),
        inset 0 1px 0
        rgba(255,255,255,.95);

    isolation:isolate;
}


/*
 * Soft historical atmosphere behind the graph.
 */

.graph-page .event-density::before{
    content:'';

    position:absolute;

    z-index:-1;

    top:-120px;
    right:-120px;

    width:360px;
    height:360px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.10),
            rgba(59,130,246,0) 68%
        );

    pointer-events:none;
}


.graph-page .event-density::after{
    content:'';

    position:absolute;

    z-index:-1;

    bottom:-170px;
    left:-140px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(185,137,53,.09),
            rgba(185,137,53,0) 70%
        );

    pointer-events:none;
}


/* =========================================
   GRAPH TITLE
========================================= */

.graph-page .event-density-kicker{
    display:inline-flex;
    align-items:center;

    gap:7px;

    margin-bottom:8px;

    color:#927239;

    font-size:9px;
    font-weight:900;

    letter-spacing:.18em;
}


.graph-page .event-density-kicker::before{
    content:'';

    width:20px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            #b98935,
            rgba(185,137,53,.15)
        );
}


.graph-page .event-density h3{
    font-size:
        clamp(
            25px,
            3vw,
            34px
        );

    letter-spacing:-.025em;
}


.graph-page .event-density-head p{
    max-width:700px;

    margin-top:9px;

    color:#6f7884;

    font-size:12px;
}


/* =========================================
   SUMMARY — GLASS PANEL
========================================= */

.graph-page .event-density-summary{
    padding:
        9px 13px;

    border:
        1px solid
        rgba(30,64,175,.10);

    border-radius:14px;

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

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 8px 25px
        rgba(30,41,59,.045);
}


.graph-page .event-density-summary strong{
    font-size:15px;
}


/* =========================================
   CONTROL DECK
========================================= */

.graph-page .event-density-controls{
    position:relative;

    margin:
        3px 0
        12px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(30,64,175,.07);

    border-radius:13px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.70),
            rgba(248,250,252,.58)
        );
}


.graph-page .event-density-controls-group{
    border:0;

    padding:0;

    background:
        transparent;

    box-shadow:none;
}


.graph-page .event-density-control{
    min-width:34px;
    height:31px;

    border:
        1px solid
        rgba(30,64,175,.07);

    background:
        rgba(255,255,255,.68);
}


.graph-page .event-density-control:hover:not(:disabled){
    background:
        rgba(30,64,175,.08);

    box-shadow:
        0 4px 12px
        rgba(30,64,175,.08);
}


.graph-page .event-density-position{
    padding-right:4px;

    color:#667384;

    font-weight:800;
}


/* =========================================
   MAIN HISTORICAL FIELD
========================================= */

.graph-page .event-density-chart{
    position:relative;

    min-height:330px;

    padding:
        38px 22px
        15px;

    border:
        1px solid
        rgba(30,64,175,.09);

    border-radius:19px;

    background:
        linear-gradient(
            180deg,
            rgba(238,244,255,.42),
            rgba(255,255,255,.84)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.95),
        inset 0 -20px 50px
        rgba(30,64,175,.018),
        0 8px 28px
        rgba(30,41,59,.035);

    overflow-x:auto;
    overflow-y:hidden;
}


/*
 * Historical grid.
 */

.graph-page .event-density-chart::before{
    top:38px;
    right:22px;
    bottom:46px;
    left:22px;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(65,90,130,.070) 0,
            rgba(65,90,130,.070) 1px,
            transparent 1px,
            transparent 20%
        );
}


.graph-page .event-density-chart::after{
    right:22px;
    bottom:46px;
    left:22px;

    background:
        linear-gradient(
            90deg,
            rgba(30,64,175,.05),
            rgba(30,64,175,.22),
            rgba(30,64,175,.05)
        );
}


/* =========================================
   BARS — HISTORICAL PINS
========================================= */

.graph-page .event-density-bar{
    height:260px;

    gap:10px;

    border-radius:10px;
}


.graph-page .event-density-bar-column{
    width:13px;

    min-height:7px;

    border-radius:
        7px 7px
        2px 2px;

    background:
        linear-gradient(
            180deg,
            #6fa8ff 0%,
            #3b82f6 32%,
            #2458bd 72%,
            #1e3f86 100%
        );

    box-shadow:
        0 5px 11px
        rgba(30,64,175,.13),
        inset 0 1px 0
        rgba(255,255,255,.34);

    opacity:.88;
}


/*
 * Fine highlight down the left edge of each bar.
 */

.graph-page .event-density-bar-column::after{
    content:'';

    position:absolute;

    top:2px;
    bottom:2px;
    left:2px;

    width:2px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.04)
        );

    pointer-events:none;
}


/* =========================================
   YEAR LABEL
========================================= */

.graph-page .event-density-bar-year{
    color:#788495;

    font-size:8px;
    font-weight:850;

    letter-spacing:.01em;
}


/* =========================================
   HOVER — YEAR COMES ALIVE
========================================= */

.graph-page
.event-density-bar:hover
.event-density-bar-column{
    width:19px;

    opacity:1;

    transform:
        translateY(-5px)
        scaleY(1.015);

    background:
        linear-gradient(
            180deg,
            #86b6ff 0%,
            #3b82f6 28%,
            #2458bd 68%,
            #173b82 100%
        );

    box-shadow:
        0 12px 24px
        rgba(30,64,175,.22),
        0 0 0 5px
        rgba(59,130,246,.055),
        inset 0 1px 0
        rgba(255,255,255,.40);
}


.graph-page
.event-density-bar:hover
.event-density-bar-year{
    color:#173f91;

    font-size:9px;
}


/* =========================================
   TOOLTIP — FLOATING HISTORY LABEL
========================================= */

.graph-page .event-density-bar::before{
    z-index:15;

    padding:
        7px 10px;

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

    border-radius:9px;

    background:
        linear-gradient(
            180deg,
            rgba(31,42,61,.97),
            rgba(20,30,47,.98)
        );

    color:#fff;

    box-shadow:
        0 12px 30px
        rgba(15,23,42,.20);

    font-size:9px;
    font-weight:800;

    letter-spacing:.015em;
}


/* =========================================
   SELECTED YEAR — GOLDEN MOMENT
========================================= */

.graph-page
.event-density-bar.is-selected
.event-density-bar-column{
    width:19px;

    opacity:1;

    background:
        linear-gradient(
            180deg,
            #e3bd72 0%,
            #c6963f 38%,
            #9c6e22 100%
        );

    box-shadow:
        0 11px 24px
        rgba(155,112,38,.24),
        0 0 0 5px
        rgba(185,137,53,.07),
        inset 0 1px 0
        rgba(255,255,255,.46);
}


.graph-page
.event-density-bar.is-selected
.event-density-bar-year{
    color:#8b621d;

    font-size:9px;
}


.graph-page
.event-density-bar.is-selected::after{
    bottom:31px;

    width:6px;
    height:6px;

    background:#b98935;

    box-shadow:
        0 0 0 5px
        rgba(185,137,53,.11),
        0 0 14px
        rgba(185,137,53,.25);
}


/* =========================================
   EMPTY HISTORICAL SPACE
========================================= */

/*
 * The intentional blank space created by chronology
 * now feels like part of the visualization instead
 * of simply looking empty.
 */

.graph-page .event-density-chart{
    background-image:
        linear-gradient(
            180deg,
            rgba(238,244,255,.38),
            rgba(255,255,255,.87)
        ),
        radial-gradient(
            circle at 20% 15%,
            rgba(59,130,246,.045),
            transparent 35%
        ),
        radial-gradient(
            circle at 78% 72%,
            rgba(185,137,53,.035),
            transparent 30%
        );
}


/* =========================================
   FOOTER
========================================= */

.graph-page .event-density-foot{
    margin-top:15px;

    padding:
        2px 4px
        0;
}


.graph-page .event-density-foot > span{
    color:#818b98;

    font-size:9px;
}


.graph-page .event-density-foot > a{
    padding:
        6px 9px;

    border-radius:8px;

    color:#1E40AF;

    background:
        rgba(30,64,175,.045);

    text-decoration:none;
}


.graph-page .event-density-foot > a:hover{
    background:
        rgba(30,64,175,.08);

    text-decoration:none;
}


/* =========================================
   SUBTLE ENTRANCE
========================================= */

@keyframes eventDensityReveal{

    from{
        opacity:0;

        transform:
            translateY(8px);
    }

    to{
        opacity:1;

        transform:
            translateY(0);
    }

}


.graph-page .event-density{
    animation:
        eventDensityReveal
        .38s ease-out
        both;
}


/* =========================================
   PREMIUM MOBILE PASS
========================================= */

@media (max-width:600px){

    .graph-page .event-density{
        padding:16px;

        border-radius:18px;
    }


    .graph-page .event-density-head{
        margin-bottom:17px;
    }


    .graph-page .event-density-summary{
        width:100%;
    }


    .graph-page .event-density-chart{
        min-height:285px;

        padding:
            30px 12px
            12px;

        border-radius:15px;
    }


    .graph-page .event-density-chart::before{
        top:30px;
        right:12px;
        left:12px;
    }


    .graph-page .event-density-chart::after{
        right:12px;
        left:12px;
    }


    .graph-page .event-density-bar{
        height:225px;
    }


    .graph-page .event-density-controls{
        padding:8px;
    }

}


/* =========================================
   PREMIUM REDUCED MOTION
========================================= */

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

    .graph-page .event-density{
        animation:none;
    }


    .graph-page
    .event-density-bar:hover
    .event-density-bar-column{
        transform:none;
    }

}


/* =========================================
   YEAR SPOTLIGHT
========================================= */

.event-density-inspector{
    position:relative;

    display:grid;

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

    align-items:center;

    gap:22px;

    margin:
        0 0
        13px;

    padding:
        15px 16px;

    overflow:hidden;

    border:
        1px solid
        rgba(30,64,175,.085);

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.87),
            rgba(244,248,255,.72)
        );

    box-shadow:
        0 7px 25px
        rgba(30,41,59,.035),
        inset 0 1px 0
        rgba(255,255,255,.95);

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


/*
 * Thin historical accent.
 */

.event-density-inspector::before{
    content:'';

    position:absolute;

    top:0;
    bottom:0;
    left:0;

    width:3px;

    background:
        linear-gradient(
            180deg,
            #3b82f6,
            #1e40af
        );

    opacity:.46;

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


/*
 * Very soft background glow.
 */

.event-density-inspector::after{
    content:'';

    position:absolute;

    top:-90px;
    left:-50px;

    width:230px;
    height:230px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.07),
            transparent 68%
        );

    pointer-events:none;
}


/* =========================================
   ACTIVE SPOTLIGHT
========================================= */

.event-density-inspector.is-active{
    border-color:
        rgba(30,64,175,.14);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(239,245,255,.82)
        );

    box-shadow:
        0 12px 34px
        rgba(30,64,175,.055),
        inset 0 1px 0
        rgba(255,255,255,.98);
}


.event-density-inspector.is-active::before{
    width:4px;

    opacity:.9;
}


/* =========================================
   INSPECTOR MAIN
========================================= */

.event-density-inspector-main{
    position:relative;

    z-index:2;

    min-width:0;
}


.event-density-inspector-kicker{
    margin-bottom:3px;

    color:#8d734a;

    font-size:7px;
    font-weight:900;

    letter-spacing:.16em;

    text-transform:uppercase;
}


.event-density-inspector-year{
    color:#233047;

    font-size:
        clamp(
            20px,
            2.1vw,
            28px
        );

    font-weight:950;

    line-height:1;

    letter-spacing:-.035em;

    transition:
        color .18s ease,
        transform .18s ease;
}


.event-density-inspector.is-active
.event-density-inspector-year{
    color:#1E40AF;
}


.event-density-inspector-copy{
    max-width:520px;

    margin-top:5px;

    color:#737f8e;

    font-size:9px;

    line-height:1.45;
}


/* =========================================
   INSPECTOR STATS
========================================= */

.event-density-inspector-stats{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(3,auto);

    align-items:stretch;

    gap:6px;
}


.event-density-inspector-stat{
    display:flex;

    min-width:85px;

    padding:
        8px 10px;

    flex-direction:column;

    justify-content:center;

    border:
        1px solid
        rgba(30,64,175,.065);

    border-radius:10px;

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

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.85);
}


.event-density-inspector-stat span{
    margin-bottom:2px;

    color:#8993a0;

    font-size:6px;
    font-weight:850;

    letter-spacing:.10em;

    text-transform:uppercase;
}


.event-density-inspector-stat strong{
    color:#354153;

    font-size:11px;
    font-weight:900;

    white-space:nowrap;
}


.event-density-inspector.is-active
.event-density-inspector-stat strong{
    color:#1f4b9e;
}


/* =========================================
   OPEN YEAR ACTION
========================================= */

.event-density-inspector-open{
    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:115px;

    min-height:38px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(30,64,175,.10);

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.90),
            rgba(239,245,255,.90)
        );

    color:#1E40AF;

    box-shadow:
        0 4px 13px
        rgba(30,64,175,.055);

    font-size:8px;
    font-weight:900;

    letter-spacing:.025em;

    text-decoration:none;

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


.event-density-inspector-open:hover{
    border-color:
        rgba(30,64,175,.18);

    background:
        rgba(230,239,255,.96);

    box-shadow:
        0 8px 19px
        rgba(30,64,175,.09);

    transform:
        translateY(-1px);
}


.event-density-inspector-open span{
    font-size:12px;

    transition:
        transform .16s ease;
}


.event-density-inspector-open:hover span{
    transform:
        translateX(2px);
}


.event-density-inspector-open:focus-visible{
    outline:
        3px solid
        rgba(37,99,235,.18);

    outline-offset:2px;
}


/* =========================================
   INSPECTED GRAPH BAR
========================================= */

.event-density-bar.is-inspected
.event-density-bar-column{
    width:19px;

    opacity:1;

    transform:
        translateY(-4px);

    box-shadow:
        0 11px 22px
        rgba(30,64,175,.19),
        0 0 0 5px
        rgba(59,130,246,.05),
        inset 0 1px 0
        rgba(255,255,255,.38);
}


.event-density-bar.is-inspected
.event-density-bar-year{
    color:#1E40AF;

    font-size:9px;

    font-weight:950;
}


/*
 * Selected years remain gold even while inspected.
 */

.event-density-bar.is-selected.is-inspected
.event-density-bar-column{
    background:
        linear-gradient(
            180deg,
            #e3bd72 0%,
            #c6963f 38%,
            #9c6e22 100%
        );

    box-shadow:
        0 11px 24px
        rgba(155,112,38,.24),
        0 0 0 5px
        rgba(185,137,53,.08),
        inset 0 1px 0
        rgba(255,255,255,.46);
}


.event-density-bar.is-selected.is-inspected
.event-density-bar-year{
    color:#8b621d;
}


/* =========================================
   SPOTLIGHT TABLET
========================================= */

@media (max-width:920px){

    .event-density-inspector{
        grid-template-columns:
            1fr
            auto;

        gap:
            13px 18px;
    }


    .event-density-inspector-main{
        grid-column:
            1 / 2;
    }


    .event-density-inspector-stats{
        grid-column:
            1 / -1;

        grid-row:
            2;
    }


    .event-density-inspector-open{
        grid-column:
            2;

        grid-row:
            1;
    }

}


/* =========================================
   SPOTLIGHT MOBILE
========================================= */

@media (max-width:600px){

    .event-density-inspector{
        display:flex;

        align-items:stretch;

        flex-direction:column;

        gap:11px;

        padding:13px;

        border-radius:13px;
    }


    .event-density-inspector-year{
        font-size:23px;
    }


    .event-density-inspector-copy{
        font-size:8px;
    }


    .event-density-inspector-stats{
        width:100%;

        grid-template-columns:
            repeat(3,1fr);
    }


    .event-density-inspector-stat{
        min-width:0;

        padding:
            7px 6px;
    }


    .event-density-inspector-stat strong{
        font-size:9px;
    }


    .event-density-inspector-open{
        width:100%;
    }

}


/* =========================================
   SPOTLIGHT REDUCED MOTION
========================================= */

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

    .event-density-inspector,
    .event-density-inspector::before,
    .event-density-inspector-year,
    .event-density-inspector-open,
    .event-density-inspector-open span,
    .event-density-bar.is-inspected
    .event-density-bar-column{
        transition:none;
    }


    .event-density-inspector-open:hover,
    .event-density-bar.is-inspected
    .event-density-bar-column{
        transform:none;
    }

}


/* =========================================
   HISTORICAL CENTURY RULER
========================================= */

.event-density-century-layer{
    position:absolute;

    z-index:1;

    top:0;
    bottom:0;
    left:0;

    width:100%;

    pointer-events:none;
}


.event-density-century-layer[hidden]{
    display:none;
}


/* =========================================
   CENTURY MARKER
========================================= */

.event-density-century{
    position:absolute;

    top:0;
    bottom:0;

    width:1px;

    pointer-events:none;
}


/*
 * Vertical century line.
 */

.event-density-century-line{
    position:absolute;

    top:34px;
    bottom:46px;
    left:0;

    width:1px;

    background:
        linear-gradient(
            180deg,
            rgba(42,64,102,.18),
            rgba(42,64,102,.08) 45%,
            rgba(42,64,102,.12)
        );

    box-shadow:
        1px 0 0
        rgba(255,255,255,.45);
}


/* =========================================
   CENTURY LABEL
========================================= */

.event-density-century-label{
    position:absolute;

    top:12px;
    left:0;

    min-width:max-content;

    padding:
        3px 6px;

    border:
        1px solid
        rgba(30,64,175,.07);

    border-radius:6px;

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

    color:#7b8798;

    box-shadow:
        0 3px 10px
        rgba(30,41,59,.035);

    font-size:7px;
    font-weight:900;

    line-height:1;

    letter-spacing:.08em;

    transform:
        translateX(-50%);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


/* =========================================
   MAJOR CENTURY PRESENCE
========================================= */

.event-density-century:nth-child(5n)
.event-density-century-line{
    background:
        linear-gradient(
            180deg,
            rgba(185,137,53,.26),
            rgba(185,137,53,.10) 48%,
            rgba(185,137,53,.14)
        );
}


.event-density-century:nth-child(5n)
.event-density-century-label{
    border-color:
        rgba(185,137,53,.13);

    background:
        rgba(255,251,241,.90);

    color:#8b682a;
}


/* =========================================
   EARLIEST HISTORICAL BOUNDARY
========================================= */

.event-density-century-boundary
.event-density-century-line{
    width:2px;

    background:
        linear-gradient(
            180deg,
            rgba(185,137,53,.42),
            rgba(185,137,53,.13)
        );
}


.event-density-century-boundary
.event-density-century-label{
    border-color:
        rgba(185,137,53,.18);

    background:
        rgba(255,249,235,.94);

    color:#876321;

    box-shadow:
        0 4px 12px
        rgba(139,101,31,.07);
}


/* =========================================
   KEEP EVENT BARS ABOVE THE RULER
========================================= */

.graph-page .event-density-bar{
    position:relative;

    z-index:3;
}


/*
 * Bar hover should visually dominate the
 * historical ruler beneath it.
 */

.graph-page
.event-density-bar:hover{
    z-index:8;
}


.graph-page
.event-density-bar.is-inspected{
    z-index:8;
}


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

/*
 * The century ruler gets softer toward the
 * bottom so event bars remain the main focus.
 */

.event-density-century::after{
    content:'';

    position:absolute;

    left:-2px;
    bottom:43px;

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        rgba(30,64,175,.15);

    box-shadow:
        0 0 0 3px
        rgba(30,64,175,.025);
}


.event-density-century:nth-child(5n)::after{
    background:
        rgba(185,137,53,.28);

    box-shadow:
        0 0 0 4px
        rgba(185,137,53,.04);
}


/* =========================================
   CENTURY RULER MOBILE
========================================= */

@media (max-width:600px){

    .event-density-century-label{
        top:9px;

        padding:
            3px 4px;

        font-size:6px;
    }


    .event-density-century-line{
        top:28px;
    }


    .event-density-century::after{
        width:4px;
        height:4px;

        left:-1.5px;
    }

}


/* =========================================
   JUMP TO YEAR
========================================= */

.event-density-year-jump{
    display:flex;
    align-items:center;

    gap:8px;

    margin-left:auto;
}


.event-density-year-jump-label{
    color:#7b8797;

    font-size:7px;
    font-weight:900;

    letter-spacing:.10em;

    text-transform:uppercase;

    white-space:nowrap;
}


.event-density-year-jump-field{
    display:flex;
    align-items:center;

    gap:4px;

    padding:3px;

    border:
        1px solid
        rgba(30,64,175,.09);

    border-radius:9px;

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

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.9);
}


.event-density-year-jump-input{
    width:84px;
    height:27px;

    padding:
        0 8px;

    border:0;

    border-radius:6px;

    outline:none;

    background:
        transparent;

    color:#243042;

    font-family:inherit;

    font-size:9px;
    font-weight:850;

    text-align:center;
}


.event-density-year-jump-input::placeholder{
    color:#a1a9b3;

    font-weight:650;
}


.event-density-year-jump-input:focus{
    background:
        rgba(30,64,175,.045);

    box-shadow:
        inset 0 0 0 1px
        rgba(30,64,175,.10);
}


.event-density-year-jump-button{
    height:27px;

    min-width:34px;

    padding:
        0 8px;

    border:
        1px solid
        rgba(30,64,175,.10);

    border-radius:6px;

    background:
        linear-gradient(
            180deg,
            #315fc5,
            #1E40AF
        );

    color:#fff;

    font-family:inherit;

    font-size:8px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 3px 9px
        rgba(30,64,175,.14);

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


.event-density-year-jump-button:hover{
    background:
        linear-gradient(
            180deg,
            #3b6cd4,
            #2448b4
        );

    box-shadow:
        0 5px 13px
        rgba(30,64,175,.20);

    transform:
        translateY(-1px);
}


.event-density-year-jump-button:active{
    transform:
        translateY(0);
}


.event-density-year-jump-button:focus-visible{
    outline:
        3px solid
        rgba(37,99,235,.20);

    outline-offset:2px;
}


/* Remove browser number arrows where supported */

.event-density-year-jump-input::-webkit-inner-spin-button,
.event-density-year-jump-input::-webkit-outer-spin-button{
    margin:0;

    -webkit-appearance:none;
}


.event-density-year-jump-input{
    -moz-appearance:textfield;
}


/* =========================================
   TOOLBAR LAYOUT WITH YEAR JUMP
========================================= */

.graph-page .event-density-controls{
    flex-wrap:wrap;
}


.graph-page .event-density-position{
    flex:
        1 1 auto;
}


.event-density-peak{
    color:#8b651f;

    background:
        rgba(255,249,235,.75);
}


.event-density-peak:hover:not(:disabled){
    border-color:
        rgba(185,137,53,.16);

    background:
        rgba(255,244,219,.95);

    color:#79571c;

    box-shadow:
        0 4px 12px
        rgba(155,112,38,.08);
}


/* =========================================
   JUMP TO YEAR — TABLET
========================================= */

@media (max-width:850px){

    .event-density-year-jump{
        margin-left:0;
    }

}


/* =========================================
   JUMP TO YEAR — MOBILE
========================================= */

@media (max-width:600px){

    .event-density-year-jump{
        width:100%;

        justify-content:space-between;

        margin-left:0;
    }


    .event-density-year-jump-field{
        flex:
            1 1 auto;

        max-width:175px;
    }


    .event-density-year-jump-input{
        flex:
            1 1 auto;

        width:auto;
    }


    .event-density-year-jump-button{
        flex:
            0 0 auto;
    }

}


/* =========================================
   JUMP TO YEAR — REDUCED MOTION
========================================= */

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

    .event-density-year-jump-button{
        transition:none;
    }


    .event-density-year-jump-button:hover{
        transform:none;
    }

}


/* =========================================
   TOP YEARS RIBBON
========================================= */

.event-density-top-years{
    display:grid;

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

    align-items:center;

    gap:16px;

    margin:
        0 0
        13px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(185,137,53,.12);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,252,244,.88),
            rgba(255,255,255,.78)
        );

    box-shadow:
        0 6px 22px
        rgba(87,66,28,.035),
        inset 0 1px 0
        rgba(255,255,255,.92);
}


/* =========================================
   TOP YEARS HEADING
========================================= */

.event-density-top-years-heading{
    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:125px;
}


.event-density-top-years-heading span{
    color:#8a6423;

    font-size:8px;
    font-weight:950;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.event-density-top-years-heading small{
    color:#939aa4;

    font-size:7px;
    font-weight:700;
}


/* =========================================
   TOP YEARS LIST
========================================= */

.event-density-top-years-list{
    display:flex;
    align-items:stretch;

    gap:6px;

    min-width:0;

    overflow-x:auto;

    scrollbar-width:thin;
}


/* =========================================
   TOP YEAR CARD
========================================= */

.event-density-top-year{
    position:relative;

    flex:
        1 1 0;

    min-width:115px;

    display:grid;

    grid-template-columns:
        auto
        1fr;

    grid-template-areas:
        "rank year"
        "count share";

    align-items:center;

    gap:
        3px 8px;

    padding:
        8px 9px;

    border:
        1px solid
        rgba(185,137,53,.09);

    border-radius:10px;

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

    color:#3a4656;

    text-decoration:none;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.82);

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


.event-density-top-year:hover{
    border-color:
        rgba(185,137,53,.18);

    background:
        rgba(255,249,235,.96);

    box-shadow:
        0 7px 17px
        rgba(139,101,31,.08);

    transform:
        translateY(-2px);
}


/* =========================================
   RANK
========================================= */

.event-density-top-year-rank{
    grid-area:rank;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:24px;
    height:18px;

    padding:
        0 5px;

    border-radius:999px;

    background:
        rgba(185,137,53,.10);

    color:#8b651f;

    font-size:7px;
    font-weight:950;

    line-height:1;
}


/* =========================================
   YEAR
========================================= */

.event-density-top-year > strong{
    grid-area:year;

    color:#2a3546;

    font-size:12px;
    font-weight:950;

    letter-spacing:-.01em;
}


/* =========================================
   COUNT
========================================= */

.event-density-top-year-count{
    grid-area:count;

    color:#7e8793;

    font-size:7px;
    font-weight:750;

    white-space:nowrap;
}


/* =========================================
   SHARE
========================================= */

.event-density-top-year-share{
    grid-area:share;

    justify-self:end;

    color:#1E40AF;

    font-size:7px;
    font-weight:900;

    white-space:nowrap;
}


/* =========================================
   FIRST PLACE
========================================= */

.event-density-top-year:first-child{
    border-color:
        rgba(185,137,53,.20);

    background:
        linear-gradient(
            145deg,
            rgba(255,250,237,.98),
            rgba(255,255,255,.84)
        );

    box-shadow:
        0 6px 16px
        rgba(139,101,31,.055),
        inset 0 1px 0
        rgba(255,255,255,.95);
}


.event-density-top-year:first-child
.event-density-top-year-rank{
    background:
        linear-gradient(
            180deg,
            #d9b05f,
            #b98935
        );

    color:#fff;

    box-shadow:
        0 3px 8px
        rgba(155,112,38,.16);
}


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

.event-density-top-year:focus-visible{
    outline:
        3px solid
        rgba(185,137,53,.18);

    outline-offset:2px;
}


/* =========================================
   TOP YEARS SCROLLBAR
========================================= */

.event-density-top-years-list::-webkit-scrollbar{
    height:5px;
}


.event-density-top-years-list::-webkit-scrollbar-track{
    background:
        rgba(185,137,53,.025);

    border-radius:999px;
}


.event-density-top-years-list::-webkit-scrollbar-thumb{
    background:
        rgba(185,137,53,.15);

    border-radius:999px;
}


/* =========================================
   TOP YEARS TABLET
========================================= */

@media (max-width:900px){

    .event-density-top-years{
        grid-template-columns:
            1fr;

        gap:8px;
    }


    .event-density-top-years-heading{
        min-width:0;
    }


    .event-density-top-year{
        flex:
            0 0 125px;
    }

}


/* =========================================
   TOP YEARS MOBILE
========================================= */

@media (max-width:600px){

    .event-density-top-years{
        padding:
            9px;

        border-radius:12px;
    }


    .event-density-top-years-list{
        gap:5px;
    }


    .event-density-top-year{
        flex:
            0 0 118px;

        min-width:118px;

        padding:
            7px 8px;
    }

}


/* =========================================
   TOP YEARS REDUCED MOTION
========================================= */

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

    .event-density-top-year{
        transition:none;
    }


    .event-density-top-year:hover{
        transform:none;
    }

}


/* =========================================
   HISTORICAL ERAS
========================================= */

.event-density-eras{
    display:grid;

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

    align-items:center;

    gap:16px;

    margin:
        0 0
        13px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(30,64,175,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(245,249,255,.82),
            rgba(255,255,255,.76)
        );

    box-shadow:
        0 6px 22px
        rgba(30,41,59,.03),
        inset 0 1px 0
        rgba(255,255,255,.92);
}


/* =========================================
   ERAS HEADING
========================================= */

.event-density-eras-heading{
    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:125px;
}


.event-density-eras-heading span{
    color:#34599e;

    font-size:8px;
    font-weight:950;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.event-density-eras-heading small{
    color:#929ba7;

    font-size:7px;
    font-weight:700;
}


/* =========================================
   ERA RAIL
========================================= */

.event-density-eras-list{
    display:flex;
    align-items:stretch;

    gap:5px;

    min-width:0;

    padding:
        1px 0;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:thin;

    scroll-behavior:smooth;
}


/* =========================================
   ERA BUTTON
========================================= */

.event-density-era{
    position:relative;

    flex:
        0 0 auto;

    min-width:92px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;
    justify-content:center;

    gap:2px;

    padding:
        7px 9px;

    border:
        1px solid
        rgba(30,64,175,.075);

    border-radius:9px;

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

    color:#435066;

    font-family:inherit;

    text-align:left;

    cursor:pointer;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.88);

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


.event-density-era:hover{
    border-color:
        rgba(30,64,175,.16);

    background:
        rgba(238,244,255,.94);

    box-shadow:
        0 6px 15px
        rgba(30,64,175,.07);

    transform:
        translateY(-2px);
}


/* =========================================
   ERA CENTURY
========================================= */

.event-density-era strong{
    color:#293b5d;

    font-size:11px;
    font-weight:950;

    letter-spacing:-.015em;
}


/* =========================================
   ERA EVENT COUNT
========================================= */

.event-density-era > span{
    color:#1E40AF;

    font-size:7px;
    font-weight:850;

    white-space:nowrap;
}


/* =========================================
   ERA ACTIVE YEARS
========================================= */

.event-density-era > small{
    color:#929ba7;

    font-size:6px;
    font-weight:700;

    white-space:nowrap;
}


/* =========================================
   ERA TIME MARKER
========================================= */

.event-density-era::after{
    content:'';

    position:absolute;

    right:8px;
    bottom:7px;

    width:4px;
    height:4px;

    border-radius:50%;

    background:
        rgba(30,64,175,.17);

    box-shadow:
        0 0 0 3px
        rgba(30,64,175,.025);
}


.event-density-era:hover::after{
    background:
        rgba(30,64,175,.45);

    box-shadow:
        0 0 0 4px
        rgba(30,64,175,.055);
}


/* =========================================
   ACTIVE ERA
========================================= */

.event-density-era.is-active{
    border-color:
        rgba(185,137,53,.23);

    background:
        linear-gradient(
            145deg,
            rgba(255,249,234,.98),
            rgba(255,255,255,.86)
        );

    box-shadow:
        0 7px 17px
        rgba(139,101,31,.07);
}


.event-density-era.is-active strong{
    color:#805c1d;
}


.event-density-era.is-active > span{
    color:#946b24;
}


.event-density-era.is-active::after{
    background:#b98935;

    box-shadow:
        0 0 0 4px
        rgba(185,137,53,.08);
}


/* =========================================
   ERA FOCUS
========================================= */

.event-density-era:focus-visible{
    outline:
        3px solid
        rgba(37,99,235,.17);

    outline-offset:2px;
}


/* =========================================
   ERA SCROLLBAR
========================================= */

.event-density-eras-list::-webkit-scrollbar{
    height:5px;
}


.event-density-eras-list::-webkit-scrollbar-track{
    background:
        rgba(30,64,175,.025);

    border-radius:999px;
}


.event-density-eras-list::-webkit-scrollbar-thumb{
    background:
        rgba(30,64,175,.14);

    border-radius:999px;
}


/* =========================================
   ERAS TABLET
========================================= */

@media (max-width:900px){

    .event-density-eras{
        grid-template-columns:
            1fr;

        gap:8px;
    }


    .event-density-eras-heading{
        min-width:0;
    }

}


/* =========================================
   ERAS MOBILE
========================================= */

@media (max-width:600px){

    .event-density-eras{
        padding:9px;

        border-radius:12px;
    }


    .event-density-era{
        min-width:88px;

        padding:
            7px 8px;
    }

}


/* =========================================
   ERAS REDUCED MOTION
========================================= */

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

    .event-density-eras-list{
        scroll-behavior:auto;
    }


    .event-density-era{
        transition:none;
    }


    .event-density-era:hover{
        transform:none;
    }

}


/* =========================================
   FULL HISTORY NAVIGATOR
========================================= */

.event-density-navigator{
    position:relative;

    margin:
        13px 1px
        2px;

    padding:
        10px 12px
        8px;

    border:
        1px solid
        rgba(30,64,175,.075);

    border-radius:13px;

    background:
        linear-gradient(
            180deg,
            rgba(250,252,255,.82),
            rgba(255,255,255,.72)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.94),
        0 5px 18px
        rgba(30,41,59,.025);
}


/* =========================================
   NAVIGATOR HEADER
========================================= */

.event-density-navigator-head{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:16px;

    margin-bottom:7px;
}


.event-density-navigator-title{
    display:flex;

    align-items:center;

    gap:6px;

    color:#3d506d;

    font-size:8px;
    font-weight:950;

    letter-spacing:.09em;

    text-transform:uppercase;
}


.event-density-navigator-title::before{
    content:'';

    width:14px;
    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #315fc5,
            #9cb8ed
        );
}


.event-density-navigator-range{
    display:flex;

    align-items:center;

    gap:6px;

    color:#7f8996;

    font-size:7px;
    font-weight:800;

    white-space:nowrap;
}


.event-density-navigator-range > span{
    color:#b0b7c0;

    font-size:9px;
}


/* =========================================
   NAVIGATOR TRACK
========================================= */

.event-density-navigator-track{
    position:relative;

    display:block;

    width:100%;
    height:28px;

    margin:0;
    padding:0;

    overflow:hidden;

    border:
        1px solid
        rgba(30,64,175,.075);

    border-radius:9px;

    background:
        linear-gradient(
            180deg,
            rgba(240,245,253,.68),
            rgba(250,252,255,.88)
        );

    cursor:pointer;

    box-shadow:
        inset 0 1px 3px
        rgba(30,41,59,.025);

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


.event-density-navigator-track:hover{
    border-color:
        rgba(30,64,175,.14);

    background:
        linear-gradient(
            180deg,
            rgba(235,242,254,.82),
            rgba(250,252,255,.96)
        );

    box-shadow:
        inset 0 1px 3px
        rgba(30,41,59,.035),
        0 4px 12px
        rgba(30,64,175,.035);
}


.event-density-navigator-track:focus-visible{
    outline:
        3px solid
        rgba(37,99,235,.17);

    outline-offset:2px;
}


/* =========================================
   COMPLETE HISTORY LINE
========================================= */

.event-density-navigator-line{
    position:absolute;

    top:50%;
    right:11px;
    left:11px;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            rgba(30,64,175,.42),
            rgba(59,130,246,.22) 35%,
            rgba(185,137,53,.18) 72%,
            rgba(185,137,53,.38)
        );

    transform:
        translateY(-50%);

    box-shadow:
        0 1px 0
        rgba(255,255,255,.8);
}


/*
 * Small historical tick texture.
 */

.event-density-navigator-line::after{
    content:'';

    position:absolute;

    inset:
        -4px 0;

    opacity:.35;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 39px,
            rgba(61,80,109,.22) 39px,
            rgba(61,80,109,.22) 40px
        );
}


/* =========================================
   CURRENT VIEWPORT WINDOW
========================================= */

.event-density-navigator-window{
    position:absolute;

    z-index:3;

    top:4px;
    bottom:4px;

    left:0;

    width:100%;

    min-width:18px;

    border:
        1px solid
        rgba(30,64,175,.32);

    border-radius:6px;

    background:
        linear-gradient(
            180deg,
            rgba(87,135,229,.19),
            rgba(30,64,175,.11)
        );

    box-shadow:
        0 3px 8px
        rgba(30,64,175,.09),
        inset 0 1px 0
        rgba(255,255,255,.55);

    pointer-events:none;

    transition:
        left .08s linear,
        width .12s ease;
}


/*
 * Small center marker inside the viewport.
 */

.event-density-navigator-window::after{
    content:'';

    position:absolute;

    top:50%;
    left:50%;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#315fc5;

    box-shadow:
        0 0 0 3px
        rgba(49,95,197,.10);

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


/* =========================================
   FIT STATE
========================================= */

.event-density-navigator.is-fit
.event-density-navigator-window{
    border-color:
        rgba(185,137,53,.22);

    background:
        linear-gradient(
            180deg,
            rgba(224,192,125,.16),
            rgba(185,137,53,.08)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.6);
}


.event-density-navigator.is-fit
.event-density-navigator-window::after{
    background:#b98935;

    box-shadow:
        0 0 0 3px
        rgba(185,137,53,.09);
}


/* =========================================
   NAVIGATOR FOOTER
========================================= */

.event-density-navigator-foot{
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-top:5px;

    padding:
        0 3px;

    color:#a0a7b0;

    font-size:6px;
    font-weight:800;

    letter-spacing:.07em;

    text-transform:uppercase;
}


/* =========================================
   NAVIGATOR ENDPOINTS
========================================= */

.event-density-navigator-track::before,
.event-density-navigator-track::after{
    content:'';

    position:absolute;

    z-index:2;

    top:50%;

    width:6px;
    height:6px;

    border-radius:50%;

    transform:
        translateY(-50%);
}


.event-density-navigator-track::before{
    left:8px;

    background:#315fc5;

    box-shadow:
        0 0 0 3px
        rgba(49,95,197,.07);
}


.event-density-navigator-track::after{
    right:8px;

    background:#b98935;

    box-shadow:
        0 0 0 3px
        rgba(185,137,53,.07);
}


/* =========================================
   NAVIGATOR MOBILE
========================================= */

@media (max-width:600px){

    .event-density-navigator{
        padding:
            9px 9px
            7px;

        border-radius:11px;
    }


    .event-density-navigator-head{
        gap:8px;
    }


    .event-density-navigator-title{
        font-size:7px;
    }


    .event-density-navigator-range{
        font-size:6px;
    }


    .event-density-navigator-track{
        height:30px;
    }


    .event-density-navigator-foot{
        font-size:5px;
    }

}


/* =========================================
   NAVIGATOR REDUCED MOTION
========================================= */

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

    .event-density-navigator-track,
    .event-density-navigator-window{
        transition:none;
    }

}


/* =========================================
   HISTORICAL TIME LENS
========================================= */

.event-density-history-cursor{
    position:absolute;

    z-index:20;

    top:0;
    bottom:0;

    width:1px;

    pointer-events:none;
}


.event-density-history-cursor[hidden]{
    display:none;
}


/* =========================================
   TIME LENS LINE
========================================= */

.event-density-history-cursor-line{
    position:absolute;

    top:34px;
    bottom:45px;
    left:0;

    width:1px;

    background:
        linear-gradient(
            180deg,
            rgba(49,95,197,.10),
            rgba(49,95,197,.60) 24%,
            rgba(49,95,197,.34) 72%,
            rgba(49,95,197,.08)
        );

    box-shadow:
        0 0 8px
        rgba(49,95,197,.10);

    transform:
        translateX(-50%);
}


/*
 * Precise point where the cursor meets
 * the historical baseline.
 */

.event-density-history-cursor-line::after{
    content:'';

    position:absolute;

    bottom:-3px;
    left:50%;

    width:7px;
    height:7px;

    border:
        2px solid
        rgba(255,255,255,.95);

    border-radius:50%;

    background:#315fc5;

    box-shadow:
        0 0 0 3px
        rgba(49,95,197,.10),
        0 3px 9px
        rgba(30,64,175,.14);

    transform:
        translateX(-50%);
}


/* =========================================
   FLOATING YEAR LABEL
========================================= */

.event-density-history-cursor-label{
    position:absolute;

    top:42px;
    left:9px;

    display:flex;

    min-width:112px;

    padding:
        8px 10px;

    flex-direction:column;

    gap:2px;

    border:
        1px solid
        rgba(30,64,175,.14);

    border-radius:10px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(240,246,255,.95)
        );

    box-shadow:
        0 11px 28px
        rgba(30,41,59,.12),
        0 3px 8px
        rgba(30,64,175,.05),
        inset 0 1px 0
        rgba(255,255,255,.98);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transform:
        translateY(-50%);

    white-space:nowrap;
}


/* Little pointer toward the vertical line */

.event-density-history-cursor-label::before{
    content:'';

    position:absolute;

    top:50%;
    left:-5px;

    width:8px;
    height:8px;

    border-left:
        1px solid
        rgba(30,64,175,.14);

    border-bottom:
        1px solid
        rgba(30,64,175,.14);

    background:
        rgba(248,251,255,.98);

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* =========================================
   YEAR
========================================= */

.event-density-history-cursor-year{
    color:#1E40AF;

    font-size:16px;
    font-weight:950;

    line-height:1;

    letter-spacing:-.025em;
}


/* =========================================
   CURSOR NOTE
========================================= */

.event-density-history-cursor-note{
    color:#8a94a2;

    font-size:7px;
    font-weight:800;

    letter-spacing:.025em;
}


/* =========================================
   YEAR WITH MATCHING EVENTS
========================================= */

.event-density-history-cursor.has-events
.event-density-history-cursor-label{
    border-color:
        rgba(185,137,53,.20);

    background:
        linear-gradient(
            145deg,
            rgba(255,252,243,.98),
            rgba(255,247,227,.95)
        );

    box-shadow:
        0 12px 28px
        rgba(139,101,31,.11),
        inset 0 1px 0
        rgba(255,255,255,.98);
}


.event-density-history-cursor.has-events
.event-density-history-cursor-label::before{
    border-color:
        rgba(185,137,53,.20);

    background:
        rgba(255,250,237,.98);
}


.event-density-history-cursor.has-events
.event-density-history-cursor-year{
    color:#8b621d;
}


.event-density-history-cursor.has-events
.event-density-history-cursor-line{
    background:
        linear-gradient(
            180deg,
            rgba(185,137,53,.10),
            rgba(185,137,53,.65) 24%,
            rgba(185,137,53,.38) 72%,
            rgba(185,137,53,.08)
        );

    box-shadow:
        0 0 10px
        rgba(185,137,53,.12);
}


.event-density-history-cursor.has-events
.event-density-history-cursor-line::after{
    background:#b98935;

    box-shadow:
        0 0 0 3px
        rgba(185,137,53,.12),
        0 3px 9px
        rgba(139,101,31,.14);
}


/* =========================================
   SCREEN EDGE PROTECTION
========================================= */

/*
 * Near the right edge, place the label on the
 * opposite side of the cursor.
 */

.event-density-history-cursor.is-near-right
.event-density-history-cursor-label{
    right:9px;
    left:auto;
}


.event-density-history-cursor.is-near-right
.event-density-history-cursor-label::before{
    right:-5px;
    left:auto;

    border-top:
        1px solid
        rgba(30,64,175,.14);

    border-right:
        1px solid
        rgba(30,64,175,.14);

    border-bottom:0;
    border-left:0;
}


.event-density-history-cursor.has-events.is-near-right
.event-density-history-cursor-label::before{
    border-color:
        rgba(185,137,53,.20);
}


/*
 * Near the left edge, keep the label safely
 * inside the visible chart.
 */

.event-density-history-cursor.is-near-left
.event-density-history-cursor-label{
    left:9px;
}


/* =========================================
   CURSOR REVEAL
========================================= */

@keyframes eventDensityCursorReveal{

    from{
        opacity:0;

        transform:
            translateY(-50%)
            translateX(-3px);
    }

    to{
        opacity:1;

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

}


.event-density-history-cursor:not([hidden])
.event-density-history-cursor-label{
    animation:
        eventDensityCursorReveal
        .12s ease-out
        both;
}


/* =========================================
   TIME LENS MOBILE
========================================= */

@media (max-width:600px){

    /*
     * Touch devices primarily use tap inspection,
     * so the time lens stays out of the way.
     */

    .event-density-history-cursor{
        display:none;
    }

}


/* =========================================
   TIME LENS REDUCED MOTION
========================================= */

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

    .event-density-history-cursor-label{
        animation:none !important;
    }

}