/* ========================================================================== hi-milestones.css — "Within reach", the league's own milestone watch. -------------------------------------------------------------------------- The NHL publishes, per active player, the next round number in a counting stat and that player's current total. This module prints the closest of them. The LOUD THING IN EVERY ROW IS THE REMAINING COUNT, because that is the whole story: three away from 500 goals is a reason to watch a game. NO ITALICS. NO GOLD (the ◷ belongs to the host page's .asof receipt). No count-up: the figure paints final. Percentiles, paces and likelihoods do not appear here — the league published a count, so a count is printed. Tokens read the host page's local names first (today.css uses --ink, --card, --hairline …) and fall through to the canonical --hi- token, the same cascade hi-states.css uses. Load AFTER hi-tokens.css and the page's own sheet. ========================================================================== */ :root{ --ms-ink: var(--ink, var(--hi-ink, #0d1f3c)); --ms-ink-2: var(--ink2, var(--hi-ink-2, #28405f)); /* NOT var(--muted): today.css's own --muted is #7d8fa6, which measures about 3.0:1 on a #fffaf1 card. Every label and receipt line in this module is small uppercase mono, so it reads the canonical token directly — 5.3:1 light, 7:1 dark. House floor is 4.5:1 in both themes. */ --ms-muted: var(--hi-muted, #556a80); --ms-hair: var(--hairline, var(--hi-hair, #e4dac7)); --ms-line: var(--border, var(--hi-line, #d7cbb7)); --ms-card: var(--card, var(--hi-surface-1, #fffaf1)); --ms-card-2: var(--card2, var(--hi-surface-2, #f7f1e2)); --ms-blue: var(--blue, var(--hi-blue, #1f5fbf)); --ms-blue-soft: var(--blue-soft, var(--hi-blue-soft, #e5edfb)); --ms-mint: var(--mint, var(--hi-mint, #23705a)); --ms-serif: var(--serif, var(--hi-serif, 'Newsreader', Georgia, serif)); --ms-sans: var(--sans, var(--hi-sans, 'Source Sans 3', system-ui, sans-serif)); --ms-mono: var(--mono, var(--hi-mono, 'JetBrains Mono', ui-monospace, monospace)); } .hi-ms{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px} .hi-ms-board{border:1px solid var(--ms-line);border-radius:14px;background:var(--ms-card); padding:16px 16px 8px;position:relative;overflow:hidden} .hi-ms-board > h3{margin:0;font-family:var(--ms-serif);font-style:normal;font-weight:700; font-size:1.02rem;line-height:1.15;color:var(--ms-ink)} .hi-ms-board > .hi-ms-sub{margin:3px 0 10px;font-family:var(--ms-mono);font-size:.56rem; font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ms-muted)} .hi-ms-wm{position:absolute;right:12px;top:2px;font-family:var(--ms-serif);font-style:normal; font-weight:700;font-size:4.4rem;line-height:1;color:var(--ms-ink);opacity:.05; pointer-events:none;user-select:none} .hi-ms-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center; padding:9px 8px 9px 2px;border-bottom:1px solid var(--ms-hair);border-radius:9px; position:relative;z-index:1;color:inherit;text-decoration:none; transition:background-color .16s} .hi-ms-row:last-child{border-bottom:0} .hi-ms-row:hover,.hi-ms-row:focus-visible{background-color:var(--ms-blue-soft)} .hi-ms-row:focus-visible{outline:2px solid var(--ms-blue);outline-offset:2px} /* the mug. Monogram first, photo layered over it only once it has LOADED — this site deletes any that 404s, so the real portrait is preloaded off-DOM by hi-milestones.js and appended on success. The initials are the floor, never a grey box. */ .hi-ms-mug{width:34px;height:34px;border-radius:50%;position:relative;flex-shrink:0; display:grid;place-items:center; background:color-mix(in srgb, var(--ms-tc, #1f5fbf) 24%, var(--ms-card)); border:1px solid color-mix(in srgb, var(--ms-tc, #1f5fbf) 52%, transparent)} @supports not (background:color-mix(in srgb,red 20%,blue)){ .hi-ms-mug{background:var(--ms-card-2);border:1px solid var(--ms-line)} } .hi-ms-mug em{font-family:var(--ms-mono);font-style:normal;font-size:.55rem;font-weight:700; color:var(--ms-ink);letter-spacing:.02em} .hi-ms-mug img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-radius:50%;background:var(--ms-card-2)} .hi-ms-who{display:flex;flex-direction:column;min-width:0;gap:2px} .hi-ms-who strong{font-family:var(--ms-sans);font-size:.85rem;font-weight:800;line-height:1.2; color:var(--ms-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hi-ms-row:hover .hi-ms-who strong{color:var(--ms-blue)} /* "3 away from 500 goals" — the count is the loud thing; the sentence around it stays quiet so the eye lands on the number first. */ .hi-ms-say{font-family:var(--ms-sans);font-size:.74rem;line-height:1.25;color:var(--ms-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hi-ms-say b{font-family:var(--ms-serif);font-style:normal;font-weight:700;font-size:1.02rem; color:var(--ms-ink);letter-spacing:-.01em} .hi-ms-say i{font-style:normal;font-weight:700;color:var(--ms-ink-2)} .hi-ms-chip{font-family:var(--ms-mono);font-size:.5rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--ms-ink-2);background:var(--ms-card-2); border:1px solid var(--ms-line);border-radius:999px;padding:4px 8px;white-space:nowrap} /* one away is a fact worth marking; mint is the site's only "on the verge" semantic and it is used here for exactly that, not as decoration. */ .hi-ms-row.is-imminent .hi-ms-chip{color:var(--ms-mint); border-color:color-mix(in srgb, var(--ms-mint) 45%, transparent)} .hi-ms-row.is-imminent .hi-ms-say b{color:var(--ms-mint)} .hi-ms-foot{margin:10px 2px 6px;font-family:var(--ms-mono);font-size:.54rem;font-weight:600; letter-spacing:.06em;color:var(--ms-muted);line-height:1.5} @media (max-width:600px){ .hi-ms-row{grid-template-columns:30px 1fr;row-gap:6px} .hi-ms-chip{grid-column:2} .hi-ms-mug{width:30px;height:30px} } @media (prefers-reduced-motion:reduce){ .hi-ms-row{transition:none} }