/* ─── Tokens ────────────────────────────────────────────────────── */
:root {
    --bg:           #f4f5f8;
    --surface:      #ffffff;
    --border:       #d8dde3;
    --border-soft:  #ebeef2;
    --text:         #1f2933;
    --text-muted:   #5a6675;

    --accent:       #1f3a63;   /* deep navy */
    --accent-soft:  #2f5a96;
    --accent-fade:  #e7eef9;
    --accent-tint:  #d8e3f3;
    --accent-deep:  #142844;

    --gold:         #c08a2d;
    --gold-soft:    #f3e3bf;

    --sage:         #4a7c59;       /* spring forest — echoes the banner trees */
    --sage-soft:    #d6e6db;
    --sage-deep:    #2c5238;

    --moss:         #2f5d4a;       /* deep mossy evergreen */
    --moss-soft:    #d2e0d8;

    --teal:         #2a7287;       /* lake / mountain water */
    --teal-soft:    #d1e6ec;

    --lake:         #4d8aa6;       /* brighter water blue */
    --lake-soft:    #dcebf2;

    --upcoming:     #105e3b;
    --upcoming-soft:#e0f1e7;
    --ended:        #5a6675;
    --ended-soft:   #eef0f3;

    --warn-bg:      #fff5d6;
    --warn-fg:      #6b4708;
    --error-bg:     #f3e3bf;
    --error-fg:     #6b4708;
    --info-bg:      #dcebf2;
    --info-fg:      #1f3a63;
    --ok-bg:        #d6e6db;
    --ok-fg:        var(--sage-deep);

    --shadow:       0 2px 6px rgba(15, 25, 40, 0.08);
    --shadow-lg:    0 8px 28px rgba(15, 25, 40, 0.18);
    --radius:       10px;
    --tap:          44px;
}

/* ─── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(ellipse at top, rgba(231, 238, 249, 0.55) 0%, transparent 55%),
        linear-gradient(180deg, var(--bg) 0%, #ecf0f5 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}
.site-main { flex: 1; }
.site-footer { margin-top: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: var(--accent-soft); text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; color: var(--accent-deep); }

.eyebrow {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sage-deep);
    margin: 0 0 0.45rem 0;
}
.subtitle {
    color: var(--text-muted);
    margin: 0.6rem 0 1.25rem;
}
h1 {
    font-size: 1.85rem;
    position: relative;
    padding-bottom: 0.4rem;
}
h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 0.45rem;
    background: linear-gradient(90deg, var(--gold) 0%, var(--accent) 100%);
    border-radius: 2px;
}
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

p  { margin: 0 0 1rem; }


/* ─── Hero banner ───────────────────────────────────────────────── */
.site-banner {
    position: relative;
    background: #1f3a63 url('/img/bg.jpg') center 40% / cover no-repeat;
    color: #fff;
    overflow: hidden;
}
.site-banner::before {
    /* Soft top-to-bottom darkening so text stays legible over the photo */
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(20, 40, 68, 0.30) 0%,
            rgba(20, 40, 68, 0.10) 40%,
            rgba(20, 40, 68, 0.55) 100%);
    pointer-events: none;
}

.banner-row {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    text-decoration: none;
}
.brand:hover, .brand:focus {
    color: #fff;
    text-decoration: none;
}
/* Circular halo wrapper — keeps the rectangular logo safe from clipping. */
.brand-logo-frame {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid var(--gold-soft);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.brand-logo {
    width: 76%;
    height: 76%;
    object-fit: contain;
}
.brand-text {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.05;
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.45),
         1px -1px 0 rgba(0,0,0,0.45),
        -1px  1px 0 rgba(0,0,0,0.45),
         1px  1px 0 rgba(0,0,0,0.45),
         0    2px 8px rgba(0,0,0,0.5);
}
.brand-sub {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-top: 0.2rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ─── Nav (sits in a white bar under the banner) ────────────────── */
.site-nav {
    background: var(--surface);
    border-top: 4px solid var(--gold);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: relative;
    z-index: 2;
}
.nav-row {
    max-width: 960px;
    margin: 0 auto;
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.nav-toggle {
    display: none;
    margin-left: auto;
    width: var(--tap);
    height: var(--tap);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0;
}
.nav-toggle .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    margin: 4px auto;
}

.primary-nav { width: 100%; }
.primary-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.primary-nav li { position: relative; }
.primary-nav .spacer { flex: 1; }
.primary-nav a, .primary-nav .user-label {
    display: inline-block;
    padding: 0.65rem 0.9rem;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius);
    cursor: default;
    font-size: 0.95rem;
    font-weight: 500;
}
.primary-nav a { cursor: pointer; }
.primary-nav a:hover, .primary-nav a:focus,
.primary-nav .user-menu:hover .user-label,
.primary-nav .user-menu:focus-within .user-label {
    background: var(--accent-fade);
    color: var(--accent);
    text-decoration: none;
}
.primary-nav a.active {
    background: var(--accent);
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--gold);
}
.primary-nav .user-menu > ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    padding: 0.25rem;
    flex-direction: column;
    align-items: stretch;
    z-index: 50;
}
.primary-nav .user-menu:hover > ul,
.primary-nav .user-menu:focus-within > ul,
.primary-nav .user-menu.open > ul {
    display: flex;
}
.primary-nav .user-menu > ul li { width: 100%; }
.primary-nav .user-menu > ul a { display: block; padding: 0.6rem 0.75rem; }


/* ─── Main content ──────────────────────────────────────────────── */
.site-main {
    max-width: 960px;
    margin: 1.75rem auto 4rem;
    padding: 0 1rem;
}


/* ─── Flash ─────────────────────────────────────────────────────── */
.flash {
    max-width: 960px;
    margin: 1rem auto 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
}
.flash-info    { background: var(--info-bg);  color: var(--info-fg);  border-color: #c8d6ee; }
.flash-success { background: var(--ok-bg);    color: var(--ok-fg);    border-color: #b9d8c5; }
.flash-error   { background: var(--error-bg); color: var(--error-fg); border-color: #f0c6bd; }
.flash-warn    { background: var(--warn-bg);  color: var(--warn-fg);  border-color: #ead8a4; }


/* ─── Cards ─────────────────────────────────────────────────────── */
.card {
    --card-accent: var(--gold);
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border: 1px solid var(--border);
    border-top: 4px solid var(--card-accent);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.card.is-sage  { --card-accent: var(--sage); }
.card.is-moss  { --card-accent: var(--moss); }
.card.is-teal  { --card-accent: var(--teal); }
.card.is-lake  { --card-accent: var(--lake); }
.card.is-navy  { --card-accent: var(--accent); }


/* ─── Stream list ───────────────────────────────────────────────── */
.stream-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.stream-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.stream-tile {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
    border: 1px solid var(--accent-deep);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    color: #fff;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
    box-shadow: var(--shadow);
    min-height: var(--tap);
}
.stream-tile:hover, .stream-tile:focus {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    filter: brightness(1.06);
    text-decoration: none;
    color: #fff;
}
.stream-tile.is-live {
    background: linear-gradient(135deg, var(--sage) 0%, var(--teal) 100%);
    border-color: var(--moss);
}
.stream-tile.is-replay {
    background: linear-gradient(135deg, var(--teal) 0%, var(--lake) 100%);
    border-color: #1f4e5e;
}
.stream-tile.is-ended {
    background: linear-gradient(135deg, #6c7787 0%, #4a5460 100%);
    border-color: #2c333d;
    opacity: 0.85;
}

.stream-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.stream-time {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.92);
    margin-top: 0.2rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    margin-right: 0.55rem;
    vertical-align: middle;
    background: rgba(255,255,255,0.95);
    color: var(--accent);
    text-shadow: none;
}
.pill-live {
    background: #fff;
    color: var(--moss);
    animation: pulse 1.4s ease-in-out infinite;
}
.pill-upcoming { background: var(--gold); color: #fff; }
.pill-replay   { background: #fff; color: var(--teal); }
.pill-ended    { background: rgba(255,255,255,0.88); color: #2c333d; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}

.stream-notice {
    margin-top: 0.6rem;
    font-size: 0.92rem;
    background: rgba(255, 248, 225, 0.96);
    color: var(--warn-fg);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    text-shadow: none;
}

.stream-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 0 1rem;
    border: 1px solid var(--accent-tint);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #ffffff 0%, var(--accent-fade) 100%);
    color: var(--accent);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}
.stream-action:hover, .stream-action:focus {
    background: linear-gradient(180deg, var(--accent-fade) 0%, var(--accent-tint) 100%);
    text-decoration: none;
    color: var(--accent-deep);
}
.stream-action.is-data {
    border-color: var(--sage-soft);
    background: linear-gradient(180deg, #ffffff 0%, var(--sage-soft) 100%);
    color: var(--sage-deep);
}
.stream-action.is-data:hover, .stream-action.is-data:focus {
    background: var(--sage-soft);
    color: var(--sage-deep);
}


/* ─── Forms ─────────────────────────────────────────────────────── */
.form { max-width: 540px; margin: 0 auto; }

.form-row { margin-bottom: 1.1rem; }
.form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.form-row .hint {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="date"],
input[type="datetime-local"], textarea, select {
    width: 100%;
    padding: 0.7rem 0.8rem;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: var(--tap);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus {
    border-color: var(--accent-soft);
    outline: 2px solid var(--accent-soft);
    outline-offset: 0;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.5rem 0 1rem;
    padding: 0.5rem 0;
}
.checkbox-row input[type="checkbox"], .checkbox-row input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
}
.radio-group {
    display: flex;
    gap: 1.5rem;
    margin: 0.5rem 0 1rem;
}

button, .btn, input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0.65rem 1.15rem;
    border: 1px solid var(--accent);
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 100%);
    color: #fff;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow);
}
button:hover, .btn:hover, input[type="submit"]:hover,
button:focus, .btn:focus, input[type="submit"]:focus {
    background: var(--accent);
    border-color: var(--accent-deep);
    color: #fff;
    text-decoration: none;
    filter: brightness(1.06);
}
.btn-secondary {
    background: var(--surface);
    color: var(--accent);
    background: linear-gradient(180deg, #ffffff 0%, var(--accent-fade) 100%);
}
.btn-secondary:hover, .btn-secondary:focus {
    background: var(--accent-fade);
    color: var(--accent);
}
.btn-danger {
    background: linear-gradient(180deg, #6b4708 0%, #8a5a0a 100%);
    border-color: #4a3009;
}
.btn-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}


/* ─── Data toolbar + series grouping ────────────────────────────── */
.data-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 1rem;
}
.data-filter {
    flex: 1;
    max-width: 360px;
    min-height: var(--tap);
}
.data-filter-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.series-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.series-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--teal);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.series-card[hidden] { display: none !important; }

.series-card > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem 1rem;
    user-select: none;
}
.series-card > summary::-webkit-details-marker { display: none; }
.series-card > summary::before {
    content: "▸";
    color: var(--teal);
    font-size: 0.9rem;
    margin-right: 0.4rem;
    transition: transform 120ms ease;
    display: inline-block;
}
.series-card[open] > summary::before { transform: rotate(90deg); }
.series-card > summary:hover { background: rgba(209, 230, 236, 0.35); }

.series-title {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
}
.series-name {
    font-weight: 700;
    color: var(--accent-deep);
    font-size: 1.02rem;
}
.series-slug {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.series-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}
.series-stats strong { color: var(--accent); font-weight: 700; }
.series-stats .series-last {
    color: var(--sage-deep);
}

.series-card[open] > table.data {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
    margin: 0;
}
.series-card .data-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
}

/* ─── Tables ────────────────────────────────────────────────────── */
.data-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
table.data {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.95rem;
    box-shadow: var(--shadow);
}
table.data th, table.data td {
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
}
table.data th {
    background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 100%);
    color: #fff;
    font-weight: 600;
}
table.data tbody tr:nth-child(even) td { background: rgba(214, 230, 219, 0.32); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--accent-fade); }
table.data tfoot td {
    font-weight: 700;
    background: linear-gradient(180deg, var(--gold-soft) 0%, #fff 100%);
    border-top: 3px solid var(--gold);
    color: #4a3009;
}


/* ─── Modal ─────────────────────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal[hidden] { display: none; }
.modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 40, 0.55);
}
.modal-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    padding: 1.5rem;
    max-width: 480px;
    width: 100%;
}
.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}
.modal-close:hover { color: var(--text); }


/* ─── Footer ────────────────────────────────────────────────────── */
.site-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 2rem 1rem 2.5rem;
    border-top: none;
    background:
        linear-gradient(90deg, var(--sage) 0%, var(--teal) 33%, var(--lake) 66%, var(--accent) 100%) top / 100% 4px no-repeat,
        var(--surface);
    margin-top: 3rem;
}
.site-footer p { margin: 0.3rem 0; }
.site-footer a { color: var(--accent); font-weight: 500; }
.site-footer a:hover { color: var(--accent-deep); }
.site-footer .credit { font-size: 0.78rem; color: #98a2b1; margin-top: 0.6rem; }


/* ─── 404 ───────────────────────────────────────────────────────── */
.not-found {
    text-align: center;
    padding: 3rem 1rem;
}
.not-found .quote {
    color: var(--text-muted);
    font-style: italic;
}


/* ─── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .banner-row { padding: 1.1rem 1rem 1.5rem; }
    .brand-logo { width: 56px; height: 56px; }
    .brand-text { font-size: 1.5rem; }
    .brand-sub  { font-size: 0.78rem; letter-spacing: 0.14em; }

    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .nav-row { padding: 0.35rem 1rem; flex-wrap: wrap; }
    .primary-nav {
        display: none;
        flex-basis: 100%;
        padding: 0.25rem 0 0.5rem;
    }
    .primary-nav.open { display: block; }
    .primary-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem;
    }
    .primary-nav .user-menu > ul {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 1rem;
    }
    .primary-nav a, .primary-nav .user-label {
        padding: 0.75rem 0.5rem;
    }

    .stream-row { flex-direction: column; }
    .stream-action { min-width: 0; padding: 0.7rem; }

    table.data { font-size: 0.88rem; }
    table.data th, table.data td { padding: 0.5rem 0.55rem; }
}