/*
    Styles for the embeddable Fourth Ambit player (/Player).
    (c) 2026, The Ambit Group

    The page fills its iframe exactly: a fixed header, audio controls and footer,
    with the episode list taking whatever height is left and scrolling.
*/

* {
    box-sizing: border-box;
}

/* color-scheme gives the scrollbar and the browser's audio controls their dark
   variants, so they match the player instead of showing up as white blocks. */

html {
    color-scheme: dark;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #e8eef6;
    background-color: #0b1f36;
}

a {
    color: #f3b26b;
    text-decoration: none;
    font-weight: bold;
}

    a:hover {
        text-decoration: underline;
    }

a:focus-visible,
button:focus-visible,
audio:focus-visible {
    outline: 2px solid #f3b26b;
    outline-offset: 2px;
}

.player {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    gap: 8px;
}

/* Header: artwork plus the title of whatever is loaded */

header {
    display: flex;
    gap: 12px;
    align-items: center;
}

    header img {
        flex: none;
        border-radius: 6px;
    }

.info {
    min-width: 0;
}

    .info p {
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.show {
    font-size: 9pt;
}

.now {
    font-size: 13pt;
    font-weight: bold;
    margin: 3px 0 !important;
}

.sub {
    color: #a9b8cc;
}

audio {
    width: 100%;
    flex: none;
}

/* Episode list */

.episodes {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #23405f;
}

    .episodes button {
        display: flex;
        width: 100%;
        gap: 10px;
        padding: 6px 8px;
        border: 0;
        border-bottom: 1px solid #23405f;
        background: none;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

        .episodes button:hover {
            background-color: #15314f;
        }

        .episodes button[aria-current="true"] {
            background-color: #1d3d60;
            color: #f3b26b;
            font-weight: bold;
        }

.num {
    flex: none;
    width: 1.5em;
    text-align: right;
}

.title {
    flex: 1;
}

.dur {
    flex: none;
    color: #a9b8cc;
}

footer {
    flex: none;
    font-size: 8pt;
    color: #a9b8cc;
    text-align: center;
}