/* p3rf.css — the shared COMPONENT layer of the platform design system.
*
* WHAT THIS IS
* ------------
* core/static/design/ holds the design system proper: tailwind.css (the
* utility layer cycling's 63 templates are written in), custom.css (the P3
* tokens, type and chrome), the self-hosted faces and Font Awesome. This file
* sits on top of it and defines the COMPONENT vocabulary that pack templates
* written in plain HTML use — .hero, .card, .stat-grid, .btn, .badge, tables,
* plus the shell's own header/footer/palette classes.
*
* WHY IT EXISTS
* -------------
* The design merge moved hockey onto the platform shell but left its 1 073-line
* stylesheet behind, referenced by nothing. All 23 hockey pages kept emitting
* .hero / .card / .stat-card / .badge and rendered with no rule behind any of
* them. This file is that stylesheet, rebuilt on the P3 tokens: same class
* names, so not one page template had to change, but the colours, type, radii
* and shadows now come from the same source cycling renders from.
*
* THE BRIDGE BELOW IS THE WHOLE TRICK. Every component rule underneath reads
* var(--ink), var(--card-bg), var(--green) and so on. Pointing those at the
* design system's tokens restyles the entire component set at once — and
* because the design system already ships dark values for every token under
* html.dark / .dark-mode, dark mode follows for free. Do not hard-code a
* colour below; add or re-point a token here instead.
*
* ACCENT. --accent-color is overridden per-sport by the shell from
* PACK.accent, so hockey's teal and cycling's indigo both flow through these
* components without a per-sport stylesheet. That is why the bridge sends the
* old --indigo / --green brand roles at the accent rather than at fixed hues.
* Semantic colour (--good/--bad) and data encoding (--data-a/--data-b) stay
* separate on purpose: recolouring a sport must never silently change the
* meaning of a green delta or a chart series.
*/
:root {
/* ---- bridge: chrome & surfaces -> design-system tokens -------------- */
--bg: var(--bg-primary);
--card-bg: var(--bg-card);
--border: var(--border-color);
--row-alt: var(--bg-tertiary);
--ink: var(--text-primary);
--ink-muted: var(--text-muted);
--link: var(--accent-color);
--white: #ffffff;
--radius: var(--radius-lg);
--shadow: var(--shadow-lg);
/* ---- bridge: brand roles -> the pack accent ------------------------- */
/* These were hockey's fixed emerald/indigo. As brand roles (eyebrows,
pills, hero numbers, active states) they belong to whichever sport is
rendering. */
--green: var(--accent-color);
--green-dark: var(--accent-hover);
--indigo: var(--accent-color);
--indigo-dark: var(--accent-hover);
/* ---- semantic + medal colours (NOT the accent) ---------------------- */
--good: #0f8f6b;
--bad: #c0392b;
--gold: #b8860b; --gold-bg: rgba(246, 195, 66, 0.22);
--silver: #6b7280; --silver-bg: rgba(148, 163, 184, 0.25);
--bronze: #9a5b30; --bronze-bg: rgba(205, 133, 63, 0.22);
/* ---- the dark band a hero sits on ---------------------------------- */
/* The P3 slate ramp, so a hero and the footer are the same black. */
--navy-950: var(--slate-950);
--navy-900: var(--slate-900);
--navy-800: var(--slate-800);
--navy-700: var(--slate-700);
/* ---- rink / chart geometry (hockey's shot maps) --------------------- */
--chart-halo: #ffffff;
--chart-halo-inner: var(--slate-950);
--rink-line: #b9c2d8;
--rink-edge: #8f9ab6;
--rink-blue: #5b7fd1;
--rink-red: #c0392b;
}
/* Tokens with no design-system equivalent need their own dark values. The
bridged ones above must NOT be repeated here — custom.css already redefines
--bg-card, --text-primary and friends under this same selector, and
restating them would pin the dark theme to a stale copy. */
html.dark, .dark-mode {
/* #0f8f6b / #c0392b sit around 3:1 against the dark card and fail the 4.5:1
text threshold, so the dark theme gets lighter variants. */
--good: #3ddca4;
--bad: #ff7b6b;
--gold: #f6c342;
--silver: #cbd3e1;
--bronze: #e0975f;
--chart-halo: var(--slate-950);
--chart-halo-inner: #f2f5ff;
--rink-line: #39435f;
--rink-edge: #4b5675;
}
/* No global reset here: tailwind.css owns preflight and custom.css owns the
body ground and type. This file is the COMPONENT layer only. */
/* Inside a page body, an is chrome-coloured unless it is body copy or a
table cell (the two rules below). The shell's own header/footer links are
outside .page, so they keep their own styling. :not(.btn) is required: at
equal specificity `.page a` (0,1,1) beats `.btn-gray`/`.btn-green` (0,1,0),
so an rendered dark text on its own dark fill —
invisible in either theme. Each .btn-* variant already sets its own color;
this rule must not fight it. */
.page a:not(.btn) { color: inherit; text-decoration: none; }
/* Links inside body copy and tables need to look like links. The blanket
`color: inherit; text-decoration: none` above is right for nav items, cards
and whole-row targets, but it also made every player and team name in a
table indistinguishable from plain text. */
.page tbody a:not(.badge):not(.sweater-link),
.page .card-header a,
.page p a { color: var(--link); }
.page tbody a:not(.badge):not(.sweater-link):hover,
.page .card-header a:hover,
.page p a:hover { text-decoration: underline; }
.inline-link { color: var(--link); }
.inline-link:hover { text-decoration: underline; }
/* On the dark hero, the body link colour has too little contrast — the hero
band is dark regardless of the page's own light/dark theme, so this reads
--accent-on-dark rather than the theme-following --green/--indigo. */
.hero-link { color: var(--accent-on-dark); text-decoration: underline; }
.hero-link:hover { color: #fff; }
:where(a, button, select, input, [tabindex]):focus-visible {
outline: 2px solid var(--indigo);
outline-offset: 2px;
border-radius: 4px;
}
.delta-good { color: var(--good); font-weight: 700; }
.delta-bad { color: var(--bad); font-weight: 700; }
/* Both sit on the hero band, which is always the dark navy gradient — same
--accent-on-dark reasoning as .hero-link above. */
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.72rem;
font-weight: 700;
color: var(--accent-on-dark);
display: flex;
align-items: center;
gap: 0.6em;
}
.pill {
display: inline-flex;
align-items: center;
gap: 0.4em;
border: 1px solid color-mix(in srgb, var(--accent-on-dark) 50%, transparent);
color: var(--accent-on-dark);
padding: 0.25em 0.9em;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.season-filter-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--ink-muted);
padding: 0.25em 0.8em;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
}
.season-filter-btn.active {
background: var(--navy-800);
border-color: var(--navy-800);
color: #fff;
}
/* ---------- Game page tabs ---------- */
.game-tabs {
display: flex;
gap: 0.4rem;
margin-bottom: 1.4rem;
border-bottom: 1px solid var(--border);
}
.game-tab-btn, .record-tab-btn {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 0.7rem 0.9rem;
font-size: 0.88rem;
font-weight: 700;
color: var(--ink-muted);
cursor: pointer;
}
.game-tab-btn:hover, .record-tab-btn:hover { color: var(--ink); }
.game-tab-btn.active, .record-tab-btn.active {
color: var(--ink);
border-bottom-color: var(--indigo);
}
/* Custom hover tooltip (see base.html's data-tip handler) — replaces the
browser's native title="" tooltip on SVG charts. */
th[data-tip], .stat-card .label[data-tip] { cursor: help; }
.chart-tooltip {
position: fixed;
z-index: 1000;
pointer-events: none;
background: var(--navy-950);
color: #fff;
padding: 0.5em 0.75em;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.4;
max-width: 260px;
box-shadow: var(--shadow);
}
/* ---------- Hero ---------- */
.hero {
background: linear-gradient(160deg, var(--navy-900), var(--navy-800));
color: var(--white);
padding: 2.6rem 1.5rem 4.2rem;
position: relative;
}
.hero-inner { max-width: 1280px; margin: 0 auto; }
.hero-season-picker {
display: flex;
align-items: center;
gap: 0.6rem;
}
.hero-season-picker label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #b9c0d4;
}
.hero-season-picker select {
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
color: var(--white);
border-radius: 10px;
padding: 0.5rem 0.8rem;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
}
.hero-season-picker select option { color: var(--ink); }
.hero h1 {
font-size: 2.1rem;
font-weight: 900;
letter-spacing: -0.02em;
margin: 0.5rem 0 0.4rem;
display: flex;
align-items: center;
gap: 0.55rem;
}
.hero p.sub {
color: #b9c0d4;
font-size: 1rem;
max-width: 620px;
margin: 0;
}
.hero-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
}
.zigzag {
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 26px;
background: var(--bg);
clip-path: polygon(
0% 100%, 0% 40%, 4% 0%, 8% 40%, 12% 0%, 16% 40%, 20% 0%, 24% 40%,
28% 0%, 32% 40%, 36% 0%, 40% 40%, 44% 0%, 48% 40%, 52% 0%, 56% 40%,
60% 0%, 64% 40%, 68% 0%, 72% 40%, 76% 0%, 80% 40%, 84% 0%, 88% 40%,
92% 0%, 96% 40%, 100% 0%, 100% 100%
);
}
/* ---------- Layout ---------- */
.container { max-width: 1280px; margin: 0 auto; padding: 2.2rem 1.5rem 1.5rem; }
.section-title {
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
margin: 0 0 0.9rem;
}
/* ---------- Stat cards (home) ---------- */
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: -2.6rem;
position: relative;
z-index: 2;
}
/* Column counts live here rather than in inline styles: an inline
grid-template-columns outranks the responsive media query below and would
pin phones to six columns. */
.stat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.stat-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.stat-grid.cols-7 { grid-template-columns: repeat(7, 1fr); }
.stat-grid.tucked { margin-top: -2.6rem; }
.stat-grid.flush { margin-top: 0; }
.stat-card {
background: var(--navy-900);
border: 1px solid var(--navy-700);
border-radius: var(--radius);
padding: 1.3rem 1.4rem;
color: var(--white);
box-shadow: var(--shadow);
}
.stat-card .num {
font-size: 2rem;
font-weight: 900;
/* .stat-card's own background is always the dark navy band, in both
themes — --green (the theme-following accent bridge) put the raw light-
theme accent on that dark ground, which for anything darker than
roughly #6B7280 drops under 2:1. --accent-on-dark is always the
lightened shade regardless of the page's own theme. */
color: var(--accent-on-dark);
letter-spacing: -0.02em;
}
.stat-card .label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #99a1ba;
margin-top: 0.3rem;
}
/* .num is sized for a short number/score (e.g. "82", "+15") — a phrase like
"Clinched Playoff Spot" wrapped onto multiple lines at that size, and since
a stat-grid row shares height across every card, it inflated the whole row.
Use this on a .num holding a short status phrase instead. */
.stat-card .num.status-text {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: normal;
line-height: 1.25;
}
.stat-card-team { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.stat-card-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.stat-card .label-team { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.stat-card .label-team img { width: 16px; height: 16px; object-fit: contain; }
/* "Best of the Night" performer tiles — a small category label, the
player's face with their team's logo badged on it, the big number, then
the name last (name sits below the number so the number stays the thing
your eye lands on first, but at a size big enough to actually read who
it is without opening the modal). */
.stat-card-performer {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
}
.performer-title {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #99a1ba;
}
.performer-media {
position: relative;
width: 64px;
height: 64px;
}
.performer-face {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
background: var(--navy-800);
border: 2px solid var(--navy-700);
}
.performer-face-placeholder {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--navy-800);
border: 2px solid var(--navy-700);
}
.performer-team-logo {
position: absolute;
right: -4px;
bottom: -4px;
width: 26px;
height: 26px;
object-fit: contain;
background: var(--navy-900);
border-radius: 50%;
padding: 3px;
border: 2px solid var(--navy-900);
}
.stat-card-performer .num {
font-size: 1.8rem;
margin-top: 0.1rem;
}
.performer-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--white);
line-height: 1.25;
}
.performer-name .meta { font-size: 0.82rem; font-weight: 500; color: #99a1ba; }
@media (max-width: 560px) {
.performer-face, .performer-face-placeholder { width: 52px; height: 52px; }
.performer-media { width: 52px; height: 52px; }
.stat-card-performer .num { font-size: 1.5rem; }
}
/* Fixed, not theme-following — .stat-card's background is always the dark
navy band in both themes, so a plain orange reads fine either way. */
.flame-hot { color: #ff7a35; }
/* ---------- Cards ---------- */
.card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
/* auto, not hidden: every cell is white-space:nowrap, so a wide table
(standings runs 13 columns) has to be scrollable on a narrow screen
rather than clipped off the edge of the card. */
overflow-x: auto;
}
.card + .card { margin-top: 1.5rem; }
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.3rem;
border-bottom: 1px solid var(--border);
}
.card-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 800;
}
.card-header .meta {
font-size: 0.78rem;
color: var(--ink-muted);
}
/* ---------- Tables ---------- */
.page table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.page thead th {
text-align: left;
text-transform: uppercase;
font-size: 0.68rem;
letter-spacing: 0.06em;
color: var(--ink-muted);
font-weight: 800;
padding: 0.7rem 0.9rem;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
thead th.num, td.num { text-align: right; }
.page tbody td {
padding: 0.7rem 0.9rem;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
/* Long prose cells (play-by-play descriptions) have to wrap. Left as nowrap
they forced the whole card sideways instead of the text using the width it
already had. */
tbody td.wrap, tbody td:last-child:not(.num) { white-space: normal; }
[data-panel="pbp"] tbody td:last-child { white-space: normal; min-width: 18rem; }
.page tbody tr:nth-child(even) { background: var(--row-alt); }
.page tbody tr:hover { background: #eef2ff; }
tbody tr:last-child td { border-bottom: none; }
/* Whole-row/card navigation targets (see base.html's delegated click/keydown
handler) — cursor and a visible focus ring so keyboard users can see
which row is about to activate on Enter/Space. */
[data-href] { cursor: pointer; }
[data-href]:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.player-suggest {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 20;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow);
overflow: hidden;
}
.player-suggest-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.9rem;
cursor: pointer;
font-size: 0.88rem;
color: var(--ink);
}
.player-suggest-item img { width: 20px; height: 20px; object-fit: contain; }
.player-suggest-item .pos { color: var(--ink-muted); font-weight: 700; font-size: 0.78rem; }
.player-suggest-item.active, .player-suggest-item:hover { background: var(--hover-bg, rgba(120,130,255,0.12)); }
.player-suggest-empty { padding: 0.6rem 0.9rem; color: var(--ink-muted); font-size: 0.85rem; }
.team-cell { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.team-cell img { width: 24px; height: 24px; object-fit: contain; }
/* A player face between the team logo and the name — round and object-fit:
cover, unlike the square contain-fit team logo right next to it. */
.team-cell img.team-cell-face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Games list: Home/Score/Away as their own columns (not one free-flowing
"Matchup" cell) so a longer team name can't shove the score sideways.
Team names are normal weight here; only the winning side gets bold.
table-layout: fixed plus two unwidthed "gap" columns (one between Date
and Home, one after Away) is what centers the Home/Score/Away block in
the space to the right of Date — a fixed-layout table splits leftover
width equally between columns that have no declared width, so both gaps
grow/shrink together and stay equal instead of the block hugging one
edge. */
.games-table { table-layout: fixed; }
.games-table-date { width: 7.5rem; }
.games-table-home { width: 16rem; text-align: right; }
.games-table-home .team-cell { justify-content: flex-end; }
/* The header label reads left-to-right like every other column heading
(Date, Score, Away) — only the body cells beneath it right-align to
hug the score. */
.games-table thead .games-table-home { text-align: right; }
.games-table-score { width: 6rem; text-align: center; }
.games-table-away { width: 16rem; text-align: left; }
.game-team { font-weight: 400; }
.game-team.winner { font-weight: 900; }
.game-score.winner { font-weight: 900; }
.rank { color: var(--ink-muted); font-weight: 700; width: 1.6rem; display: inline-block; }
/* Standings table's # column — a plain table cell, not the inline-block
.rank span above (that one's sized for a flex/list row and squeezes a
| down to ~0 content width once tbody td's own padding is subtracted,
which knocked the numbers out of alignment with the "#" header). */
td.rank-col { color: var(--ink-muted); font-weight: 700; }
.badge {
display: inline-flex;
align-items: center;
font-size: 0.68rem;
font-weight: 800;
padding: 0.18em 0.55em;
border-radius: 999px;
letter-spacing: 0.03em;
/* A badge is a one-line pill everywhere it's used. Without this, a
multi-word label (e.g. standings' "Clinched Presidents' Trophy") sitting
in a table's last cell inherits that cell's white-space:normal (set
below so prose cells like play-by-play descriptions can wrap), and the
browser shrinks the whole column to fit the wrapped pill — throwing off
that row's height and the table's column widths generally. */
white-space: nowrap;
}
.champion-line {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-weight: 800;
color: var(--gold);
}
.badge-green { background: rgba(46, 230, 166, 0.15); color: var(--green-dark); }
.badge-indigo { background: rgba(106, 111, 240, 0.14); color: var(--indigo-dark); }
.badge-gray { background: #eef0f6; color: var(--ink-muted); }
.badge-red { background: #fde8e8; color: #c0392b; }
html.dark .badge-red { background: rgba(255, 123, 107, 0.18); color: var(--bad); }
/* ---------- Franchise history (/history) ---------- */
.franchise-card { margin-bottom: 1.5rem; }
.franchise-card .card-header h3 { display: flex; align-items: center; gap: 0.5rem; }
.franchise-card .card-header h3 img { width: 26px; height: 26px; object-fit: contain; }
.franchise-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.franchise-era {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.6rem 0.9rem;
border: 1px solid var(--border);
border-radius: 10px;
text-decoration: none;
color: inherit;
text-align: center;
min-width: 130px;
}
.franchise-era:hover { border-color: var(--indigo); }
.franchise-era img { width: 28px; height: 28px; object-fit: contain; }
.franchise-era .era-name { font-weight: 700; font-size: 0.85rem; }
.franchise-era .era-years { color: var(--ink-muted); font-size: 0.72rem; }
.franchise-transition {
display: flex;
flex-direction: column;
align-items: center;
color: var(--ink-muted);
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.franchise-transition .arrow { font-size: 1.1rem; line-height: 1; color: var(--ink-muted); }
/* Sortable column headers */
.sort-link { display: inline-flex; align-items: center; gap: 0.25em; color: inherit; }
.sort-link:hover { color: var(--ink); text-decoration: underline; }
.sort-link.is-active { color: var(--ink); }
.sort-arrow { font-size: 0.9em; line-height: 1; }
.rank-note {
display: inline-block;
margin-left: 0.35em;
font-size: 0.9em;
font-weight: 700;
/* Fixed light grey, not var(--ink-muted) — every caller sits inside a
.stat-card, whose background is always the dark navy band regardless of
theme (see .stat-card .num above). The light theme's --ink-muted is
tuned for a light card and reads near-invisible on that dark ground. */
color: #c7cce0;
text-transform: none;
letter-spacing: 0;
}
.rank-note.is-good { color: var(--good); }
.rank-note.is-bad { color: var(--bad); }
/* Win/loss badges on a team's results */
.result-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.1rem;
padding: 0.16em 0.45em;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.03em;
}
.result-w { background: rgba(46, 230, 166, 0.18); color: var(--good); }
.result-l { background: rgba(192, 57, 43, 0.13); color: var(--bad); }
.result-otl { background: rgba(106, 111, 240, 0.16); color: var(--indigo-dark); }
html.dark .result-otl { color: #a7abff; }
.home-away {
display: inline-block;
width: 1.4rem;
color: var(--ink-muted);
font-weight: 700;
font-size: 0.8rem;
}
.ot-flag {
margin-left: 0.35em;
font-size: 0.65rem;
font-weight: 800;
color: var(--ink-muted);
vertical-align: super;
}
/* Filter rows above a table or chart */
.filter-bar {
display: flex;
gap: 0.7rem;
margin-bottom: 1.4rem;
flex-wrap: wrap;
align-items: center;
}
.shot-filter {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
padding: 0 1.3rem 0.2rem;
}
/* Half-rink shot charts, side by side — 2 normally (Goals/All Shots), 3 when
Blocked joins them, 4 on the player page once Assists does too. Explicit
per-count classes rather than auto-fit: auto-fit sizes columns off the
container alone, so 2 real panels in a wide card would stretch to fill it
at the same width a 4-panel row uses, instead of matching cols to the
panel count actually present. */
.rink-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.1rem;
padding: 1.1rem 1.3rem;
}
.rink-pair.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rink-pair.quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
.rink-pair.quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rink-panel { margin: 0; }
.rink-panel svg {
width: 100%;
height: auto;
display: block;
background: var(--row-alt);
border-radius: 10px;
}
.rink-panel figcaption {
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.rink-title { font-weight: 800; font-size: 0.95rem; }
.rink-count {
font-weight: 800;
font-size: 0.95rem;
color: var(--green-dark);
}
html.dark .rink-count { color: var(--green); }
.rink-sub {
flex: 1 0 100%;
font-size: 0.75rem;
line-height: 1.3;
/* Reserves 2 lines' worth of height regardless of how long this panel's
own caption is — with panels of unequal caption length otherwise
wrapping to different line counts, the shorter ones' SVGs sat higher
than a longer one's in the same row (e.g. the 3/4-panel rows, where the
narrower columns wrap sooner). */
min-height: 2.6em;
color: var(--ink-muted);
}
/* Heatmap cells: one hue per panel (indigo for shot volume, green for
goals — same pairing the old scatter dots used), monotone light->dark by
varying fill-opacity over a flat surface, which is mathematically the
same as mixing the hue toward the surface colour. Cells are direct
children of the |