/* xJawn — Flyers-dark theme: black ice, orange accent, white ink. */
:root {
  --bg:#0a0a0c;            /* near-black page */
  --panel:#141417;         /* raised surfaces (cards, thead) */
  --panel2:#1b1b1f;        /* chips, code, controls */
  --line:#26262b;          /* hairlines */
  --ink:#f2efec;           /* warm white */
  --mut:#9b968e;           /* warm gray */
  --accent:#f74902;        /* Flyers orange */
  --accent-hi:#ff7a3d;     /* brighter orange for small text / links */
  --link:#ff7a3d;
  --pos:#3fbf6f; --neg:#ff5d52;
  --header-h:58px;
}
* { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--header-h) + 8px); }
body { margin:0; background:var(--bg); color:var(--ink);
       font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       font-size:15.5px; line-height:1.55;
       -webkit-font-smoothing:antialiased; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
::selection { background:var(--accent); color:#fff; }

/* --- header: black bar under a jersey-stripe of orange ---------------------- */
header { background:rgba(10,10,12,0.92); backdrop-filter:blur(6px);
         border-top:3px solid var(--accent); border-bottom:1px solid var(--line);
         position:sticky; top:0; z-index:10; }
header .wrap { display:flex; align-items:center; gap:14px; height:var(--header-h); }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink);
         font-family:"Barlow Condensed",var(--bg),sans-serif;
         font-weight:700; font-size:22px; letter-spacing:.045em;
         white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand .wordmark { color:var(--ink); }
.brand .wordmark span { color:var(--accent-hi); }
.brand svg { display:block; }
.tagline { color:var(--mut); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
           border-left:1px solid var(--line); padding-left:14px; }
header nav { margin-left:auto; display:flex; gap:4px; }
header nav a { color:var(--mut); font-size:14.5px; font-weight:600; letter-spacing:.02em;
               padding:6px 11px; border-radius:7px; }
header nav a:hover { color:var(--ink); background:var(--panel2); text-decoration:none; }
header nav a.active { color:var(--ink); background:var(--panel2); }

/* Playoffs section secondary nav (Standings / Players). */
.subnav { display:flex; gap:6px; margin:0 0 20px; }
.subnav a { color:var(--mut); font-size:14px; font-weight:600; padding:5px 12px;
            border-radius:7px; border:1px solid var(--line); }
.subnav a:hover { color:var(--ink); text-decoration:none; }
.subnav a.active { color:var(--accent-hi); border-color:var(--accent); }
.sub.empty { font-style:italic; color:var(--ink); }

/* --- type -------------------------------------------------------------------- */
main { padding:26px 0 48px; }
h1 { font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.02em;
     font-size:34px; line-height:1.1; margin:6px 0 4px; text-transform:uppercase; }
h2 { font-family:"Barlow Condensed",sans-serif; font-weight:600; letter-spacing:.05em;
     text-transform:uppercase; font-size:19px; color:var(--ink);
     margin:34px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line);
     display:flex; align-items:baseline; gap:10px; }
h2::before { content:""; width:16px; height:3px; background:var(--accent);
             align-self:center; flex:none; border-radius:2px; }
.sub, .crumb { color:var(--mut); font-size:13.5px; margin:2px 0 14px; }
.crumb a { color:var(--mut); }
.crumb a:hover { color:var(--accent-hi); }
.abbr, .tname { color:var(--mut); font-weight:400; }
.badge { display:inline-block; min-width:2.4em; text-align:center; padding:2px 9px; border-radius:7px;
         font-size:0.55em; font-weight:800; letter-spacing:.05em; color:#fff; vertical-align:middle;
         border:1px solid rgba(255,255,255,0.22); text-shadow:0 1px 2px rgba(0,0,0,0.55);
         font-family:"Barlow",sans-serif; }

/* --- tables ------------------------------------------------------------------ */
table { border-collapse:collapse; width:100%; font-size:14px; margin:6px 0 10px;
        font-variant-numeric:tabular-nums; }
th, td { border-bottom:1px solid var(--line); padding:7px 10px; text-align:right; white-space:nowrap; }
th:first-child, td:first-child, td.team, th.lg-text, td.lg-text { text-align:left; }
/* The league table's conference/division columns: labels, not numbers — left-aligned like
   the team cell, and muted so the eye still lands on the stats. */
td.lg-text { color:var(--mut); }
thead th { color:var(--mut); font-weight:600; background:var(--panel);
           font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }
table.sortable#league thead th { position:sticky; top:var(--header-h); z-index:2; }
table.sortable thead th[data-sort] { cursor:pointer; user-select:none; }
table.sortable thead th[data-sort]:hover { color:var(--accent-hi); }
th.sort-asc::after { content:" ▲"; color:var(--accent-hi); }
th.sort-desc::after { content:" ▼"; color:var(--accent-hi); }
tbody tr:hover { background:rgba(247,73,2,0.06); }
td.team a { font-weight:700; color:var(--ink); }
td.team a:hover { color:var(--accent-hi); text-decoration:none; }
.pos { color:var(--pos); }
.neg { color:var(--neg); }
/* Small screens: the table scrolls sideways instead of the header sticking. */
@media (max-width: 860px) {
  table { display:block; overflow-x:auto; }
  table.sortable#league thead th { position:static; }
  .tagline { display:none; }
}
@media (max-width: 640px) {
  .brand { font-size:18px; gap:7px; }
  .brand svg { width:20px; height:20px; }
  header .wrap { gap:8px; padding:0 12px; }
  header nav a { font-size:13.5px; padding:5px 8px; }
  h1 { font-size:28px; }
}
@media (max-width: 480px) {
  header { position:static; }
  header .wrap { flex-wrap:wrap; height:auto; padding:8px 12px; }
  header nav { width:100%; justify-content:flex-start; margin-left:-8px; }
}

/* --- stat cards ---------------------------------------------------------------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:16px 0; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px;
        padding:12px 14px; border-top:3px solid var(--accent); }
.card .k { color:var(--mut); font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
           display:flex; align-items:center; gap:6px; }
/* The strength a model card is currently showing — rink.js rewrites it on filter change, so
   a card's number is never ambiguous about which population it describes. */
.card .k .scope { color:var(--accent-hi); border:1px solid var(--line); border-radius:5px;
                  padding:0 5px; font-size:10px; letter-spacing:.04em; text-transform:none; }
.card .v { font-family:"Barlow Condensed",sans-serif; font-size:30px; font-weight:700;
           margin-top:2px; line-height:1.1; font-variant-numeric:tabular-nums;
           display:flex; align-items:baseline; gap:6px; }
/* Rank / percentile qualifier riding alongside the headline number. */
.card .v .sfx { font-family:"Barlow",sans-serif; font-size:12px; font-weight:600;
                color:var(--mut); letter-spacing:.02em; }

/* --- shot-map filter bar --------------------------------------------------------- */
.filterbar { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:0 0 12px;
             color:var(--mut); font-size:11.5px; min-height:20px; }
.filterbar .filt { display:flex; flex-direction:column; gap:3px; text-transform:uppercase; letter-spacing:.05em; }
.filterbar select { background:var(--panel2); color:var(--ink); border:1px solid var(--line);
                    border-radius:7px; padding:5px 7px; font-size:13px; font-family:inherit; }
.filterbar select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.filterbar select:disabled { opacity:.4; cursor:not-allowed; }
.filterbar .filt-reset { align-self:flex-end; background:var(--panel2); color:var(--mut);
                         border:1px solid var(--line); border-radius:7px; padding:6px 12px;
                         font-size:12px; cursor:pointer; font-family:inherit; }
.filterbar .filt-reset:hover { color:#fff; border-color:var(--accent); background:var(--accent); }
/* Display toggles: a second filter row (surface / scale / markers) sitting snug under the
   feature filters, same control styling so the two read as one bar. */
.displaybar { margin-top:-4px; padding-top:10px; border-top:1px solid var(--line); }
/* --- league strength selector ---------------------------------------------------- */
.strengthbar { display:flex; align-items:flex-end; gap:8px; margin:0 0 14px;
               color:var(--mut); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
.strengthbar label { display:flex; flex-direction:column; gap:3px; }
.strengthbar select { background:var(--panel2); color:var(--ink); border:1px solid var(--line);
                      border-radius:7px; padding:5px 9px; font-size:13px; font-family:inherit; text-transform:none; }
.strengthbar select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.strengthbar label.check { flex-direction:row; align-items:center; gap:6px; padding-bottom:6px;
                           text-transform:none; font-size:13px; color:var(--ink); cursor:pointer; }
.strengthbar label.check input { accent-color:var(--accent); cursor:pointer; }
.mapcell { background:var(--panel); border:1px solid var(--line); border-radius:12px;
           padding:8px; min-width:0; }
.mapcell .plotly-graph-div { width:100% !important; }
/* `bare` strips the framing box so the plot sits tight against the page background — used
   for the team rink so the summary stats below read as one continuous unit with the map. */
.mapcell.bare { background:none; border:none; border-radius:0; padding:0; margin:0 0 2px; }

/* --- the rink's two ends -----------------------------------------------------------
   Names each end of the map and anchors it with the team crest, so "left = shots for,
   right = shots against" is visual, not just a caption. Same colour rule as the summary:
   the offense end is the crest in full colour over orange, the defense end is the same
   crest desaturated over ink. rink.js sets --rink-left/--rink-w from the plot's measured
   axis so the two ends sit over the actual rink, not the figure box (which is wider — it
   also holds the colour bar). Until that runs, the fallback spans the full width. */
.endsbar { display:flex; justify-content:space-between; align-items:center; gap:12px;
           margin:2px 0 -6px; margin-left:var(--rink-left,0); width:var(--rink-w,100%);
           min-width:0; }
.endsbar .end { display:flex; align-items:center; gap:9px; min-width:0; }
.endsbar .crest { width:30px; height:30px; object-fit:contain; flex:none; display:block;
                  padding-bottom:3px; }
.endsbar .end.for .crest { border-bottom:2px solid var(--accent); }
.endsbar .end.against .crest { border-bottom:2px solid var(--ink);
                               filter:grayscale(1) brightness(1.35); opacity:.55; }
.endsbar .lab { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.endsbar .end.against .lab { align-items:flex-end; }
.endsbar .side { font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
.endsbar .end.for .side { color:var(--accent-hi); }
.endsbar .end.against .side { color:var(--ink); }
.endsbar .zone { font-size:11px; color:var(--mut); letter-spacing:.04em; white-space:nowrap; }

/* --- collapsible explainer -------------------------------------------------------- */
details.explain { margin:0 0 12px; }
details.explain > summary { cursor:pointer; color:var(--mut); font-size:12px; font-weight:600;
                            text-transform:uppercase; letter-spacing:.06em; width:fit-content;
                            list-style:none; padding:3px 0; }
details.explain > summary::-webkit-details-marker { display:none; }
details.explain > summary::before { content:"▸ "; color:var(--accent-hi); }
details.explain[open] > summary::before { content:"▾ "; }
details.explain > summary:hover { color:var(--accent-hi); }
details.explain .sub { max-width:76ch; margin:8px 0; }

/* --- team season-summary stats ---------------------------------------------------
   Sits snug beneath the rink and shares its center line. One color rule everywhere:
   orange = the team's "for", ink = its "against" — the numbers double as the histogram
   legend. Each row is three grid cells: left block (metric + for) | histogram | right
   block (against). The two side columns are equal fractions, so the histogram column is
   centered in the container *whatever* the numbers inside the sides measure — the earlier
   `metric | for | hist | against | pad` layout drifted off-center by half the difference
   between the for and against widths. rink.js then translates the whole block so that
   center lands on the rink's red line rather than the figure's (the colour bar makes the
   two differ). A single grid drives every row so columns line up across rows. */
.summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,300px) minmax(0,1fr);
           align-items:center; column-gap:14px; row-gap:0; max-width:720px; margin:0 auto;
           transform:translateX(var(--rink-shift,0)); }
.summary .srow { display:contents; }
.summary .side { display:flex; align-items:baseline; gap:14px; min-width:0; }
.summary .side.left { justify-content:flex-end; }
.summary .side.right { justify-content:flex-start; }
.summary .metric { color:var(--mut); font-weight:600;
                   font-size:12px; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
.summary .num { white-space:nowrap; font-variant-numeric:tabular-nums; line-height:1.15; padding:7px 0; }
.summary .num span { display:block; }
.summary .num .fpct, .summary .num .apct {
  font-family:"Barlow Condensed",sans-serif; font-size:19px; font-weight:700; }
.summary .num .fpct { color:var(--accent-hi); }
.summary .num .apct { color:var(--ink); }
.summary .num .fabs, .summary .num .aabs { font-size:11.5px; color:var(--mut); margin-top:1px; }
.summary .num.for { text-align:right; }
.summary .num.against { text-align:left; }
.summary .hist { padding:4px 0; min-width:0; }
.summary .hist svg { width:100%; height:36px; display:block; }
/* Narrow phones can't fit the 180px histogram plus both side blocks — let the histogram
   flex, drop the rink alignment (there is no slack to shift into), and stack the metric
   label above its number so nothing overflows the viewport. */
@media (max-width: 400px) {
  .summary { grid-template-columns:auto minmax(0,1fr) auto; column-gap:9px; max-width:none;
             transform:none; }
  .summary .side { flex-direction:column; align-items:flex-end; gap:0; }
  .summary .side.right { align-items:flex-start; }
  .endsbar { margin-left:0; width:100%; }
}

/* --- footer -------------------------------------------------------------------- */
footer { border-top:1px solid var(--line); margin-top:40px; background:var(--panel); }
footer .wrap { padding:20px; color:var(--mut); font-size:13px; }
footer .brandline { margin:0 0 8px; font-family:"Barlow Condensed",sans-serif;
                    font-size:16px; letter-spacing:.05em; color:var(--ink); }
footer .brandline span { color:var(--accent-hi); }
footer p { margin:6px 0; }
footer code { background:var(--panel2); padding:1px 6px; border-radius:4px; color:var(--ink);
              font-size:12px; }
footer .fine { font-size:12px; margin-top:8px; }

.prose { max-width:760px; }
.prose p { margin:12px 0; }
.prose li { margin:5px 0; }
.prose h2 { margin-top:30px; }

/* --- Matchup "Games" page (matchup engine M5) -------------------------------- */
p.lede { color:var(--mut); max-width:70ch; line-height:1.5; margin:6px 0 18px; }
/* inline probability bar behind the % in the slate table */
.bar { display:inline-block; height:9px; width:var(--p); max-width:64px; margin-right:8px;
       vertical-align:middle; background:linear-gradient(90deg,var(--accent),var(--accent-hi));
       border-radius:5px; }
tr.hi td { background:rgba(247,73,2,.10); font-weight:600; }
.res { color:var(--mut); font-variant-numeric:tabular-nums; }