/* ===========================================================================
   ANAC / SCML — modern theme layer
   ---------------------------------------------------------------------------
   Hand-written, committed stylesheet (NOT a Laravel Mix build artefact — unlike
   public/css/app.css this file is tracked normally and is safe to edit/push).
   It is linked AFTER the Bootstrap CDN, after app.css and after the layout's
   inline <style> block, so it is the last word on anything it touches.
   The legacy inline block still owns the ~100 `body.dark-theme .foo` rules; we
   deliberately do not rewrite those, we only match their specificity where the
   two collide.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
    /* Brand: deep "negotiation navy" paired with a warm amber counterpart —
       two sides of a bargain. */
    --brand-900: #0d1730;
    --brand-800: #142255;
    --brand-700: #1b2f63;
    --brand-600: #28418c;
    --brand-500: #3557bf;
    --brand-400: #5a7ce0;
    --accent-600: #c96a1d;
    --accent-500: #e8893a;
    --accent-400: #f2a862;

    /* Light surfaces: warm paper rather than clinical white. */
    --surface: #f7f6f3;
    --surface-2: #ffffff;
    --surface-3: #f1efea;
    --ink: #16181d;
    --ink-2: #3c424e;
    --muted: #6b7280;
    --line: #e3e0d9;
    --line-strong: #d3cfc5;

    --link: #22418f;
    --link-hover: #16285c;

    --ok: #1f8a53;
    --warn: #b7791f;
    --bad: #c0392b;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow: 0 6px 18px -6px rgba(16, 24, 40, .14), 0 2px 6px -2px rgba(16, 24, 40, .07);
    --shadow-lg: 0 24px 48px -16px rgba(16, 24, 40, .22), 0 8px 20px -10px rgba(16, 24, 40, .12);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .22s;

    --font-display: "Outfit", "Nunito", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --maxw: 1280px;
}

body.dark-theme {
    --surface: #0e1116;
    --surface-2: #161b22;
    --surface-3: #1c222b;
    --ink: #e8ebf0;
    --ink-2: #c3c9d4;
    --muted: #949cab;
    --line: #262d38;
    --line-strong: #39414f;

    --link: #8fb0ff;
    --link-hover: #b6cbff;

    --brand-500: #5f82e8;
    --brand-400: #8aa5f0;
    --accent-500: #f0a05c;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow: 0 8px 22px -8px rgba(0, 0, 0, .65);
    --shadow-lg: 0 28px 56px -20px rgba(0, 0, 0, .75);
}

/* ------------------------------------------------------------ base type -- */
html {
    scroll-behavior: smooth;
    /* The sticky navbar must not cover anchored sections. */
    scroll-padding-top: 86px;
}

body,
body.light-theme {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.003em;
}

body.dark-theme {
    color: var(--ink);
    background: var(--surface);
}

/* A very soft two-point wash so the page is never a flat slab. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(53, 87, 191, .09), transparent 62%),
        radial-gradient(760px 460px at 92% 2%, rgba(232, 137, 58, .08), transparent 60%);
}

body.dark-theme::before {
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(95, 130, 232, .14), transparent 62%),
        radial-gradient(760px 460px at 92% 2%, rgba(240, 160, 92, .09), transparent 60%);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.page-title, .title, .section-title, .sidebar-title, .card-title, .navbar-brand {
    font-family: var(--font-display);
    letter-spacing: -0.021em;
    color: var(--ink);
}

h1, .h1 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.6rem); font-weight: 800; line-height: 1.12; }
h2, .h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 1.95rem); font-weight: 750; line-height: 1.2; }
h3, .h3 { font-size: 1.32rem; font-weight: 700; }
h4, .h4 { font-size: 1.14rem; font-weight: 700; }
h5, .h5 { font-size: 1.02rem; font-weight: 700; }
h6, .h6 { font-size: .92rem; font-weight: 700; letter-spacing: .02em; }

p, li { font-size: 1.02rem; line-height: 1.72; }
small, .small, .form-text { font-size: .86rem; }

code, pre, .mono { font-family: var(--font-mono); }

code {
    font-size: .88em;
    padding: .12em .38em;
    border-radius: 6px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

body a:not(.btn),
body.light-theme a:not(.btn) { color: var(--link); text-decoration: none; }

body.dark-theme a:not(.btn) { color: var(--link); }

body a:not(.btn):hover,
body.light-theme a:not(.btn):hover,
body.dark-theme a:not(.btn):hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Navigation and footer links carry their own hover affordance (the gradient
   rule under the nav items, a colour shift in the footer) — the generic
   underline above would double up on it. */
body .navbar a:hover,
body.dark-theme .navbar a:hover,
body .site-footer a:hover,
body.dark-theme .site-footer a:hover,
body .league-card .lc-actions a:hover { text-decoration: none; }

::selection { background: rgba(53, 87, 191, .18); }
body.dark-theme ::selection { background: rgba(143, 176, 255, .28); }

:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Slim scrollbars, matched to the theme. */
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ------------------------------------------------------------- navbar ---- */
body .navbar,
body.light-theme .navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: .55rem 0;
    background: rgba(255, 255, 255, .78) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: none !important;
    transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

body.dark-theme .navbar {
    background: rgba(14, 17, 22, .8) !important;
    border-bottom: 1px solid var(--line);
}

/* Set by the scroll listener in the layout. */
body .navbar.is-stuck { box-shadow: var(--shadow-sm) !important; }
body.dark-theme .navbar.is-stuck { box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .9) !important; }

.navbar .navbar-brand { padding: 0; margin-right: 1.25rem; }
.navbar .navbar-brand img { height: 30px; width: auto; transition: transform var(--dur) var(--ease); }
.navbar .navbar-brand:hover img { transform: scale(1.04); }

body .navbar-light .navbar-nav .nav-link,
body.dark-theme .navbar-light .navbar-nav .nav-link {
    position: relative;
    font-family: var(--font-display);
    font-size: .95rem !important;
    font-weight: 600 !important;
    letter-spacing: .005em;
    color: var(--ink-2);
    padding: .4rem .7rem;
    border-radius: 9px;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

body .navbar-light .navbar-nav .nav-link:hover,
body.dark-theme .navbar-light .navbar-nav .nav-link:hover {
    color: var(--ink);
    background: var(--surface-3);
}

/* Growing underline on the text-label links only (icon links stay plain). */
.navbar-nav .nav-link:not(.nav-icon)::after {
    content: "";
    position: absolute;
    left: .7rem;
    right: .7rem;
    bottom: .18rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .26s var(--ease);
}

.navbar-nav .nav-link:not(.nav-icon):hover::after,
.navbar-nav .nav-link.is-active::after { transform: scaleX(1); }

.navbar-nav .nav-link.is-active { color: var(--ink); }

.nav-link.nav-icon {
    font-size: 1.05rem !important;
    padding: .4rem .45rem !important;
    filter: grayscale(.25);
    transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.nav-link.nav-icon:hover { filter: none; transform: translateY(-1px); }

.navbar-toggler {
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: .35rem .6rem;
}

body.dark-theme .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232,235,240,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dark-mode toggle reads as a control, not a link. */
.navbar-nav .nav-link.theme-toggle {
    border: 1px solid var(--line-strong);
    border-radius: 99px;
    padding: .3rem .8rem !important;
    font-size: .85rem !important;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.navbar-nav .nav-link.theme-toggle::after { display: none; }

/* ------------------------------------------------------------- layout ---- */
/* Every page needs breathing room under the sticky navbar; the hero is the
   one exception and pulls itself back up by exactly that amount rather than
   zeroing the padding for all the other pages. */
main.py-4 { padding-top: 1.75rem !important; }

.anac-hero { margin-top: -1.75rem; }

main > .alert { margin: 1rem auto 0; max-width: var(--maxw); width: calc(100% - 2.5rem); }

.page-wrapper,
.page-shell {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.75rem;
}

@media (max-width: 575.98px) {
    .page-wrapper,
    .page-shell { padding: 0 1rem; }
}

/* ------------------------------------------------------------- buttons --- */
body .btn,
body.dark-theme .btn {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 650;
    letter-spacing: .005em;
    border-radius: var(--radius-sm);
    padding: .45rem 1rem;
    border-width: 1px;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

body .btn:hover,
body.dark-theme .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

body .btn:active,
body.dark-theme .btn:active { transform: translateY(0); }

body .btn-primary,
body.light-theme .btn-primary {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

body .btn-primary:hover,
body.light-theme .btn-primary:hover {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
}

body.dark-theme .btn-primary {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

body.dark-theme .btn-primary:hover {
    background: var(--brand-400);
    border-color: var(--brand-400);
    color: #0d1117;
}

body .btn-accent {
    background: var(--accent-500);
    border-color: var(--accent-500);
    color: #231303;
}

body .btn-accent:hover { background: var(--accent-400); border-color: var(--accent-400); color: #231303; }

body .btn-outline-primary {
    color: var(--brand-600);
    border-color: var(--brand-600);
    background: transparent;
}

body .btn-outline-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

body.dark-theme .btn-outline-primary { color: var(--brand-400); border-color: var(--brand-400); }
body.dark-theme .btn-outline-primary:hover { background: var(--brand-400); color: #0d1117; }

body .btn-secondary, body .btn-light, body .btn-default {
    background: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--ink-2);
}

body .btn-secondary:hover, body .btn-light:hover, body .btn-default:hover {
    background: var(--surface-3);
    border-color: var(--muted);
    color: var(--ink);
}

body.dark-theme .btn-secondary, body.dark-theme .btn-light, body.dark-theme .btn-default {
    background: var(--surface-3);
    border-color: var(--line-strong);
    color: var(--ink-2);
}

/* Solid variants: Bootstrap's own text colours, restated here because the
   legacy blanket `.btn { color:#fff !important }` was removed from the layout.
   Stated for both themes so the dark-mode block cannot invert them. */
body .btn-success, body.dark-theme .btn-success,
body .btn-danger, body.dark-theme .btn-danger,
body .btn-info, body.dark-theme .btn-info,
body .btn-dark, body.dark-theme .btn-dark { color: #fff; }

body .btn-warning, body.dark-theme .btn-warning,
body .btn-light, body.dark-theme .btn-light { color: #212529; }

body .btn-link, body.dark-theme .btn-link {
    color: var(--link);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

body .btn-link:hover { color: var(--link-hover); text-decoration: underline; }

/* Outline variants keep a transparent fill and invert on hover. */
body .btn-outline-secondary { color: var(--muted); border-color: var(--line-strong); background: transparent; }
body .btn-outline-secondary:hover { background: var(--surface-3); color: var(--ink); border-color: var(--muted); }
body.dark-theme .btn-outline-secondary { color: var(--ink-2); border-color: var(--line-strong); background: transparent; }
body.dark-theme .btn-outline-secondary:hover { background: var(--surface-3); color: var(--ink); }

body .btn-outline-success, body.dark-theme .btn-outline-success { color: var(--ok); border-color: var(--ok); background: transparent; }
body .btn-outline-success:hover, body.dark-theme .btn-outline-success:hover { background: var(--ok); color: #fff; }

body .btn-outline-danger, body.dark-theme .btn-outline-danger { color: var(--bad); border-color: var(--bad); background: transparent; }
body .btn-outline-danger:hover, body.dark-theme .btn-outline-danger:hover { background: var(--bad); color: #fff; }

body .btn-outline-warning, body.dark-theme .btn-outline-warning { color: var(--warn); border-color: var(--warn); background: transparent; }
body .btn-outline-warning:hover, body.dark-theme .btn-outline-warning:hover { background: var(--warn); color: #231303; }

body .btn-outline-info, body.dark-theme .btn-outline-info { color: #1b7f95; border-color: #1b7f95; background: transparent; }
body .btn-outline-info:hover, body.dark-theme .btn-outline-info:hover { background: #1b7f95; color: #fff; }
body.dark-theme .btn-outline-info { color: #56c4da; border-color: #56c4da; }
body.dark-theme .btn-outline-info:hover { background: #56c4da; color: #0d1117; }

body .btn-outline-dark { color: var(--ink-2); border-color: var(--ink-2); background: transparent; }
body .btn-outline-dark:hover { background: var(--ink-2); color: var(--surface-2); }
body.dark-theme .btn-outline-dark { color: var(--ink-2); border-color: var(--line-strong); }
body.dark-theme .btn-outline-dark:hover { background: var(--surface-3); color: var(--ink); }

body .btn-sm { padding: .3rem .7rem; font-size: .82rem; border-radius: 7px; }
body .btn-lg { padding: .7rem 1.5rem; font-size: 1.02rem; border-radius: var(--radius); }

.btn-group > .btn { box-shadow: none; }
.btn-group > .btn:hover { transform: none; }

/* ------------------------------------------------------------- cards ----- */
body .card,
body.light-theme .card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

body.dark-theme .card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

body .card-body,
body.dark-theme .card-body {
    background: transparent;
    color: var(--ink);
    padding: 1.25rem 1.35rem;
}

body .card-header,
body.dark-theme .card-header {
    background: var(--surface-3);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    padding: .8rem 1.35rem;
}

body .card-footer,
body.dark-theme .card-footer {
    background: transparent;
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    padding: .9rem 1.35rem;
}

body .card.lift:hover,
body .league-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
}

/* ------------------------------------------------------------- tables ---- */
body .table,
body.dark-theme .table {
    font-size: .94rem;
    color: var(--ink);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

body .table thead th,
body.dark-theme .table thead th,
body .table .thead-light th,
body.dark-theme .table .thead-light th {
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-3);
    border-top: none;
    border-bottom: 1px solid var(--line-strong);
    padding: .62rem .75rem;
    white-space: nowrap;
}

body .table td, body .table th,
body.dark-theme .table td, body.dark-theme .table th {
    border-top: 1px solid var(--line);
    padding: .6rem .75rem;
    vertical-align: middle;
}

body .table-hover tbody tr,
body.dark-theme .table-hover tbody tr { transition: background-color .16s var(--ease); }

body .table-hover tbody tr:hover,
body.dark-theme .table-hover tbody tr:hover { background: var(--surface-3); }

body .table-striped tbody tr:nth-of-type(odd) { background: rgba(0, 0, 0, .017); }
body.dark-theme .table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .025); }

.table-responsive {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface-2);
}

/* ------------------------------------------------------------- forms ----- */
body .form-control,
body.dark-theme .form-control {
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: .95rem;
    padding: .45rem .7rem;
    height: auto;
    box-shadow: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

body .form-control:focus,
body.dark-theme .form-control:focus {
    background: var(--surface-2);
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(53, 87, 191, .16);
    color: var(--ink);
}

body.dark-theme .form-control:focus { box-shadow: 0 0 0 3px rgba(143, 176, 255, .2); }

body .form-control::placeholder { color: var(--muted); }

label, body.dark-theme label { font-weight: 600; font-size: .9rem; color: var(--ink-2); }

.input-group-text {
    background: var(--surface-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--muted);
}

/* ------------------------------------------------------------- alerts ---- */
body .alert,
body.dark-theme .alert {
    border: 1px solid var(--line);
    border-left: 4px solid var(--muted);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    padding: .8rem 1.1rem;
    font-size: .96rem;
}

body .alert-success, body.dark-theme .alert-success { border-left-color: var(--ok); }
body .alert-danger, body.dark-theme .alert-danger { border-left-color: var(--bad); }
body .alert-warning, body.dark-theme .alert-warning { border-left-color: var(--warn); }
body .alert-info, body.dark-theme .alert-info { border-left-color: var(--brand-500); }
body .alert-primary, body.dark-theme .alert-primary { border-left-color: var(--brand-600); }

/* ------------------------------------------- dropdowns / modals / badges -- */
body .dropdown-menu,
body.dark-theme .dropdown-menu {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .4rem;
    font-size: .92rem;
    animation: anacDropIn .16s var(--ease) both;
}

@keyframes anacDropIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

body .dropdown-item,
body.dark-theme .dropdown-item {
    color: var(--ink-2);
    border-radius: 8px;
    padding: .4rem .65rem;
}

body .dropdown-item:hover,
body.dark-theme .dropdown-item:hover { background: var(--surface-3); color: var(--ink); }

body .dropdown-header {
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

body .dropdown-divider { border-top-color: var(--line); }

body .modal-content,
body.dark-theme .modal-content {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

body .modal-header,
body.dark-theme .modal-header,
body .modal-footer,
body.dark-theme .modal-footer { border-color: var(--line); background: transparent; }

body .badge {
    font-family: var(--font-display);
    font-weight: 650;
    letter-spacing: .02em;
    border-radius: 99px;
    padding: .3em .7em;
}

body .list-group-item,
body.dark-theme .list-group-item {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}

body pre,
body.dark-theme pre {
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    color: var(--ink-2);
    font-size: .85rem;
}

body .nav-tabs { border-bottom: 1px solid var(--line); }

body .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-family: var(--font-display);
    font-weight: 650;
    color: var(--muted);
    padding: .55rem .95rem;
}

body .nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

body .nav-tabs .nav-link.active,
body.dark-theme .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--brand-600);
    border-bottom-color: var(--brand-600);
}

body.dark-theme .nav-tabs .nav-link.active { color: var(--brand-400); border-bottom-color: var(--brand-400); }

/* -------------------------------------------------- legacy page classes --- */
.page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.028em;
    margin-bottom: .5rem;
}

.page-subtitle {
    font-size: clamp(1rem, .9rem + .5vw, 1.2rem);
    color: var(--muted);
    font-weight: 400;
    margin-bottom: 1.75rem;
}

.title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.028em;
}

.subtitle { font-size: 1.15rem; color: var(--muted); }

/* Section headings get an accent rule rather than a grey underline. */
.section-title,
.content h2,
.main-content h2 {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-top: 2.4rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
}

.section-title::after,
.content h2::after,
.main-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 54px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
}

/* The old pages put a bare <hr> under every <h2>; it now duplicates the rule. */
.content h2 + hr,
.main-content h2 + hr { display: none; }

hr { border-top: 1px solid var(--line); }

/* Sidebar ------------------------------------------------------------------ */
.sidebar,
#dates\&Link {
    font-size: .94rem;
}

/* The ANAC sidebar is a plain stack of h3/h5 + list groups in the markup;
   card it as a whole rather than wrapping every group in a div. */
#dates\&Link {
    /* Deliberately NOT sticky: a column that scrolls on its own while the page
       scrolls behind it reads as a bug, not a feature. It flows with the page. */
    align-self: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.3rem 1.3rem .4rem;
}

#dates\&Link h3:not(:first-child),
#dates\&Link h5:not(:first-child) {
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.sidebar-section,
.sidebar-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--shadow-xs);
}

.sidebar-title,
.sidebar h3, .sidebar h5,
#dates\&Link h3, #dates\&Link h5 {
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .6rem;
}

#dates\&Link ul { list-style: none; padding-left: 0; margin-bottom: 1.2rem; }

#dates\&Link ul li,
#dates\&Link ul > a { font-size: .9rem; line-height: 1.9; }

.sidebar-links a:hover { text-decoration: underline; }

.info-table { width: 100%; font-size: .9rem; }
.info-table td { padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
.info-table td:first-child { color: var(--muted); font-weight: 600; }

.links > a {
    padding: 0;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* Countdown ---------------------------------------------------------------- */
.countdown-wrapper {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    margin: 1.25rem 0 1.75rem;
}

#clockdiv, .countdown-wrapper #clockdiv {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: center;
    font-family: var(--font-display);
}

#clockdiv > div,
.countdown-wrapper #clockdiv > div {
    min-width: 86px;
    padding: .65rem .55rem;
    border-radius: var(--radius);
    background: linear-gradient(165deg, var(--brand-700), var(--brand-900));
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

#clockdiv div > span,
.countdown-wrapper #clockdiv div > span {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

#clockdiv .smalltext,
.countdown-wrapper .smalltext {
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .78;
}

/* The league pages' "Tournament Leaderboard" heading is an #leaderboard h3
   that sits directly under the preceding block with no gap of its own. */
h3#leaderboard,
h2#leaderboard {
    margin-top: 2.6rem;
    padding-top: .25rem;
}

/* Leaderboard cards -------------------------------------------------------- */
.leaderboard-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.leaderboard-card .card-header h4 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 750;
    margin: 0;
}

/* -------------------------------------------------------------- hero ----- */
.anac-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 2.5rem;
    padding: clamp(3rem, 2rem + 6vw, 6rem) 0 clamp(2.5rem, 1.5rem + 5vw, 5rem);
    background:
        radial-gradient(1100px 600px at 78% -18%, rgba(232, 137, 58, .3), transparent 58%),
        radial-gradient(900px 620px at 8% 108%, rgba(53, 87, 191, .55), transparent 62%),
        linear-gradient(152deg, #0b1428 0%, #132349 46%, #1b2f63 100%);
    color: #eef1f8;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Film grain — keeps the big flat gradient from banding. */
.anac-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .05;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Slow drifting orbs. Hidden entirely under prefers-reduced-motion. */
.anac-hero .orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
}

.anac-hero .orb-a { width: 420px; height: 420px; top: -140px; left: -90px; background: #3557bf; animation: anacDrift 22s var(--ease) infinite alternate; }
.anac-hero .orb-b { width: 340px; height: 340px; bottom: -150px; right: 6%; background: #e8893a; animation: anacDrift 28s var(--ease) infinite alternate-reverse; }

@keyframes anacDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(60px, 40px, 0) scale(1.14); }
}

.anac-hero .hero-inner {
    position: relative;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.anac-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #cfd9f2;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 99px;
    padding: .34rem .9rem;
    margin-bottom: 1.3rem;
    backdrop-filter: blur(6px);
}

.anac-hero .eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5ce08a;
    box-shadow: 0 0 0 0 rgba(92, 224, 138, .7);
    animation: anacPing 2.4s ease-out infinite;
}

@keyframes anacPing {
    0% { box-shadow: 0 0 0 0 rgba(92, 224, 138, .6); }
    70% { box-shadow: 0 0 0 9px rgba(92, 224, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(92, 224, 138, 0); }
}

.anac-hero h1,
.anac-hero .hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #fff;
    margin: 0 0 1rem;
    max-width: 17ch;
}

.anac-hero .hero-title .grad {
    background: linear-gradient(100deg, #ffd9a8 10%, #f2a862 48%, #8aa5f0 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.anac-hero .hero-lede {
    font-size: clamp(1rem, .92rem + .45vw, 1.2rem);
    line-height: 1.6;
    color: #c3cde6;
    max-width: 58ch;
    margin-bottom: 1.9rem;
}

.anac-hero .hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2.4rem; }

.anac-hero .hero-cta .btn { padding: .62rem 1.3rem; font-size: .98rem; border-radius: 10px; }

body .anac-hero .hero-cta .btn-hero,
body.dark-theme .anac-hero .hero-cta .btn-hero {
    background: #fff;
    border-color: #fff;
    color: #0d1730;
}

body .anac-hero .hero-cta .btn-hero:hover,
body.dark-theme .anac-hero .hero-cta .btn-hero:hover {
    background: #f2a862;
    border-color: #f2a862;
    color: #231303;
}

body .anac-hero .hero-cta .btn-hero-ghost,
body.dark-theme .anac-hero .hero-cta .btn-hero-ghost {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

body .anac-hero .hero-cta .btn-hero-ghost:hover,
body.dark-theme .anac-hero .hero-cta .btn-hero-ghost:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* Stat strip --------------------------------------------------------------- */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    overflow: hidden;
}

.hero-stats .stat {
    background: rgba(10, 17, 35, .42);
    backdrop-filter: blur(8px);
    padding: 1rem 1.1rem;
}

.hero-stats .stat .num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.hero-stats .stat .lbl {
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #a9b6d6;
}

/* Current-season scale figures. Accented so they read as "this year", not
   as more all-time totals, and lit from the top edge so the pair reads as
   one group however the auto-fit grid wraps them. */
.hero-stats .stat-now {
    position: relative;
    background: rgba(232, 137, 58, .13);
}

.hero-stats .stat-now::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-500), var(--accent-400));
}

.hero-stats .stat-now .num { color: var(--accent-400); }
.hero-stats .stat-now .lbl { color: #e4c9ac; }

/* League cards ------------------------------------------------------------- */
.league-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.25rem;
}

.league-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.league-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lc-a, var(--brand-500)), var(--lc-b, var(--accent-500)));
}

.league-card .lc-body { padding: 1.5rem 1.4rem 1.1rem; flex: 1 1 auto; }

.league-card .lc-icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 1.35rem;
    margin-bottom: .9rem;
    background: linear-gradient(150deg, var(--lc-a, var(--brand-500)), var(--lc-b, var(--accent-500)));
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.league-card .lc-kicker {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: .25rem;
}

.league-card h3, .league-card .lc-title {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    margin-bottom: .55rem;
}

.league-card p { font-size: .95rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 0; }

.league-card .lc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: 0 1.4rem 1.35rem;
}

/* News timeline ------------------------------------------------------------ */
.news-timeline { list-style: none; padding-left: 0; margin: 0; }

.news-timeline > li {
    position: relative;
    padding: 0 0 1.5rem 1.7rem;
    border-left: 2px solid var(--line);
}

.news-timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.news-timeline > li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: .52rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line-strong);
}

.news-timeline > li:first-child::before {
    background: var(--accent-500);
    border-color: var(--accent-500);
    box-shadow: 0 0 0 4px rgba(232, 137, 58, .18);
}

.news-timeline .news-date {
    display: block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .2rem;
}

.news-timeline ul { margin-top: .4rem; }

/* Sponsors ----------------------------------------------------------------- */
/* Sponsor marks keep their own colours in BOTH themes — never greyscaled,
   inverted, or set on a plate. The three source images already carry their own
   background (transparent for NEC and CWI, the brand tan for Artificial
   Intelligence), so nothing is painted behind them. They sit in one small row. */
.sponsor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-bottom: .6rem;
}

.sponsor-row a {
    display: inline-flex;
    align-items: center;
    background: none;
    padding: 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    opacity: .9;
}

.sponsor-row a:hover { transform: translateY(-2px); opacity: 1; }

.sponsor-row img {
    width: auto !important;
    max-height: 54px;
    max-width: 100%;
    filter: none;
    opacity: 1;
}

/* The CWI mark is mostly whitespace in its own bounding box, so it needs a
   touch more height to read at the same optical size as the other two. */
.sponsor-row img[src*="CWI"] { max-height: 66px; }

/* Footer ------------------------------------------------------------------- */
.site-footer {
    margin-top: 4rem;
    padding: 2.5rem 1.5rem 2rem;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .88rem;
}

.site-footer .footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.site-footer a { color: var(--ink-2) !important; font-weight: 600; }
.site-footer a:hover { color: var(--link) !important; }

/* The legacy block styles any .footer-links as a centred, uppercase, 15px-
   margined row; reset that here so the site footer reads as normal text. */
.site-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.3rem;
    padding: 0;
    text-align: left;
}

.site-footer .footer-links a {
    margin: 0;
    font-size: .88rem;
    text-transform: none;
    letter-spacing: 0;
}

/* -------------------------------------------------------- scroll reveal -- */
/* Fail-visible: the opacity:0 start state only applies once the layout's
   script has confirmed IntersectionObserver support and tagged <html>. */
html.reveal-on .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    will-change: opacity, transform;
}

html.reveal-on .reveal.is-visible { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: .06s; }
.reveal-d2 { transition-delay: .12s; }
.reveal-d3 { transition-delay: .18s; }
.reveal-d4 { transition-delay: .24s; }

@keyframes anacFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.anac-hero .hero-inner > * { animation: anacFadeUp .7s var(--ease) both; }
.anac-hero .hero-inner > *:nth-child(2) { animation-delay: .08s; }
.anac-hero .hero-inner > *:nth-child(3) { animation-delay: .16s; }
.anac-hero .hero-inner > *:nth-child(4) { animation-delay: .24s; }
.anac-hero .hero-inner > *:nth-child(5) { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .anac-hero .orb { display: none; }
    html.reveal-on .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 767.98px) {
    .anac-hero { padding-top: 2.5rem; }
    .anac-hero h1, .anac-hero .hero-title { max-width: none; }
    .navbar-nav .nav-link:not(.nav-icon)::after { display: none; }
    .navbar .navbar-nav { padding-top: .4rem; }
    #clockdiv > div { min-width: 70px; }
}

/* Print: drop the decorative layers. */
@media print {
    .anac-hero { background: none !important; color: #000 !important; }
    .anac-hero .orb, body::before, .navbar, .site-footer { display: none !important; }
}

/* =========================================================== league pages ==
   The league heroes reuse .anac-hero for the background/grain/orbs and add a
   two-column layout: copy on the left, an inline-SVG diagram of the challenge
   on the right. --lh-a / --lh-b are set per league on the section itself. */
.league-hero { padding-top: clamp(2.2rem, 1.4rem + 3.5vw, 3.6rem); padding-bottom: clamp(2rem, 1.2rem + 3vw, 3.2rem); }

.league-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: 2.5rem;
}

/* .anac-hero staggers its direct children; here the two columns are the
   children, so the stagger applies to the copy block and the art. */
.league-hero .lh-copy > * { animation: anacFadeUp .7s var(--ease) both; }
.league-hero .lh-copy > *:nth-child(2) { animation-delay: .08s; }
.league-hero .lh-copy > *:nth-child(3) { animation-delay: .16s; }
.league-hero .lh-copy > *:nth-child(4) { animation-delay: .24s; }

.league-hero .lh-title {
    font-size: clamp(1.9rem, 1.1rem + 3vw, 3.1rem);
    max-width: 16ch;
}

.league-hero .hero-lede { margin-bottom: 1.6rem; max-width: 52ch; }

.league-hero .lh-art { display: flex; justify-content: center; }
.league-hero .lh-art svg { width: 100%; max-width: 360px; height: auto; }
.league-hero .lh-art text { font-family: var(--font-display); font-weight: 600; opacity: .75; }

/* Slow travel on the dashed connectors — the only motion in the diagrams. */
.league-hero .lh-dash { animation: lhDash 9s linear infinite; }

@keyframes lhDash { to { stroke-dashoffset: -120; } }

@media (max-width: 991.98px) {
    .league-hero-inner { grid-template-columns: 1fr; gap: 1.6rem; }
    .league-hero .lh-art { order: -1; max-width: 300px; }
    .league-hero .lh-title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .league-hero .lh-dash { animation: none; }
}

/* ------------------------------------------------------ "how to take part" */
.how-steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .9rem;
}

.how-steps > li {
    counter-increment: step;
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.1rem 1rem;
    font-size: .95rem;
    line-height: 1.6;
    box-shadow: var(--shadow-xs);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.how-steps > li:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.how-steps > li::before {
    content: counter(step);
    position: absolute;
    top: -14px;
    left: 1.1rem;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 750;
    color: #fff;
    background: linear-gradient(150deg, var(--brand-500), var(--brand-700));
    box-shadow: var(--shadow-sm);
}

.how-steps .step-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .25rem;
    color: var(--ink);
}

.how-steps p { font-size: .95rem; margin: 0; color: var(--ink-2); }

/* -------------------------------------------------------------- organizers */
.organizers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.organizer {
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem .7rem .9rem;
    box-shadow: var(--shadow-xs);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.organizer:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.organizer .portrait {
    width: 84px;
    height: 84px;
    margin: 0 auto .7rem;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: .02em;
    border: 2px solid var(--surface-2);
    box-shadow: 0 0 0 1px var(--line);
}

.organizer .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.organizer .who {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
    color: var(--ink);
}

.organizer .role,
.organizer .affil {
    display: block;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--muted);
}

.organizer .role { margin-top: .2rem; }

/* ======================================================= league sidebars ==
   Each sidebar section (Links, Important Dates, Statistics, Past Competitions,
   Sponsors…) is wrapped in .side-card by the league views. Type scale matches
   the landing page's sidebar; the legacy markup leans on .links / .nolinks /
   .smalllinks paragraphs, which rendered as a loose uppercase stack. */
.league-sidebar {
    font-size: .88rem;
}

.side-card {
    position: relative;
    display: block;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .85rem 1rem .9rem;
    margin-bottom: .75rem;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.side-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--line-strong);
}

/* A hairline of brand colour that wipes in across the top on hover. */
.side-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}

.side-card:hover::before { transform: scaleX(1); }

.side-card > h3,
.side-card > h3:first-child {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 .45rem;
    padding: 0;
    border: none;
}

/* Rows. Kept as normal flow (not flex): the legacy markup mixes "label link +
   value text" stat rows with multi-link rows, and flex reflowed both wrongly. */
.side-card p.links,
.side-card p.smalllinks {
    display: block;
    margin: 0;
    padding: 0;
    font-size: .84rem;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
}

.side-card p.links > a,
.side-card p.smalllinks > a {
    display: inline-block;
    padding: .1rem .3rem;
    margin: 0 -.3rem;
    border-radius: 6px;
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: background var(--dur) var(--ease);
}

/* NB: no `a:only-child { display:block }` here. :only-child ignores text
   nodes, so it also matched the stat rows (`<a>Label:</a> 42`) and pushed the
   value onto its own line. Links stay inline; each already sits in its own
   <p>, so the list reads one-per-line regardless. */

/* Rows that hold two or three links side by side (Templates, Description…)
   need a visible gap; the negative inline margin above otherwise glues them. */
.side-card p.links > a + a,
.side-card p.smalllinks > a + a { margin-left: .5rem; }

.side-card p.links > a:hover,
.side-card p.smalllinks > a:hover { background: var(--surface-3); text-decoration: none; }

/* Sub-labels ("Templates:", "Platform Source Code:") read as group captions. */
.side-card p.nolinks {
    margin: .6rem 0 .15rem;
    padding: 0;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .85;
}

.side-card p.nolinks:first-of-type { margin-top: .1rem; }

/* An inline "TBA" placeholder sits in a <span class="nolinks"> inside a link
   row; the legacy uppercase/letter-spaced treatment makes it shout. */
.side-card p.links > span.nolinks,
.side-card p.smalllinks > span.nolinks {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    opacity: 1;
}

/* Important Dates: a real two-column table instead of drifting text. */
.side-card .info { padding: 0; font-size: .82rem; letter-spacing: 0; }

.side-card .info table { width: 100%; border-collapse: collapse; }

.side-card .info td {
    padding: .25rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    font-size: .82rem;
}

.side-card .info tr:last-child td { border-bottom: none; }

.side-card .info td:first-child { color: var(--muted); padding-right: .6rem; }

.side-card .info td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
    font-weight: 600;
}

/* The sidebar column is narrower than the landing page's, so the marks are
   stepped down again to keep all three on one row. */
.side-card .sponsor-row { display: flex; gap: .6rem; }
.side-card .sponsor-row img { max-height: 34px; }
.side-card .sponsor-row img[src*="CWI"] { max-height: 42px; }

/* The sponsor card never lifts — the logos are the content. */
.side-card:has(.sponsor-row):hover { transform: none; }