:root {
    --black: #111111;
    --black-soft: #15161d;

    --blue: #2143BE;
    --blue-light: #4566E1;
    --purple: #5135B9;

    --white: #FFFFFF;
    --text: #F5F5F7;
    --muted: #9699A6;
    --muted-dark: #666976;

    --border: rgba(255,255,255,0.08);

    --max-width: 1200px;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(33,67,190,0.08),
            transparent 30%
        ),
        #101116;

    color: var(--text);

    font-family:
        "Montserrat",
        sans-serif;
}


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

.site-header {
    height: 78px;

    background: #111111;

    border-bottom:
        1px solid rgba(255,255,255,0.06);
}

.header-inner {
    max-width: var(--max-width);

    height: 100%;

    margin: 0 auto;

    padding: 0 24px;

    display: flex;

    align-items: center;
}


/*
    The supplied Playlist logo is the actual
    page branding.

    No navigation.
    No fake buttons.
    No duplicate Playlist title.
*/

.site-logo {
    display: block;

    width: auto;
    height: 47px;

    max-width: 210px;

    object-fit: contain;
}


/* =========================================================
   ON AIR STRIP
========================================================= */

.on-air-strip {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #1D328F 0%,
            #2143BE 42%,
            #4735B5 78%,
            #351A83 100%
        );

    border-bottom:
        1px solid rgba(255,255,255,0.10);
}


/*
    Very subtle texture inspired by the main
    Mile Zero site.
*/

.on-air-strip::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.08;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.2) 0,
            rgba(255,255,255,0.2) 1px,
            transparent 1px,
            transparent 4px
        );

    pointer-events: none;
}


/*
    Soft purple lighting.
*/

.on-air-strip::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -180px;
    top: -350px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.10),
            transparent 68%
        );

    pointer-events: none;
}


.on-air-inner {
    position: relative;

    z-index: 2;

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 24px;
}


/* =========================================================
   NOW PLAYING
========================================================= */

/*
    app.js already creates:

    .now-playing-inner
    .now-playing-art
    .now-playing-info
    .now-playing-title
    .now-playing-artist
    .now-playing-dj

    We're deliberately styling those existing elements
    rather than changing the JavaScript.
*/

.now-playing-card {
    width: 100%;

    background:
        rgba(20, 24, 85, 0.48);

    border:
        1px solid rgba(255,255,255,0.10);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.18);
}


.now-playing-inner {
    min-height: 150px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 12px;
}


/* ARTWORK */

.now-playing-art {
    width: 150px;
    height: 150px;

    flex-shrink: 0;

    display: block;

    object-fit: cover;

    border-radius: 0;

    background: #111;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.25);
}


/* TRACK INFO */

.now-playing-info {
    min-width: 0;

    flex: 1;
}


.now-playing-title {
    margin-bottom: 4px;

    color: #FFFFFF;

    font-size: clamp(24px, 3vw, 38px);

    line-height: 1;

    font-weight: 950;

    letter-spacing: -1px;
}


.now-playing-artist {
    margin-bottom: 14px;

    color:
        rgba(255,255,255,0.78);

    font-size: 17px;
}


.now-playing-dj {
    display: inline-block;

    padding: 7px 11px;

    background:
        rgba(0,0,0,0.20);

    border:
        1px solid rgba(255,255,255,0.10);

    color:
        rgba(255,255,255,0.70);

    font-size: 10px;

    font-weight: 700;
}


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

.content {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 52px 24px 80px;
}


/* =========================================================
   PLAYLIST HEADING
========================================================= */

.playlist-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.section-label {
    display: block;

    color:
        #6D82F3;

    font-size: 11px;

    font-weight: 950;

    letter-spacing: 2.5px;
}


.playlist-heading h1 {
    margin: 6px 0 0;

    color: #FFFFFF;

    font-size: 34px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -1px;
}


.last-updated {
    color:
        var(--muted-dark);

    font-size: 12px;

    white-space: nowrap;
}


/* =========================================================
   HISTORY
========================================================= */

.history-list {
    overflow: hidden;

    background:
        rgba(255,255,255,0.025);

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

    box-shadow:
        0 18px 45px rgba(0,0,0,0.16);
}


.history-item {
    display: grid;

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

    align-items: center;

    gap: 18px;

    min-height: 98px;

    padding: 12px 18px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);

    transition:
        background 0.15s ease;
}


.history-item:last-child {
    border-bottom: none;
}


.history-item:hover {
    background:
        rgba(33,67,190,0.10);
}


/* HISTORY ART */

.history-art {
    width: 70px;
    height: 70px;

    display: block;

    object-fit: cover;

    border-radius: 0;

    background: #111;
}


/* HISTORY TEXT */

.history-title {
    margin-bottom: 3px;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: 850;
}


.history-artist {
    color:
        #A6A8B2;

    font-size: 13px;
}


.history-dj {
    margin-top: 6px;

    color:
        #626572;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


.history-time {
    color:
        #858894;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   LOADING / ERROR
========================================================= */

.loading {
    padding: 35px;

    color:
        rgba(255,255,255,0.55);

    text-align: center;

    font-size: 12px;
}


.error {
    padding: 35px;

    color: #F87171;

    text-align: center;
}


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

.footer {
    background: #0C0C0C;

    border-top:
        1px solid rgba(255,255,255,0.06);
}


.footer-inner {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 27px 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    color: #555862;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


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

@media (max-width: 700px) {

    .site-header {
        height: 68px;
    }

    .header-inner {
        padding: 0 18px;
    }

    .site-logo {
        height: 40px;

        max-width: 165px;
    }


    .on-air-inner {
        padding: 12px;
    }


    .now-playing-inner {
        min-height: 0;

        gap: 15px;

        padding: 10px;
    }

    .now-playing-art {
        width: 105px;
        height: 105px;
    }

    .now-playing-title {
        font-size: 22px;

        letter-spacing: -0.5px;
    }

    .now-playing-artist {
        margin-bottom: 8px;

        font-size: 14px;
    }

    .now-playing-dj {
        padding: 5px 8px;

        font-size: 8px;
    }


    .content {
        padding: 38px 15px 60px;
    }


    .playlist-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

    .playlist-heading h1 {
        font-size: 28px;
    }


    .history-item {
        grid-template-columns:
            55px
            minmax(0,1fr)
            auto;

        gap: 12px;

        min-height: 76px;

        padding: 10px 12px;
    }

    .history-art {
        width: 55px;
        height: 55px;
    }

    .history-title {
        font-size: 14px;
    }

    .history-artist {
        font-size: 12px;
    }

    .history-time {
        font-size: 11px;
    }


    .footer-inner {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }
}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 430px) {

    .now-playing-art {
        width: 90px;
        height: 90px;
    }

    .now-playing-title {
        font-size: 19px;
    }

    .now-playing-artist {
        font-size: 12px;
    }

    .history-item {
        grid-template-columns:
            48px
            minmax(0,1fr)
            auto;
    }

    .history-art {
        width: 48px;
        height: 48px;
    }
}

/* =========================================================
   PLAYLIST FILTERS
   ========================================================= */

.playlist-filters {
    display: grid;

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

    align-items: end;

    gap: 14px;

    margin-bottom: 14px;
}


.playlist-search,
.playlist-date {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.playlist-search label,
.playlist-date label {
    color: #626572;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.playlist-search input,
.playlist-date input {
    height: 44px;

    border:
        1px solid rgba(255,255,255,0.09);

    background:
        rgba(255,255,255,0.035);

    color: #FFFFFF;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    outline: none;

    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}


.playlist-search input {
    width: 100%;

    padding:
        0 14px;
}


.playlist-date input {
    padding:
        0 10px;
}


.playlist-search input::placeholder {
    color: #656874;
}


.playlist-search input:focus,
.playlist-date input:focus {
    border-color:
        rgba(69,102,225,0.75);

    background:
        rgba(33,67,190,0.08);
}


/*
 * Chrome's native search clear button
 */

.playlist-search input::-webkit-search-cancel-button {
    filter:
        grayscale(1)
        brightness(2);
}


.date-controls {
    display: flex;

    height: 44px;
}


.date-controls input {
    min-width: 145px;

    border-left: none;
    border-right: none;

    border-radius: 0;
}


.date-controls button,
.clear-filters {
    height: 44px;

    border:
        1px solid rgba(255,255,255,0.09);

    background:
        rgba(255,255,255,0.035);

    color:
        rgba(255,255,255,0.70);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}


.date-controls button {
    width: 42px;

    flex-shrink: 0;
}


.date-controls button:first-child {
    border-right: none;
}


.date-controls button:last-child {
    border-left: none;
}


.date-controls button:hover,
.clear-filters:hover {
    background:
        rgba(33,67,190,0.22);

    border-color:
        rgba(69,102,225,0.45);

    color: #FFFFFF;
}


.clear-filters {
    padding:
        0 16px;

    white-space: nowrap;
}


/* FILTER RESULT COUNT */

.history-status {
    min-height: 18px;

    margin:
        0 0 8px;

    color:
        #626572;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


/* DATE UNDER TIME */

.history-date {
    margin-top: 4px;

    color:
        #555862;

    font-size: 9px;

    font-weight: 600;
}


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

@media (max-width: 850px) {

    .playlist-filters {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .playlist-search {
        grid-column: 1 / -1;
    }

    .clear-filters {
        width: 100%;
    }

}


@media (max-width: 600px) {

    .playlist-filters {
        grid-template-columns:
            1fr;
    }

    .playlist-search {
        grid-column: auto;
    }

    .playlist-date {
        width: 100%;
    }

    .date-controls {
        width: 100%;
    }

    .date-controls input {
        flex: 1;

        min-width: 0;
    }

    .clear-filters {
        width: 100%;
    }

}


@media (max-width: 430px) {

    .playlist-search input {
        font-size: 11px;
    }

    .date-controls button {
        width: 38px;
    }

}