:root {
    --bg: #f5f6f8;
    --card: #ffffff;
    --ink: #1a1d21;
    --muted: #6b7280;
    --line: #e3e6ea;
    --violation: #c92a2a;
    --violation-bg: #fff5f5;
    --limit: #b8860b;
    --ok: #2f7a4f;
    --accent: #3b5bdb;
    --radius: 0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14161a;
        --card: #1c1f24;
        --ink: #e8eaed;
        --muted: #9aa1ab;
        --line: #2b2f36;
        --violation: #ff6b6b;
        --violation-bg: #2a1a1c;
        --limit: #d4a72c;
        --ok: #51cf66;
        --accent: #748ffc;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- header ---- */

.page-header {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
    margin-bottom: 24px;
}

.page-header h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.01em;
}

.subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

h2 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 32px 0 12px;
}

/* ---- section head + week stepper ---- */

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.section-head h2 {
    margin-bottom: 0;
}

.week-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 32px 0 0;
}

.week-step {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--card);
    color: var(--accent);
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

.week-step:hover {
    border-color: var(--accent);
}

.week-step.is-disabled {
    color: var(--muted);
    opacity: 0.4;
    pointer-events: none;
}

.week-label {
    min-width: 108px;
    padding: 0 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.week-tag {
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- banners ---- */

.banner {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.banner-warn { border-left-color: var(--limit); }

.banner-alert {
    border-left-color: var(--violation);
    background: var(--violation-bg);
}

.banner code {
    background: var(--bg);
    padding: 1px 5px;
    border-radius: 0;
    font-size: 13px;
}

/* ---- team cards ---- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}

.team-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}

.team-card.violation {
    border-color: var(--violation);
    box-shadow: 0 0 0 1px var(--violation);
}

.team-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Week scoring rank. Sized like the logo so cards line up whether or not
   Yahoo gave us a team image. */
.rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rank.is-top {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.team-logo {
    width: 36px;
    height: 36px;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg);
}

.team-head h3 {
    margin: 0;
    font-size: 16px;
}

.manager {
    margin: 1px 0 0;
    color: var(--muted);
    font-size: 13px;
}

/* ---- badges ---- */

.badge {
    display: block;
    margin: 0 0 10px;
    padding: 6px 10px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
}

.badge-violation {
    background: var(--violation);
    color: #fff;
}

.badge-violation .since {
    display: block;
    font-weight: 400;
    opacity: 0.9;
    font-size: 12px;
}

/* No .badge-limit: sitting at the cap is legal, so it renders as .badge-ok
   like any other legal count. Only going over is called out. */

.badge-ok {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    font-weight: 500;
}

/* ---- roster ---- */

.roster {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.roster li {
    display: grid;
    grid-template-columns: 46px 1fr auto auto;
    gap: 8px;
    align-items: baseline;
    padding: 3px 6px;
    border-radius: 0;
}

.roster li + li { border-top: 1px solid var(--line); }

.slot {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pos, .nfl {
    font-size: 12px;
    color: var(--muted);
}

.nfl { min-width: 30px; text-align: right; }

.slot-bench .pname, .slot-ir .pname { color: var(--muted); }
.slot-ir .slot { color: var(--violation); }

.qb-flag {
    background: var(--violation-bg);
    box-shadow: inset 2px 0 0 var(--violation);
}

.empty {
    color: var(--muted);
    font-style: italic;
    margin: 8px 0 0;
}

/* ---- transaction feed ---- */

.feed {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.feed-day {
    background: var(--bg);
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.feed-item {
    display: grid;
    grid-template-columns: 118px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}

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

.feed-body p { margin: 0 0 2px; }
.feed-body p:last-child { margin-bottom: 0; }

.feed-time {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    border: 1px solid currentColor;
}

.tag-add    { color: var(--ok); }
.tag-drop   { color: var(--muted); }
.tag-waiver { color: var(--limit); }
.tag-trade  { color: var(--accent); }
.tag-commish, .tag-other { color: var(--muted); }

/* ---- footer ---- */

.page-footer {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

.page-footer p { margin: 0; }

@media (max-width: 620px) {
    .feed-item {
        grid-template-columns: 1fr auto;
    }
    .feed-item .tag {
        grid-column: 1 / -1;
        justify-self: start;
    }
}