/* =========================================================
   JAMAICA ELECTORAL ANALYTICS
   D — TURNOUT

   Collapsed panel only.

   Owns:
   - headline
   - Election mode
   - Compare mode
   - To Date trend
   - chart presentation
   - note
   - responsive polish

   Does NOT own:
   - panel shell
   - panel height
   - vertical panel scrolling
   - expanded study
   - scope controls

   Shared shell:
   dashboardPanels.css
   ========================================================= */


/* =========================================================
   PANEL BODY
   ========================================================= */

.dashboard-panel__body--turnout {
    display: block;

    padding:
        0.7rem
        0.8rem
        0.65rem;
}


/* =========================================================
   ROOT
   ========================================================= */

.turnout-dynamic-chart {
    width: 100%;

    min-width: 0;
    min-height: 100%;

    display: flex;
    flex-direction: column;

    color:
        var(--text-secondary);
}


/* =========================================================
   HEADLINE
   ========================================================= */

.turnout-dynamic__headline {
    flex: 0 0 auto;

    min-height: 30px;

    display: flex;

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

    gap:
        0.45rem;

    margin-bottom:
        0.45rem;
}


.turnout-dynamic__headline-year {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        20px;

    padding:
        0
        0.42rem;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    color:
        var(--text-secondary);

    background:
        var(--surface-muted);

    font-size:
        0.5rem;

    font-weight:
        750;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;
}


.turnout-dynamic__headline-value {
    color:
        var(--text-primary);

    font-size:
        1rem;

    font-weight:
        820;

    line-height:
        1;

    letter-spacing:
        -0.035em;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   ELECTION MODE
   ========================================================= */

.turnout-dynamic__individual {
    width: 100%;

    min-width: 0;

    margin:
        auto
        0;

    padding:
        0.9rem
        0.2rem
        0.45rem;
}


/* =========================================================
   TURNOUT METER
   ========================================================= */

.turnout-dynamic__meter {
    position: relative;

    width:
        100%;

    height:
        17px;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        var(--surface-muted);

    box-shadow:
        inset
        0
        1px
        2px
        rgba(15, 23, 42, 0.025);
}


/* 50% reference */

.turnout-dynamic__meter::before {
    content: "";

    position: absolute;

    z-index: 2;

    top:
        2px;

    bottom:
        2px;

    left:
        50%;

    width:
        1px;

    background:
        var(--border-strong);

    opacity:
        0.65;

    pointer-events:
        none;
}


.turnout-dynamic__meter-fill {
    position: relative;

    z-index:
        1;

    height:
        100%;

    min-width:
        2px;

    overflow:
        hidden;

    border-radius:
        inherit;

    background:
        var(--brand-green);

    transition:
        width
        180ms ease;
}


/* restrained highlight */

.turnout-dynamic__meter-fill::after {
    content: "";

    position: absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0)
        );

    pointer-events:
        none;
}


/* =========================================================
   SCALE
   ========================================================= */

.turnout-dynamic__scale {
    display: grid;

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

    align-items:
        center;

    margin-top:
        0.35rem;

    color:
        var(--text-muted);

    font-size:
        0.46rem;

    font-weight:
        650;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;
}


.turnout-dynamic__scale span:nth-child(1) {
    text-align:
        left;
}


.turnout-dynamic__scale span:nth-child(2) {
    color:
        var(--text-secondary);

    text-align:
        center;
}


.turnout-dynamic__scale span:nth-child(3) {
    text-align:
        right;
}


/* =========================================================
   COMPARE MODE
   ========================================================= */

.turnout-compare {
    width:
        100%;

    min-width:
        0;

    display:
        grid;

    gap:
        0.5rem;

    margin:
        auto
        0;

    padding:
        0.35rem
        0
        0.25rem;
}


/* =========================================================
   COMPARE ROW
   ========================================================= */

.turnout-compare__row {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        46px;

    align-items:
        center;

    gap:
        0.5rem;

    min-width:
        0;

    padding:
        0.52rem
        0.55rem;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    background:
        var(--surface);

    transition:
        border-color
        var(--transition-fast),
        background-color
        var(--transition-fast);
}


.turnout-compare__row:hover {
    border-color:
        var(--border-strong);

    background:
        var(--surface-muted);
}


.turnout-compare__year {
    color:
        var(--text-secondary);

    font-size:
        0.52rem;

    font-weight:
        800;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   COMPARE TRACK
   ========================================================= */

.turnout-compare__track {
    position:
        relative;

    width:
        100%;

    height:
        10px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(--surface-muted);
}


.turnout-compare__track::after {
    content: "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    width:
        1px;

    background:
        var(--border-strong);

    opacity:
        0.5;
}


.turnout-compare__fill {
    position:
        relative;

    z-index:
        1;

    height:
        100%;

    min-width:
        2px;

    border-radius:
        inherit;

    background:
        var(--brand-green);
}


/* Election A */

.turnout-compare__fill--a {
    opacity:
        0.38;
}


/* Election B */

.turnout-compare__fill--b {
    opacity:
        1;
}


/* =========================================================
   COMPARE VALUE
   ========================================================= */

.turnout-compare__value {
    color:
        var(--text-primary);

    font-size:
        0.56rem;

    font-weight:
        800;

    line-height:
        1;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


/* =========================================================
   COMPARE DELTA
   ========================================================= */

.turnout-compare__delta {
    justify-self:
        center;

    min-width:
        78px;

    padding:
        0.3rem
        0.48rem;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    color:
        var(--text-secondary);

    background:
        var(--surface-muted);

    font-size:
        0.5rem;

    font-weight:
        800;

    line-height:
        1;

    text-align:
        center;

    font-variant-numeric:
        tabular-nums;
}


.turnout-compare__delta--up {
    color:
        var(--brand-green);

    border-color:
        color-mix(
            in srgb,
            var(--brand-green) 26%,
            var(--border)
        );

    background:
        var(--brand-green-soft);
}


.turnout-compare__delta--down {
    color:
        #b65c5c;

    border-color:
        color-mix(
            in srgb,
            #b65c5c 22%,
            var(--border)
        );

    background:
        color-mix(
            in srgb,
            #b65c5c 6%,
            var(--surface)
        );
}


.turnout-compare__delta--flat {
    color:
        var(--text-muted);
}


/* =========================================================
   TREND CANVAS
   ========================================================= */

.turnout-dynamic__canvas {
    position: relative;

    width:
        100%;

    min-width:
        0;

    flex:
        1 0 auto;

    padding:
        0.25rem
        0.15rem
        0;

    border-radius:
        7px;
}


/* =========================================================
   TREND SVG
   ========================================================= */

.turnout-dynamic__svg {
    width:
        100%;

    height:
        auto;

    max-height:
        180px;

    display:
        block;

    overflow:
        visible;
}


/* =========================================================
   TREND GRID
   ========================================================= */

.turnout-dynamic__grid {
    stroke:
        var(--border);

    stroke-width:
        1;

    opacity:
        0.8;

    vector-effect:
        non-scaling-stroke;
}


/* =========================================================
   TREND AXIS
   ========================================================= */

.turnout-dynamic__axis {
    fill:
        var(--text-muted);

    font-family:
        var(--font-sans);

    font-size:
        8px;

    font-weight:
        600;
}


/* =========================================================
   LATEST ELECTION GUIDE
   ========================================================= */

.turnout-dynamic__latest-guide {
    stroke:
        var(--brand-green);

    stroke-width:
        1;

    stroke-dasharray:
        3 3;

    opacity:
        0.35;

    vector-effect:
        non-scaling-stroke;
}


/* =========================================================
   TREND AREA
   ========================================================= */

.turnout-dynamic__area {
    fill:
        var(--brand-green-soft);

    opacity:
        0.62;
}


/* =========================================================
   TREND LINE
   ========================================================= */

.turnout-dynamic__series {
    fill:
        none;

    stroke:
        var(--brand-green);

    stroke-width:
        2.1;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


/* =========================================================
   TREND POINTS
   ========================================================= */

.turnout-dynamic__point {
    fill:
        var(--surface);

    stroke:
        var(--brand-green);

    stroke-width:
        1.6;

    vector-effect:
        non-scaling-stroke;

    transition:
        r
        var(--transition-fast);
}


/* =========================================================
   TREND VALUES
   ========================================================= */

.turnout-dynamic__value {
    fill:
        var(--brand-green);

    font-family:
        var(--font-sans);

    font-size:
        8px;

    font-weight:
        800;

    text-anchor:
        middle;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   TREND YEARS
   ========================================================= */

.turnout-dynamic__year {
    fill:
        var(--text-muted);

    font-family:
        var(--font-sans);

    font-size:
        8px;

    font-weight:
        650;

    text-anchor:
        middle;
}


.turnout-dynamic__year--latest {
    fill:
        var(--text-primary);

    font-weight:
        800;
}


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

.turnout-dynamic__note {
    flex:
        0 0 auto;

    margin-top:
        auto;

    padding-top:
        0.45rem;

    color:
        var(--text-muted);

    font-size:
        0.47rem;

    font-weight:
        500;

    line-height:
        1.35;

    text-align:
        center;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.turnout-dynamic__meter {
    box-shadow:
        none;
}


html[data-theme="dark"]
.turnout-dynamic__point {
    fill:
        var(--surface);
}


html[data-theme="dark"]
.turnout-compare__row:hover {
    background:
        var(--surface-muted);
}


html[data-theme="dark"]
.turnout-compare__delta--down {
    color:
        #db8585;
}


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

@media (max-width: 800px) {

    .turnout-dynamic__svg {
        max-height:
            185px;
    }


    .turnout-compare__row {
        padding:
            0.5rem;
    }

}


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

@media (max-width: 520px) {

    .dashboard-panel__body--turnout {
        padding:
            0.65rem
            0.7rem;
    }


    .turnout-dynamic__headline-value {
        font-size:
            0.9rem;
    }


    .turnout-dynamic__headline-year {
        font-size:
            0.48rem;
    }


    .turnout-compare__row {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            42px;

        gap:
            0.35rem;
    }


    .turnout-compare__delta {
        min-width:
            70px;
    }


    .turnout-dynamic__individual {
        padding-top:
            0.7rem;
    }


    .turnout-dynamic__svg {
        min-width:
            300px;

        max-height:
            none;
    }

}