/* =========================================================
   JAMAICA ELECTORAL ANALYTICS
   C — VOTE SHARE

   Collapsed panel only.

   Owns:
   - loading / empty state
   - summary
   - legend
   - Election mode
   - Compare mode
   - To Date / trend chart
   - note
   - responsive presentation

   Does NOT own:
   - shared panel shell
   - panel height
   - vertical panel scrolling
   - expanded Vote Share Study

   Expanded study belongs in:
   dashboardVoteShareStudy.css
   ========================================================= */


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

.dashboard-panel__body--vote-share {
    display: block;

    padding:
        0.7rem
        0.8rem
        0.65rem;
}


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

.vote-share-chart {
    width: 100%;
    min-width: 0;
    min-height: 100%;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.vote-share-chart__loading,
.vote-share-chart__empty {
    flex: 1;

    min-height: 190px;

    display: flex;

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

    padding: 1rem;

    color:
        var(--text-muted);

    font-size:
        0.58rem;

    font-weight:
        650;

    line-height:
        1.4;

    text-align:
        center;
}


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

.vote-share-chart__summary {
    flex: 0 0 auto;

    display: flex;

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

    flex-wrap: wrap;

    gap:
        0.25rem
        0.8rem;

    min-height:
        24px;

    margin-bottom:
        0.25rem;
}


.vote-share-chart__summary-item {
    display:
        inline-flex;

    align-items:
        baseline;

    gap:
        0.22rem;
}


.vote-share-chart__summary-label {
    color:
        var(--text-muted);

    font-size:
        0.5rem;

    font-weight:
        700;

    line-height:
        1.2;
}


.vote-share-chart__summary-value {
    color:
        var(--text-primary);

    font-size:
        0.78rem;

    font-weight:
        800;

    line-height:
        1.1;

    font-variant-numeric:
        tabular-nums;
}


.vote-share-chart__summary-value--jlp {
    color:
        #16875d;
}


.vote-share-chart__summary-value--pnp {
    color:
        #f47a23;
}


/* =========================================================
   LEGEND
   ========================================================= */

.vote-share-chart__legend {
    flex: 0 0 auto;

    display: flex;

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

    flex-wrap: wrap;

    gap:
        0.35rem
        0.75rem;

    min-height:
        18px;

    margin-bottom:
        0.25rem;
}


.vote-share-chart__legend-item {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.24rem;

    color:
        var(--text-secondary);

    font-size:
        0.52rem;

    font-weight:
        700;

    line-height:
        1;
}


.vote-share-chart__legend-mark {
    width:
        8px;

    height:
        8px;

    flex:
        0 0 8px;

    border-radius:
        2px;
}


.vote-share-chart__legend-mark--jlp {
    background:
        #16875d;
}


.vote-share-chart__legend-mark--pnp {
    background:
        #f47a23;
}


.vote-share-chart__legend-mark--other {
    background:
        var(--text-muted);
}


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

.vote-share-individual {
    width: 100%;

    min-width: 0;

    padding-top:
        0.15rem;
}


.vote-share-individual__year {
    margin-bottom:
        0.65rem;

    color:
        var(--text-secondary);

    font-size:
        0.56rem;

    font-weight:
        700;

    line-height:
        1.3;

    text-align:
        center;
}


/* =========================================================
   ELECTION MODE — BARS
   ========================================================= */

.vote-share-bars {
    display: grid;

    gap:
        0.55rem;
}


.vote-share-bar-row {
    display: grid;

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

    align-items:
        center;

    gap:
        0.45rem;

    min-width: 0;
}


.vote-share-bar-row__party {
    color:
        var(--text-secondary);

    font-size:
        0.54rem;

    font-weight:
        800;

    line-height:
        1;
}


.vote-share-bar-row__track {
    position: relative;

    width: 100%;
    height: 12px;

    overflow: hidden;

    border-radius:
        999px;

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


.vote-share-bar-row__fill {
    height: 100%;

    min-width: 2px;

    border-radius:
        inherit;

    transition:
        width
        180ms ease;
}


.vote-share-bar-row__fill--jlp {
    background:
        #16875d;
}


.vote-share-bar-row__fill--pnp {
    background:
        #f47a23;
}


.vote-share-bar-row__fill--other {
    background:
        var(--text-muted);
}


.vote-share-bar-row__value {
    color:
        var(--text-primary);

    font-size:
        0.54rem;

    font-weight:
        750;

    line-height:
        1;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


/* =========================================================
   ELECTION MODE — WINNER
   ========================================================= */

.vote-share-individual__winner {
    margin-top:
        0.7rem;

    padding:
        0.48rem
        0.55rem;

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

    border-radius:
        7px;

    color:
        var(--text-secondary);

    background:
        var(--surface-muted);

    font-size:
        0.52rem;

    font-weight:
        600;

    line-height:
        1.35;

    text-align:
        center;
}


.vote-share-individual__winner strong {
    color:
        var(--text-primary);

    font-weight:
        800;
}


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

.vote-share-compare {
    width: 100%;

    min-width: 0;

    padding-top:
        0.1rem;
}


/* =========================================================
   COMPARE — YEARS
   ========================================================= */

.vote-share-compare__years {
    display: flex;

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

    gap:
        0.8rem;

    margin-bottom:
        0.55rem;
}


.vote-share-compare__year {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.25rem;

    color:
        var(--text-secondary);

    font-size:
        0.52rem;

    font-weight:
        750;

    line-height:
        1;
}


.vote-share-compare__year-dot {
    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;
}


.vote-share-compare__year-dot--a {
    border:
        1px solid
        var(--text-muted);

    background:
        transparent;
}


.vote-share-compare__year-dot--b {
    background:
        var(--text-secondary);
}


/* =========================================================
   COMPARE — ROWS
   ========================================================= */

.vote-share-compare__rows {
    display: grid;

    gap:
        0.6rem;
}


.vote-share-compare-row {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        48px;

    align-items:
        center;

    gap:
        0.45rem;

    min-width: 0;
}


.vote-share-compare-row__party {
    color:
        var(--text-secondary);

    font-size:
        0.53rem;

    font-weight:
        800;

    line-height:
        1;
}


.vote-share-compare-row__bars {
    display: grid;

    gap:
        3px;

    min-width: 0;
}


.vote-share-compare-row__track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius:
        999px;

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


.vote-share-compare-row__fill {
    height: 100%;

    min-width:
        2px;

    border-radius:
        inherit;
}


.vote-share-compare-row__fill--jlp {
    background:
        #16875d;
}


.vote-share-compare-row__fill--pnp {
    background:
        #f47a23;
}


.vote-share-compare-row__fill--other {
    background:
        var(--text-muted);
}


/*
   Election A = lighter
   Election B = current / solid
*/

.vote-share-compare-row__fill--a {
    opacity:
        0.38;
}


.vote-share-compare-row__fill--b {
    opacity:
        1;
}


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

.vote-share-compare-row__delta {
    justify-self:
        end;

    color:
        var(--text-secondary);

    font-size:
        0.5rem;

    font-weight:
        750;

    line-height:
        1;

    text-align:
        right;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


.vote-share-compare-row__delta--up {
    color:
        var(--brand-green);
}


.vote-share-compare-row__delta--down {
    color:
        #c75b5b;
}


.vote-share-compare-row__delta--flat {
    color:
        var(--text-muted);
}


/* =========================================================
   COMPARE — EXPLANATION
   ========================================================= */

.vote-share-compare__values {
    display: flex;

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

    flex-wrap: wrap;

    gap:
        0.2rem
        0.65rem;

    margin-top:
        0.6rem;

    color:
        var(--text-muted);

    font-size:
        0.46rem;

    font-weight:
        600;

    line-height:
        1.3;
}


/* =========================================================
   TO DATE / TREND
   ========================================================= */

.vote-share-trend__canvas {
    width: 100%;

    min-width: 0;

    flex:
        1 0 auto;
}


.vote-share-trend__svg {
    width:
        100%;

    height:
        auto;

    max-height:
        178px;

    display:
        block;

    overflow:
        visible;
}


/* =========================================================
   TREND — GRID / AXIS
   ========================================================= */

.vote-share-trend__grid {
    stroke:
        var(--border);

    stroke-width:
        1;

    vector-effect:
        non-scaling-stroke;
}


.vote-share-trend__axis-label {
    fill:
        var(--text-muted);

    font-size:
        8px;

    font-weight:
        600;

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


/* =========================================================
   TREND — LATEST GUIDE
   ========================================================= */

.vote-share-trend__latest-guide {
    stroke:
        var(--border-strong);

    stroke-width:
        1;

    stroke-dasharray:
        3 3;

    opacity:
        0.7;

    vector-effect:
        non-scaling-stroke;
}


/* =========================================================
   TREND — SERIES
   ========================================================= */

.vote-share-trend__series {
    fill:
        none;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;
}


.vote-share-trend__series--jlp {
    stroke:
        #16875d;
}


.vote-share-trend__series--pnp {
    stroke:
        #f47a23;
}


.vote-share-trend__series--other {
    stroke:
        var(--text-muted);

    stroke-width:
        1.5;

    opacity:
        0.72;
}


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

.vote-share-trend__point {
    stroke-width:
        1.5;

    vector-effect:
        non-scaling-stroke;
}


.vote-share-trend__point--jlp {
    fill:
        var(--surface);

    stroke:
        #16875d;
}


.vote-share-trend__point--pnp {
    fill:
        var(--surface);

    stroke:
        #f47a23;
}


.vote-share-trend__point--other {
    fill:
        var(--surface);

    stroke:
        var(--text-muted);
}


/* =========================================================
   TREND — VALUE LABELS
   ========================================================= */

.vote-share-trend__value {
    font-family:
        var(--font-sans);

    font-size:
        8px;

    font-weight:
        750;

    text-anchor:
        middle;

    font-variant-numeric:
        tabular-nums;
}


.vote-share-trend__value--jlp {
    fill:
        #16875d;
}


.vote-share-trend__value--pnp {
    fill:
        #f47a23;
}


/* =========================================================
   TREND — YEAR LABELS
   ========================================================= */

.vote-share-trend__year {
    fill:
        var(--text-muted);

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

    font-size:
        8px;

    font-weight:
        650;

    text-anchor:
        middle;
}


.vote-share-trend__year--latest {
    fill:
        var(--text-primary);

    font-weight:
        800;
}


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

.vote-share-chart__note {
    flex:
        0 0 auto;

    margin-top:
        auto;

    padding-top:
        0.45rem;

    color:
        var(--text-muted);

    font-size:
        0.48rem;

    font-weight:
        500;

    line-height:
        1.35;

    text-align:
        center;
}


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

html[data-theme="dark"]
.vote-share-trend__point--jlp,
html[data-theme="dark"]
.vote-share-trend__point--pnp,
html[data-theme="dark"]
.vote-share-trend__point--other {
    fill:
        var(--surface);
}


html[data-theme="dark"]
.vote-share-individual__winner {
    background:
        var(--surface-muted);
}


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

@media (max-width: 800px) {

    .vote-share-trend__svg {
        max-height:
            185px;
    }

}


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

@media (max-width: 520px) {

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


    .vote-share-chart__summary {
        gap:
            0.2rem
            0.6rem;
    }


    .vote-share-bar-row {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            40px;
    }


    .vote-share-compare-row {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            46px;
    }


    .vote-share-trend__svg {
        min-width:
            300px;

        max-height:
            none;
    }

}