/* Theme */

:root {
    --bg:       #fff;
    --text:     #111;
    --subtle:   #888;
    --muted:    #bbb;
    --hr-thick: #FBAD18;
    --hr-thin:  #ddd;
    --divider:  #f0f0f0;
}

@media (prefers-color-scheme: dark) {
    html:not(.theme-light) {
        --bg:       #1a1a1a;
        --text:     #e8e8e8;
        --subtle:   #888;
        --muted:    #666;
        --hr-thick: #FBAD18;
        --hr-thin:  #333;
        --divider:  #2a2a2a;
    }

    html:not(.theme-light) a {
        color: #FBAD18;
    }
}

html.theme-dark {
    --bg:       #1a1a1a;
    --text:     #e8e8e8;
    --subtle:   #888;
    --muted:    #666;
    --hr-thick: #FBAD18;
    --hr-thin:  #333;
    --divider:  #2a2a2a;
}
html.theme-dark a { color: #FBAD18; }

html.theme-light {
    --bg:       #fff;
    --text:     #111;
    --subtle:   #888;
    --hr-thick: #FBAD18;
    --hr-thin:  #ddd;
    --divider:  #f0f0f0;
}

/* Base */

body {
    font-family: -apple-system, Helvetica, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    max-width: 560px;
    margin: 1em auto;
    padding: 0 1em;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}

h1 {
    font-size: 1.6em;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text);
    margin: 0.3em 0 0.4em;
}

.tagline {
    margin: 0 0 0em;
    font-size: 0.8em;
    font-style: italic;
    color: var(--subtle);
}

hr {
    border: none;
    border-top: 2px solid var(--hr-thick);
    margin: 0.4em 0;
}

hr.thin {
    border-top-width: 1px;
    border-color: var(--hr-thin);
}

/* Player controls */

#player {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0.25em 0.5em;
    margin: 0.5em 0;
}

#player button {
    min-width: 7em;
}

#volume-controls {
    display: flex;
    align-items: center;
}

#volume {
    width: 100px;
}

#volume-icon {
    margin-right: 0.4em;
}

dt {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--subtle);
}

#stream-status {
    font-size: 0.75em;
    color: var(--subtle);
}

#refresh-now,
#donate-link {
    font-size: 0.75em;
}

#refresh-now.flashing {
    pointer-events: none;
    color: var(--subtle);
    text-decoration: none;
    cursor: default;
}

/* Metadata lists (now playing, on air) */

dl {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: baseline;
    gap: 0.35em 20px;
    margin: 0;
}

dd {
    margin: 0;
}

.stream-info {
    font-size: 0.75em;
    color: var(--subtle);
    line-height: 1;
}

/* Play history */

#history-header {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 20px;
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--divider);
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

#history {
    list-style: none;
    padding: 0;
    margin: 0;
}

#history li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 20px;
    padding: 0.3em 0;
    border-bottom: 1px solid var(--divider);
    font-size: 0.8em;
    overflow-wrap: break-word;
}

.dj-note {
    display: block;
    color: var(--muted);
    font-style: italic;
}

.dj-note--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dj-note--expandable {
    cursor: pointer;
    border-bottom: 1px dotted var(--subtle);
}

#history li:last-child {
    border-bottom: none;
}

.time {
    color: var(--subtle);
    font-size: 0.85em;
    padding-top: 0.15em;
    white-space: nowrap;
}

.tag {
    font-size: 0.75em;
    color: var(--subtle);
    margin-left: 0.4em;
}

/* Frequency visualizer */

#brand {
    display: inline-block;
}

#brand h1 {
    width: fit-content;
}

#visualizer {
    display: block;
}

.hidden { display: none; }
.muted { opacity: 0.35; }

/* Footer */

#disclaimer {
    font-size: 0.85em;
    color: var(--muted);
}

footer {
    margin-top: 0.6em;
    font-size: 0.85em;
}