/**
 * /sharp-vs-square styling.
 *
 * Scoped entirely under `.svs` so nothing bleeds into the rest of the site -
 * every rule below either starts with `.svs` or is nested under a `.svs`
 * ancestor. The dark theme (body #0a0a0a, panels #0f0f0f, borders #232323,
 * accent limegreen) matches templates/pages/odds_api.html's inline <style>
 * block, which is the closest existing sibling - both are public marketing
 * pages with charts, tables and toggles under the same navbar.
 *
 * Two rules borrowed from site.css and repeated here for the same reason
 * odds_api.html repeats them in its own <style>: a page that has to load
 * site.css to look right is a page whose layout depends on rules nobody
 * reading this file can see.
 *
 * Bootstrap 4 note: the site ships Bootstrap 4.0.0, which does not include
 * the `.gap-*` utility classes Bootstrap 5 added. site.css has a `.gap-1..5`
 * shim, but this file uses the raw `gap:` property directly - it works in
 * every browser the site supports and does not depend on the shim being
 * loaded first.
 */

.svs {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 60px;
    color: #ccc;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.svs-hero {
    padding: 62px 0 24px;
}
.svs-lede {
    max-width: 860px;
    margin: 0 auto;
    color: #b5b5b5;
    line-height: 1.75;
    font-size: 1.05rem;
}

/* ------------------------------------------------------------------ */
/* Meta strip (last-rebuild banner)                                    */
/* ------------------------------------------------------------------ */

.svs-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 0 auto 26px;
    max-width: 900px;
    font-size: .88rem;
    border-left: 3px solid;
    background: #0f0f0f;
}
.svs-meta-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.svs-meta-fresh { color: #7ac97a; border-left-color: limegreen; }
.svs-meta-degraded { color: #ffc96b; border-left-color: #ffb74d; }
.svs-meta-stale { color: #ff9b95; border-left-color: #ff6b6b; }

/* ------------------------------------------------------------------ */
/* On-page nav                                                         */
/* ------------------------------------------------------------------ */

.svs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid #232323;
}
.svs-nav a {
    color: #9a9a9a;
    font-size: .85rem;
    text-decoration: none;
    padding: 3px 9px;
    border: 1px solid #2a2a2a;
}
.svs-nav a:hover, .svs-nav a:focus {
    color: limegreen;
    border-color: limegreen;
    outline: none;
}

/* ------------------------------------------------------------------ */
/* Sticky control bar                                                  */
/* ------------------------------------------------------------------ */

.svs-controls {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding: 10px 16px;
    margin-bottom: 30px;
    background: rgba(10, 10, 10, .96);
    border: 1px solid #232323;
    backdrop-filter: blur(6px);
}
.svs-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.svs-control-label {
    color: #7a7a7a;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 600;
    white-space: nowrap;
}
.svs-control-hint {
    flex: 1 1 100%;   /* its own line, full width - never a narrow column */
    color: #6a6a6a;
    font-size: .75rem;
    line-height: 1.5;
    margin: 0;
    min-height: 1em;
}
.svs-select {
    background: #141414;
    color: #ddd;
    border: 1px solid #2a2a2a;
    padding: 7px 10px;
    font-family: inherit;
    font-size: .88rem;
    min-width: 0;
}
.svs-select:focus {
    outline: none;
    border-color: limegreen;
    color: #fff;
}

/* Tabs - shared by league, market and drift-metric groups. */
.svs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.svs-tab {
    background: #141414;
    border: 1px solid #232323;
    color: #8a8a8a;
    padding: 7px 13px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s ease, border-color .15s ease;
}
.svs-tab:hover {
    color: #ccc;
    border-color: #3a3a3a;
}
.svs-tab:focus {
    outline: none;
    border-color: limegreen;
}
.svs-tab[aria-selected="true"] {
    color: limegreen;
    border-color: limegreen;
}
.svs-tab-icon {
    height: 14px;
    width: auto;
}

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */

.svs-sec {
    margin-bottom: 48px;
    scroll-margin-top: 140px;   /* clear the sticky control bar on anchor jumps */
}
.svs-sec > h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid #232323;
    padding-bottom: 10px;
    margin-bottom: 8px;
}
.svs-sec h3 {
    font-size: 1.02rem;
    color: #fff;
    margin: 22px 0 6px;
    font-weight: 700;
}
.svs-sec h4 {
    font-size: .92rem;
    color: #ddd;
    margin: 14px 0 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
}
.svs-sub {
    color: #9a9a9a;
    line-height: 1.75;
    margin-bottom: 18px;
    max-width: 900px;
}
.svs-note {
    color: #7a7a7a;
    font-size: .83rem;
    line-height: 1.6;
    margin: 10px 0 0;
}
.svs-list {
    color: #b5b5b5;
    line-height: 1.8;
    padding-left: 22px;
    margin-bottom: 12px;
}
.svs-list li { margin-bottom: 4px; }
.svs-list code, .svs-note code, .svs-sub code {
    background: #161616;
    color: #4da6ff;
    padding: 1px 6px;
    font-family: Consolas, Monaco, monospace;
    font-size: .82em;
}

.svs-empty {
    padding: 30px 20px;
    margin-bottom: 26px;
    text-align: center;
    background: #0f0f0f;
    border: 1px dashed #2a2a2a;
    color: #9a9a9a;
}
.svs-empty[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* Charts                                                              */
/* ------------------------------------------------------------------ */

.svs-chart-wrap {
    background: #0f0f0f;
    border: 1px solid #232323;
    padding: 12px;
    margin-bottom: 18px;
}
.svs-chart {
    width: 100%;
    height: 420px;
}
.svs-chart-tall { height: 520px; }

.svs-drift-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.svs-drift-controls[hidden] { display: none; }

.svs-btn {
    background: transparent;
    border: 2px solid #3a3a3a;
    color: #ccc;
    padding: 9px 18px;
    cursor: pointer;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.svs-btn:hover, .svs-btn:focus {
    border-color: limegreen;
    color: limegreen;
    outline: none;
    text-decoration: none;
}
.svs-btn:disabled {
    opacity: .5;
    cursor: wait;
}
.svs-btn-primary {
    border-color: limegreen;
    color: #fff;
}
.svs-btn-primary:hover, .svs-btn-primary:focus {
    background: limegreen;
    color: #000;
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

.svs-table-wrap {
    overflow-x: auto;
    background: #0f0f0f;
    border: 1px solid #232323;
}
.svs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.svs-table th {
    text-align: left;
    color: #7a7a7a;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .6px;
    padding: 10px;
    border-bottom: 1px solid #2a2a2a;
    white-space: nowrap;
    background: #0a0a0a;
}
.svs-table th.svs-sortable {
    cursor: pointer;
    user-select: none;
}
.svs-table th.svs-sortable:hover {
    color: limegreen;
}
.svs-table th.svs-sortable:focus {
    outline: 1px solid limegreen;
    outline-offset: -2px;
    color: limegreen;
}
.svs-table th.svs-sorted {
    color: limegreen;
}
.svs-table th.svs-sorted::after {
    content: ' \25BE';   /* down arrow, overridden by JS-set direction below */
    font-size: .8em;
}
.svs-table th.svs-sorted[data-svs-sort-dir="asc"]::after { content: ' \25B4'; }
.svs-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #161616;
    color: #ccc;
    vertical-align: middle;
}
.svs-table tbody tr:hover td {
    background: #121212;
}
.svs-table .svs-num {
    text-align: right;
    font-family: Consolas, Monaco, monospace;
    font-size: .84rem;
    white-space: nowrap;
}
.svs-table-empty {
    text-align: center;
    color: #7a7a7a;
    padding: 24px 10px;
    font-style: italic;
}

/* Row affordances for the leaderboard's drawer toggle. */
.svs-row-clickable { cursor: pointer; }
.svs-row-toggle {
    color: #4a4a4a;
    text-align: center;
    width: 22px;
    padding: 8px 4px;
    transition: color .15s ease;
}
.svs-row-clickable:hover .svs-row-toggle { color: limegreen; }
.svs-row-lowconf td { opacity: .72; }
.svs-lowconf {
    color: #ffb74d;
    font-weight: 700;
    margin-left: 4px;
    cursor: help;
}

/* ------------------------------------------------------------------ */
/* Methodology collapse                                                */
/* ------------------------------------------------------------------ */

.svs-collapse-toggle {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.svs-collapse-toggle:hover, .svs-collapse-toggle:focus {
    color: limegreen;
    outline: none;
}
.svs-collapse-caret {
    font-size: .8em;
    transition: transform .2s ease;
}
.svs-collapse-toggle[aria-expanded="true"] .svs-collapse-caret {
    transform: rotate(180deg);
}
.svs-collapse-body {
    padding: 16px 0 0;
}
.svs-collapse-body[hidden] { display: none; }

.svs-weights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 12px 0 18px;
}
.svs-weight-card {
    background: #0f0f0f;
    border: 1px solid #232323;
    padding: 14px 16px;
}
.svs-weight-card h4 {
    margin-top: 0;
    color: limegreen;
}
.svs-weight-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.svs-weight-card li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #1a1a1a;
    font-size: .88rem;
    color: #b5b5b5;
}
.svs-weight-card li:last-child { border-bottom: none; }
.svs-weight-label { flex: 1; }
.svs-weight-value {
    font-family: Consolas, Monaco, monospace;
    color: limegreen;
    font-weight: 700;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Per-book drawer                                                     */
/* ------------------------------------------------------------------ */

.svs-drawer {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .62);
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}
.svs-drawer[hidden] { display: none; }
.svs-drawer-panel {
    background: #0f0f0f;
    border-left: 1px solid #2a2a2a;
    width: 100%;
    max-width: 520px;
    overflow-y: auto;
    padding: 22px 24px 32px;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .5);
}
.svs-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #232323;
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.svs-drawer-head h3 {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}
.svs-drawer-close {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #9a9a9a;
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.svs-drawer-close:hover, .svs-drawer-close:focus {
    color: limegreen;
    border-color: limegreen;
    outline: none;
}
.svs-drawer-sub {
    color: #9a9a9a;
    font-size: .88rem;
    line-height: 1.65;
    margin-bottom: 16px;
}
.svs-drawer-sub em { color: #ffb74d; font-style: normal; }
.svs-drawer-list {
    margin: 0 0 14px;
    padding: 0;
}
.svs-drawer-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #1a1a1a;
}
.svs-drawer-row dt {
    color: #b5b5b5;
    font-size: .88rem;
    flex: 1;
    margin: 0;
}
.svs-drawer-row dd {
    color: #fff;
    font-family: Consolas, Monaco, monospace;
    font-size: .88rem;
    margin: 0;
    white-space: nowrap;
}
.svs-drawer-hint {
    color: #6a6a6a;
    font-size: .75rem;
    margin-left: 6px;
}
.svs-drawer-note {
    color: #7a7a7a;
    font-size: .78rem;
    line-height: 1.6;
    margin-top: 16px;
}

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

.svs-cta {
    text-align: center;
    padding: 24px 0 8px;
}
.svs-cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 18px 0 6px;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
    .svs-controls {
        position: static;   /* sticky under a small viewport eats the chart */
    }
    .svs-control-group { flex: 1 1 100%; }   /* one group per row */
    .svs-chart { height: 340px; }
    .svs-chart-tall { height: 420px; }
    .svs-sec > h2 { font-size: 1.35rem; }
    .svs-hero h1 { font-size: 2.1rem; }
    .svs-drawer-panel { max-width: 100%; }
}

@media (max-width: 560px) {
    .svs-chart { height: 300px; }
    .svs-chart-tall { height: 380px; }
    .svs-table { font-size: .82rem; }
    .svs-table th, .svs-table td { padding: 6px 8px; }
}

/* ------------------------------------------------------------------ */
/* Metric explainer tooltips                                           */
/*                                                                     */
/* The box lives on <body> (appended by the JS) so no .svs-table-wrap  */
/* overflow can clip it, and it is positioned in page coordinates.     */
/* The affordance is a dotted underline: every sortable header is      */
/* already cursor:pointer for sorting, so the underline is what says   */
/* "there is an explanation here" without fighting the sort cursor.    */
/* ------------------------------------------------------------------ */

.svs-tipbox {
    position: absolute;
    z-index: 1200;
    max-width: 340px;
    padding: 10px 12px;
    background: #141414;
    border: 1px solid #2f2f2f;
    border-left: 3px solid limegreen;
    border-radius: 6px;
    color: #e8e8e8;
    font-size: .84rem;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
    pointer-events: none;   /* never steal the hover from its own anchor */
}

.svs-tipbox[hidden] { display: none; }

.svs-table th[data-svs-tip],
.svs-drawer-row dt[data-svs-tip] {
    text-decoration: underline dotted rgba(50, 205, 50, .55);
    text-underline-offset: 3px;
}

.svs-drawer-row dt[data-svs-tip] { cursor: help; }

@media (max-width: 560px) {
    .svs-tipbox { max-width: calc(100vw - 24px); }
}

/* ------------------------------------------------------------------ */
/* Print - a marketing page occasionally gets printed for a deck.      */
/* ------------------------------------------------------------------ */

@media print {
    .svs-controls, .svs-nav, .svs-drawer, .svs-cta, .svs-btn { display: none !important; }
    .svs-chart-wrap, .svs-table-wrap { break-inside: avoid; }
    .svs { color: #000; max-width: none; }
    .svs-sec > h2, .svs-sec h3 { color: #000; border-bottom-color: #999; }
    .svs-sub, .svs-note { color: #333; }
}