:root {
    --border: rgba(255, 255, 255, 0.12);
    --text: #e6e6e6;
    --text-dim: #9a9a9e;
    --accent: #4f8cff;
    --accent-hover: #6ea0ff;
}

* { box-sizing: border-box; }

/* Background is owned by CSS/themes.css (theme-dependent gradient) —
   this file only sets text/layout defaults.
   Sticky-footer layout: body is a full-height flex column so the footer is
   pinned to the bottom of the viewport on short pages instead of floating
   right after <main>'s content. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

/* The ladder page's tables carry a lot more columns than the rest of the
   site, so it gets a wider column than the shared 960px — still fluid/
   mobile-friendly since it's a max-width, not a fixed width. */
main.ladder-page {
    max-width: 1400px;
}

/* Report forms were cramped at the shared 960px — widened to match
   .report-container's own wider max-width (see CSS/report-style.css). */
main.report-page {
    max-width: 1400px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── Buttons / forms ─────────────────────────────────────────────────── */
button, .btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.9rem;
    cursor: pointer;
}
button:hover, .btn:hover { background: var(--accent-hover); }

/* Inputs keep a fixed dark well regardless of site theme (same reasoning
   as .card below), so their text/border are hardcoded rather than tied to
   --text/--border — those flip light for Vanilla/Pastel and would go
   dark-on-dark against this always-dark background otherwise. */
input[type="text"], input[type="email"], input[type="password"] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e6e6e6;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    font-size: 0.95rem;
}

form label { display: block; margin: 12px 0 4px; font-size: 0.85rem; color: var(--text-dim); }

.error-message {
    display: none;
    color: #ff6b6b;
    font-size: 0.85rem;
    margin-top: 8px;
}

/* .card is a fixed dark panel on every theme (by design — it's meant to
   float over any background, light or dark) so its text is hardcoded
   rather than using --text, which flips dark for Vanilla/Pastel and would
   be unreadable against this panel's permanently-dark fill. */
.card {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 20px;
    color: #e6e6e6;
}

/* ── Generic tables (records, admin, etc.) — same fixed-dark-surface
   reasoning as .card/inputs above; most tables on this site live inside a
   dark card of their own, so their text is hardcoded rather than themed. ── */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}
th, td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
th { color: #9a9a9e; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.empty-cell { text-align: center; color: #9a9a9e; font-style: italic; }

/* ── Team Anarchy ladder — styled to match RDL's Duos ladder (#ladder-duos):
   dark outer-container with a thick white border, borderless transparent
   table, centered stat columns, left-aligned team name. Scoped to
   #ladder-team so the generic table rules above (used by records/admin/etc.)
   are untouched. */
.outer-container {
    position: relative;
    /* Matches the site-wide "card" convention (.card, .team-container,
       profile-style.css etc.): semi-transparent black fill, 2px white
       border — this panel previously used a solid dark fill + thick 5px
       border that read as a flatter/lighter gray box out of step with the
       rest of the site. */
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    border-radius: 15px;
    padding: 16px;
    margin-top: 16px;
    overflow: hidden;
    color: #fff;
}

/* When the ladder tab switcher immediately precedes the panel, pull it up by
   exactly the panel's own border width so the active tab's bottom edge
   overlaps and paints over that border segment instead of leaving a gap. */
.ladder-switch + .outer-container {
    margin-top: -2px;
}

#ladder-team {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 1.1rem;
}
#ladder-team th, #ladder-team td {
    border: none;
    padding: 8px 10px;
    text-align: center;
    color: #fff;
    background: transparent;
}
#ladder-team th {
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
}
#ladder-team th:nth-child(2), #ladder-team td:nth-child(2) {
    text-align: left;
    padding-left: 20px;
}
#ladder-team tbody tr:hover td { background-color: rgba(255, 255, 255, 0.05); }
#ladder-team td:nth-child(n+3) { font-size: 1rem; font-weight: 500; }

.free-agents-section {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.free-column {
    flex: 1;
    min-width: 220px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 8px;
}
.free-column h3 {
    color: #aaa;
    font-size: 0.82rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2a2a;
}
.free-column ul { list-style: none; padding: 0; margin: 0; }
.free-column li {
    padding: 5px 6px;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #ccc;
}
.free-column li:last-child { border-bottom: none; }

/* Create Team / Invite / Request Join — RDL uses one small blue chip for
   every team-formation action in the free-agents panel. */
.team-action-btn,
.join-team-action {
    background: #2a6496;
    color: #fff;
    border: none;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.team-action-btn:hover,
.join-team-action:hover { background: #235579; }

/* In the column headers the button is pushed to the right edge (RDL). */
.free-column h3 {
    display: flex;
    align-items: center;
}
.free-column h3 .team-action-btn { margin-left: auto; }

/* The Duo's panel reuses the Team Anarchy free-agents layout. */
.duos-free-columns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ladder-actions { display: flex; gap: 12px; margin: 16px 0; }

/* ── Duo's / Solo's ladder tables — same borderless/centered treatment as
   #ladder-team above, just scoped to their own ids. */
#ladder-duos, #ladder-solo {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 1.1rem;
}
#ladder-duos th, #ladder-duos td,
#ladder-solo th, #ladder-solo td {
    border: none;
    padding: 8px 10px;
    text-align: center;
    color: #fff;
    background: transparent;
}
#ladder-duos th, #ladder-solo th {
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
}
#ladder-duos th:nth-child(2), #ladder-duos td:nth-child(2),
#ladder-solo th:nth-child(2), #ladder-solo td:nth-child(2) {
    text-align: left;
    padding-left: 20px;
}
#ladder-duos tbody tr:hover td, #ladder-solo tbody tr:hover td { background-color: rgba(255, 255, 255, 0.05); }
#ladder-duos td:nth-child(n+3), #ladder-solo td:nth-child(n+3) { font-size: 1rem; font-weight: 500; }

/* Duo's team-header vs. per-player sub-rows — same tiered shading RDL uses so
   the two players read as nested under their team rather than as peer rows.
   No border between a team's own header/player rows (that read as clunky,
   separate-looking dividers) — only the last player row of each duo carries
   a divider, so the seam only ever shows between one duo and the next. */
#ladder-duos .team-header-row td,
#ladder-duos .team-player-row td {
    border-bottom: none;
}
#ladder-duos .team-header-row td {
    background-color: rgba(255, 255, 255, 0.03);
}
#ladder-duos .team-player-row td {
    background-color: rgba(0, 0, 0, 0.15);
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: left;
    padding-left: 20px;
}
#ladder-duos .team-player-row-last td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#ladder-duos .team-player-row:hover td { background-color: rgba(255, 255, 255, 0.08); }
#ladder-duos .team-header-row:hover td { background-color: rgba(255, 255, 255, 0.08); }
/* The place cell now spans the team row + both player rows (rowspan="3"),
   giving the "elbow" look — one numeral centered beside the whole duo
   instead of repeating it per row. */
#ladder-duos td[rowspan] {
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* ── Duo's invite/partner panel ── */
.duos-panel { margin-top: 20px; }
.duos-mine {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.duos-invite-form {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.duos-invite-form label { color: #aaa; font-size: 0.85rem; }
.duos-invites-columns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.duos-invites-columns > div {
    flex: 1;
    min-width: 220px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 8px;
}
.duos-invites-columns h4 {
    color: #aaa;
    font-size: 0.82rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2a2a;
}
.duos-invites-columns ul { list-style: none; padding: 0; margin: 0; }
.duos-invites-columns li {
    padding: 5px 6px;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.9rem;
    color: #ccc;
}
.duos-invites-columns li:last-child { border-bottom: none; }
.duos-invites-columns li .btn { font-size: 0.75rem; padding: 2px 8px; }

/* ── Main ladder tab switcher — binder-tab styling: each label is its own
   flap with a white outline, sitting flush against (and slightly overlapping)
   .outer-container's top border. The active tab's background/border matches
   the panel exactly and drops its own bottom edge, so it visually punches
   through the shared border line and reads as part of the page beneath it —
   like flipping to a tabbed page in a binder. No per-tab color coding
   (monochrome only), by design. */
.ladder-switch {
    display: flex;
    align-items: flex-end;
    background: none;
    border: none;
    padding: 0 16px;
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 16px auto 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.ladder-switch input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}
.ladder-switch label {
    flex: 0 0 auto;
    width: 130px;
    text-align: center;
    padding: 10px 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.4);
     /* Mask the panel's top border under each tab so the separator line
         does not peek through inactive tabs. */
     border-bottom: 2px solid rgba(0, 0, 0, 0.7);
    border-radius: 14px 14px 0 0;
    /* Same translucent-black fill as .outer-container so an inactive tab
       still reads as the same family of surface as the panel below it. */
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.55);
}
.ladder-switch label:hover {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.7);
    border-bottom-color: rgba(0, 0, 0, 0.7);
}

.ladder-switch input[type="radio"]:checked + label {
    /* Same fill as .outer-container so the active tab reads as literally
       the same surface, not just a similarly-colored one. */
    background: rgba(0, 0, 0, 0.7);
    border-color: #fff;
    border-bottom-color: rgba(0, 0, 0, 0.7);
    color: #fff;
}

@media (max-width: 768px) {
    .ladder-switch label {
        width: 100px;
        font-size: 12px;
        padding: 8px 5px;
    }
    .ladder-switch { max-width: 95%; }
}

/* ── Ladder view toggle header (Challenge + Calendar top-right) ── */
.ladder-view-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #333;
    margin-bottom: 6px;
}

.ladder-view-title {
    font-size: 0.85em;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ladder-action-btns {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ladder-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.75em;
    background: transparent;
    color: #666;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.ladder-action-btn:hover,
.ladder-action-btn.active {
    background: rgba(255, 255, 255, 0.07);
    color: #ccc;
    border-color: #666;
}

/* Challenge links: hidden by default; shown when toggle is active */
.challenges-hidden .challenge-link { display: none !important; }