/* =====================================================================
 * harpcrate rankings — "Gridiron" design system (navy + amber, dense list).
 * All classes are `rk-`-prefixed and layer on top of Bootstrap, which is now
 * loaded ONLY for the four modals, tooltips, and the Vue team-search. Every
 * page (home, region/class/district, team detail, school hub, indexes) is
 * built from these rk- rules. Loading order in _base.html puts this file
 * last, so it wins over Bootstrap.
 * ===================================================================== */
/* Palette (--rk-navy, --rk-amber, …) is the shared source of truth in
 * packages/tokens/tokens.css, linked before this file in _base.html. */

/* Content column width — the hero, notice, and main all track this so they stay aligned.
 * Wider than a phone column so laptops don't feel small/cramped. */
:root {
    --rk-max: 1040px;
    /* Mid gray for edges that should read as a soft shadow rather than a colored rule:
     * clearly darker than the page background, well short of the navy. */
    --rk-edge: #a8b0bb;
}

/* Base reset — previously supplied by Bootstrap; now self-contained. */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 18px;
    line-height: 1.5;
    background: var(--rk-bg);
    color: var(--rk-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }
a { color: var(--rk-link); }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }

/* Shared page frame (applied in _base.html to every page) --------------- */
/* There is no top toolbar: the navy sticky bar existed to get back to a separate homepage. The
 * Home link now sits in the page title row (_title_row.html), so it reads on white — hence navy
 * text, and va.svg carries its own navy fill rather than being inverted white by a filter. */
.rk-main { max-width: var(--rk-max); margin: 0 auto; padding: 16px; }
/* Keep Bootstrap-grid pages that render inside rk-main from overflowing. */
.rk-main > .row { margin-left: 0; margin-right: 0; }


.rk-notice { max-width: calc(var(--rk-max) - 32px); width: calc(100% - 32px); margin: 16px auto 0; padding: 12px 14px; background: var(--rk-tint); border: 1px solid var(--rk-line); border-left: 4px solid var(--rk-amber); border-radius: var(--rk-radius); font-size: 15px; color: #39414f; }
/* Homepage variant: flows inside rk-main below the hero (main supplies the gutters). */
.rk-notice--inline { max-width: none; width: auto; margin: 0 0 22px; }

/* Home hero: full-width block outside rk-main (scrollbar-safe); text stays in the content column ---- */
.rk-hero { background: linear-gradient(180deg, var(--rk-navy) 0%, var(--rk-navy) 55%, #1b3f70 100%); color: #fff; padding: 24px 0 20px; }
/* Centered as a pair: the school map on the left, the title beside it. Stacks on narrow screens. */
.rk-hero-inner { max-width: var(--rk-max); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 32px; }
.rk-hero-map { flex: 0 1 340px; width: 340px; height: auto; min-width: 0; }
.rk-hero-text { flex: 0 1 auto; min-width: 0; }
@media (max-width: 599px) { .rk-hero-inner { flex-direction: column; gap: 14px; } .rk-hero-map { flex-basis: auto; width: min(320px, 100%); } .rk-hero-text { text-align: center; } }
.rk-hero .rk-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rk-amber); }
.rk-hero h1 { font-size: 25px; line-height: 1.1; margin: 6px 0 4px; font-weight: 800; letter-spacing: -.01em; }
.rk-hero h1 .rk-sport { display: block; color: var(--rk-amber); font-size: 30px; margin-top: 2px; }
.rk-hero p { color: #c7d0dc; font-size: 15.5px; margin: 0; }
/* The week line: the same "Week N · updated" label /predictions shows, so a return visit can see
 * at a glance that the site moved. */
.rk-hero .rk-hero-when { font-size: 13px; margin-top: 8px; color: #9fb0c6; }
.rk-hero .rk-hero-when b { color: #fff; font-weight: 700; }

/* Intro card, section heads, search ------------------------------------ */
.rk-intro { background: var(--rk-card); border: 1px solid var(--rk-line); border-left: 4px solid var(--rk-amber); border-radius: var(--rk-radius); padding: 13px 14px; font-size: 15px; color: #39414f; margin-bottom: 22px; }
.rk-intro p { margin: 0 0 8px; }
.rk-intro p:last-child { margin-bottom: 0; }
.rk-intro a { color: var(--rk-link); }
.rk-intro .rk-priv { color: var(--rk-muted); font-size: 14px; }

.rk-sec-head { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; }
.rk-sec-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.rk-section { margin-bottom: 24px; }
/* A region page's two headed sections (Standings, This Week's Games): the SAME space above each
   heading, whatever sits before it. Sibling margins collapse, so this is the gap. */
.rk-section--spaced { margin: 20px 0 0; }
.rk-section--spaced .rk-sec-head { margin-bottom: 12px; }
/* Plain intro line on the home page (no card). */
.rk-lede { font-size: 16px; line-height: 1.5; color: #39414f; margin: 0 0 20px; }

.rk-search { position: relative; }
.rk-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--rk-line); border-radius: var(--rk-radius); font-size: 17px; background: #fff; }
/* The team finder is the main thing people come to do, so its input is bigger than a
 * stock field: heavier border, magnifier, and a visible focus ring. */
.rk-search .rk-input { padding: 15px 46px; font-size: 19px; font-weight: 500; border: 2px solid var(--rk-edge); box-shadow: 0 2px 8px rgba(13, 42, 79, .08); }
.rk-input:focus { outline: none; border-color: var(--rk-muted); }
.rk-search .rk-input::placeholder { color: var(--rk-muted); font-weight: 400; }
.rk-search-icon { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); width: 19px; height: 19px; color: var(--rk-muted); pointer-events: none; }
.rk-clear { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: none; background: transparent; color: var(--rk-muted); font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.rk-clear:hover { background: var(--rk-line); color: var(--rk-ink); }
.rk-clear[hidden] { display: none; }

/* Collection tiles (classes / regions / districts) --------------------- */
.rk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rk-tile { background: var(--rk-card); border: 1px solid var(--rk-line); border-bottom: 3px solid var(--rk-edge); border-radius: 9px; padding: 12px 9px; text-align: center; text-decoration: none; color: var(--rk-link); display: block; transition: transform .1s ease; }
.rk-tile:active { transform: scale(.98); }
.rk-tile .rk-tile-t { font-weight: 800; font-size: 15.5px; }
.rk-tile .rk-tile-s { color: var(--rk-muted); font-size: 13px; margin-top: 1px; }
@media (max-width: 340px) { .rk-grid { grid-template-columns: repeat(3, 1fr); } }

/* Region/class/district header block ----------------------------------- */
.rk-titlerow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.rk-titlerow .rk-page-title { min-width: 0; }
.rk-page-title { font-size: 23px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.rk-titlerow .rk-home { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15.5px; color: var(--rk-navy); text-decoration: none; }
.rk-titlerow .rk-home img { height: 18px; width: auto; }
.rk-titlerow .rk-home:hover { text-decoration: underline; }
.rk-updated { color: var(--rk-muted); font-size: 14px; margin: 3px 0 12px; }
/* Region page jump links to #standings and #this-week. */
.rk-jump { font-size: 14.5px; color: #39414f; margin: 0 0 12px; }
.rk-jump a { color: var(--rk-link); font-weight: 700; }
#standings, #this-week { scroll-margin-top: 16px; }
/* Region identity (optional regions.json about/url) — plain lead text above the metric card. */
/* Full content width — it sits directly above the metric box, which is full width. */
.rk-region-about { font-size: 16px; color: #39414f; margin: 0 0 10px; }
.rk-region-links { margin: 0 0 14px; font-size: 14.5px; font-weight: 700; }
.rk-metric { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); padding: 11px 13px; font-size: 14.5px; color: #39414f; margin-bottom: 16px; }
.rk-metric b { color: var(--rk-ink); }
.rk-metric a { color: var(--rk-link); }
.rk-metric p { margin: 0; }

/* Dense ranking list (single panel) ------------------------------------ */
.rk-rankings { list-style: none; margin: 0; padding: 0; background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 12px; overflow: hidden; }
.rk-rank-head { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 2px solid var(--rk-navy); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rk-muted); }
.rk-rank-head .rk-h-main { flex: 1; padding-left: 38px; }
.rk-rank-head .rk-h-stats { display: flex; gap: 14px; }
.rk-rank-head .rk-h-stats span { width: 56px; text-align: right; }

.rk-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--rk-line); }
.rk-row:last-child { border-bottom: none; }
.rk-row.rk-seed { border-left: 3px solid var(--rk-amber); background: var(--rk-tint); }
.rk-row.rk-unrated { background: #fbfbfc; }
.rk-num { flex: 0 0 26px; text-align: center; font-weight: 800; font-size: 18px; color: var(--rk-navy); }
.rk-seed .rk-num { color: var(--rk-amber-d); }
.rk-team { flex: 1; min-width: 0; }
.rk-team .rk-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--rk-link); text-decoration: none; }
.rk-team .rk-name:hover { text-decoration: underline; }
.rk-team .rk-meta { color: var(--rk-muted); font-size: 13px; margin-top: 1px; }
.rk-team .rk-meta a { color: var(--rk-link); text-decoration: none; }
.rk-team .rk-meta a:hover { text-decoration: underline; }
.rk-badge { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 1px 5px; border-radius: 4px; background: var(--rk-amber); color: #3a2a00; margin-left: 4px; vertical-align: middle; }

.rk-stats { display: flex; gap: 14px; text-align: right; }
.rk-stat { width: 56px; }
.rk-stat b { display: block; font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rk-ink); }
.rk-stat b.rk-dash { color: var(--rk-muted); font-weight: 600; }
.rk-rank-head .rk-h-link { color: var(--rk-link); text-decoration: underline; }
.rk-stat .rk-info { color: var(--rk-muted); cursor: pointer; font-size: 12.5px; }
/* District stat is progressive: hidden on narrow phones, shown ≥560px. */
.rk-stat--dist, .rk-h-dist { display: none; }
@media (min-width: 560px) { .rk-stat--dist, .rk-h-dist { display: block; } }

.rk-cutline { display: flex; align-items: center; gap: 9px; padding: 6px 14px; background: var(--rk-tint); color: var(--rk-amber-d); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; border-top: 1px solid var(--rk-line); border-bottom: 1px solid var(--rk-line); }
.rk-cutline::before, .rk-cutline::after { content: ""; flex: 1; height: 1px; background: var(--rk-amber); opacity: .5; }

/* Team detail page ----------------------------------------------------- */
.rk-facts { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rk-line); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); overflow: hidden; margin: 0 0 22px; }
.rk-fact { background: var(--rk-card); padding: 9px 12px; margin: 0; }
.rk-fact dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--rk-muted); font-weight: 800; margin: 0 0 2px; }
.rk-fact dt a { color: var(--rk-link); text-decoration: none; }
.rk-fact dd { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--rk-ink); font-variant-numeric: tabular-nums; }
.rk-fact dd a { color: var(--rk-link); text-decoration: none; }
.rk-fact dd a:hover { text-decoration: underline; }
.rk-fact-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--rk-muted); margin-top: 1px; }
.rk-fact-na { color: var(--rk-muted); font-weight: 500; }

.rk-count { font-weight: 600; font-size: 13.5px; color: var(--rk-muted); }
.rk-note { font-size: 14px; color: var(--rk-muted); margin: 0 0 12px; }
.rk-note a { color: var(--rk-link); }

.rk-games { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rk-game { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 8px; padding: 10px 12px; }
/* Two columns: the game on the left, the outcome on the right. The projected panel is three lines
 * tall, and in one column it pushed Class/District down past it - the badges belong under the
 * opponent's name whatever is beside them. */
.rk-game-body { display: flex; align-items: flex-start; gap: 10px; }
.rk-game-main { flex: 1; min-width: 0; }
/* The date takes its own line, as on the region page's game cards, so a long opponent name has the
 * full width beside the outcome and wraps under itself. */
.rk-game-head { display: flex; align-items: baseline; gap: 2px 6px; flex-wrap: wrap; }
.rk-game-date { flex-basis: 100%; font-size: 13.5px; color: var(--rk-muted); font-variant-numeric: tabular-nums; }
.rk-game-loc { font-size: 13.5px; color: var(--rk-muted); }
.rk-game-opp { font-weight: 700; font-size: 16px; flex: 1; min-width: 0; }
.rk-game-opp a { color: var(--rk-link); text-decoration: none; }
.rk-game-opp a:hover { color: var(--rk-link); text-decoration: underline; }
/* min-height matches the head's first line box, so a W/L badge or TBD still sits level with
 * the opponent's name now that the outcome is its own column. */
.rk-game-out { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 24px; }
.rk-wl { font-weight: 800; font-size: 13.5px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: #fff; }
.rk-game--win .rk-wl { background: #2e7d32; }
.rk-game--loss .rk-wl { background: #c62828; }
.rk-game--tie .rk-wl { background: #6d6d6d; }
.rk-score { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15.5px; }
.rk-game-tbd { color: var(--rk-muted); font-size: 13.5px; font-weight: 600; }

/* Projected scores (the model, not a result) ---------------------------
 * A projection must never be mistakable for a final score, so it differs from a played row in
 * shape as well as colour: a DASHED card edge, and the whole thing boxed as one navy panel
 * reading "Projected / Chance to win NN% / Score A-B", stacked down the right.
 *
 * NAVY is the brand colour, and it is legible where the alternatives were not: the score reads at
 * 13.7:1 against the panel, where brand amber (`--rk-amber-d` on `--rk-tint`) manages 2.3:1 and
 * fails AA for anything you actually have to read. ⚠️ It is only free because the District tag on
 * the same row went grey — bring a blue back to that tag and these two become one confusion.
 * The "Projected" heading is the load-bearing cue and the colour is only support, for anyone who
 * cannot see it. `.rk-proj-tag` is the chip /rules and the Schedule note use in prose. */
.rk-game--proj { border-style: dashed; border-color: #ccd6e3; background: #fcfdfe; }
.rk-game-proj { min-height: 0; flex-direction: column; align-items: stretch; gap: 1px; align-self: flex-start; background: #eef2f7; border-radius: 6px; padding: 4px 8px 5px; }
/* The heading and the two lines match the region page's "Projected" block (`.rk-wk-proj`). */
.rk-proj-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--rk-navy2); text-align: center; padding-bottom: 2px; }
.rk-proj-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; background: #dde5ef; color: var(--rk-navy2); white-space: nowrap; }
.rk-proj-part { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: #3d4d66; white-space: nowrap; }
.rk-proj-part b { font-weight: 800; font-size: 14.5px; color: var(--rk-navy); font-variant-numeric: tabular-nums; }
.rk-proj-sep { display: none; }

.rk-game-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.rk-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 4px; background: var(--rk-tint); color: var(--rk-amber-d); }
.rk-tag--muted { background: #f1f2f4; color: var(--rk-muted); }
/* Grey, like the Class tag beside it: the blue this used to be sat one row away from the navy
 * projection panel, and two blues on one line reading as two different things is the confusion
 * worth spending a colour to avoid. */
.rk-tag--dist { background: #f1f2f4; color: var(--rk-muted); }
.rk-game-pts { font-size: 13px; color: var(--rk-muted); margin-top: 6px; }
.rk-game-pts b { color: var(--rk-ink); font-weight: 800; }
.rk-empty { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); padding: 16px; color: var(--rk-muted); font-size: 15.5px; text-align: center; }

/* Simple link lists (sports index, schools directory, school hub) ------- */
.rk-linklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rk-linkitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 8px; padding: 12px 14px; text-decoration: none; color: var(--rk-link); font-weight: 600; font-size: 16px; transition: border-color .1s ease; }
.rk-linkitem:hover { border-color: var(--rk-navy2); }
.rk-linkitem-badge { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--rk-navy2); background: var(--rk-tint); border-radius: 4px; padding: 2px 7px; }

/* Standalone content pages (/rules, /privacy, /terms) — the explainers + policies
   formerly shipped as inline modals on every page. -------------------------------- */
.rk-toc { display: flex; flex-wrap: wrap; gap: 8px 16px; background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); padding: 11px 13px; margin-bottom: 18px; font-size: 15px; }
.rk-toc a { color: var(--rk-link); font-weight: 600; }
.rk-rules-sec { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); padding: 16px 18px; margin-bottom: 18px; scroll-margin-top: 68px; }
/* Standalone prose pages (/about, /privacy, /terms) — one card, same type scale as a rules
 * section. /rules splits itself into several cards because it has anchors to jump between. */
.rk-prose { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); padding: 16px 18px; margin: 14px 0 18px; }
.rk-prose, .rk-rules-sec { font-size: 15.5px; line-height: 1.55; }
.rk-prose h2, .rk-rules-sec h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; }
.rk-prose h2:not(:first-child) { margin-top: 22px; }
.rk-prose h3, .rk-rules-sec h3 { font-size: 17px; font-weight: 800; margin: 18px 0 6px; }
.rk-rules-sec h4 { font-size: 15.5px; font-weight: 800; margin: 14px 0 5px; }
.rk-prose p, .rk-rules-sec p { margin: 0 0 9px; color: #39414f; }
.rk-prose ul, .rk-prose ol, .rk-rules-sec ul, .rk-rules-sec ol { padding-left: 20px; margin: 0 0 9px; color: #39414f; }
.rk-prose li, .rk-rules-sec li { margin-bottom: 3px; }
.rk-rules-sec li ul { margin-top: 4px; }
.rk-prose a, .rk-rules-sec a { color: var(--rk-link); }
.rk-example { background: var(--rk-bg); border: 1px solid var(--rk-line); border-radius: 8px; padding: 10px 12px; font-size: 14.5px; }
.rk-fine { font-size: 14px; color: var(--rk-muted); }

/* Custom tooltip bubble ([data-tip], hover + focus + tap) --------------- */
.rk-tip { position: absolute; z-index: 2000; max-width: 260px; background: var(--rk-navy); color: #fff; font-size: 13.5px; line-height: 1.35; font-weight: 500; padding: 7px 9px; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); pointer-events: none; }
.rk-info { color: var(--rk-muted); cursor: pointer; vertical-align: middle; }

/* Team search results (vanilla; replaces Bootstrap list-group) ---------- */
.rk-results { margin-top: 8px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius); background: var(--rk-card); max-height: 400px; overflow-y: auto; }
.rk-result { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; text-decoration: none; color: var(--rk-link); border-bottom: 1px solid var(--rk-line); }
.rk-result:last-child { border-bottom: none; }
.rk-result:hover, .rk-result.is-active { background: var(--rk-tint); }
.rk-result strong { font-weight: 700; font-size: 16px; }
.rk-result-cls { color: var(--rk-muted); font-size: 13.5px; }
.rk-results-msg { margin-top: 8px; font-size: 14.5px; color: var(--rk-muted); }

/* Dev error page */
.rk-error { text-align: center; padding: 24px 0; }
.rk-error-msg { color: var(--rk-muted); margin: 8px 0 20px; }
.rk-btn { display: inline-block; background: var(--rk-navy); color: #fff; text-decoration: none; font-weight: 700; font-size: 15.5px; padding: 10px 18px; border-radius: 8px; }
.rk-btn:hover { background: var(--rk-navy2); }

/* Sponsor banner (top of every page; below the navy hero on home) -------
 * Design: docs/sponsor-banner-design.md. Torn-paper white card, one sponsor at a
 * time (sponsor.js crossfades), full content-column width tracking .rk-notice. */
/* Homepage announcement — the sponsor banner's torn-paper card, hardcoded ---------------
 * ⚠️ Its own classes and its own filter id (`annc-torn`), sharing nothing with the PAUSED
 * `.rk-spon*` component below: uncommenting that include must not restyle this card, and editing
 * this must not restyle that one. Two <filter> defs on one id would hand both cards whichever
 * rendered first. No JS — there is no rotation, no dismiss and no sponsors.json behind it. */
.rk-annc-wrap { margin: 0 0 20px; }
.rk-annc { position: relative; isolation: isolate; padding: 14px 16px; }
/* White fill on a ::before layer so the SVG filter roughens ONLY the edges (text stays crisp). */
.rk-annc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); filter: url(#annc-torn) drop-shadow(0 1px 2px rgba(0, 0, 0, .10)); }
.rk-annc-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rk-annc-chip { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; border-radius: 5px; background: var(--rk-navy); color: #fff; }
.rk-annc-title { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; margin: 0; }
.rk-annc-desc { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: #39414f; }
.rk-annc-foot { margin: 10px 0 0; font-size: 14.5px; font-weight: 700; }
.rk-annc-foot a { color: var(--rk-link); text-decoration: none; }
.rk-annc-foot a:hover { text-decoration: underline; }
/* The live state: one sentence, three plain numbers for the week, and a button to /predictions. */
.rk-annc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.rk-annc-stat { background: var(--rk-bg); border: 1px solid var(--rk-line); border-radius: 6px; padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.rk-annc-stat dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rk-muted); line-height: 1.25; }
.rk-annc-stat dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rk-annc-btn { display: inline-block; background: var(--rk-navy); color: #fff !important; padding: 9px 16px; border-radius: 7px; font-size: 14px; font-weight: 700; text-decoration: none; }
.rk-annc-btn:hover { background: var(--rk-navy2); text-decoration: none !important; }
.rk-annc-foot:has(.rk-annc-btn) { margin-top: 14px; }
@media (max-width: 599px) { .rk-annc-btn { display: block; text-align: center; } .rk-annc-stat { padding: 8px 8px; } .rk-annc-stat dt { font-size: 10px; letter-spacing: .02em; white-space: nowrap; } }
.rk-annc-defs { position: absolute; width: 0; height: 0; }

.rk-spon-wrap { max-width: calc(var(--rk-max) - 32px); width: calc(100% - 32px); margin: 16px auto 0; }
.rk-spon { position: relative; isolation: isolate; padding: 14px 16px; }
/* White fill on a ::before layer so the SVG filter roughens ONLY the edges (text stays crisp). */
.rk-spon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); filter: url(#spon-torn) drop-shadow(0 1px 2px rgba(0, 0, 0, .10)); }

.rk-spon-strip { position: relative; }
.rk-spon-slide[hidden] { display: none; }
.rk-spon-line { display: flex; align-items: center; gap: 10px; }
.rk-spon-icon { flex: 0 0 auto; position: relative; width: 30px; height: 30px; border-radius: 7px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; line-height: 1; }
.rk-spon-fav { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; transition: opacity .2s ease; }
.rk-spon-title { font-size: 16.5px; line-height: 1.3; min-width: 0; }
.rk-spon-name { font-weight: 800; color: var(--rk-link); text-decoration: none; letter-spacing: -.01em; }
.rk-spon-name:hover { text-decoration: underline; }
.rk-spon-scope { color: #39414f; font-weight: 500; }
.rk-spon-desc { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: #39414f; }

.rk-spon-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
.rk-spon-dots { display: flex; align-items: center; gap: 6px; }
.rk-spon-dots.rk-spon-count { font-size: 13px; font-weight: 700; color: var(--rk-muted); }
.rk-spon-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: var(--rk-line); cursor: pointer; transition: width .15s ease, background .15s ease; }
.rk-spon-dot.is-active { width: 20px; background: var(--rk-amber); }
.rk-spon-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rk-spon-viewall { background: none; border: none; padding: 0; color: var(--rk-link); font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.rk-spon-cta { display: inline-block; background: var(--rk-amber); color: #3a2a00; text-decoration: none; font-weight: 800; font-size: 14.5px; padding: 8px 15px; border-radius: 8px; white-space: nowrap; }
.rk-spon-cta:hover { background: var(--rk-amber-d); color: #fff; }

/* No-sponsor lure: one row, no badge. */
.rk-spon--lure { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.rk-spon-lure { font-size: 17px; color: #39414f; margin: 0; }

/* "View all" modal (page-scoped). */
.rk-spon-modal { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rk-spon-modal[hidden] { display: none; }
.rk-spon-backdrop { position: absolute; inset: 0; background: rgba(10, 20, 40, .55); }
.rk-spon-dialog { position: relative; background: var(--rk-card); border-radius: 12px; width: 100%; max-width: 440px; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.rk-spon-dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rk-line); position: sticky; top: 0; background: var(--rk-card); }
.rk-spon-dhead h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.rk-spon-x { background: none; border: none; font-size: 26px; line-height: 1; color: var(--rk-muted); cursor: pointer; padding: 0 2px; }
.rk-spon-x:hover { color: var(--rk-ink); }
.rk-spon-dbody { overflow-y: auto; padding: 4px 0; }
.rk-spon-mrow { display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px; }
.rk-spon-mtext { min-width: 0; }
.rk-spon-mtext .rk-spon-name { font-size: 16px; }
.rk-spon-dfoot { padding: 13px 16px; border-top: 1px solid var(--rk-line); }
.rk-spon-defs { position: absolute; width: 0; height: 0; }

@media (prefers-reduced-motion: reduce) {
  .rk-spon-dot { transition: none; }
}

/* /predictions — the model's report card ---------------------------------
 * Everything below the scope bar re-renders off the page's JSON island when the Season /
 * This Week toggle changes. The three bucket words and every templated sentence live in the
 * page's script, not here. */
.rk-lede--tight { margin-bottom: 10px; }
.rk-priv { color: var(--rk-muted); font-size: 13.5px; margin: 0 0 12px; }
.rk-lede .rk-lede-num { color: var(--rk-navy); font-weight: 800; font-variant-numeric: tabular-nums; }
.rk-lede-ccc { margin: 0 0 20px; padding-left: 22px; }
.rk-lede-ccc li { margin: 2px 0; }
.rk-lede a { color: var(--rk-link); }
.rk-priv:last-of-type { margin-bottom: 18px; }
.rk-sec-head--stack { display: block; margin-bottom: 10px; }
.rk-sec-head .rk-sub { display: block; color: var(--rk-muted); font-size: 14px; font-weight: 500; margin-top: 2px; }
.rk-card { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); padding: 16px; }
.rk-prose-card { font-size: 15.5px; line-height: 1.55; }
.rk-prose-card p { margin: 0 0 10px; }
.rk-prose-card p:last-child { margin-bottom: 0; }
.rk-priv a { color: var(--rk-link); }
.rk-sec-head .rk-sub a { color: var(--rk-link); }
#how { scroll-margin-top: 16px; }

/* The Season / This Week control bar. Buttons are 44px tall on a phone: a real touch target. */
.rk-scopebar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 14px 0; margin: 6px 0 26px; border-top: 1px solid var(--rk-line); border-bottom: 1px solid var(--rk-line); }
.rk-scope-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--rk-muted); }
.rk-scope { display: inline-flex; background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 999px; padding: 3px; gap: 2px; }
.rk-scope button { appearance: none; border: none; background: transparent; cursor: pointer; font: inherit; font-weight: 700; font-size: 14.5px; color: var(--rk-muted); min-height: 38px; padding: 0 18px; border-radius: 999px; transition: background .12s ease, color .12s ease; }
.rk-scope button.is-active { background: var(--rk-navy); color: #fff; }
.rk-scope button:not(.is-active):hover { color: var(--rk-ink); }
.rk-scope-label { margin: 0 0 0 auto; color: var(--rk-muted); font-size: 14px; }
.rk-scope-label b { color: var(--rk-ink); font-weight: 700; }
@media (max-width: 560px) {
  .rk-scope button { min-height: 44px; }
  .rk-scope-label { margin-left: 0; flex-basis: 100%; }
}

/* Winner accuracy, one bar per bucket. */
.rk-h2-pct { color: var(--rk-navy); font-variant-numeric: tabular-nums; }
.rk-bars { display: flex; flex-direction: column; gap: 14px; }
.rk-bar-row { display: grid; grid-template-columns: 116px 1fr 60px; align-items: center; gap: 12px; }
.rk-bar-label { font-weight: 700; font-size: 14.5px; }
.rk-bar-label .rk-bar-n { display: block; font-weight: 500; color: var(--rk-muted); font-size: 12px; margin-top: 1px; }
.rk-bar-track { position: relative; height: 14px; background: var(--rk-bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--rk-line); }
.rk-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--rk-navy); border-radius: 999px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.rk-bar-pct { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15.5px; }
.rk-bar-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rk-line); font-size: 14px; color: #39414f; }
@media (max-width: 400px) {
  .rk-bar-row { grid-template-columns: 100px 1fr 48px; gap: 8px; }
  .rk-bar-label { font-size: 13.5px; }
}

/* Predicted bucket vs. what happened: a sentence and three cells per bucket we called. */
.rk-outcome-blocks { display: flex; flex-direction: column; gap: 14px; }
.rk-outcome-block { padding-top: 13px; border-top: 1px solid var(--rk-line); }
.rk-outcome-block:first-child { padding-top: 0; border-top: none; }
.rk-outcome-lead { font-size: 14.5px; color: var(--rk-ink); margin: 0 0 7px; }
.rk-outcome-lead b { font-weight: 800; }
.rk-outcome-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rk-outcome-cell { text-align: center; padding: 8px 6px 7px; border-radius: 8px; background: var(--rk-bg); border: 1px solid var(--rk-line); min-width: 0; }
.rk-outcome-cell .rk-oc-n { display: block; font-size: 18px; font-weight: 800; color: var(--rk-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.rk-outcome-cell .rk-oc-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rk-muted); margin-top: 2px; }
.rk-outcome-cell.is-right { background: #e6ecf3; border-color: #c4d1e0; }
.rk-outcome-cell.is-right .rk-oc-n { color: var(--rk-navy); }
.rk-outcome-cell.is-right .rk-oc-label { color: var(--rk-navy2); }
.rk-outcome-cell .rk-tick { color: var(--rk-navy); font-weight: 800; margin-left: 2px; }
@media (max-width: 360px) {
  .rk-outcome-cell .rk-oc-label { font-size: 10px; letter-spacing: 0; }
}

/* The Good, the Bad and the Ugly: one card, one row per game, the man on the left. */
.rk-gbu { display: flex; align-items: center; gap: 22px; overflow: hidden; }
/* Inside the card's padding, centred and big enough to read as a portrait — not pinned to the
 * bottom edge (owner, 2026-09-11: too small and stuck to the bottom on a laptop). */
.rk-gbu-man { flex: 0 0 210px; align-self: center; margin: 0; line-height: 0; }
.rk-gbu-man img { display: block; width: 100%; height: auto; }
.rk-gbu-rows { flex: 1 1 auto; min-width: 0; }
.rk-gbu-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rk-line); }
.rk-gbu-row:first-child { border-top: none; padding-top: 0; }
.rk-gbu-row:last-child { padding-bottom: 0; }
.rk-gbu-label { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; background: var(--rk-bg); border: 1px solid var(--rk-line); border-radius: 6px; padding: 6px 10px; }
.rk-gbu-label span { font-weight: 500; color: var(--rk-muted); }
.rk-gbu-label small { display: block; font-size: 12.5px; font-weight: 500; color: var(--rk-muted); margin-top: 1px; }
.rk-gbu-table { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.rk-gbu-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rk-muted); text-align: right; white-space: nowrap; padding: 0 0 2px 10px; }
.rk-gbu-table td { padding: 1px 0 1px 10px; text-align: right; white-space: nowrap; }
.rk-gbu-table th:first-child, .rk-gbu-table td:first-child { text-align: left; padding-left: 0; width: 100%; white-space: normal; }
.rk-gbu-table tr.is-winner td:first-child { font-weight: 700; color: var(--rk-ink); }
.rk-gbu-table td a { color: var(--rk-link); text-decoration: none; }
.rk-gbu-table td a:hover { text-decoration: underline; }
/* This week's games on a region page: the same table, one per game. Fixed number columns so they line up down the page.
   The projection (score + win chance) is ONE block in the team page's projected colours. */
.rk-wk-table { border-collapse: separate; border-spacing: 0; }
.rk-wk-table th { vertical-align: middle; }
.rk-wk-table th:first-child { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; }
.rk-wk-table td:first-child { font-size: 16px; }
.rk-wk-table td.rk-wk-proj, .rk-wk-table th.rk-wk-proj { background: #eef2f7; color: #3d4d66; }
.rk-wk-table th.rk-wk-proj { color: var(--rk-navy2); font-weight: 800; text-align: center; padding: 4px 8px 2px; border-radius: 6px 6px 0 0; }
.rk-wk-table td.rk-wk-proj { width: 40px; min-width: 40px; padding: 2px 0 2px 8px; }
.rk-wk-table td.rk-wk-proj b { color: var(--rk-navy); font-weight: 800; }
.rk-wk-table td.rk-wk-pct { width: 52px; min-width: 52px; padding-right: 8px; font-size: 13px; }
.rk-wk-table tr:last-child td.rk-wk-proj { padding-bottom: 5px; }
.rk-wk-table tr:last-child td.rk-wk-proj:not(.rk-wk-pct) { border-radius: 0 0 0 6px; }
.rk-wk-table tr:last-child td.rk-wk-pct { border-radius: 0 0 6px 0; }
.rk-wk-table th:last-child, .rk-wk-table td.rk-wk-final { width: 56px; min-width: 56px; }
.rk-wk-table tr.is-winner td.rk-wk-final { font-weight: 800; color: var(--rk-ink); }
.rk-gbu-note { font-size: 14.5px; line-height: 1.4; font-style: italic; color: var(--rk-muted); margin: 0; }
@media (max-width: 700px) {
  .rk-gbu { gap: 14px; align-items: flex-start; padding: 12px; }
  .rk-gbu-man { flex-basis: 132px; align-self: stretch; margin: 0; padding: 8px 0 8px 4px; }
  .rk-gbu-man img { height: 100%; object-fit: cover; object-position: top center; }
  .rk-gbu-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 7px 0; }
  .rk-gbu-label { font-size: 15px; padding: 5px 9px; margin-bottom: 3px; }
  .rk-gbu-label small { display: inline; margin-left: 6px; }
  .rk-gbu-table { font-size: 13.5px; }
  .rk-gbu-table td { padding-left: 6px; }
  .rk-gbu-table th { padding-left: 6px; font-size: 10px; letter-spacing: 0; }
  .rk-gbu-note { font-size: 13px; margin-top: 5px; }
}
@media (max-width: 400px) {
  .rk-gbu-man { flex-basis: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .rk-bar-fill { transition: none; }
}

/* Utility */
.rk-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }