/* Empty Net Goal — shared stylesheet for the non-feed pages.
   The feed keeps its own inline styles because its live behaviour and this
   sheet evolve at different speeds; everything here matches it deliberately. */
:root{
  --base:#0A0A0C; --raise:#141419; --raise-2:#1B1B22; --line:#26262F;
  --ice:#EEF1F6; --dim:#8A8F9C; --dimmer:#5B606C;
  --red:#FF1E1E; --red-deep:#B00D0D;
  --head:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--base)}
body{margin:0;background:var(--base);color:var(--ice);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}

.lamp{width:13px;height:13px;border-radius:50%;flex:none;background:var(--red-deep);box-shadow:0 0 0 1px rgba(255,30,30,.35)}

header.top{position:sticky;top:0;z-index:40;background:rgba(10,10,12,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.top .bar{display:flex;align-items:center;gap:13px;height:60px}
.brand{display:flex;align-items:center;gap:11px}
.brand .name{font-family:var(--head);font-weight:700;font-size:21px;letter-spacing:.06em;text-transform:uppercase}
.brand .name span{color:var(--red)}
header.top nav{margin-left:auto;display:flex;gap:26px}
header.top nav a{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:4px 0;border-bottom:1px solid transparent}
header.top nav a:hover,header.top nav a.on{color:var(--ice);border-bottom-color:var(--red)}
.brand .name{white-space:nowrap}
@media(max-width:640px){
  /* A fifth nav item stopped fitting beside the wordmark, and a fixed-height
     flex row had nowhere to put the overflow, so both the brand and the last
     link wrapped inside their own box. Rather than shrink the type until it is
     unreadable, the bar becomes two rows and the nav scrolls sideways: nothing
     wraps and nothing is cut off, however many links there end up being. */
  header.top .bar{height:auto;flex-direction:column;align-items:stretch;gap:0;padding-top:11px}
  .brand .name{font-size:19px}
  header.top nav{margin-left:0;gap:19px;padding:10px 0 9px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  header.top nav::-webkit-scrollbar{display:none}
  header.top nav a{font-size:10.5px;letter-spacing:.12em;white-space:nowrap;flex:none}
}

.page-head{padding:48px 0 26px;border-bottom:1px solid var(--line)}
.kicker{display:flex;align-items:center;gap:9px;margin:0 0 13px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.page-head h1{font-family:var(--head);font-weight:700;margin:0 0 12px;font-size:clamp(36px,7vw,68px);line-height:.96;text-transform:uppercase}
.page-head h1 em{font-style:normal;color:var(--red)}
.page-head p{margin:0;color:var(--dim);max-width:60ch}

.controls{display:flex;align-items:center;gap:12px;padding:28px 0 14px;flex-wrap:wrap}
.controls h2{font-family:var(--head);font-weight:600;font-size:24px;letter-spacing:.06em;text-transform:uppercase;margin:0}
.seasons{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.seasons a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.seasons a.on{color:var(--ice);border-color:var(--red);background:rgba(255,30,30,.09)}
.seasons a b{color:var(--dimmer);font-weight:400;margin-left:5px}
.seasons a.on b{color:var(--red)}

/* Tables ------------------------------------------------------------------ */
.table-wrap{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--raise)}
table.rank{width:100%;border-collapse:collapse;font-size:14.5px}
table.rank th{
  text-align:left;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);font-weight:500;padding:13px 14px;background:var(--raise-2);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.rank th a{color:var(--dimmer)}
table.rank th a:hover,table.rank th a.on{color:var(--red)}
table.rank td{padding:11px 14px;border-bottom:1px solid rgba(38,38,47,.6)}
table.rank tr:last-child td{border-bottom:0}
table.rank tbody tr:hover{background:var(--raise-2)}
td.pos,th.pos{width:46px;color:var(--dimmer);font-family:var(--head);font-size:15px}
td.team{font-weight:600;white-space:nowrap}
td.team .chip{display:inline-block;width:3px;height:15px;background:var(--tc,var(--dim));border-radius:2px;margin-right:10px;vertical-align:-2px}
td.num,th.num{text-align:right;font-family:var(--head);font-size:17px;font-weight:600;width:88px}
td.dim,.muted{color:var(--dim)}
td.pos-v{color:#4ADE80}
td.neg-v{color:var(--red)}
.bar-col{width:190px}
@media(max-width:820px){.bar-col{display:none}}
.bar{position:relative;height:9px;background:var(--raise-2);border-radius:5px;overflow:hidden}
.bar .mid-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.bar .fill{position:absolute;top:0;bottom:0;background:var(--tc,var(--dim));opacity:.85;border-radius:5px}
.bar .fill.right{left:50%}
.bar .fill.left{right:50%}
.bar .fill.solo{left:0}

/* Leaders ----------------------------------------------------------------- */
.leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.leader{
  background:var(--raise);border:1px solid var(--line);border-left:3px solid var(--tc,var(--red-deep));
  border-radius:6px;padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;
}
.leader .rank{font-family:var(--head);font-size:26px;color:var(--tc);font-weight:700;grid-row:1/3}
.leader .n{font-weight:600;font-size:16px}
.leader .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);grid-column:2}
.leader .g{font-family:var(--head);font-size:30px;font-weight:700;grid-row:1/3;grid-column:3}
@media(max-width:820px){.leaders{grid-template-columns:1fr}}

/* Prose ------------------------------------------------------------------- */
.prose{max-width:68ch;padding:34px 0 60px}
.prose h2{font-family:var(--head);font-weight:600;font-size:23px;letter-spacing:.04em;text-transform:uppercase;margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{color:#C3C8D2;margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:20px;color:#C3C8D2}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ice)}
.prose em{color:var(--red);font-style:normal}

.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figures.inline{margin:18px 0 20px;border-radius:6px;overflow:hidden}
.fig{background:var(--base);padding:18px 16px}
.fig b{display:block;font-family:var(--head);font-weight:600;font-size:clamp(24px,3.4vw,32px);line-height:1}
.fig span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}
@media(max-width:700px){.figures{grid-template-columns:repeat(2,1fr)}}

.note{color:var(--dimmer);font-size:12.5px;margin:14px 0 60px;max-width:70ch}
.empty{padding:50px 20px;text-align:center;color:var(--dim);border:1px dashed var(--line);border-radius:5px;margin-bottom:60px}
footer.site{border-top:1px solid var(--line);padding:26px 0 60px;color:var(--dimmer);font-size:12px}
footer.site .row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer.site .tag{margin-left:auto;font-family:var(--head);letter-spacing:.18em;text-transform:uppercase}

/* About > Reading the feed. The swatches are deliberately built from the same
   tokens as the real cards rather than screenshots, so the legend cannot drift
   out of date when the card design changes. */
.legend{margin:18px 0 6px;max-width:100%}
.legend dt{margin-top:18px}
.legend dt:first-child{margin-top:0}
.legend dd{margin:7px 0 0;color:#C3C8D2}
.legend dd strong{color:var(--ice)}
.legend dd em{color:var(--red);font-style:normal}
.sw-team{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);
  font-weight:700;font-size:17px;letter-spacing:.06em;color:var(--tc,var(--ice))}
.sw-team i{display:block;width:4px;height:20px;border-radius:2px;background:var(--tc)}
.tag-po-demo{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);border:1px solid var(--red);border-radius:3px;padding:3px 8px}
.sw-text{font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim,#8A8F9C)}
.sw-text em{color:var(--dimmer);font-style:normal;padding:0 5px}
.sw-lamp{display:inline-flex;align-items:center}
@media(max-width:700px){.legend dd{font-size:15px}}

/* Subscriber forms (signup / manage) --------------------------------------- */
.subs-wrap{padding-top:10px}
.subs-form{display:flex;flex-direction:column;gap:14px;max-width:420px;margin-bottom:22px}
.subs-form label:not(.radio){font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.subs-form input[type=email],.subs-form input[type=text]{
  background:var(--raise);border:1px solid var(--line);border-radius:6px;color:var(--ice);
  padding:12px 14px;font-size:15px;font-family:var(--body);
}
.subs-form input[type=email]:focus{outline:none;border-color:var(--red)}
.subs-form fieldset{border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin:0}
.subs-form legend{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);padding:0 6px}
.subs-form .radio{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;color:var(--ice);font-size:14px;margin:6px 0}
.subs-form button{
  background:var(--red);color:#0A0A0C;border:none;border-radius:999px;padding:13px 22px;
  font-family:var(--head);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px;cursor:pointer;
  align-self:flex-start;
}
.subs-form button:hover{background:#ff4747}
.subs-danger{margin-top:-6px}
.btn-danger{background:transparent!important;color:var(--dim)!important;border:1px solid var(--line)!important}
.btn-danger:hover{border-color:var(--red)!important;color:var(--red)!important;background:transparent!important}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.subs-ok{color:#4ADE80;font-size:15px}
.subs-err{color:var(--red);font-size:15px}

/* Running version, so what is deployed can be read off the page rather than
   assumed. Deliberately quiet — it is for us, not for visitors. */
.ver{margin-left:auto;font-size:10.5px;letter-spacing:.14em;color:var(--dimmer);
  font-variant-numeric:tabular-nums}

/* Season divider. Deliberately thin and quiet - it is a signpost between
   groups of cards, not a heading competing with them. */
.season-band{display:flex;align-items:center;gap:14px;margin:26px 0 14px}
.season-band::before,.season-band::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.season-band span{flex:none;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:6px 15px;
  background:var(--raise)}
.season-band:first-child{margin-top:4px}
@media(max-width:560px){
  .season-band span{font-size:9.5px;letter-spacing:.18em;padding:5px 11px}
}

/* ------------------------------------------------------- social in the nav */
header.top nav .social{display:inline-flex;align-items:center;gap:15px;
  padding-left:4px;border-bottom:1px solid transparent}
header.top nav a.sx{display:inline-flex;align-items:center;padding:0;
  border-bottom:none;color:var(--dim)}
header.top nav a.sx svg{width:17px;height:17px;display:block}
header.top nav a.sx:hover{color:var(--ice);border-bottom:none}
header.top nav a.gr8{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:14px;letter-spacing:.08em;line-height:1;color:#fff;background:#C8102E;padding:4px 7px 3px;border-radius:3px;border-bottom:none;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
header.top nav a.gr8:hover{background:#FF1E1E;color:#fff;border-bottom:none;box-shadow:0 0 12px rgba(255,30,30,.6)}
@media(max-width:640px){
  header.top nav .social{gap:14px;padding-left:2px}
  header.top nav a.sx svg{width:16px;height:16px}
}

/* ------------------------------------------------------------ follow card */
.follow-card{margin:26px 0 8px;padding:20px 22px;border:1px solid var(--line);
  border-radius:14px;background:var(--raise)}
.follow-card .kicker{margin:0 0 9px}
.follow-lead{margin:0 0 15px;color:var(--dim);font-size:14px;line-height:1.55;max-width:56ch}
.follow-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.follow-btn{display:flex;align-items:center;gap:12px;padding:13px 15px;
  border:1px solid var(--line);border-radius:11px;background:var(--base);
  color:var(--ice);text-decoration:none;min-height:56px}
.follow-btn:hover{border-color:var(--red);background:var(--raise-2)}
.follow-btn svg{width:21px;height:21px;flex:0 0 21px;color:var(--ice)}
.follow-btn span{display:block;line-height:1.3}
.follow-btn strong{display:block;font-size:14px}
.follow-btn em{display:block;font-style:normal;font-size:12px;color:var(--dim)}
@media(max-width:560px){.follow-links{grid-template-columns:1fr}}


/* Player search. The leaderboard shows fifty; the archive holds thousands, and
   this is the only way to reach the rest. */
.psearch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.psearch input[type=search]{flex:1 1 260px;min-width:0;min-height:46px;padding:11px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--raise);color:var(--ice);
  font:inherit;font-size:15px}
.psearch input[type=search]:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.psearch button{min-height:46px;padding:11px 20px;border:0;border-radius:10px;background:var(--red);
  color:#fff;font:inherit;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  font-size:12.5px;cursor:pointer}
.psearch button:hover{background:var(--red-deep,#B00D0D)}
.psearch .clear{color:var(--dim);font-size:13px;text-decoration:none;padding:0 6px}
.psearch .clear:hover{color:var(--ice)}
.pfound{margin:0 0 14px;color:var(--dim);font-size:13.5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* team abbreviations link to the team page (/NYR/) */
a.tlink{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
a.tlink:hover{border-bottom-style:solid}
a.plink{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,30,30,.55)}
a.plink:hover{color:#FF1E1E}

/* Hockey Hall of Fame badge, after the player name on the leaderboard */
.hof{display:inline-block;margin-left:7px;padding:1px 5px 0;border:1px solid #C9A227;border-radius:4px;color:#E2BE4A;font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.12em;line-height:1.35;vertical-align:2px;white-space:nowrap}

/* Season picker next to the Regular / Playoffs pills */
.seasonpick{display:flex;align-items:center;gap:8px;margin-left:12px}
.seasonpick label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.seasonpick select,.seasonpick button{font:inherit;font-size:13px;color:var(--ice);background:var(--raise);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.seasonpick select:focus{outline:2px solid var(--red);outline-offset:1px}
@media (max-width:640px){.seasonpick{margin-left:0;width:100%}}