/* ==========================================================================
   hi-edge-leaders.css — the NHL Edge league-leader strip.
   --------------------------------------------------------------------------
   Edge is puck-and-player TRACKING: measured, not modelled. This strip prints
   the league leader per tracked axis with the unit spelled out, because the
   feed mixes systems — speeds in mph, the distance leaderboard in MILES while
   the per-player detail is read in KILOMETRES. A number without its unit is a
   number that can be read wrong, so both are printed and the source unit is
   the loud one.

   NO ITALICS. NO GOLD (the ◷ belongs to the host page's .asof receipt).
   No count-up: figures paint final. No composite: there is no "Edge score".

   Tokens read the host page's local names first (intelligence.css uses --ink,
   --card, --hairline …) and fall through to the canonical --hi- token.
   ========================================================================== */
:root{
  --el-ink:    var(--ink,      var(--hi-ink, #0d1f3c));
  --el-ink-2:  var(--ink2,     var(--hi-ink-2, #28405f));
  /* NOT var(--muted): intelligence.css's own --muted is #7d8fa6, about 3.0:1 on
     a #fffaf1 card. Every label here is small uppercase mono, so it reads the
     canonical token directly — 5.3:1 light, 7:1 dark. Floor is 4.5:1. */
  --el-muted:  var(--hi-muted, #556a80);
  --el-hair:   var(--hairline, var(--hi-hair, #e4dac7));
  --el-line:   var(--border,   var(--hi-line, #d7cbb7));
  --el-card:   var(--card,     var(--hi-surface-1, #fffaf1));
  --el-card-2: var(--card2,    var(--hi-surface-2, #f7f1e2));
  --el-blue:   var(--blue,     var(--hi-blue, #1f5fbf));
  --el-blue-soft: var(--blue-soft, var(--hi-blue-soft, #e5edfb));
  --el-serif:  var(--serif,    var(--hi-serif, 'Newsreader', Georgia, serif));
  --el-sans:   var(--sans,     var(--hi-sans, 'Source Sans 3', system-ui, sans-serif));
  --el-mono:   var(--mono,     var(--hi-mono, 'JetBrains Mono', ui-monospace, monospace));
}

/* A rail, not a grid: the axes are a list of unrelated records, so they read
   left to right and the reader stops wherever they like. */
.hi-el{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(228px,1fr);gap:14px;
  overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x proximity;
  scrollbar-width:thin}
.hi-el[data-hi-loading]{grid-auto-columns:minmax(228px,1fr)}

.hi-el-card{display:flex;flex-direction:column;gap:8px;scroll-snap-align:start;
  border:1px solid var(--el-line);border-radius:14px;background:var(--el-card);
  padding:14px 14px 12px;position:relative;overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .16s, background-color .16s}
a.hi-el-card:hover,a.hi-el-card:focus-visible{border-color:var(--el-blue);
  background-color:var(--el-blue-soft)}
a.hi-el-card:focus-visible{outline:2px solid var(--el-blue);outline-offset:2px}

.hi-el-k{font-family:var(--el-mono);font-size:.5rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--el-muted)}

.hi-el-who{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;min-width:0}
.hi-el-mug{width:34px;height:34px;border-radius:50%;position:relative;flex-shrink:0;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--el-tc, #1f5fbf) 24%, var(--el-card));
  border:1px solid color-mix(in srgb, var(--el-tc, #1f5fbf) 52%, transparent)}
@supports not (background:color-mix(in srgb,red 20%,blue)){
  .hi-el-mug{background:var(--el-card-2);border:1px solid var(--el-line)}
}
.hi-el-mug em{font-family:var(--el-mono);font-style:normal;font-size:.55rem;font-weight:700;
  color:var(--el-ink);letter-spacing:.02em}
.hi-el-mug img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;background:var(--el-card-2)}
.hi-el-name{display:flex;flex-direction:column;min-width:0}
.hi-el-name strong{font-family:var(--el-sans);font-size:.83rem;font-weight:800;line-height:1.2;
  color:var(--el-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-el-name small{font-family:var(--el-mono);font-size:.54rem;font-weight:700;letter-spacing:.08em;
  color:var(--el-muted)}

/* the measurement. The figure and its unit are one object and never separate. */
.hi-el-fig{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.hi-el-fig b{font-family:var(--el-serif);font-style:normal;font-weight:700;font-size:1.72rem;
  line-height:1;letter-spacing:-.02em;color:var(--el-ink)}
.hi-el-fig span{font-family:var(--el-mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--el-ink-2)}
.hi-el-alt{font-family:var(--el-mono);font-size:.54rem;font-weight:600;letter-spacing:.06em;
  color:var(--el-muted)}
.hi-el-when{font-family:var(--el-sans);font-size:.7rem;line-height:1.35;color:var(--el-muted);
  border-top:1px solid var(--el-hair);padding-top:7px;margin-top:auto}

@media (max-width:640px){
  .hi-el{grid-auto-columns:minmax(200px,84%)}
  .hi-el-fig b{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .hi-el{scroll-behavior:auto}
  .hi-el-card{transition:none}
}