:root {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #192b40;
    background: #f3f6fa;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

a {
    color: #1d5ea6;
}

.container {
    max-width: 1180px;
    margin: auto;
    padding: 0 22px;
}

/* ============================
   HEADER & NAVIGATION
   ============================ */

.site-header {
    background: #10283e;
    color: #fff;
    padding: 20px 0;
    position: relative;
    z-index: 100;
}

    .site-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

.brand {
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

    .brand span {
        color: #62c4e5;
    }

.header-tag {
    font-size: 13px;
    color: #c5d8e7;
}

/* Header navigation */

.qspa-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.qspa-nav-link {
    color: #e3edf5;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 4px;
    white-space: nowrap;
    transition: color .2s ease;
}

    .qspa-nav-link:hover,
    .qspa-nav-link:focus-visible {
        color: #62c4e5;
    }

/* Rankings dropdown */

.qspa-dropdown {
    position: relative;
}

    .qspa-dropdown summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 7px;
        user-select: none;
    }

        .qspa-dropdown summary::-webkit-details-marker {
            display: none;
        }

    .qspa-dropdown[open] > summary {
        color: #62c4e5;
    }

.qspa-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    z-index: 1000;
}

    .qspa-dropdown-menu a {
        display: block;
        padding: 12px 14px;
        color: #192b40;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        border-radius: 6px;
        transition: background .2s ease, color .2s ease;
    }

        .qspa-dropdown-menu a:hover,
        .qspa-dropdown-menu a:focus-visible {
            background: #edf6fb;
            color: #127da8;
        }

        .qspa-dropdown-menu a:focus-visible,
        .qspa-dropdown summary:focus-visible {
            outline: 2px solid #62c4e5;
            outline-offset: 3px;
        }

/* ============================
   HERO SECTION
   ============================ */

.hero {
    padding: 45px 0 28px;
}

    .hero h1 {
        font-size: clamp(30px, 4vw, 47px);
        line-height: 1.13;
        margin: 8px 0 15px;
        max-width: 850px;
    }

    .hero p {
        max-width: 820px;
        line-height: 1.6;
        color: #506276;
    }

.eyebrow {
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 12px;
    color: #186b91 !important;
}

/* ============================
   MAIN LAYOUT
   ============================ */

.layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(285px, 1fr);
    gap: 22px;
    align-items: start;
}

.panel {
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 22px;
    box-shadow: 0 3px 14px #10283e09;
}

    .panel h2 {
        margin: 0 0 18px;
        font-size: 21px;
    }

/* ============================
   FORMS
   ============================ */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

label {
    display: block;
    font-weight: 650;
    font-size: 14px;
    margin: 13px 0 7px;
}

input:not([type=range]),
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: #192b40;
}

textarea {
    resize: vertical;
}

.helper {
    font-size: 13px;
    color: #66788b;
    line-height: 1.5;
}

/* ============================
   SCORING CRITERIA
   ============================ */

.criterion {
    padding: 15px 0;
    border-bottom: 1px solid #edf0f4;
}

.criterion-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .criterion-head label {
        margin: 0;
    }

    .criterion-head p {
        font-size: 12px;
        color: #63748a;
        margin: 5px 0;
    }

.weight {
    font-size: 12px;
    white-space: nowrap;
    color: #28739e;
    font-weight: 700;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .slider-row input {
        width: 100%;
        accent-color: #177caa;
    }

    .slider-row output {
        font-weight: 800;
        background: #edf6fb;
        border-radius: 6px;
        min-width: 37px;
        text-align: center;
        padding: 6px;
    }

/* ============================
   SCORE CARD
   ============================ */

.score-card {
    background: #10283e;
    color: #fff;
    border-radius: 11px;
    padding: 18px;
    margin: 20px 0;
}

    .score-card > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .score-card strong {
        font-size: 27px;
    }

    .score-card small {
        color: #c4d7e6;
    }

/* ============================
   BUTTONS
   ============================ */

.primary,
.secondary {
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 750;
    margin-top: 15px;
}

.primary {
    background: #127da8;
    color: #fff;
    width: 100%;
}

.secondary {
    background: #10283e;
    color: #fff;
    width: 100%;
}

button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ============================
   LEADERBOARD
   ============================ */

.leader-row {
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #edf0f4;
    padding: 11px 0;
}

    .leader-row > div {
        flex: 1;
        min-width: 0;
    }

    .leader-row small {
        display: block;
        color: #6c7c8b;
        margin-top: 2px;
    }

.rank {
    color: #8090a0;
}

.leader-row b {
    font-size: 19px;
    color: #127da8;
}

/* ============================
   NOTICES & VALIDATION
   ============================ */

.notice {
    padding: 14px 18px;
    background: #e3f7ed;
    border: 1px solid #9ad3b3;
    border-radius: 8px;
    margin-bottom: 20px;
}

.validation {
    color: #b3261e;
    font-size: 13px;
}

/* ============================
   FOOTER
   ============================ */

.footer {
    padding-top: 20px;
    padding-bottom: 35px;
    color: #6b7d90;
    font-size: 12px;
}

/* ============================
   RESPONSIVE DESIGN
   ============================ */

@media (max-width: 780px) {

    .layout {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .header-tag {
        display: none;
    }

    .panel {
        padding: 19px;
    }

    .site-header .container {
        flex-wrap: wrap;
        gap: 12px;
    }

    .qspa-nav {
        gap: 20px;
    }
}

@media (max-width: 480px) {

    .site-header {
        padding: 15px 0;
    }

    .brand {
        font-size: 19px;
    }

    .qspa-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 24px;
    }

    .qspa-nav-link {
        font-size: 14px;
    }

    .qspa-dropdown-menu {
        left: 0;
        right: auto;
        min-width: 260px;
        max-width: calc(100vw - 44px);
    }
}


/* =========================================
   QSPA NFL QUARTERBACK RANKINGS (SHARED)
   ========================================= */
.retired-qb-page { max-width: 1100px; margin: 0 auto; padding: 28px 18px 64px; color: #182536; }
    .retired-qb-page * { box-sizing: border-box; }
    .retired-qb-page .qb-hero { background: linear-gradient(120deg,#102c4a,#17646d); color: #fff; padding: 42px 38px; border-radius: 18px; }
    .retired-qb-page .eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; font-weight: 800; color: #a6e6dd; }
    .retired-qb-page h1 { font-size: clamp(2rem,4vw,3rem); line-height: 1.15; margin: 12px 0 18px; }
    .retired-qb-page .qb-hero p { max-width: 800px; line-height: 1.75; color: #e4f1f5; }
    .retired-qb-page h2 { font-size: 1.65rem; margin: 36px 0 14px; }
    .retired-qb-page h3 { font-size: 1.15rem; margin: 22px 0 8px; }
    .retired-qb-page p, .retired-qb-page li { line-height: 1.7; }
    .retired-qb-page .qb-panel { background: #fff; border: 1px solid #dce5eb; border-radius: 14px; padding: 24px; margin-top: 22px; }
    .retired-qb-page .qb-callout { border-left: 4px solid #168b83; background: #f0f8f7; padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 22px 0; }
    .retired-qb-page .qb-table-wrap { overflow-x: auto; }
    .retired-qb-page table { width: 100%; border-collapse: collapse; }
    .retired-qb-page th { text-align: left; background: #eef4f7; font-size: .87rem; padding: 13px; }
    .retired-qb-page td { padding: 13px; border-bottom: 1px solid #e7edf1; }
    .retired-qb-page tbody tr:hover { background: #f6fafb; }
    .retired-qb-page .qb-rank { font-weight: 800; color: #17646d; width: 62px; }
    .retired-qb-page .qb-score { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; width: 100px; }
    .retired-qb-page .qb-bar-track { width: 100%; min-width: 115px; height: 9px; background: #e4edf0; border-radius: 8px; overflow: hidden; }
    .retired-qb-page .qb-bar { height: 100%; background: linear-gradient(90deg,#138c85,#1d6689); border-radius: 8px; }
    .retired-qb-page .qb-muted { color: #596a78; font-size: .9rem; }
    .retired-qb-page .qb-note { margin-top: 15px; color: #526477; font-size: .9rem; }
    .retired-qb-page .qb-criteria th:last-child, .retired-qb-page .qb-criteria td:last-child { text-align: right; }
    .retired-qb-page .qb-footer { margin-top: 30px; font-size: .85rem; color: #5c6975; }
    @media(max-width:650px) {
        .retired-qb-page .qb-hero { padding: 28px 22px; }
        .retired-qb-page .qb-panel { padding: 16px; }
        .retired-qb-page th, .retired-qb-page td { padding: 11px 8px; }
        .retired-qb-page .qb-bar-cell { display: none; }
    }

/* Active NFL rankings additions */
.qspa-hero{padding-bottom:30px}.qspa-datestamp{font-size:.85rem;font-weight:650;color:#506276}.qspa-method,.qspa-ranking{margin-bottom:22px}.qspa-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.qspa-count{font-size:.83rem;color:#506276;font-weight:700}.qspa-table-wrap{overflow-x:auto}.qspa-table,.qspa-traits{width:100%;border-collapse:collapse;text-align:left}.qspa-table th,.qspa-table td,.qspa-traits th,.qspa-traits td{padding:13px 12px;border-bottom:1px solid #dce5ed}.qspa-table thead,.qspa-traits thead{background:#edf3f8}.qspa-rank{font-size:1.1rem;font-weight:800;color:#12628d}.qspa-empty{padding:24px;border:1px dashed #b4c9d7;border-radius:10px;background:#f7fafc}.qspa-empty h3{margin-top:0}.qspa-player{border:1px solid #dce5ed;border-radius:9px;margin:12px 0;overflow:hidden}.qspa-player summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px;background:#f1f6fa;font-weight:750}.qspa-player summary small{font-weight:450}.qspa-player-content{padding:18px;overflow-x:auto}.qspa-candidates{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:10px}.qspa-candidates>div{padding:12px;border:1px solid #dce5ed;border-radius:8px;display:flex;flex-direction:column;gap:3px}.qspa-candidates span{color:#506276;font-size:.85rem}@media(max-width:600px){.qspa-table th,.qspa-table td{padding:10px 7px;font-size:.85rem}.qspa-player summary{align-items:flex-start;flex-direction:column}}

/* Shared rankings page refinements */
.retired-qb-page .qb-hero .eyebrow { color: #a6e6dd !important; }
.active-qb-page .qspa-hero { padding-bottom: 42px; }
.active-qb-page .qspa-hero .qspa-datestamp { color: #d5edf0; }
.active-qb-page .qb-panel > h2:first-child { margin-top: 0; }
.active-qb-page .qspa-player summary:hover { background: #e6f0f4; }