/**
 * Fairfield Rifle Club — front-end design system.
 *
 * Brand
 *   Primary    #263550 navy · #878A8C grey · #000000 black
 *   Secondary  #74D4CC aqua · #4991E3 blue
 *   Typeface   Montserrat (self-hosted variable font, SIL OFL)
 *
 * Montserrat is bundled rather than pulled from Google Fonts: no third-party
 * request from a members' login page, and no dependency on an external CDN.
 * All motion is CSS-only and disabled under prefers-reduced-motion.
 */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900; /* one variable file covers the whole range */
	font-display: swap;
	src: url("fonts/montserrat-latin-variable.woff2") format("woff2-variations"),
		url("fonts/montserrat-latin-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/*
	 * Field padding, and the date trim reads it as "this minus one pixel".
	 *
	 * The default is the officer scale — the tighter one used by every
	 * panel in Club Admin — because a default is what a NEW surface gets
	 * without anyone remembering it exists. The first version listed the
	 * officer containers here instead, which was the same list-to-extend
	 * one level up, and with a worse failure: an undefined var() is
	 * invalid at computed-value time, and padding does not inherit, so a
	 * surface left off the list would have lost its padding altogether
	 * rather than drifting by a pixel. Only the member forms override it,
	 * which is the short, stable end of the question.
	 */
	--frc-field-pad-y: 0.4rem;
	--frc-field-pad-x: 0.55rem;

	/*
	 * Sourced from the theme's own palette rather than restated here. The
	 * brand was previously written out in two places — theme.json and this
	 * file — which is two things to change and one to forget.
	 */
	--frc-primary: var(--wp--preset--color--navy, #263550);
	--frc-primary-dark: #16203a;
	--frc-primary-hover: #33456b;
	--frc-primary-050: #f4f6fa;
	--frc-primary-100: #e5e9f1;
	--frc-primary-200: #c6cede;

	/* Secondary. Aqua (1.8:1 on white) is a surface colour only. Blue is
	   3.3:1 on white — enough for marks, bars and focus rings, not for text,
	   so a darkened step carries any wording that must be read. */
	--frc-aqua: var(--wp--preset--color--aqua, #74d4cc);
	--frc-aqua-tint: #eafaf8;
	/* Referenced by the tab bars; previously undefined, so those rules were
	   quietly relying on their fallbacks and would not follow a brand change. */
	--frc-rule: var(--wp--preset--color--grey, #878a8c);
	--frc-blue: #4991e3;
	--frc-blue-dark: #2c6db0;

	--frc-ink: #000000;
	/* Brand grey for rules and dividers. At 3.5:1 on white it is below the
	   4.5:1 body-text threshold, so small print uses the darkened step. */
	--frc-grey: #878a8c;
	--frc-muted: #5f6264;
	--frc-line: #dfe1e3; /* brand grey, lightened for rules */
	--frc-surface: #ffffff;

	--frc-radius: 10px;
	--frc-radius-lg: 16px;
	--frc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -12px rgba(0, 0, 0, .18);
	--frc-shadow-lift: 0 2px 4px rgba(0, 0, 0, .08), 0 18px 40px -18px rgba(0, 0, 0, .28);

	/* Sections read as distinct chapters rather than a continuous scroll —
	   but a chapter break is one breath, not a blank page. This was
	   clamp(3.5rem, 7vw, 6.5rem), which between two sections stacked into
	   thirteen rem of padding plus the block gap: over two hundred pixels of
	   nothing on a desktop, flagged by the owner as exactly that. */
	--frc-section: clamp(2.25rem, 4.5vw, 4rem);
	--frc-gap: clamp(1rem, 2.2vw, 1.75rem);

	--frc-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--frc-body: var(--frc-display);
}

.frc-page *,
.frc-page *::before,
.frc-page *::after {
	box-sizing: border-box;
}

.frc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Off-screen decoration must never create a horizontal scrollbar. */
.frc-page,
body.frc-has-hero {
	overflow-x: hidden;
}

/* ---------- typography ---------- */

/*
 * The theme owns headings and body copy. This stylesheet previously restyled
 * every heading on any page it touched, including ordinary editorial pages,
 * which stripped their top margin and left headings crowding the paragraph
 * above. Only plugin-specific text is styled here now.
 */

.frc-fine {
	color: var(--frc-muted);
	font-size: .85em;
	line-height: 1.6;
}

/* ---------- hero ---------- */

.frc-hero {
	position: relative;
	isolation: isolate;
	padding: clamp(4rem, 9vw, 7.5rem) var(--frc-gap) clamp(3.5rem, 7vw, 6rem);
	text-align: center;
	color: #f5f7fb;
	background:
		radial-gradient(120% 100% at 15% 0%, rgba(51, 69, 107, .95) 0%, rgba(38, 53, 80, .98) 45%, rgba(17, 24, 38, 1) 100%);
}

/* Subtle concentric-target wash: club-appropriate, and no image request. */
.frc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		repeating-radial-gradient(circle at 78% 32%, rgba(255, 255, 255, .05) 0 2px, transparent 2px 58px),
		radial-gradient(circle at 78% 32%, rgba(116, 212, 204, .28) 0 90px, transparent 260px);
	opacity: .85;
}

.frc-hero > * {
	position: relative;
}

/*
 * The headline stays on two or three lines: a wide measure lets the words
 * flow horizontally instead of stacking into a narrow column.
 */
/* The hero heading is white on navy and sets its own scale, so it overrides
   whatever the theme would give an h1. */
.frc-hero .frc-hero-title,
.frc-page .frc-hero-title {
	max-width: 22ch;
	margin: 0 auto;
	color: #ffffff;
	font-size: clamp(2.3rem, 5.4vw, 4.4rem);
	line-height: 1.05;
}

.frc-hero .frc-hero-lead,
.frc-page .frc-hero-lead {
	max-width: 56ch;
	margin: 1.4em auto 0;
	font-family: var(--frc-body);
	font-size: clamp(1.02rem, 1.5vw, 1.2rem);
	line-height: 1.65;
	color: rgba(245, 247, 251, .86);
}

.frc-hero .wp-block-buttons {
	justify-content: center;
	gap: .75rem;
	margin-top: 2.2rem;
}

/* Both CTAs must stay legible: solid light on dark, and a bordered ghost. */
.frc-hero .wp-block-button__link {
	border-radius: 999px;
	padding: .85em 1.9em;
	font-family: var(--frc-body);
	font-weight: 600;
	font-size: 1rem;
	background: #ffffff;
	color: var(--frc-primary-dark);
	border: 1px solid #ffffff;
	transition: transform .35s ease, background-color .35s ease, color .35s ease;
}

.frc-hero .is-style-outline .wp-block-button__link,
.frc-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, .55);
}

.frc-hero .wp-block-button__link:hover,
.frc-hero .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	background: var(--frc-aqua);
	color: var(--frc-primary-dark);
	border-color: var(--frc-aqua);
}

/* ---------- public page rhythm ---------- */

.frc-section {
	padding-block: var(--frc-section);
}

/* Adjacent chapters share one unit of separation, not two. Without this,
   each pair of neighbouring sections meets bottom-padding against
   top-padding and the gap doubles. The first section after the hero and the
   last before the footer keep their full padding — only the seams between
   sections collapse. */
.frc-section + .frc-section {
	padding-block-start: 0;
}

.frc-page .wp-block-table table,
.frc-panel {
	border-radius: var(--frc-radius);
	overflow: hidden;
}

.frc-panel {
	background: var(--frc-primary-050);
	border: 1px solid var(--frc-line);
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* Committee roster and similar two-column tables. */
.frc-page .wp-block-table td,
.frc-page .wp-block-table th {
	padding: .85em 1em;
	border-color: var(--frc-line);
}

.frc-page .wp-block-table tr:nth-child(odd) td,
.frc-page .wp-block-table tr:nth-child(odd) th {
	background: var(--frc-primary-050);
}

/* ---------- members navigation ---------- */

.frc-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
	padding: .45rem;
	background: var(--frc-primary-050);
	border: 1px solid var(--frc-line);
	border-radius: 999px;
	font-family: var(--frc-body);
	font-size: .92rem;
}

.frc-nav a {
	padding: .5rem 1rem;
	border-radius: 999px;
	color: var(--frc-primary-dark);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}

.frc-nav a:hover,
.frc-nav a:focus-visible,
.frc-nav a[aria-current="page"] {
	background: var(--frc-primary);
	color: #ffffff;
}

.frc-nav-user {
	margin-left: auto;
	padding-right: .75rem;
	color: var(--frc-muted);
	font-size: .85rem;
}

/*
 * Brand grey earns its keep on rules and dividers, where 3.5:1 is ample.
 * Opacity is applied only to standalone rules — putting it on a container
 * would fade that container's text along with its border.
 */
.frc-page hr,
.frc-page .wp-block-separator {
	border-color: var(--frc-grey);
	opacity: .35;
}

.frc-nav-user a {
	padding: 0;
	color: var(--frc-muted);
	text-decoration: underline;
}

.frc-nav-user a:hover {
	background: none;
	color: var(--frc-primary);
}

@media (max-width: 640px) {
	.frc-nav {
		border-radius: var(--frc-radius);
	}

	.frc-nav-user {
		width: 100%;
		margin: .25rem 0 0;
		padding: .5rem .75rem 0;
		border-top: 1px solid var(--frc-line);
	}
}

/* ---------- buttons ---------- */

.frc-btn {
	display: inline-block;
	padding: .7rem 1.35rem;
	border: 1px solid var(--frc-primary);
	border-radius: 999px;
	background: var(--frc-primary);
	color: #ffffff !important;
	font-family: var(--frc-body);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.frc-btn:hover,
.frc-btn:focus-visible {
	background: var(--frc-primary-hover);
	border-color: var(--frc-primary-hover);
	transform: translateY(-1px);
}

.frc-btn-small {
	padding: .42rem .9rem;
	font-size: .85rem;
}

.frc-btn-outline {
	background: transparent;
	color: var(--frc-primary) !important;
	border-color: var(--frc-primary-200);
}

.frc-btn-outline:hover,
.frc-btn-outline:focus-visible {
	background: var(--frc-primary-050);
	border-color: var(--frc-primary);
	color: var(--frc-primary-dark) !important;
}

.frc-inline-form {
	display: inline-block;
	margin: 0 .5rem .5rem 0;
}

/* ---------- notices ---------- */

.frc-notice {
	padding: .9rem 1.15rem;
	border-left: 4px solid var(--frc-primary);
	border-radius: 0 var(--frc-radius) var(--frc-radius) 0;
	background: var(--frc-primary-050);
	color: var(--frc-ink);
}

.frc-notice.frc-warn {
	border-left-color: var(--frc-blue);
	background: var(--frc-aqua-tint);
}

/* ---------- tables: scoreboard + ladders ---------- */

.frc-scroll {
	overflow-x: auto;
	margin: 1rem 0 1.5rem;
	border-radius: var(--frc-radius);
	-webkit-overflow-scrolling: touch;
}

.frc-scroll:focus-visible {
	outline: 2px solid var(--frc-blue);
	outline-offset: 3px;
}

table.frc-grid,
table.frc-ladder {
	width: auto;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 1rem 0 1.5rem;
	font-family: var(--frc-body);
	font-size: .92rem;
	background: var(--frc-surface);
	border: 1px solid var(--frc-line);
	border-radius: var(--frc-radius);
	overflow: hidden;
}

table.frc-grid th,
table.frc-ladder th {
	padding: .7rem .85rem;
	background: var(--frc-primary);
	color: #ffffff;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}

table.frc-grid td,
table.frc-ladder td,
table.frc-grid tbody th,
table.frc-ladder tbody th {
	padding: .6rem .85rem;
	border-top: 1px solid var(--frc-line);
	background: var(--frc-surface);
	color: var(--frc-ink);
	font-size: .92rem;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/*
 * Row headers stripe with their row. Several tables put the label in a
 * `th scope="row"` — the committee's jobs, the officer score grids, the
 * minutes list — and striping only the `td`s left every other row shaded
 * across half its width, which reads as a rendering fault rather than a
 * pattern.
 */
table.frc-grid tbody tr:nth-child(even) td,
table.frc-grid tbody tr:nth-child(even) th,
table.frc-ladder tbody tr:nth-child(even) td,
table.frc-ladder tbody tr:nth-child(even) th {
	background: var(--frc-primary-050);
}

table.frc-grid .frc-name,
table.frc-ladder .frc-name {
	text-align: left;
	font-weight: 600;
	background: var(--frc-surface);
	border-right: 1px solid var(--frc-line);
}

/*
 * Only the scoreboard grid pins its name column: there it is the first cell,
 * so it can sit at left:0 while the card columns scroll under it. In the
 * ladder the name is the second cell — pinning it there would slide it over
 * the rank column instead of holding a sensible left edge.
 */
table.frc-grid .frc-name {
	position: sticky;
	left: 0;
	z-index: 1;
}

table.frc-grid tbody tr:nth-child(even) .frc-name,
table.frc-ladder tbody tr:nth-child(even) .frc-name {
	background: var(--frc-primary-050);
}

/* Empty cards read as "still to shoot", not as broken layout. */
table.frc-grid td:empty::after {
	content: "·";
	color: var(--frc-primary-200);
}

.frc-score-detail summary {
	cursor: pointer;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: .08em;
}

.frc-score-detail span {
	display: block;
	margin-top: .4rem;
	font-size: .82rem;
	white-space: normal;
}

table.frc-grid td.frc-total,
table.frc-grid th.frc-total {
	background: var(--frc-primary-100);
	font-weight: 700;
}

/*
 * "This is you" row. The accent bar belongs to the first cell only — putting
 * the inset shadow on every td draws a stripe down every column border.
 */
tr.frc-me > td,
tr.frc-me > th {
	background: var(--frc-aqua-tint) !important;
}

tr.frc-me > :first-child {
	box-shadow: inset 3px 0 0 var(--frc-blue);
}

/* ---------- event cards ---------- */

.frc-event {
	position: relative;
	margin: 0 0 var(--frc-gap);
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	background: var(--frc-surface);
	border: 1px solid var(--frc-line);
	border-radius: var(--frc-radius-lg);
	box-shadow: var(--frc-shadow);
	transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

.frc-event:hover {
	transform: translateY(-3px);
	box-shadow: var(--frc-shadow-lift);
}

.frc-event h3 {
	margin: 0 0 .35em;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.frc-event-closed {
	background: var(--frc-primary-050);
	box-shadow: none;
	opacity: .85;
}

.frc-event-closed:hover {
	transform: none;
	box-shadow: none;
}

.frc-entry-buttons {
	margin: 1rem 0 .35rem;
}

.frc-entrants {
	margin-top: .9rem;
	padding-top: .9rem;
	border-top: 1px solid var(--frc-line);
	font-size: .92rem;
}

.frc-tag {
	display: inline-block;
	margin-left: .5rem;
	padding: .22em .7em;
	border-radius: 999px;
	background: var(--frc-primary-100);
	color: var(--frc-primary-dark);
	font-family: var(--frc-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
}

.frc-tag-pennant {
	background: var(--frc-aqua-tint);
	color: var(--frc-blue-dark);
}

/*
 * Lodged-entry mark: drawn, not an emoji, and labelled for screen readers.
 * Brand blue carries the "confirmed" meaning; white on #4991E3 is 3.3:1,
 * past the 3:1 required of a graphical indicator (it is a mark, not text).
 */
.frc-lodged {
	display: inline-block;
	width: .95em;
	height: .95em;
	margin-left: .25em;
	vertical-align: -.1em;
	background: var(--frc-blue);
	border-radius: 50%;
	position: relative;
}

.frc-lodged::after {
	content: "";
	position: absolute;
	left: 32%;
	top: 16%;
	width: .22em;
	height: .42em;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
}

/* ---------- login + enquiry forms ---------- */

/*
 * Left edge, not centre. WordPress's layout-constrained rule forces
 * `margin-inline: auto !important` on every direct child of the content area,
 * so a max-width here silently centres the box — leaving the card and the
 * form indented from the page heading above them, with nothing to explain the
 * step. Everything else in the members area starts at the content's left
 * edge, so these do too. The !important is only there to answer WordPress's.
 */
.frc-login,
.frc-enquiry {
	margin-inline: 0 auto !important;
}

.frc-login {
	max-width: 30rem;
	margin-block: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--frc-surface);
	border: 1px solid var(--frc-line);
	border-radius: var(--frc-radius-lg);
	box-shadow: var(--frc-shadow);
}

.frc-login h2 {
	margin-top: 0;
}

.frc-enquiry {
	max-width: 34rem;
}

.frc-login label,
.frc-enquiry label {
	display: block;
	font-family: var(--frc-body);
	font-size: .88rem;
	font-weight: 600;
	color: var(--frc-muted);
}

/*
 * The member forms are the exception to the field padding declared on
 * :root — see the token there for why the default is the officer scale
 * rather than a list of the surfaces that use it.
 */
.frc-login,
.frc-enquiry {
	--frc-field-pad-y: .7rem;
	--frc-field-pad-x: .85rem;
}

/*
 * Every field a member types into, by exception rather than by list.
 *
 * This enumerated its types — text, email, tel — and the member record's
 * date fields arrived outside the list: date of birth and licence expiry
 * rendered 125x22 of browser default, monospace and inset-bordered, beside
 * 544x52 of the club's own on the same form. Measured, not guessed. A list
 * of types is a list somebody must remember to extend on the day a new one
 * is added; the exception below is the short, stable end of the question,
 * and it is the shape .frc-officer-member has always used.
 *
 * Buttons are <button> throughout this codebase, so they are not in it.
 */
.frc-login input,
.frc-enquiry input,
.frc-enquiry textarea {
	width: 100%;
	margin-top: .35rem;
	padding: var(--frc-field-pad-y) var(--frc-field-pad-x);
	border: 1px solid var(--frc-line);
	border-radius: var(--frc-radius);
	background: var(--frc-surface);
	font: inherit;
	color: var(--frc-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}

/*
 * A date is ten characters wide and never more, so it does not take the
 * full column the way an address or an email does — stretched to the form's
 * width it read as a mostly empty box. Capped, not fixed: on a narrow phone
 * the width: 100% above still shrinks it.
 */
.frc-login input[type="date"],
.frc-enquiry input[type="date"] {
	max-width: 12rem;
}

/* A tick box is not a text box: it keeps the browser's own. */
.frc-login input[type="checkbox"],
.frc-login input[type="radio"],
.frc-enquiry input[type="checkbox"],
.frc-enquiry input[type="radio"] {
	width: auto;
	margin-top: 0;
	padding: 0;
	border: 0;
}

/*
 * A native date control's innards are two pixels taller than a text field's
 * at the same font and padding — measured on both form scales, in the real
 * cascade, because this is exactly the kind of claim source cannot answer.
 * Trimming a pixel of vertical padding lands them level.
 *
 * One rule for every surface that has date fields, member and officer
 * alike: --frc-field-pad-y inherits from whichever form encloses the
 * field, so this reads .7rem on the member forms and 0.4rem on the officer
 * rows without knowing either number. The calendar button survives it;
 * appearance:none was tried and changed nothing, so it is not here.
 */
.frc-login input[type="date"],
.frc-enquiry input[type="date"],
.frc-officer-member input[type="date"],
.frc-officer-guardian input[type="date"],
.frc-officer-row input[type="date"],
.frc-officer-inline input[type="date"] {
	padding-top: calc(var(--frc-field-pad-y) - 1px);
	padding-bottom: calc(var(--frc-field-pad-y) - 1px);
}

/* De-listed with its base rule: a focus ring is not for text fields only. */
.frc-login input:focus,
.frc-enquiry input:focus,
.frc-enquiry textarea:focus {
	outline: none;
	border-color: var(--frc-primary);
	box-shadow: 0 0 0 3px rgba(38, 53, 80, .18);
}

/* Visible focus for keyboard users everywhere else. */
.frc-page a:focus-visible,
.frc-btn:focus-visible,
.frc-nav a:focus-visible {
	outline: 2px solid var(--frc-blue);
	outline-offset: 2px;
}

/* ---------- scroll-in motion (progressive, CSS only) ---------- */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		/*
		 * Motion only — never opacity. Twice now a scroll range has left real
		 * content at opacity 0: first the cards at the foot of a page, where a
		 * range ending at "cover" needed scrolling past an element nothing can
		 * scroll past; then the committee's email narrative, where "entry 50%"
		 * of a panel taller than the screen is seventeen hundred pixels below
		 * where the panel first appears, so the whole thing was invisible while
		 * you read it.
		 *
		 * The range is only ever as right as the assumption it makes about the
		 * element's height, and decoration must not be able to hide the page.
		 * A transform that fails to run leaves the content exactly where it
		 * belongs; an opacity that fails to run deletes it.
		 */
		.frc-event,
		.frc-scroll,
		.frc-panel {
			animation: frc-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 50%;
		}
	}
}

@keyframes frc-rise {
	from {
		transform: translateY(14px);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.frc-event,
	.frc-btn,
	.frc-nav a,
	.frc-hero .wp-block-button__link {
		transition: none;
	}

	.frc-event:hover,
	.frc-btn:hover {
		transform: none;
	}
}

/* ---------- club officer panel ---------- */

/* One member per row on a laptop, stacked on a phone — an officer is often
   doing this on a handset at the range, standing at the board. */
.frc-officer-member {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	align-items: end;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--frc-rule);
}

.frc-officer-member > strong {
	flex: 1 1 10rem;
	align-self: center;
}

.frc-officer-member label {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.85rem;
}

/*
 * Except a tickbox, which belongs beside its words. The column layout is for a
 * field whose label names the box under it; applied to a checkbox it put a
 * lone 13px square on one line and the sentence it belongs to on the next.
 */
.frc-officer-member label:has( input[type="checkbox"] ),
.frc-officer-member label:has( input[type="radio"] ) {
	flex-direction: row;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.95rem;
}

.frc-officer-member input[type="checkbox"] {
	align-self: start;
}

.frc-officer-switch a {
	margin-right: 0.4rem;
}

.frc-hint {
	font-size: 0.85rem;
	opacity: 0.8;
}

/* The season, stated once under the page title rather than competing with it
   as a second heading. */
.frc-season {
	margin-block-start: 0;
	font-size: 0.95rem;
	opacity: 0.85;
}

/* Competition sections: current, coming up, other, finished. */
.frc-comp-group {
	margin-block-start: 1.8em;
	padding-block-end: 0.3em;
	border-block-end: 2px solid var(--frc-aqua);
}

/* One member, one line: details form and the retire button side by side. They
   are separate forms on purpose, so the row is what joins them visually. */
.frc-officer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.6rem 1rem;
	padding-block: 0.7rem;
	border-block-end: 1px solid var(--frc-rule);
}

.frc-officer-row .frc-officer-member {
	flex: 1 1 24rem;
	padding-block: 0;
	border-block-end: 0;
}

.frc-officer-retire,
.frc-officer-move {
	margin: 0;
}

/* Which matches a competition runs: two tickboxes that belong together, not
   two unrelated fields that happen to be adjacent. */
.frc-officer-matches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.7rem;
}

.frc-officer-matches > .frc-fine {
	flex: 1 1 100%;
}

.frc-officer-matches label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
}

/* An enquiry's message, under its sender. It is the only place the committee
   can read one, so it gets room rather than a truncated cell. */
.frc-enquiry-message {
	grid-column: 1 / -1;
	margin: 0.3rem 0 0;
	font-size: 0.95rem;
}

/* Older/newer, with the count between them so the two ends of a long log are
   never both a guess. */
.frc-log-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: 0.8rem;
}

/* A job nobody holds is a gap in the club, not a blank in a table. */
.frc-officer-vacant {
	color: var(--frc-blue-dark);
	font-style: italic;
}

/* The panel that replaces the login form once a link has been asked for. The
   page has to read as finished, not as a form still waiting to be filled. */
.frc-sent h2 {
	margin-block: 0 0.4rem;
}

.frc-sent-lead {
	font-size: 1.05rem;
}

.frc-sent p {
	margin-block: 0 0.7rem;
}

/* Saying no is not the action this page is for, so it does not compete with
   Enter for attention — but it must still look like a button. */
.frc-btn-quiet {
	background: transparent;
	/*
	 * !important, because .frc-btn sets its white on the same. Without it the
	 * base rule wins and this reads as white on a transparent background —
	 * which is to say, a button with nothing written on it.
	 */
	color: var(--frc-muted) !important;
	border: 1px solid var(--frc-line);
}

.frc-btn-quiet:hover,
.frc-btn-quiet:focus-visible {
	color: var(--frc-ink) !important;
	/* .frc-btn:hover fills its background in, which would hide the text again. */
	background: var(--frc-primary-050);
	border-color: var(--frc-primary);
}

/* A competition somebody has said no to stays on the page — it is still on,
   and entering is how they change their mind — but it should not read as one
   still asking. Dimmed rather than hidden, so the page says at a glance which
   ones are still waiting on an answer. */
.frc-event-declined {
	box-shadow: none;
}

/*
 * Every part of it except the line explaining why. Opacity on the card itself
 * would take that line down with it — a child cannot be less transparent than
 * its parent — and a dimmed card whose only explanation is also dimmed just
 * looks broken.
 */
.frc-event-declined > *:not(.frc-declined-note) {
	opacity: 0.45;
}

.frc-declined-note {
	margin-block-start: 0.6rem;
	font-size: 0.9rem;
	color: var(--frc-muted);
}

/* ---------- deliberate disclosure ---------- */

/* Adding somebody is occasional; reading the roll is why the page is open. The
   form is one tap away rather than the first thing in the way of it. */
.frc-officer-add {
	margin-block: 0.6rem 1.2rem;
}

.frc-officer-add > summary,
.frc-officer-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	font-weight: 600;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--frc-line);
	border-radius: 999px;
	background: var(--frc-surface);
	list-style: none;
}

.frc-officer-add > summary::-webkit-details-marker,
.frc-officer-more > summary::-webkit-details-marker {
	display: none;
}

.frc-officer-add > summary::before,
.frc-officer-more > summary::before {
	content: "+";
	font-weight: 700;
	color: var(--frc-muted);
}

.frc-officer-add[open] > summary::before,
.frc-officer-more[open] > summary::before {
	content: "\2212"; /* minus */
}

.frc-officer-add > summary:hover,
.frc-officer-more > summary:hover {
	border-color: var(--frc-primary);
}

/* The rest of TRV's calendar: kept, not shown. Most of it is not ours. The
   last row already draws a rule, so this adds space rather than a second one. */
.frc-officer-more {
	margin-block-start: 1.6rem;
}

/* A field that owns its line: a sentence with a control in it reads badly
   squeezed beside a date box. */
.frc-officer-wide {
	flex: 1 1 100%;
}

/* The organiser's address exists to send them the batch, so it appears only
   when that is what we are doing — the same rule as the visitor's club. */
form.frc-officer-event:not( :has( select[name="entry_method"] option[value="email"]:checked ) ) .frc-officer-organiser {
	display: none;
}

/* A competition shown to members that they cannot enter. Not an error — the
   officer simply has not finished — but it must not read as ordinary text. */
.frc-officer-warn {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.9rem;
	color: var(--frc-blue-dark);
}

/* A retired member stays listed — past scores are the club's record — but
   should not read as an active one. */
.frc-officer-row.frc-retired {
	opacity: 0.6;
}

/* Envelope beside a committee member: a link, sized to be tappable. */
.frc-mailto {
	display: inline-block;
	margin-inline-start: 0.4rem;
	font-size: 1.15em;
	line-height: 1;
	text-decoration: none;
}

.frc-mailto:focus-visible {
	outline: 2px solid var(--frc-aqua);
	outline-offset: 2px;
}

/* Club Admin tabs: one job per screen. */
.frc-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
}

/*
 * The same type the theme gives its navigation block, so the page's tab bars
 * and the members menu in the header read as one control rather than two that
 * merely resemble each other.
 */
.frc-tabs a {
	display: block;
	padding: 0.5rem 0.8rem;
	border-block-end: 2px solid var(--frc-rule);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 600;
	color: var(--frc-primary);
	text-decoration: none;
	border-radius: var(--frc-radius) var(--frc-radius) 0 0;
}

.frc-tabs a.frc-tab-current {
	background: var(--frc-primary);
	color: var(--wp--preset--color--white, #fff);
	border-block-end-color: var(--frc-primary);
}

.frc-tabs-sub ul {
	border-block-end-width: 1px;
	margin-block-end: 0.8rem;
}

.frc-tabs-sub a {
	padding: 0.3rem 0.7rem;
	font-size: 0.92rem;
}

/* ---------- members menu ---------- */

/*
 * The members menu inherited the theme's plain-text navigation: no padding, no
 * underline, black text, nothing to say it could be clicked. It now reads like
 * the Club Admin tabs, so the whole members area looks like one system.
 *
 * Covers both the menu injected into the theme header and the standalone
 * fallback rendered when the theme has no navigation block to take over.
 *
 * The nav.wp-block-navigation prefix is not decoration: the theme's own rule
 * is three classes deep and sets colour to inherit, so an attribute-and-class
 * selector loses to it and the links stay whatever the header is.
 */
/*
 * A row of its own, full width. Sharing the header row with a site title as
 * long as "Fairfield Rifle Club Inc – No 508 – Est 1915" left the menu too
 * little room, so it wrapped — and a wrapped row puts the rule under the last
 * line only, leaving the items above it floating rather than standing on it.
 */
nav.wp-block-navigation[aria-label="Members area"] {
	flex-basis: 100%;
	justify-content: flex-start;
}

/*
 * The rule belongs to each item, not to the container. A container border sits
 * under the last line only, so the moment the bar wraps — and with six items it
 * does — everything on the line above floats with nothing beneath it. Per-item
 * borders with no gap join into one continuous line that wraps correctly, at
 * any width and on a phone.
 */
nav.wp-block-navigation[aria-label="Members area"] > .wp-block-navigation__container,
nav.frc-nav {
	justify-content: flex-start;
	gap: 0;
}

nav.wp-block-navigation[aria-label="Members area"] .wp-block-navigation-item__content,
nav.frc-nav a {
	display: inline-block;
	padding: 0.5rem 0.8rem;
	border-block-end: 2px solid var(--frc-rule);
	/* Rounded at the top only, so a selected item reads as a tab standing on
	   the rule rather than a pill floating above it. */
	border-radius: var(--frc-radius) var(--frc-radius) 0 0;
	color: var(--frc-primary);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

nav.wp-block-navigation[aria-label="Members area"] .wp-block-navigation-item__content:hover,
nav.wp-block-navigation[aria-label="Members area"] .wp-block-navigation-item__content:focus-visible,
nav.frc-nav a:hover,
nav.frc-nav a:focus-visible {
	background: var(--frc-aqua);
	color: var(--frc-primary);
}

/* Where you are now — the same filled treatment the admin tabs use. */
nav.wp-block-navigation[aria-label="Members area"] .wp-block-navigation-item__content[aria-current="page"],
nav.frc-nav a[aria-current="page"] {
	background: var(--frc-primary);
	color: var(--wp--preset--color--white, #fff);
	border-block-end-color: var(--frc-primary);
}

nav.wp-block-navigation[aria-label="Members area"] .wp-block-navigation-item__content:focus-visible,
nav.frc-nav a:focus-visible {
	outline: 2px solid var(--frc-primary);
	outline-offset: 2px;
}

/* A notice on the noticeboard. */
.frc-notice-item {
	padding-block: 1rem;
	border-block-end: 1px solid var(--frc-rule);
}

.frc-notice-item h3 {
	margin-block-start: 0;
}

/*
 * Admin is a different kind of thing from the member sections — a tool for
 * running the club, not somewhere to read — so it is coloured apart from them.
 * Blue rather than navy, from the same palette.
 */
.frc-nav-admin {
	color: var(--wp--preset--color--blue-dark, #2c6db0) !important;
	border-block-end-color: var(--wp--preset--color--blue-dark, #2c6db0) !important;
}

.frc-nav-admin:hover,
.frc-nav-admin:focus-visible {
	background: var(--wp--preset--color--blue, #4991e3) !important;
	color: var(--wp--preset--color--white, #fff) !important;
}

.frc-nav-admin[aria-current="page"] {
	background: var(--wp--preset--color--blue-dark, #2c6db0) !important;
	color: var(--wp--preset--color--white, #fff) !important;
}

/*
 * The committee and the other club jobs are two stacked tables of the same
 * kind, so their label columns hold one width. Left to size themselves they
 * came out 382px and 289px, and the two panels read as misaligned rather than
 * as a pair.
 */
table.frc-jobs th[scope="row"] {
	width: 14rem;
}

/*
 * Signing out leads the account page and is a quiet control, not the point of
 * the page — outlined, and given room so it does not crowd the heading under it.
 */
.frc-account-out {
	margin-block: 0 var(--frc-gap);
}

/* The guardian sits under its member as a continuation of that row, not as a
   separate record: indented, and sharing the row's left edge. */
.frc-officer-guardian {
	margin-top: .35rem;
	padding-left: 1rem;
	border-left: 3px solid var(--frc-aqua);
}

/*
 * Show only the half of the guardian form that applies. Nominating a member
 * and typing someone's details are alternatives, and carrying five boxes when
 * one dropdown is the answer reads as clutter.
 *
 * Done with :has() rather than script: the plugin ships no JavaScript, and a
 * browser without :has() simply shows every box — which is exactly how this
 * behaved before, and still works.
 */
.frc-officer-guardian:has( select[name="guardian_mode"] option[value="member"]:checked ) .frc-guardian-details,
.frc-officer-guardian:has( select[name="guardian_mode"] option[value="details"]:checked ) .frc-guardian-member,
.frc-officer-guardian:has( select[name="guardian_mode"] option[value="none"]:checked ) .frc-guardian-details,
.frc-officer-guardian:has( select[name="guardian_mode"] option[value="none"]:checked ) .frc-guardian-member {
	display: none;
}

/* The waiver reason belongs to "not needed" alone. */
.frc-officer-guardian:has( select[name="guardian_mode"] option[value="not_needed"]:checked ) .frc-guardian-member,
.frc-officer-guardian:has( select[name="guardian_mode"] option[value="not_needed"]:checked ) .frc-guardian-details,
.frc-officer-guardian:has( select[name="guardian_mode"] option[value="member"]:checked ) .frc-guardian-why,
.frc-officer-guardian:has( select[name="guardian_mode"] option[value="details"]:checked ) .frc-guardian-why,
.frc-officer-guardian:has( select[name="guardian_mode"] option[value="none"]:checked ) .frc-guardian-why {
	display: none;
}

/* The applicant's own claim about their age, on the waiting-to-join row. */
.frc-tag-junior {
	background: var(--frc-aqua-tint);
	color: var(--frc-primary-dark);
}

/*
 * On the add-a-member form the guardian boxes belong to the classes that need
 * one. Same :has() approach as the per-member row.
 */
form.frc-officer-member:has( select[name="age_class"] option[value="S"]:checked ) .frc-guardian-details,
form.frc-officer-member:has( select[name="age_class"] option[value="V"]:checked ) .frc-guardian-details,
form.frc-officer-member:has( select[name="age_class"] option[value=""]:checked ) .frc-guardian-details {
	display: none;
}

/* The email map reads as reference material, not as another form. */
.frc-email-map h4 {
	margin: 1.4rem 0 .4rem;
}
.frc-email-map ul {
	margin: 0;
	padding-left: 1.2rem;
}
.frc-email-map li {
	margin-bottom: .45rem;
	line-height: 1.55;
}

/*
 * The committee table fits its column rather than forcing a scrollbar. The
 * select sizes itself to its longest member name and the hint beneath it is a
 * sentence, so left alone the pair pushed the table past the content width and
 * a form ended up scrolling sideways.
 */
table.frc-jobs {
	width: 100%;
}
table.frc-jobs select {
	max-width: 100%;
}

/*
 * These tables borrow .frc-ladder for their styling, and the ladder keeps its
 * numbers on one line so a score never wraps mid-figure. Here the second
 * column is a sentence, so it has to wrap — left nowrap it pushed the table
 * past the content width and put a scrollbar under a form.
 */
table.frc-jobs td,
table.frc-jobs th {
	white-space: normal;
}

/*
 * The officer forms' controls were browser defaults — 13px type in a 19px-tall
 * box — while everything around them followed the page. Beyond looking
 * unfinished, it broke the age dropdown: macOS draws a select's list at native
 * menu size, and a list whose rows are far taller than the control cannot sit
 * over it, so it spilled into the middle of the screen.
 *
 * Compact on purpose. These rows are meant to be one line per member, so this
 * matches the page's scale without the generous padding the login card uses.
 */
.frc-officer-member input,
.frc-officer-member select,
.frc-officer-guardian input,
.frc-officer-guardian select,
.frc-officer-row input,
.frc-officer-row select,
.frc-officer-inline input,
.frc-officer-inline select {
	font: inherit;
	font-size: 0.95rem;
	padding: var(--frc-field-pad-y) var(--frc-field-pad-x);
	border: 1px solid var(--frc-line);
	border-radius: var(--frc-radius);
	background: var(--frc-surface);
	color: var(--frc-ink);
	max-width: 100%;
}

.frc-officer-member select,
.frc-officer-guardian select,
.frc-officer-row select {
	/* Leave the native arrow: a select must not look like a text box. */
	padding-right: 0.4rem;
	/*
	 * Matched to the inputs beside it. These rows align on their bottom edge,
	 * so a select five pixels shorter dropped its label below its neighbours'
	 * and the row read as misaligned.
	 */
	min-height: 2.5rem;
}

.frc-officer-member input[type="checkbox"] {
	padding: 0;
	border: 0;
	font-size: inherit;
}

.frc-officer-member input:focus-visible,
.frc-officer-member select:focus-visible,
.frc-officer-guardian input:focus-visible,
.frc-officer-guardian select:focus-visible,
.frc-officer-inline input:focus-visible,
.frc-officer-inline select:focus-visible {
	outline: 2px solid var(--frc-blue-dark);
	outline-offset: 1px;
}

/*
 * A closed row is one line: name, the facts, and a way in. It is read far more
 * often than it is edited, so it reads as a list rather than as a form nobody
 * is filling in.
 */
/*
 * A grid, not flex wrapping. With flex the Edit button landed on the first
 * line for members whose details were short and on the second for everyone
 * else, so a list meant to be scanned had its one control in two places.
 * Three columns put every name, every fact and every button on one axis.
 */
.frc-officer-read {
	display: grid;
	grid-template-columns: minmax(8rem, 12rem) 1fr auto;
	align-items: baseline;
	gap: 0.3rem 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--frc-rule);
}

/* On a phone the three columns become three lines, in the same order. */
/*
 * The row is a flex container, so a grid child shrinks to its content and the
 * Edit button lands wherever the details happen to end. It has to be told to
 * take the row.
 */
.frc-officer-row > .frc-officer-read {
	flex: 1 1 100%;
	padding-block: 0;
	border-block-end: 0;
}

/*
 * A competition's name is a sentence where a member's is two words, so it gets
 * the room. Sized for the roll, "Shepparton Postal Competition" wrapped with
 * half the row empty beside it.
 */
.frc-officer-read-event {
	grid-template-columns: minmax(12rem, 22rem) 1fr auto;
}

/*
 * On a phone the name and its button share the top line and the details run
 * under both. Three stacked lines cost a third of every row's height to white
 * space, which on a roll of nineteen is most of a screen.
 */
@media (max-width: 40rem) {
	.frc-officer-read {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.frc-officer-read > .frc-officer-actions {
		grid-column: 2;
		grid-row: 1;
	}

	.frc-officer-read > .frc-fine,
	.frc-officer-read > .frc-officer-warn {
		grid-column: 1 / -1;
	}
}

/* An open row has somewhere to go back to. */
.frc-officer-cancel {
	align-self: center;
}

/* Both actions share the row's third column, so the grid stays three columns. */
.frc-officer-actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	justify-self: end;
}

/*
 * The TRV facts line is a fourth child in a row drawn for three. Without a
 * placement it lands in the 1fr track, crushes the facts beside it and
 * strands the button on row two — so it takes a full row of its own, and a
 * problem ribbon spans the row on desktop exactly as it already did on a
 * phone.
 *
 * Both properties, because the two views are different formatters: the read
 * row is a grid, the edit form is .frc-officer-member, which is flex. The
 * first version set grid-column alone and was inert in the form — the
 * screen an officer actually works in. Same pairing as .frc-officer-wide
 * and .frc-officer-warn above, for the same reason.
 */
.frc-officer-event-detail {
	grid-column: 1 / -1;
	flex: 1 1 100%;
}

/*
 * A note, not an alarm. .frc-officer-warn is the channel for things that
 * stop the competition working and clear when the officer finishes the job;
 * this one can be permanently true of a correct row — a flyer that returns
 * cards after the window closes — so it is quieter.
 *
 * It is placed exactly as the warn channel is, and the pair of properties is
 * required rather than decorative: the collapsed row is a grid and the edit
 * form is flex, so a grid-only rule would be inert in the form — v0.99.22's
 * lesson, learnt the expensive way. Nothing here places it DIFFERENTLY from
 * the channel beside it; only colour and size tell the two apart. Say that
 * precisely, because a comment claiming no placement would invite the next
 * note-like element to ship with half a rule.
 */
.frc-officer-note {
	grid-column: 1 / -1;
	flex: 1 1 100%;
	margin: 0.3rem 0 0;
	color: var(--frc-muted);
	font-size: 0.85rem;
}

/*
 * The button belongs in the row's last track, counted from the end. Not
 * "column 3": this rule sits after the phone media query and ties it on
 * specificity, so source order wins and it applies at every width — and
 * the phone template has two tracks, where a literal 3 opened an implicit
 * third column and left every full-width child stopping short of the edge,
 * out of line with the member rows beside them. -2 is the last explicit
 * track whether the grid has two or three.
 */
.frc-officer-read-event > .frc-officer-actions {
	grid-column: -2;
	grid-row: 1;
}
.frc-officer-read > .frc-officer-warn {
	grid-column: 1 / -1;
}

/*
 * A retired member is named as one beside their name, not left to be inferred
 * from a faded row — fading says "something", and this needs to say what.
 */
.frc-tag-retired {
	background: var(--frc-primary-100);
	color: var(--frc-muted);
	font-weight: 600;
}

/* Somebody else's member, here only so their cards can be entered. */
.frc-tag-visiting {
	background: var(--frc-aqua-tint);
	color: var(--frc-primary-dark);
	font-weight: 600;
}

/*
 * Save follows the fields; Retire does not sit where your hand already is.
 *
 * The two are separate forms on purpose — retiring must never be a side effect
 * of saving a phone number — but as siblings in a wrapping row that put the
 * destructive button 45px from the last field and the safe one on the previous
 * line, at the far left. Editing a visitor, the nearest thing to the cursor
 * was Retire.
 *
 * The edit form now takes the row, so Save and Cancel land immediately after
 * the last field. Retire drops to its own line, pushed right, away from where
 * anybody is typing.
 */
.frc-officer-row > form.frc-officer-member {
	flex: 1 1 100%;
	padding-block: 0;
	border-block-end: 0;
}

/* The two status changes pair up at the far end of the open row, away from
   Save — retiring somebody and moving them off the roll are not edits, and
   should not sit where a hand aiming for Save can reach them. */
.frc-officer-row > form.frc-officer-retire {
	margin-left: auto;
}

.frc-officer-row > form.frc-officer-move {
	margin-left: 0;
}

/*
 * The log's third column is a sentence, not a figure. Centred and held on one
 * line it read as a caption and pushed the table wider than the phone, so the
 * date and the name — the columns that are the same width every row — scrolled
 * away first. Left, and allowed to wrap.
 */
/*
 * The grid defaults to width:auto with a 100% floor — right for a scoreboard,
 * where ten card columns should push past the screen and be dragged. The log
 * is three columns and the third is prose: it should fit the phone and wrap,
 * not be dragged. 521px against a 390px screen meant scrolling to read the one
 * column anybody opens this page for.
 */
table.frc-grid.frc-log-table {
	width: 100%;
	min-width: 0;
	/*
	 * Auto layout, deliberately. table-layout:fixed here honoured the What
	 * cell's width:100% literally and gave the other two columns 0px — the
	 * date and the name rendered on top of each other.
	 */
}

table.frc-grid td.frc-log-what,
table.frc-grid th.frc-log-what {
	text-align: left;
	white-space: normal;
	/*
	 * No width here. Both "take the rest" tricks backfire under auto layout:
	 * a min-width sets a floor the phone cannot meet, and width:100% inflates
	 * the column's own minimum until the table expands past its container.
	 * Left to itself the column simply takes what the other two don't, and
	 * wraps.
	 *
	 * overflow-wrap, because a changed address is logged in full and an email
	 * address is one unbreakable word. "a.long.member.address@example.invalid," was a 240px
	 * floor under the column, and the whole table sat 72px wider than the
	 * phone to accommodate it.
	 */
	overflow-wrap: anywhere;
}

/*
 * On a phone the date breaks across two lines. Held on one line by the grid's
 * default it claimed 171px of a 390px screen for a column nobody reads twice,
 * and the sentence beside it got what was left. On anything wider there is
 * room for both, and a stacked date only doubles the height of every row.
 */
@media (max-width: 40rem) {
	table.frc-grid td.frc-log-when {
		white-space: normal;
	}

	/*
	 * And the year goes, where the year says nothing. Only this year's is
	 * hidden: the log holds changes for 720 days, so once two seasons are in
	 * the table "05/08" alone stops being a date. A row from last year keeps
	 * its year at every width.
	 */
	table.frc-grid td.frc-log-when .frc-log-year-now {
		display: none;
	}
}