like every other
row's cells, and without it they fell back to the browser's unstyled | default
(left-aligned, no padding), which is what made Par look out of step with every row
below it even though the cell boundaries themselves already lined up. */
.round-h-table thead th,
.round-h-table thead td,
.round-h-table tbody td,
.round-h-table tbody th {
padding: 8px 10px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
}
/* First column (row labels: Hole/Par/Score/FIR/GIR/Putts) stays put while the rest of an
18-hole round's columns scroll past underneath it. */
.round-h-table thead th.round-h-corner,
.round-h-table tbody th[scope="row"] {
position: sticky;
left: 0;
z-index: 1;
text-align: left;
background: var(--bg-card);
}
.round-h-table thead th.round-h-corner { z-index: 2; background: var(--bg-surface); }
.round-h-hole { cursor: pointer; transition: background 0.15s, color 0.15s; }
.round-h-hole:hover,
.round-h-hole:focus-visible { background: var(--overlay-faint); color: var(--accent); }
.round-h-hole:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.round-h-table thead th.round-h-sub,
.round-h-table thead td.round-h-sub-cell,
.round-h-table tbody td.round-h-sub-cell { background: var(--overlay-faint); font-weight: 600; }
.round-h-na { color: var(--text-faint); }
/* The player's name sits on the Score row's own label (th[scope=row]) instead of a
separate full-width divider row — this just adds a separating line above that row, and
above it only, so consecutive players' blocks still read as distinct groups. */
.round-h-table tbody tr.round-h-player-first th[scope="row"] {
font-family: var(--font-serif);
font-weight: 700;
color: var(--accent);
border-top: 1px solid var(--border-subtle);
}
.round-h-table tbody tr.round-h-player-first td { border-top: 1px solid var(--border-subtle); }
.round-h-table tbody tr:first-child th,
.round-h-table tbody tr:first-child td { border-top: none; }
/* Bands every other player's whole 4-row block so they're easy to tell apart once there's
more than one — :not(.round-h-sub-cell) leaves the OUT/IN/TOTAL columns' own shading
alone rather than fighting with it (both would otherwise apply to the same cell).
--overlay-faint (the same token the OUT/IN/TOTAL columns already use) rather than
--overlay-medium — medium read as too strong a contrast between players; matching the
sub-cell tokens keeps every shaded element on this table at one consistent, subtle
intensity instead of two different strengths. */
.round-h-table tbody tr.round-h-player-alt td:not(.round-h-sub-cell),
.round-h-table tbody tr.round-h-player-alt th[scope="row"] {
background: var(--overlay-faint);
}
/* Standard scorecard marks — currentColor so each just matches whatever color the score
text already is (birdie-or-better already renders in the accent green via .results-score
rules elsewhere, this just adds the ring/box around it). outline draws outside the
border without affecting layout size, which is what makes the "double" variants read as
two concentric rings/boxes rather than one thick one. */
.score-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 4px;
font-size: 18px;
font-weight: 700;
border-radius: 4px;
}
.score-mark--circle,
.score-mark--dcircle { border-radius: 50%; }
.score-mark--circle,
.score-mark--square { border: 1.5px solid currentColor; }
.score-mark--dcircle,
.score-mark--dsquare {
border: 1.5px solid currentColor;
outline: 1.5px solid currentColor;
outline-offset: 2px;
}
/* Score mark and its FIR/GIR/Putts side by side, not stacked — small enough that the
three extra rows per cell don't blow out the table, since every player column repeats
them. */
.round-summary-cell {
display: inline-flex;
align-items: center;
gap: 12px;
}
.round-summary-cell-stats {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
}
.round-summary-cell-stat {
display: inline-flex;
align-items: center;
gap: 4px;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.round-summary-stat-icon--yes { color: #2f9e52; }
.round-summary-stat-icon--no { color: var(--danger, #c0392b); }
.round-summary-stats { margin-top: 4px; }
.round-stat-substats {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 8px;
font-size: 10.5px;
color: var(--text-muted);
}
|