@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

/* The Morning Chirp: the same palette, fonts and rink logo as Chirpin, laid out as a quiet reading page. */
:root {
  --ice: #EDF2F6; --paper: #FFFFFF; --boards: #0F2236; --blue: #1F5FAE; --red: #C42E26; --crease: #DCEAF6; --slush: #4F6378;
  --line: rgba(15, 34, 54, .11); --warn: #8A5A00; --good: #1f9d55; --glass: rgba(237, 242, 246, .88);
  --shadow-1: 0 1px 2px rgba(15, 34, 54, .06), 0 6px 18px rgba(15, 34, 54, .07);
  --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --spring: cubic-bezier(.2, .9, .3, 1.15);
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ice: #0B1623; --paper: #132539; --boards: #E9F1F7; --blue: #7DB2EE; --red: #FF7468; --crease: #1B3550; --slush: #9FB1C2;
    --line: rgba(233, 241, 247, .12); --warn: #E6B450; --glass: rgba(11, 22, 35, .88); --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  --ice: #0B1623; --paper: #132539; --boards: #E9F1F7; --blue: #7DB2EE; --red: #FF7468; --crease: #1B3550; --slush: #9FB1C2;
  --line: rgba(233, 241, 247, .12); --warn: #E6B450; --glass: rgba(11, 22, 35, .88); --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25); color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--ice); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.5 var(--body); color: var(--boards); background: var(--ice); min-height: 100dvh; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; margin: 0; line-height: 1.1; }
h1 { font-size: 44px; } h2 { font-size: 26px; margin-bottom: 10px; } h2 small { font: 500 14px var(--body); color: var(--slush); letter-spacing: 0; margin-left: 6px; }
a { color: var(--blue); } p { margin: 0 0 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--slush); } .num { font-family: var(--display); font-variant-numeric: tabular-nums; } .row { display: flex; align-items: center; gap: 10px; } .grow { flex: 1; min-width: 0; }
.up { color: var(--good); } .down { color: var(--red); }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.top-in { max-width: 860px; margin: 0 auto; padding: 10px 16px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--boards); min-width: 0; }
.mark svg { width: 36px; height: 36px; display: block; } .word { font: 700 24px/1 var(--display); letter-spacing: .01em; white-space: nowrap; }
.topnav { max-width: 860px; margin: 0 auto; padding: 0 8px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.topnav a { padding: 0 14px; min-height: 42px; display: flex; align-items: center; text-decoration: none; color: var(--slush); font: 600 13px var(--body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.topnav a[aria-current="page"] { color: var(--boards); box-shadow: inset 0 -3px 0 var(--blue); }

main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 18px 16px 40px; }
section { margin-top: 28px; } .hero { margin-top: 8px; }
.kicker { font: 600 13px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.lede { font-size: 19px; color: var(--slush); margin-top: 8px; text-wrap: balance; }
.crumb { margin-bottom: 14px; } .crumb a { text-decoration: none; font-weight: 600; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-md); border: 1.5px solid color-mix(in srgb, var(--boards) 85%, transparent); background: transparent; font: 600 16px var(--body); text-decoration: none; color: var(--boards); cursor: pointer; transition: transform .15s var(--spring); }
.btn.primary { background: var(--boards); border-color: var(--boards); color: var(--ice); }
.btn.small { min-height: 36px; padding: 0 16px; font-size: 14px; border-radius: 11px; } .btn:active { transform: scale(.97); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 14px; background: color-mix(in srgb, var(--slush) 13%, transparent); }
.seg button { min-height: 32px; padding: 0 14px; border: 0; background: transparent; font: 500 14px var(--body); color: var(--slush); border-radius: 11px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--boards); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 34, 54, .14); }
.search { display: flex; gap: 10px; margin-top: 14px; } .search input { flex: 1; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); font: inherit; color: inherit; }
.search input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent); }
.daynav { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* cards and lists */
.cards { display: grid; gap: 12px; } .cards.compact { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.game { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-1); }
.game.feature { border-left: 4px solid var(--blue); }
.gs-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.when, .status { font-weight: 600; } .status.live { color: var(--red); } .status.final { color: var(--slush); }
.gs-team { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 18px; }
.gs-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .gs-name small { color: var(--slush); font-size: 14px; font-weight: 400; }
.gs-team .num { font-size: 26px; } .rec { font-size: 14px; }
.chirps { margin: 12px 0 0; padding: 0; list-style: none; } .chirps li { padding-left: 18px; position: relative; margin: 6px 0; font-size: 15.5px; }
.chirps li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.leaders, .scoring { margin: 10px 0 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; } .leaders small, .scoring small { color: var(--slush); }
.k { font: 600 11.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--slush); width: 100%; }
.list { list-style: none; margin: 0; padding: 0; } .list li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.banner { padding: 16px 18px; border-radius: var(--r-md); background: color-mix(in srgb, var(--blue) 12%, var(--paper)); border: 1px solid var(--line); margin-top: 30px; }
.banner p { margin: 6px 0 12px; color: var(--slush); }
.cols { display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; } .tbl th { text-align: left; font: 600 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--slush); padding: 6px 8px 6px 0; }
.tbl td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; } .tbl-wrap { overflow-x: auto; }
main.wide, body.wide .top-in, body.wide .topnav, body.wide .site-foot { max-width: 1120px; }   /* a wide page widens the header and footer with it, so everything lines up */
.conf-grid { display: grid; gap: 8px 36px; grid-template-columns: 1fr; } @media (min-width: 880px) { .conf-grid { grid-template-columns: 1fr 1fr; } }
.conf-h { font: 700 22px var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--slush); margin: 18px 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.div h4 { font: 600 20px var(--display); margin: 16px 0 2px; } .tbl th:first-child, .tbl td:first-child { padding-left: 8px; }
.tbl tr.spot-div td:first-child { box-shadow: inset 3px 0 0 var(--blue); } .tbl tr.spot-wc td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--blue) 40%, transparent); }
.legend { font-size: 13px; margin-top: 16px; } .key { display: inline-block; width: 10px; height: 14px; vertical-align: -2px; margin: 0 4px 0 12px; border-radius: 2px; } .key:first-child { margin-left: 0; }
.key.div { background: var(--blue); } .key.wc { background: color-mix(in srgb, var(--blue) 40%, transparent); }

/* teams and players */
.tm-tag { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; } .tm-tag img { width: 20px; height: 20px; object-fit: contain; }
.tl-d { display: inline; } .tl-l { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tl-d { display: none; } :root:not([data-theme="light"]) .tl-l { display: inline; } }
:root[data-theme="dark"] .tl-d { display: none; } :root[data-theme="dark"] .tl-l { display: inline; }
.pl-head { display: flex; gap: 16px; align-items: center; } .pl-head h1 { font-size: 38px; } .pl-head .lede { margin: 4px 0; }
.hs { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--crease); box-shadow: 0 0 0 3px var(--line); } .hs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.tiles > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.tiles b { font-size: 30px; line-height: 1; } .tiles span { font-size: 12px; color: var(--slush); letter-spacing: .06em; }

/* text pages and footer */
.prose { max-width: 680px; margin: 0 auto; } .prose h2 { margin: 26px 0 8px; font-size: 22px; } .prose ul { padding-left: 20px; } .prose li { margin: 6px 0; }
.site-foot { max-width: 860px; margin: 0 auto; width: 100%; padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 13px; color: var(--slush); }
.site-foot p { margin: 12px 0 0; } .site-foot .fine { font-size: 12px; } .site-foot a { color: var(--slush); text-underline-offset: 3px; } .site-foot nav { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 520px) { h1 { font-size: 36px; } .cta { display: none; } }

/* the full standings table */
.views { display: flex; width: fit-content; margin: 6px auto 18px; } .views a { min-height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 11px; text-decoration: none; color: var(--slush); font: 500 14px var(--body); }
.views a[aria-current="page"] { background: var(--paper); color: var(--boards); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 34, 54, .14); }
.stack .conf + .conf { margin-top: 12px; }
.tbl.st { width: 100%; font-size: 14px; } .tbl.st th, .tbl.st td { padding: 8px 10px 8px 0; text-align: right; } .tbl.st th.tm, .tbl.st td.tm { text-align: left; }
.tbl.st .tm { position: sticky; left: 0; z-index: 1; background: var(--ice); padding-left: 8px; padding-right: 14px; min-width: 112px; white-space: nowrap; }
.tbl.st .rk { display: inline-block; min-width: 22px; color: var(--slush); font-size: 12px; margin-right: 4px; }
.tbl.st td:nth-child(11), .tbl.st td:nth-child(12), .tbl.st td:nth-child(16) { white-space: nowrap; }
.clinch { color: var(--blue); font-weight: 700; }

/* around the league */
.inj li { display: flex; gap: 14px; align-items: baseline; } .inj .who { min-width: 64px; } .pl-inj { display: inline-block; margin: 0 14px 2px 0; } .pl-inj small { color: var(--slush); }
.new { font: 700 10.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--red); font-style: normal; border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; vertical-align: 1px; }
.news li a { font-weight: 600; text-decoration: none; font-size: 17px; } .news li a:hover { text-decoration: underline; } .news p { margin: 4px 0 2px; font-size: 14.5px; }
.banner.breaking { margin-top: 18px; border-left: 4px solid var(--red); background: color-mix(in srgb, var(--red) 9%, var(--paper)); } .banner.breaking p { margin: 4px 0 0; color: var(--boards); }

/* live */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 1px; animation: livepulse 1.6s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.live-card { margin-top: 14px; border-left: 4px solid var(--red); }
.badge { display: inline-block; font: 700 11px var(--body); letter-spacing: .07em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: var(--blue); color: var(--ice); }
.badge.en { background: var(--warn); } .badge.sm { font-size: 10.5px; padding: 1px 6px; }
.pp { margin: 10px 0 0; font-size: 15.5px; }
.live-h { font: 600 18px var(--display); margin: 14px 0 4px; letter-spacing: .02em; }
.pens { list-style: none; margin: 0; padding: 0; } .pens li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .pens li.on { background: color-mix(in srgb, var(--blue) 9%, transparent); }
.pens .t { color: var(--slush); font-size: 13px; min-width: 64px; display: inline-block; font-variant-numeric: tabular-nums; } .live-none { font-size: 14px; margin: 12px 0 0; }

/* phones: four tabs and a "More" menu, so nothing is squeezed or hidden */
.more { display: none; }
@media (max-width: 640px) {
  .topnav { overflow: visible; padding: 0 6px; } .topnav a { padding: 0 10px; }
  .topnav a.wide-only { display: none; }
  .more { display: block; position: relative; margin-left: auto; }
  .more summary { list-style: none; cursor: pointer; padding: 0 12px; min-height: 42px; display: flex; align-items: center; color: var(--slush); font: 600 13px var(--body); letter-spacing: .08em; text-transform: uppercase; }
  .more summary::-webkit-details-marker { display: none; } .more summary::after { content: ''; width: 6px; height: 6px; margin: -3px 0 0 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  .more[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
  .more summary[aria-current="page"] { color: var(--boards); box-shadow: inset 0 -3px 0 var(--blue); }
  .more-menu { position: absolute; right: 6px; top: 100%; z-index: 30; min-width: 170px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 6px; display: grid; }
  .more-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--boards); font: 600 14px var(--body); }
  .more-menu a[aria-current="page"] { background: var(--crease); box-shadow: none; }
}

/* power-play icon, game page */
.pp-ic { width: 20px; height: 20px; vertical-align: -4px; margin-left: 8px; flex: none; } .pk { margin-left: 8px; font: 700 10.5px var(--body); letter-spacing: .08em; color: var(--slush); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.live-card { position: relative; } .stretched { font-weight: 600; font-size: 14px; text-decoration: none; } .stretched::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); } .live-card:active { transform: scale(.995); }
.more-link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.ice-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } .ice-col h3 { font: 600 20px var(--display); margin-bottom: 6px; display: flex; align-items: center; }
.ice { list-style: none; margin: 0; padding: 0; } .ice li { padding: 5px 0; border-top: 1px solid var(--line); font-size: 15px; } .ice li b { display: inline-block; min-width: 34px; font-variant-numeric: tabular-nums; }
.lines { font-size: 13.5px; } .lines th, .lines td { padding: 7px 8px 7px 0; } tr.ice-on td { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.dot-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); vertical-align: 1px; margin-left: 4px; }
.lineup h2 { display: flex; align-items: center; margin-top: 28px; }
@media (max-width: 560px) { .ice-grid { grid-template-columns: 1fr; } }

/* team links and the team page */
.tm-link { color: inherit; text-decoration: none; font-weight: 700; position: relative; z-index: 2; } .tm-link:hover { text-decoration: underline; }
.team-head { display: flex; gap: 16px; align-items: center; } .team-head img { width: 72px; height: 72px; object-fit: contain; } .team-head .tl-d { display: block; } .team-head .tl-l { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .team-head .tl-d { display: none; } :root:not([data-theme="light"]) .team-head .tl-l { display: block; } }
:root[data-theme="dark"] .team-head .tl-d { display: none; } :root[data-theme="dark"] .team-head .tl-l { display: block; }
.form { display: flex; gap: 8px; flex-wrap: wrap; } .form .res { min-width: 52px; text-align: center; padding: 8px 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.form .res b { display: block; font: 700 18px var(--display); } .form .res small { color: var(--slush); font-size: 12px; } .res.W b { color: var(--good); } .res.L b { color: var(--red); } .res.OTL b { color: var(--warn); }