/* =========================================================
   JAMAICA ELECTORAL ANALYTICS
   UPDATES / PATCH NOTES
   ========================================================= */


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

.updates-page {
    width: 100%;

    max-width: 1080px;

    margin:
        0
        auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.updates-intro {
    margin-bottom:
        1rem;
}


.updates-intro__title {
    margin:
        0.2rem
        0
        0;

    color:
        var(--text-primary);

    font-size:
        1.55rem;

    font-weight:
        800;

    letter-spacing:
        -0.025em;

    line-height:
        1.1;
}


.updates-intro__description {
    margin-top:
        0.35rem;

    color:
        var(--text-secondary);

    font-size:
        0.82rem;

    line-height:
        1.5;
}


/* =========================================================
   FEED
   ========================================================= */

.updates-feed {
    display:
        grid;

    gap:
        0.55rem;

    width:
        100%;
}


.updates-feed__loading,
.updates-feed__empty {
    padding:
        1rem;

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

    border-radius:
        var(--radius-lg);

    color:
        var(--text-secondary);

    background:
        var(--surface);

    font-size:
        0.8rem;
}


/* =========================================================
   UPDATE ENTRY
   ========================================================= */

.update-entry {
    width:
        100%;

    overflow:
        hidden;

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

    border-radius:
        12px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow-sm);

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


.update-entry.is-open {
    border-color:
        var(--border-strong);

    box-shadow:
        var(--shadow-md);
}


/* =========================================================
   TOGGLE
   ========================================================= */

.update-entry__toggle {
    width:
        100%;

    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        0.8rem
        1rem;

    border:
        0;

    color:
        var(--text-primary);

    background:
        transparent;

    cursor:
        pointer;

    font:
        inherit;

    text-align:
        left;

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


.update-entry__toggle:hover {
    background:
        var(--surface-soft);
}


.update-entry.is-open
.update-entry__toggle {
    background:
        var(--surface-soft);
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.update-entry__identity {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.28rem;
}


.update-entry__version {
    color:
        var(--text-primary);

    font-size:
        0.78rem;

    font-weight:
        800;

    white-space:
        nowrap;
}


.update-entry__separator {
    color:
        var(--text-muted);

    font-size:
        0.75rem;
}


.update-entry__title {
    min-width:
        0;

    color:
        var(--text-primary);

    font-size:
        0.78rem;

    font-weight:
        700;

    line-height:
        1.25;
}


/* =========================================================
   LATEST BADGE
   ========================================================= */

.update-entry__latest {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-left:
        0.25rem;

    padding:
        0.16rem
        0.38rem;

    border:
        1px solid
        rgba(
            53,
            103,
            212,
            0.16
        );

    border-radius:
        5px;

    color:
        var(--dashboard-accent);

    background:
        var(--dashboard-accent-soft);

    font-size:
        0.52rem;

    font-weight:
        800;

    letter-spacing:
        0.02em;

    text-transform:
        uppercase;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.update-entry__meta {
    flex:
        0
        0
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        0.8rem;
}


.update-entry__date {
    color:
        var(--text-secondary);

    font-size:
        0.68rem;

    font-weight:
        500;

    white-space:
        nowrap;
}


.update-entry__chevron {
    width:
        20px;

    height:
        20px;

    display:
        grid;

    place-items:
        center;

    flex:
        0
        0
        20px;

    color:
        var(--text-secondary);

    font-size:
        1rem;

    line-height:
        1;

    transform:
        rotate(
            0deg
        );

    transition:
        transform
        var(--transition-fast),
        color
        var(--transition-fast);
}


.update-entry.is-open
.update-entry__chevron {
    color:
        var(--dashboard-accent);

    transform:
        rotate(
            180deg
        );
}


/* =========================================================
   CONTENT
   ========================================================= */

.update-entry__content {
    padding:
        0.2rem
        1rem
        0.95rem;

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

    background:
        var(--surface);
}


.update-entry__content[hidden] {
    display:
        none;
}


/* =========================================================
   LIST
   ========================================================= */

.update-entry__list {
    margin:
        0.75rem
        0
        0;

    padding-left:
        1.2rem;

    color:
        var(--text-secondary);

    font-size:
        0.74rem;

    line-height:
        1.55;
}


.update-entry__list li {
    padding-left:
        0.08rem;
}


.update-entry__list li + li {
    margin-top:
        0.22rem;
}


.update-entry__list li::marker {
    color:
        var(--dashboard-accent);
}


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

.update-entry__toggle:focus-visible {
    outline:
        3px solid
        var(--focus-ring);

    outline-offset:
        -3px;
}


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

html[data-theme="dark"]
.update-entry {
    background:
        var(--surface);
}


html[data-theme="dark"]
.update-entry__toggle:hover,
html[data-theme="dark"]
.update-entry.is-open
.update-entry__toggle {
    background:
        var(--surface-soft);
}


html[data-theme="dark"]
.update-entry__latest {
    border-color:
        rgba(
            53,
            103,
            212,
            0.28
        );
}


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

@media (max-width: 760px) {

    .updates-page {
        max-width:
            none;
    }


    .update-entry__toggle {
        align-items:
            flex-start;

        padding:
            0.75rem
            0.8rem;
    }


    .update-entry__identity {
        gap:
            0.2rem;
    }


    .update-entry__meta {
        gap:
            0.45rem;
    }


    .update-entry__content {
        padding:
            0.15rem
            0.85rem
            0.85rem;
    }

}


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

@media (max-width: 520px) {

    .updates-intro__title {
        font-size:
            1.35rem;
    }


    .updates-intro__description {
        font-size:
            0.75rem;
    }


    .update-entry__toggle {
        min-height:
            58px;

        gap:
            0.6rem;
    }


    .update-entry__identity {
        display:
            block;
    }


    .update-entry__version {
        display:
            inline;
    }


    .update-entry__separator {
        display:
            inline;

        margin:
            0
            0.12rem;
    }


    .update-entry__title {
        display:
            inline;

        font-size:
            0.72rem;
    }


    .update-entry__latest {
        display:
            inline-flex;

        margin:
            0.35rem
            0
            0;
    }


    .update-entry__meta {
        align-self:
            flex-start;
    }


    .update-entry__date {
        font-size:
            0.58rem;
    }


    .update-entry__list {
        padding-left:
            1rem;

        font-size:
            0.7rem;
    }

}