/* public/css/site.css
============================================================================
Design system
============================================================================
This file is hand-written, has no build step and no framework. Everything
below is organised so a future change can find the right lever instead of
adding another one-off value.
COLOUR
--bg / --fg / --muted / --rule / --rule-strong / --control-border /
--accent / --row-alt / --row-hover / --marker — defined once in `:root`,
each as `light-dark(light-value, dark-value)`. Every other rule in this
file reads colour only through these custom properties, so a rule is
written once and works in both schemes. Which half applies follows the
element's `color-scheme`, which is `light dark` by default (the operating
system decides) and is pinned by `[data-theme]` on once a visitor
uses the theme toggle in the header — see public/js/theme.js.
`--control-border` (not `--rule`) is used wherever a border is doing a
control's job — a filter pill, a stat card, a form input — because
WCAG 1.4.11 wants 3:1 there; `--rule` is decorative-only and is
deliberately lower contrast (see test/lib/contrast.test.js). `--danger`
and `--success` are the form-feedback red/green (error/success borders,
the destructive-action button) — a distinct pair per scheme, like every
other colour here, rather than a single hard-coded hex that stays too
dark to read against a dark `--bg`.
SPACING SCALE
--space-1 … --space-8, a 4px-based scale (4/8/12/16/24/32/48/64px). Use
one of these for every margin/padding/gap in this file instead of an
ad-hoc rem value — it's what keeps the page's rhythm consistent instead
of "close enough" everywhere.
TYPE SCALE
--fs-title / --fs-heading / --fs-subheading / --fs-body / --fs-small,
paired with --fw-title / --fw-heading / --fw-subheading / --fw-body.
--fs-title is the page's own name (one per page, the `
`);
--fs-heading marks off a major section (`
`); --fs-subheading is a
subdivision within a section (`
`); --fs-body is running text and
table cells; --fs-small is footnotes, captions and other small print.
PAGE HEADER
`.page-header` wraps a page's `
`, its `.subtitle` line of context,
and — when a page has them — page-level filters or actions, then draws
one rule underneath to separate that block from the page body. Every
public page opens with one.
PANELS
`.panel` groups a section heading with the table/content it introduces
into one bordered block, so a long page reads as a stack of distinct
units rather than a continuous scroll. A `.panel` does not change the
heading it wraps — no class or id is added to any `
` that a test
pins literally (`
Most matches
`, `
Cards
`,
`
Penalties
`, `
Names by season
`); the border and
spacing come entirely from the wrapping element.
`.panel-columns` lays a panel's content out as side-by-side columns
that collapse to one on a narrow viewport, for a section whose content
is a pair of short lists rather than one long one — the referee page's
yellow and red card reasons.
TABLES
`.table-wrap` still exists purely for the horizontal scroll it enables
on narrow viewports; tabular numerals, right-aligned numeric columns,
a caption and scoped headers are unchanged. Layered on top: a visibly
stronger header (bolder weight, a background tint, and — since the wrap
only scrolls horizontally, not vertically — a `position: sticky` header
that stays put while a long table's own rows scroll past it, no JS
involved), a hover state on data rows, and a zebra stripe. Hover is
declared after the stripe rule so it wins on both odd and even rows
rather than the two fighting for the same pixels.
FILTERS, PILLS, EMPTY STATES
`.filters` is the one pattern for every filter/sort control on the site
(referee index, match index, the event indexes, the position switch on the
alternate referee page). `.empty` is the one pattern for "nothing to
show here" — a bordered, centred note rather than a lone paragraph
floating in blank space.
ADMIN CHROME
`.admin-shell` wraps the admin nav and every admin page's content
(see admin/layout.njk). It draws one restrained signal — a coloured top
rule — so an operator glancing at any admin screenshot can tell they are
in the operator tools, not the public site, without the admin area
becoming a visually different product. `.admin-nav` is the operator's
primary navigation: the same `aria-current="page"` convention as the
public nav, styled as a row of tabs rather than the public site's pill
filters, because it is navigation, not a filter.
FORMS (extended for admin)
The public site's `.form` (single-column, 26rem, used by login and
change-password) is unchanged. Admin adds what a data-entry form needs
that a two-field auth form does not:
- `fieldset`/`legend` group related controls with a border and a bold
legend — used for every logical group (a radio choice, a form's
"details" vs. its metadata, a table's crew positions).
- `.field-row` (pre-existing) lays a set of fields out side by side,
wrapping on narrow viewports; the input/select inside keep their own
intrinsic width rather than stretching to fill the row.
- Width utility classes `.w-tiny` / `.w-short` / `.w-medium` cap an
input's width by what it holds (a match minute, a four-character
club id, a person's given name) instead of letting every field claim
the same full measure — the club id field is the clearest case: it
is 1-4 characters and used to render exactly as wide as the club's
full name field below it.
- `.field-help` is muted explanatory text directly under a control —
tighter than `.footnote`, which remains for page-level asides.
- `.nationality-code` / `.nationality-echo` are the FIFA trigram box and
the country name written under it. Its own width rather than one of
the utilities above, because three characters is not a match minute,
and `.is-unknown` on either marks a code FIFA has never issued.
- `.form` now also styles `email`/`number`/`date`/`file` inputs and
`select`, not only `text`/`password` — admin forms use all of these
and previously got bare, unstyled browser controls for anything
past a text box.
`.danger-zone` and `.btn-danger` mark destructive actions (delete a
match, restore the database) so they read as unlike an ordinary save —
see COLOUR's `--danger`.
============================================================================
*/
/* Each colour is stated once, as `light-dark(light-value, dark-value)`, rather than as a
light block plus a dark `@media` block that have to be kept in step rule-by-rule. Which
half is used follows the element's `color-scheme`, so the theme toggle switches every
colour on the page by setting one property on — see `[data-theme]` below and
public/js/theme.js. `color-scheme` also tells the browser to render its own furniture —
form controls, scrollbars, the canvas before the stylesheet lands — to match, which a
`@media` query alone never did. */
:root {
color-scheme: light dark;
--bg: light-dark(#ffffff, #14171a);
--fg: light-dark(#16191d, #e7eaee);
--muted: light-dark(#5b6470, #9aa4b0);
--rule: light-dark(#d8dde3, #2b3138);
--rule-strong: light-dark(#b3bcc7, #3c444d);
/* Dedicated border colour for interactive control boundaries (filter/sort pills, stat
cards) — WCAG 1.4.11 wants 3:1 for these, which --rule (1.37:1 against --bg) does not
come close to meeting. ~4.0:1 light, ~5.3:1 dark. Decorative table rules keep --rule. */
--control-border: light-dark(#75808c, #838d99);
--accent: light-dark(#14507d, #7db6e8);
--row-alt: light-dark(#f6f8fa, #1a1e22);
/* Distinct from --row-alt so a hovered row is never colour-identical to a striped one. */
--row-hover: light-dark(#eaf1f8, #202a35);
--marker: light-dark(#8a5a00, #e0aa4a);
/* Form feedback: an invalid field/destructive action (--danger) and a saved one
(--success). 6.54:1 and 6.28:1 against light --bg, 6.61:1 and 6.56:1 against dark —
comfortably past the 4.5:1 .btn-danger's own text needs, since its label sits directly
on this fill. The dark halves are lighter on purpose; reusing the light hexes there
would sink both well under 3:1. */
--danger: light-dark(#b3261e, #ff6f64);
--success: light-dark(#1b6e3c, #4caf6d);
/* A red card's red. The same pair as --danger, aliased rather than restated so the hex
stays stated once, and named for what it marks: a second caution is not a danger, and
a rule reading `var(--danger)` beside a card count would read as a warning. */
--card-red: var(--danger);
--measure: 68rem;
/* Spacing scale — 4px base. Use these, not ad-hoc rem values. */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
/* Type scale. --fs-body matches the existing 15px base body copy. */
--fs-title: 1.75rem;
--fs-heading: 1.25rem;
--fs-subheading: 1rem;
--fs-body: 0.9375rem;
--fs-small: 0.8125rem;
--fw-title: 700;
--fw-heading: 700;
--fw-subheading: 600;
--fw-body: 400;
--radius: 6px;
}
/* The theme toggle's whole effect: one attribute on , set before first paint by
public/js/theme.js. Absent — the case for a visitor who has never touched the toggle,
and for every visitor with JavaScript off — the `light dark` above stands and the
operating system decides. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font: var(--fs-body)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
/* A visible focus ring beyond the browser default, for keyboard navigation through the
dense link-heavy tables this site is full of. Additive only — no rule anywhere in this
file sets outline: none, so the platform default keeps working even where this is not
supported. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, .linklike:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: var(--space-2);
top: var(--space-2);
z-index: 10;
padding: var(--space-2) var(--space-3);
background: var(--bg);
border: 2px solid var(--accent);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ============================== Site chrome ============================== */
.site-header {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
align-items: baseline;
max-width: var(--measure);
margin: 0 auto;
padding: var(--space-4) var(--space-4) var(--space-3);
border-bottom: 2px solid var(--rule-strong);
}
.site-title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.site-title a { color: inherit; text-decoration: none; }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.site-header nav a { text-decoration: none; color: var(--muted); }
.site-header nav a:hover { color: var(--fg); }
.site-header nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }
/* `--space-2`, not `--space-3`. This row holds the theme toggle, a username, Admin, Log out
and three languages, and in French signed in — "Se déconnecter" against "Log out" — it ran
past the navigation beside it and the header wrapped onto a second line. A quarter of a rem
between five items is 1rem back, which with the switcher's own tightening is where the row
fits again. */
.account { margin-left: auto; display: flex; gap: var(--space-2); align-items: baseline; color: var(--muted); font-size: var(--fs-small); }
.account form.inline { display: inline; margin: 0; }
/* The light/dark toggle. Icon only and unlabelled — it sits among text links and a second
run of words there would read as another destination. Its name is on the button itself,
set by theme.js, so a screen reader gets a sentence where a sighted reader gets a glyph.
`align-self: center` because .account aligns on the baseline, which an icon has none of. */
.theme-toggle {
align-self: center;
display: flex; padding: var(--space-1);
background: none; border: 0; border-radius: var(--radius);
color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--fg); }
/* The button shows where pressing it goes, not where the page is: a moon in daylight, a
sun at night. Three rules rather than one because CSS can read the chosen theme from the
attribute but the unchosen one only from the media query. */
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.linklike { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
main { max-width: var(--measure); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); }
.site-footer {
max-width: var(--measure);
margin: 0 auto;
padding: var(--space-4);
border-top: 1px solid var(--rule);
color: var(--muted);
font-size: var(--fs-small);
}
/* ============================== Admin chrome ============================== */
/* One restrained, page-wide signal that this is the operator side of the site — a
coloured top rule above the nav — rather than a different visual language. Wraps the
admin nav and every admin page's own content (see admin/layout.njk). */
.admin-shell { border-top: 3px solid var(--accent); padding-top: var(--space-5); }
/* The operator's primary navigation. Same aria-current="page" convention as the public
site nav and the same underlying list-of-links markup as `.filters`, but shaped like
tabs — a bottom rule with the current section picked out by an accent underline —
because this is navigation, not a filter over one page's content. */
.admin-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-5);
margin: 0 0 var(--space-6);
padding: 0 var(--space-1);
border-bottom: 2px solid var(--rule-strong);
}
.admin-nav a {
padding: var(--space-2) var(--space-1);
border-bottom: 3px solid transparent;
margin-bottom: -2px;
text-decoration: none;
color: var(--muted);
}
.admin-nav a:hover { color: var(--fg); }
.admin-nav a[aria-current="true"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
/* ============================== Forms ============================== */
.form { max-width: 26rem; }
/* The cap belongs to the single-column default; a gridded form sets its own. */
.form.form-grid { max-width: 76rem; }
/* And a form whose content is a table sets none. The bulk fixture form is ten rows of
eight fields: under the single-column cap the table had a quarter of the window and
every column in it was too narrow for what it holds. */
.form.form-wide { max-width: none; }
/* The batch's one round, above the table it applies to. Inline, because it is a single
short control and `.form label` is a block — stacked it opened a two-line gap between
the panel heading and the table. */
.form-wide .bulk-round { display: flex; align-items: baseline; gap: var(--space-3); }
.form-wide .bulk-round label { margin-bottom: 0; }
.form-wide .bulk-round select { width: auto; }
.form label { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.form input[type="text"], .form input[type="password"], .form input:not([type]),
.form input[type="email"], .form input[type="number"], .form input[type="date"],
.form input[type="file"], .form select {
width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--control-border);
border-radius: 4px; background: var(--bg); color: var(--fg); font: inherit;
}
.form p { margin: 0 0 var(--space-3); }
.form p:last-child { margin-bottom: 0; }
.form button {
padding: var(--space-2) var(--space-4); border: 1px solid var(--accent); border-radius: 4px;
background: var(--accent); color: var(--bg); font: inherit; font-weight: 600; cursor: pointer;
}
.form button:hover { filter: brightness(1.1); }
/* A button that reads as a link, for an action that only changes what is already on the
page — "Copy above" beside a date field. It has to out-specify `.form button` above,
which is the submit style: a filled accent block on a per-row convenience would both
shout and imply that pressing it submits the form. */
.form .link-button {
padding: 0; border: 0; background: none; color: var(--accent); font: inherit;
font-size: var(--fs-small); text-decoration: underline; cursor: pointer;
}
.form .link-button:hover { text-decoration-thickness: 2px; filter: none; }
/* A real button at half the weight, for one sitting beside a line of text rather than at
the foot of a form — the Run beside each SQL example. The full submit style is a filled
block sized for the end of a form, and three of them down a list of examples would read
as the point of the page rather than as a convenience on it. */
.button-small {
padding: 0.1rem var(--space-2); border: 1px solid var(--control-border); border-radius: 4px;
background: var(--bg); color: var(--fg); font: inherit; font-size: var(--fs-small);
cursor: pointer;
}
.button-small:hover { border-color: var(--accent); color: var(--accent); }
/* Each example is a disclosure and a Run button on one line. The disclosure takes the
width so its summary and the button share a baseline; the query inside it, once opened,
sits under the summary rather than beside the button. */
.sql-examples { list-style: none; margin: 0; padding: 0; }
.sql-examples li {
display: flex; align-items: start; gap: var(--space-3);
padding: var(--space-2) 0; border-bottom: 1px solid var(--rule);
}
.sql-examples li:last-child { border-bottom: 0; }
.sql-examples details { flex: 1; min-width: 0; }
.sql-examples form { margin: 0; }
/* The date cell: "Copy above" to the left of the field, then the field. The link is held
to a word's width and allowed to wrap onto two lines, so what it costs the row is a
short column rather than a whole phrase — it is pressed once per row at most, and the
date beside it is what the operator is aiming at.
`.form input[type="date"]` is 100% wide, which is right for a column of fields and
wrong inside a table cell, where it would leave the link nowhere to go. */
/* The link's width and the space after it, named because three things have to agree about
them: the link itself, the gap beside it, and the DATE heading, which is pushed past
both so that it sits over the field rather than over the link. */
.bulk-fixtures { --copy-link: 2.8rem; --copy-gap: var(--space-1); }
.form-wide [data-copy-date] { display: flex; align-items: center; gap: var(--copy-gap); }
/* A fixed width, not a share of the cell. The table is `width: 100%`, so a column's stated
width is really a ratio and whatever space the other eleven do not claim is handed back
to this one — which left a date field half as wide again as a date needs, growing wider
the wider the window got. Pinned to what the control actually measures: 9.3rem at this
font and this padding, plus a little air. Slack now falls to the right of the field,
inside the cell, where it costs nothing. */
.form-wide [data-copy-date] input { flex: 0 0 var(--date-field); width: var(--date-field); }
.bulk-fixtures { --date-field: 9.5rem; }
/* The side padding the rest of this table's fields use. A date control is mostly its own
spin buttons and calendar icon, and 12px either side of that was another 16px of nothing
in the widest field on the row. */
.bulk-fixtures input[type="date"] {
padding-left: var(--space-1); padding-right: var(--space-1);
}
.copy-above {
flex: 0 0 var(--copy-link); white-space: normal; text-align: left; line-height: 1.15;
}
/* An empty stand-in for the link, so the DATE heading starts exactly where the fields
under it start. The same trick the event tables' Opp heading uses: reproducing the thing
being cleared is exact, where a hand-guessed padding drifts the moment either width
changes. */
.copy-above-spacer {
display: inline-block; width: var(--copy-link); margin-right: var(--copy-gap);
}
/* The gap between columns, cut for this table alone. The default 0.55rem either side is
right for a table of prose; here it was 1.1rem of nothing between boxes, twelve times
over — nearly a fifth of the table spent on separation that the boxes' own borders
already provide. */
.bulk-fixtures th,
.bulk-fixtures td { padding-left: 0.2rem; padding-right: 0.2rem; }
/* The fixture table's columns, every one of them sized. The referee used to take whatever
the others left, which stopped working when the row gained four more figures: left to
itself it would have been squeezed to a box too narrow to read a name in, which is the
one field on the row where that costs an operator real time. It is sized here, and its
width is what was cut to pay for the new columns.
Each is written as the field width plus the 0.4rem of cell padding above. The four
counts are `col-score`, not a class of their own: what the owner asked for is that they
be the same size as the score boxes, and sharing the class is how that stays true.
The widths are measured rather than guessed. At the 14px these fields render in, the
longest club id — NYRB — is 38px, so a 3rem box holds it with 2px to spare; the longest
figure any of these columns takes is two digits, at 18px. */
/* Link, gap, field and the cell's own padding. Stated at what the content measures rather
than under it: a column narrower than its contents is not honoured anyway — the browser
widens it to fit — and a figure that lies about the cell is a figure nobody can reason
from when the next column is added. */
.bulk-fixtures .col-date { width: 12.95rem; } /* 2.8 link + 0.25 gap + 9.5 field + 0.4 pad */
/* `fixed`, so the widths above are the widths rather than opening bids. Under the default
`auto` the browser sizes columns from their contents and hands the leftover round
proportionally, which put 54px of nothing between the date field and Home the moment the
date field stopped stretching to absorb it. Fixed layout spends that leftover where it
is stated instead — and the referee column below is stated wide enough to take almost
all of it, a name being the one thing on the row that can use the room. */
.bulk-fixtures { table-layout: fixed; }
.bulk-fixtures .col-club { width: 3.4rem; } /* field 3rem — a quarter off, NYRB still fits */
.bulk-fixtures .col-referee { width: 20rem; } /* takes the table's slack — see table-layout */
.bulk-fixtures .col-score { width: 2.4rem; } /* field 2rem — scores, yellows, penalties */
.bulk-fixtures .col-fouls { width: 3rem; } /* field 2.6rem — fouls reach 30-odd */
/* No spinners on the score and foul boxes. Forty of them stacked in four columns is a lot
of furniture for a control nobody uses: a score is typed, not nudged one at a time, and
the arrows eat about a third of a box this narrow. `type="number"` stays, so the field
still takes only digits and still refuses a negative one.
Two rules because the browsers disagree: WebKit and Blink draw the spinner as a
pseudo-element, Gecko as the widget's own appearance. Both are needed, and neither
removes the other's. Scoped to this table — the match form's minute boxes keep theirs,
where stepping a minute at a time is a real thing to want. */
/* And the padding comes in to match. The form's inputs carry 12px each side, which is
right for a name and absurd on a two-digit box: it left 6px of usable width inside a
32px score field, so a single digit was clipped and "14" only fitted because the field
scrolled. 4px each side leaves 24px, which holds two digits with room to spare.
Centred, because these are one or two characters in a box sized for exactly that; the
default `start` parked them against the left edge with the whitespace all on one side.
The vertical padding is untouched, so these boxes stay the height of every other field
in the row. */
.bulk-fixtures input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
padding-left: var(--space-1);
padding-right: var(--space-1);
text-align: center;
}
/* The club boxes need it as badly and were quietly failing: at three quarters of their old
width, 12px each side left 38px of usable space for a three-letter id that wants 51, so
`NYC` rendered as `NY` with the C scrolled out of sight. Same 4px, and they fit.
`input.club-id`, not `.club-id`: the club fields carry no `type`, so the rule they are
already getting their padding from is `.form input:not([type])`, and a bare class does
not outrank it. Naming the element makes the two equal and this one is written later.
Centred like the figures beside them, and for the same reason: a three-letter id in a
box sized for three letters has no long side to align to. */
.bulk-fixtures input.club-id {
padding-left: var(--space-1);
padding-right: var(--space-1);
text-align: center;
}
.bulk-fixtures input[type="number"]::-webkit-outer-spin-button,
.bulk-fixtures input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* The event indexes' two aligned columns.
"@" and "vs" sit in a box of one width and are set against its right edge, so every club
id in the column starts at the same place whichever it is. Muted, because the mark is
which ground the match was at and the id is the answer to the column. */
.venue-mark {
display: inline-block; width: 1.4em; text-align: right; color: var(--muted);
font-size: var(--fs-small);
}
/* A minute in two halves, so a column of them aligns on the minute rather than on its
right edge: 69’ and 90+3’ line up on the 69 and the 90, with the added time hanging off
into a box of its own. Both halves are as wide as their widest content — three digits
for a minute that runs to 120, and "+20’" for the longest added time anybody has played
— so the pair holds its shape down the column.
The two widths are named because the heading is positioned from them: it is one box as
wide as both halves together, set flush right like them, with the word at its left edge
— which is exactly where every minute in the column begins. Written as a sum rather than
as a third number, so the three cannot drift apart.
`min-width`, not `width`: the words that stand in for a minute — "Shoot-out", "After the
match" — are all base and wider than any figure, and they widen the box rather than
spilling out of it. */
/* The base box is exactly two digits wide, which is what makes the heading line up with
the number rather than with the box around it. The figures are tabular, so two digits
are always 17.34px at this size — the box holds them with nothing to spare, and its left
edge IS the left edge of a two-digit minute. Nearly every minute is two digits; the
handful in extra time are three and hang one digit further left, which is the right
trade for a heading that sits over the column the other 99% of the time.
In rem, not em. The heading is set smaller than the cells under it, so an em there is a
smaller number of pixels than an em here — and the box positioned from these widths
would land a few pixels right of the column it is meant to sit over. A rem is the same
length in both. */
.minute-cell { --minute-base: 1.09rem; --minute-added: 1.88rem; text-align: right; }
.minute-base { display: inline-block; min-width: var(--minute-base); text-align: right; }
.minute-added { display: inline-block; min-width: var(--minute-added); text-align: left; }
/* Nothing to hang, so nothing to reserve — but only for the readings that are not a minute.
The added-time box is a column for "+4’" to sit in, kept at its full width even for a bare
"47’" so the minutes align on the minute. "Shoot-out", "After full time" and the intervals
have no minute to align on, and holding 1.88rem open after them left the phrase ending a
clear 30px short of every figure in the column, floating with blank space to its right.
Emptied of its reservation the phrase falls flush against the column's own right edge.
A MISSING MINUTE IS NOT ONE OF THOSE, which is why this keys off `phrase` from
`minuteParts` rather than off the suffix being empty — both have an empty suffix and they
want opposite things. The em dash stands in for the number itself, so it belongs where the
number would be: right-aligned in the minute's own box, ending on the line every other
minute in the column ends on. Flush right it sat past all of them, which is the same
complaint the phrases had, in the other direction. */
.minute-phrase .minute-added { min-width: 0; }
/* One box as wide as both halves, flush right like them, with the word at its left edge —
which is where a two-digit minute begins. "MIN" is wider than the minute under it and
overhangs the added-time column, which is intended: it heads the whole cell, and what
matters is where it starts. */
.minute-head {
display: inline-block; width: calc(var(--minute-base) + var(--minute-added));
text-align: left;
}
.form-error { padding: var(--space-3) var(--space-4); border-left: 4px solid var(--danger); background: var(--row-alt); border-radius: 0 4px 4px 0; }
.form-success { padding: var(--space-3) var(--space-4); border-left: 4px solid var(--success); background: var(--row-alt); border-radius: 0 4px 4px 0; }
/* A missing-data row saved or refused in place, without the page reloading.
*
* The same two colours as the messages above, applied to the row rather than to a banner at
* the top of the page: with fifty rows on screen the feedback has to be where the operator
* is looking. `is-saved` is removed again after a moment (public/js/gap-save.js) so a worked
* table does not end up entirely green; `is-refused` stays until the row is saved, because
* an unfixed row should not stop looking wrong. A left border rather than a background
* fill: the row-striping underneath still has to read. */
tr.is-saved > * { box-shadow: inset 4px 0 0 -1px var(--success); }
tr.is-refused > * { box-shadow: inset 4px 0 0 -1px var(--danger); }
/* A form whose sections are independent enough to sit side by side.
*
* `.form` alone is one 26rem column, which is right for a login box and wrong for the
* referee form: eight fieldsets, none of them wider than a name, stacked into a ribbon
* down the left of a 1400px page with two thirds of it empty and the Save button two
* screens below the first field.
*
* A grid rather than columns: `column-count` would break a fieldset across a column
* boundary mid-radio-group. `auto-fit` with a 20rem floor means the count follows the
* viewport — three across on a desktop, two on a laptop, one on a phone — with no
* breakpoints to keep in step with anything. `align-items: start` stops a short fieldset
* from stretching to the height of the tall one beside it.
*
* Only for a form that says so: the login and settings forms stay the single column they
* were designed as. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-5); align-items: start; max-width: 76rem; }
.form-grid > fieldset { margin: 0; }
/* Full width, at the end of the last row: a control that acts on the whole form belongs
under all of it rather than under whichever column it happened to land in. */
.form-grid > .form-actions { grid-column: 1 / -1; margin: 0; }
/* Two columns for a fieldset that holds paired fields. "Bio details" on the referee form is
the case: given and common-given belong side by side because one stands in for the other,
family and suffix because the suffix is an appendage of the family name, and birthplace
and hometown because the interesting thing about them is whether they differ — and two of
these fields at their natural width do not fit one column, so in a single column all eight
stack and the fieldset grows to several times the height of anything beside it.
Guarded by the media query, not left to `span 2` alone: in the single-column layout a
narrow viewport falls back to, spanning two would conjure an implicit second column and
push the form off the side of the screen. */
@media (min-width: 64rem) {
.form-grid > .field-block-wide { grid-column: span 2; }
}
/* Groups related controls with a visible border and a bold legend — a radio choice
(sort/alternate name), a form's own sub-section (a club's metadata, a match's crew).
Unscoped (not `.form fieldset`) because the match form's fieldsets sit in a plain,
unclassed