/* ==========================================================================
   GameDay Analytics — Changelog
   Layered on home.css (tokens, header, hero, stat strip, footer overrides).
   Only pages/changelog.php loads this file.
   ========================================================================== */

.nav-link.is-active { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* Hero
   ========================================================================== */
.cl-hero { padding: 96px 0 48px; }
.cl-title { font-size: clamp(2.5rem, 6vw, 4.75rem); }
.cl-stats { margin-top: 56px; }
.cl-c-added { color: var(--live) !important; }
.cl-c-changed { color: var(--nhl) !important; }

/* Filter bar — sticks under the 64px header
   ========================================================================== */
.cl-filterbar {
    position: sticky;
    top: 64px;
    z-index: 40;
    padding: 14px 0;
    background: rgba(10, 11, 13, 0.82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.cl-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cl-filters::-webkit-scrollbar { display: none; }

.cl-pill {
    --c: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cl-pill span { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--text-3); }
.cl-pill:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.cl-pill.is-active {
    color: var(--text);
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 14%, transparent);
}
.cl-pill.is-active span { color: var(--c); }

.cl-pill--mlb  { --c: var(--mlb); }
.cl-pill--nfl  { --c: var(--nfl); }
.cl-pill--nba  { --c: var(--nba); }
.cl-pill--wnba { --c: var(--wnba); }
.cl-pill--nhl  { --c: var(--nhl); }
.cl-pill--cfb  { --c: var(--cfb); }
.cl-pill--general { --c: var(--text-2); }

/* Timeline
   ========================================================================== */
.cl-log { padding: 24px 0 120px; }

.cl-day {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
}
.cl-day:last-child { border-bottom: 0; }

.cl-date { position: sticky; top: 140px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.cl-date-md { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
.cl-date-y { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

.cl-items { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.cl-item {
    position: relative;
    padding: 20px 22px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
    transition: border-color 0.2s;
}
.cl-item:hover { border-color: var(--line-2); }

.cl-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cl-type, .cl-sport {
    display: inline-flex;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}

.cl-type { --c: var(--text-2); color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.cl-type--added   { --c: var(--live); }
.cl-type--changed { --c: var(--nhl); }
.cl-type--fixed   { --c: var(--beta); }
.cl-type--removed { --c: #f87171; }

.cl-sport { --c: var(--text-2); color: var(--c); border: 1px solid var(--line-2); }
.cl-sport--mlb  { --c: var(--mlb); }
.cl-sport--nfl  { --c: var(--nfl); }
.cl-sport--nba  { --c: var(--nba); }
.cl-sport--wnba { --c: var(--wnba); }
.cl-sport--nhl  { --c: var(--nhl); }
.cl-sport--cfb  { --c: var(--cfb); }

.cl-item-title { margin-top: 12px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: var(--text); }
.cl-item-desc { margin-top: 6px; font-size: 0.9rem; line-height: 1.6; color: var(--text-2); max-width: 75ch; }

.cl-empty { padding: 48px 0; color: var(--text-2); }

/* Responsive
   ========================================================================== */
@media (max-width: 760px) {
    .cl-day { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
    .cl-date { position: static; flex-direction: row; align-items: baseline; gap: 10px; }
}

@media (max-width: 640px) {
    .cl-hero { padding: 64px 0 32px; }
    .cl-stats { margin-top: 40px; }
    .cl-filterbar { top: 58px; }
    .nav-link--leagues { display: none; }
    .cl-item { padding: 16px; }
}