/* ==========================================================================
   hsg — tokens. Open Props (static/open-props-*, linked in header.gohtml)
   supplies the scales; the brand ramp and the app tokens below sit on top.
   Rules read app tokens for colour, never a raw value or an Open Props hue.
   See docs/styling.md.
   ========================================================================== */

:root {
	color-scheme: dark;

	/* Brand ramp: hsg Klein blue. Open Props has no blue-black scale, so it
	   stays hand-tuned. Only the app tokens below may read it. */
	--klein:      #0000DC;
	--klein-deep: #0000A8;
	--klein-tint-hsl: 231 30% 50%;
	--klein-haze-hsl: 231 38% 62%;

	--night-950-hsl: 232 30% 5%;
	--night-900: hsl(232 33% 6%);
	--night-800: hsl(232 28% 9%);
	--night-700: hsl(231 26% 13%);
	--night-600: hsl(230 22% 20%);
	--night-500: hsl(229 20% 30%);
	--night-400-hsl: 229 16% 40%;

	--mist-400: hsl(224 12% 64%);
	--mist-200: hsl(224 16% 85%);
	--mist-050: hsl(224 24% 97%);

	--canopy-near: hsl(231 40% 30% / .38);
	--canopy-far:  hsl(232 45% 22% / .30);

	/* Surfaces and lines */
	--brand:          var(--klein);
	--brand-deep:     var(--klein-deep);
	--canvas:         var(--night-900);
	--surface:        var(--night-800);
	--surface-raised: var(--night-700);
	--field:          var(--night-900);
	--header-bg:      hsl(var(--night-950-hsl) / 72%);
	--border:         var(--night-600);
	--border-strong:  var(--night-500);

	/* Text */
	--text:           var(--mist-200);
	--text-muted:     var(--mist-400);
	--text-strong:    var(--mist-050);
	--text-on-accent: var(--night-900);

	/* Accent: Open Props indigo, the nearest scale to the Klein-blue ramp. */
	--accent:           hsl(var(--indigo-3-hsl));
	--accent-bright:    hsl(var(--indigo-2-hsl));
	--accent-deep:      hsl(var(--indigo-5-hsl));
	--accent-underline: hsl(var(--klein-haze-hsl) / 35%);
	--accent-glow:      hsl(var(--klein-haze-hsl) / 18%);
	--accent-wash:      hsl(var(--klein-tint-hsl) / 6%);
	--accent-fill:      hsl(var(--klein-tint-hsl) / 10%);
	--accent-selected:  hsl(var(--klein-tint-hsl) / 14%);
	--focus-ring:       var(--accent);

	/* Status: one hue each, as text, border and fill. Warning is the exception:
	   its text reads orange-2 because yellow-2 is too faint on the dark canvas,
	   and its border and fill read yellow so the badge still reads as amber. */
	--success-text:   hsl(var(--green-2-hsl));
	--success-border: hsl(var(--green-7-hsl) / 55%);
	--success-fill:   hsl(var(--green-10-hsl) / 18%);

	--danger:         hsl(var(--red-7-hsl));
	--danger-strong:  hsl(var(--red-10-hsl));
	--danger-text:    hsl(var(--red-3-hsl));
	--danger-border:  hsl(var(--red-8-hsl) / 55%);
	--danger-fill:    hsl(var(--red-10-hsl) / 16%);

	--warning-text:   hsl(var(--orange-2-hsl));
	--warning-border: hsl(var(--yellow-8-hsl) / 55%);
	--warning-fill:   hsl(var(--yellow-9-hsl) / 18%);

	--info-text:      hsl(var(--blue-2-hsl));
	--info-border:    hsl(var(--blue-5-hsl) / 55%);
	--info-fill:      hsl(var(--blue-9-hsl) / 18%);

	--revised-text:   hsl(var(--violet-2-hsl));
	--revised-border: hsl(var(--violet-6-hsl) / 55%);
	--revised-fill:   hsl(var(--violet-10-hsl) / 18%);

	--neutral-fill:   hsl(var(--night-400-hsl) / 18%);

	/* Type and shape. Open Props owns --font-sans and --font-mono; don't reuse them. */
	--font-body:  'Inter', var(--font-system-ui);
	--font-fixed: 'JetBrains Mono', var(--font-monospace-code);

	--radius-sm:   .375rem;
	--radius:      .5rem;
	--radius-lg:   .75rem;
	--radius-pill: 999px;

	/* Layout */
	--measure:       68ch;
	--content-width: 72rem;
	--content-width-wide: 100rem; /* the dashboard only: six 15rem pipeline columns */
	--header-height: 4.25rem;

	/* Text roles: the one type scale. Every rule that sets a size reads one of
	   these; see docs/styling.md "Text roles". */
	--text-page-title:    clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
	--text-section-title: 1.25rem;
	--text-item-title:    1rem;
	--text-lede:          1.05rem;
	--text-body:          1rem;
	--text-data:          .9rem;
	--text-meta:          .8rem;
	--text-label:         .7rem;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	/* Keep #fragment targets (the error summary's field links) clear of the sticky header. */
	scroll-padding-top: calc(var(--header-height) + var(--size-3));
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--text);
	background: var(--canvas);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* A single soft canopy of light behind the top of the page. */
body::before {
	content: '';
	position: fixed;
	inset: 0 0 auto 0;
	height: 40rem;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(60rem 26rem at 50% -6rem, var(--canopy-near), transparent 70%),
		radial-gradient(34rem 18rem at 88% 2rem, var(--canopy-far), transparent 70%);
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 {
	color: var(--text-strong);
	font-weight: var(--font-weight-7);
	letter-spacing: -.03em;
	line-height: 1.15;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.15rem; }

a {
	color: var(--accent);
	text-decoration-color: var(--accent-underline);
	text-underline-offset: .18em;
	transition: color .15s ease, text-decoration-color .15s ease;
}

a:hover { color: var(--accent-bright); text-decoration-color: currentColor; }

:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: var(--size-8) 0;
}

/* ==========================================================================
   Text roles — one size, weight and colour per role, read from the tokens
   above. A heading takes its role by element inside an app page
   (article.auth); the classes are for text that is not a heading, and for
   the rare heading that must read as another role. Nothing else sets a
   type size. See docs/styling.md "Text roles".
   ========================================================================== */

/* Eyebrow: where the page sits (section · page), the signature kicker. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	font-weight: var(--font-weight-5);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 var(--size-4);
}

.eyebrow::before {
	content: '';
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 .2rem var(--accent-glow);
}

.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--accent-bright); text-decoration: underline; }

/* Page title: the one h1, what the page is about. */
.page-title,
:where(article.auth) h1 {
	font-size: var(--text-page-title);
	font-weight: var(--font-weight-7);
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--text-strong);
	margin: 0 0 var(--size-3);
}

/* Section title: an h2, one per group of related facts or one form. */
.section-title,
:where(article.auth) h2 {
	font-size: var(--text-section-title);
	font-weight: var(--font-weight-6);
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--text-strong);
	margin: 0 0 var(--size-2);
}

/* Item title: an h3, a card's or a list item's name. */
.item-title,
:where(article.auth) h3 {
	font-size: var(--text-item-title);
	font-weight: var(--font-weight-6);
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var(--text-strong);
	margin: 0 0 var(--size-1);
}

/* Lede: the page's one-line answer, under the title. */
.lede {
	font-size: var(--text-lede);
	line-height: 1.55;
	color: var(--text);
	max-width: var(--measure);
	margin: 0 0 var(--size-5);
}

/* Body is the default: 1rem, --text. Supporting text keeps the size and
   drops to --text-muted. */
.muted { color: var(--text-muted); }

/* Meta: who, when, which — one quiet line under an item. */
.meta {
	font-size: var(--text-meta);
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0;
}

.meta strong { font-weight: var(--font-weight-5); color: var(--text); }

/* Label: a field label, a column header, a key in a key/value list. */
.label {
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	font-weight: var(--font-weight-5);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Data: a value that must be read exactly — an amount, a date, a hash. */
.data,
.mono {
	font-family: var(--font-fixed);
	font-size: var(--text-data);
	letter-spacing: -.01em;
	color: var(--text-strong);
}

/* ==========================================================================
   Page anatomy — eyebrow, h1, status line, lede, primary action, sections.
   See docs/styling.md "Page anatomy".
   ========================================================================== */

/* The state, right under the title: a badge, then the facts that place it
   (who, when, which revision), as one wrapping line. */
.status-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--size-2) var(--size-3);
	margin: 0 0 var(--size-5);
	font-size: var(--text-meta);
	color: var(--text-muted);
}

.status-line .badge { font-size: .75rem; }
/* A filename on the status line can be one long word; let it break. */
.status-line .data { overflow-wrap: anywhere; min-width: 0; }
.status-line a { color: var(--accent); }

/* The page's one primary action and its companions, in one row. */
.page-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--size-3);
	margin: 0 0 var(--size-6);
}

.page-actions .field-help { flex-basis: 100%; margin: 0; }

/* Sections are separated by space, not rules. */
:where(article.auth) > section,
:where(article.auth) > section + form { margin-top: var(--size-8); }

:where(article.auth) > section > h2:first-child { margin-top: 0; }

/* ==========================================================================
   Site header
   ========================================================================== */

body > header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-height);
	border-bottom: 1px solid var(--border);
	background: var(--header-bg);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

body > header > nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-5);
	height: 100%;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--size-5);
}

/* Narrow screens: the links drop down from a Menu disclosure. */
#site-menu > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--size-2);
	min-height: 2.75rem;
	padding: 0 var(--size-3);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--text);
	font-size: .9rem;
	font-weight: var(--font-weight-6);
	list-style: none;
	cursor: pointer;
	user-select: none;
}

#site-menu > summary::-webkit-details-marker { display: none; }

#site-menu > summary::after {
	content: '';
	width: .45rem;
	height: .45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-.15rem) rotate(45deg);
}

#site-menu[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }

#site-menu > summary:hover,
#site-menu[open] > summary {
	border-color: var(--accent-deep);
	color: var(--accent-bright);
}

/* Positioned against the sticky header, so it spans the full width under it. */
#site-menu > ul {
	position: absolute;
	inset: 100% 0 auto 0;
	list-style: none;
	margin: 0;
	padding: var(--size-2) var(--size-3) var(--size-3);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

#site-menu > ul a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 .75rem;
	border-radius: var(--radius-sm);
	color: var(--text);
	text-decoration: none;
}

#site-menu > ul a:hover { color: var(--accent-bright); }

#site-menu > ul a[aria-current="page"] {
	color: var(--text-strong);
	font-weight: var(--font-weight-6);
	background: var(--accent-selected);
	box-shadow: inset 3px 0 0 var(--accent);
}

/* Wide screens: the same links inline, summary hidden. A closed <details> hides
   its content even under display rules; only ::details-content can override
   that. Without support the Menu disclosure stays at every width. */
@media (min-width: 52rem) {
	@supports selector(::details-content) {
		body > header > nav { justify-content: flex-start; gap: var(--size-6); }
		#site-menu > summary { display: none; }
		#site-menu::details-content { content-visibility: visible; }

		#site-menu > ul {
			position: static;
			display: flex;
			align-items: center;
			gap: var(--size-6);
			padding: 0;
			background: none;
			border: 0;
		}

		#site-menu > ul a {
			display: inline;
			min-height: 0;
			padding: 0;
			color: var(--accent);
			text-decoration: underline;
			text-decoration-color: var(--accent-underline);
		}

		#site-menu > ul a:hover { color: var(--accent-bright); text-decoration-color: currentColor; }

		#site-menu > ul a[aria-current="page"] {
			color: var(--text-strong);
			background: none;
			box-shadow: none;
			text-decoration-color: var(--accent);
			text-decoration-thickness: 2px;
		}
	}
}

#site-name {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	font-size: 1.15rem;
	font-weight: var(--font-weight-6);
	letter-spacing: -.02em;
	color: var(--text-strong);
	text-decoration: none;
	user-select: none;
}

#site-name img {
	display: block;
	width: 2rem;
	height: 2rem;
}

#site-name:hover { color: var(--accent-bright); }

/* The trademark rides as a proper superscript instead of a negative-margin hack. */
[data-trademark]::after {
	content: '™';
	font-size: .55em;
	font-weight: var(--font-weight-5);
	vertical-align: super;
	margin-left: .1em;
	color: var(--text-muted);
}

/* ==========================================================================
   Layout
   ========================================================================== */

main {
	display: block;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--size-5);
}

main > article {
	padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { max-width: var(--measure); }

.hero h1 { margin-bottom: var(--size-4); }

.hero .lede { margin-bottom: var(--size-7); }

.hero .actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: var(--size-7) 0 0;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
	background: linear-gradient(180deg, var(--surface-raised), var(--surface));
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 4vw, 2.25rem);
}

.card + .card { margin-top: var(--size-3); }

/* Signature block: name + role, set apart from the prose. */
.signature {
	display: flex;
	align-items: center;
	gap: var(--size-3);
	margin-top: var(--size-8);
	padding-top: var(--size-6);
	border-top: 1px solid var(--border);
	list-style: none;
	padding-left: 0;
}

.signature .name {
	font-weight: var(--font-weight-6);
	font-style: normal;
	color: var(--text-strong);
}

.signature .role {
	display: block;
	font-family: var(--font-fixed);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	gap: var(--size-2);
	padding: .65rem 1.15rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: .9rem;
	font-weight: var(--font-weight-6);
	letter-spacing: -.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
	/* The default look. */
	background: transparent;
	border-color: var(--border-strong);
	color: var(--text);
}

.button:hover {
	border-color: var(--accent-deep);
	color: var(--accent-bright);
	background: var(--accent-fill);
}

.button:active { transform: translateY(1px); }

.button-primary {
	/* The logo's own gradient, top stop to bottom stop, on the primary action. */
	background: linear-gradient(160deg, var(--brand), var(--brand-deep));
	border-color: var(--accent-deep);
	color: var(--text-strong);
	box-shadow: 0 1px 0 var(--accent-glow) inset;
}

.button-primary:hover {
	background: var(--accent-deep);
	color: var(--text-on-accent);
}

/* Irreversible actions: never styled like the primary action. */
.button-danger {
	border-color: var(--danger-border);
	color: var(--danger-text);
}

.button-danger:hover {
	background: var(--danger-strong);
	border-color: var(--danger);
	color: var(--text-strong);
}

.button:disabled,
.button[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

/* ==========================================================================
   Prose — wraps the rendered Markdown of the legal pages
   ========================================================================== */

.prose {
	max-width: var(--measure);
	color: var(--text);
}

.prose > :first-child { margin-top: 0; }

.prose h1 {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
	margin-bottom: var(--size-5);
}

/* The legal documents skip h2 and run h1 → h3 → h4, so major sections are
   matched by role rather than by level: h2 and h3 both get the rule above
   them, h4 and below are sub-headings. */
.prose h2,
.prose h3 {
	font-size: 1.35rem;
	margin-top: var(--size-8);
	padding-top: var(--size-7);
	border-top: 1px solid var(--border);
}

.prose h4,
.prose h5,
.prose h6 {
	font-size: 1rem;
	font-weight: var(--font-weight-6);
	letter-spacing: -.01em;
	margin-top: var(--size-7);
	color: var(--text-strong);
}

.prose ul, .prose ol { padding-left: 1.35rem; margin: 0 0 1.15rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--accent-deep); }

.prose strong { color: var(--text-strong); font-weight: var(--font-weight-6); }

.prose code {
	font-family: var(--font-fixed);
	font-size: .875em;
	padding: .15em .4em;
	border-radius: var(--radius-sm);
	background: var(--surface-raised);
	border: 1px solid var(--border);
	color: var(--accent-bright);
}

.prose blockquote {
	margin: var(--size-5) 0;
	padding: var(--size-1) 0 var(--size-1) var(--size-4);
	border-left: 2px solid var(--brand);
	color: var(--text-muted);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--size-5) 0;
	font-size: .9rem;
}

.prose th, .prose td {
	padding: .65rem .85rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.prose thead th {
	font-family: var(--font-fixed);
	font-size: .72rem;
	font-weight: var(--font-weight-5);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom-color: var(--border-strong);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
	margin-top: var(--size-9);
	border-top: 1px solid var(--border);
	background: var(--surface);
}

footer > article {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2.5rem;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--size-8) var(--size-5) var(--size-5);
}

footer h3 {
	font-family: var(--font-fixed);
	font-size: .72rem;
	font-weight: var(--font-weight-5);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: var(--size-3);
}

footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

footer ul ul { margin-top: .6rem; padding-left: var(--size-3); }

footer a {
	color: var(--text);
	text-decoration: none;
}

footer a:hover { color: var(--accent-bright); }

footer p { font-size: .875rem; color: var(--text-muted); }

#disclaimers li { font-size: .875rem; color: var(--text-muted); line-height: 1.55; }

#copyright-notice {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: var(--size-5);
	border-top: 1px solid var(--border);
	font-family: var(--font-fixed);
	font-size: .75rem;
	letter-spacing: .04em;
	color: var(--text-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 40rem) {
	body > header > nav { padding: 0 var(--size-3); }
	main { padding: 0 var(--size-3); }
	#site-name { font-size: 1rem; }
	.signature { flex-direction: column; align-items: flex-start; gap: var(--size-2); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth {
	max-width: 32rem;
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: 0 0 var(--size-6);
}

.auth-form label {
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	font-weight: var(--font-weight-5);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: .85rem;
}

.auth-form label:first-child { margin-top: 0; }

.auth-form input {
	width: 100%;
	padding: .7rem .85rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text-strong);
	background: var(--field);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	transition: border-color .15s ease;
}

.auth-form input::placeholder { color: var(--text-muted); }

/* A focused field changes its border on any focus, mouse included: a clicked
   <select> never matches :focus-visible. The ring is for the keyboard. Don't
   trade it for a box-shadow: an 18% glow vanished on checkboxes. */
.auth-form :is(input, select, textarea):focus {
	border-color: var(--accent-deep);
}

.auth-form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.auth-form :is(input:not([type="checkbox"]), select, textarea):focus-visible {
	border-radius: var(--radius);
}

/* :invalid matches before the field has been touched, which would paint an
   empty required field red on first paint. :user-invalid waits for interaction. */
.auth-form input:user-invalid {
	border-color: var(--danger);
}

.auth-form .button {
	margin-top: var(--size-4);
	justify-content: center;
}

/* Notices: one box, coloured by kind. Tests select these classes; keep them. */
.form-error,
.form-warning,
.form-notice {
	padding: .75rem var(--size-3);
	margin: 0 0 var(--size-5);
	border: 1px solid;
	border-left-width: 3px;
	border-radius: var(--radius);
	font-size: .9rem;
}

.form-error {
	border-color: var(--danger-border);
	background: var(--danger-fill);
	color: var(--danger-text);
}

.form-warning {
	border-color: var(--warning-border);
	background: var(--warning-fill);
	color: var(--warning-text);
}

.form-notice {
	border-color: var(--border-strong);
	border-left-color: var(--accent-deep);
	background: var(--accent-fill);
	color: var(--text);
}

/* The signed-out header carries no auth links by design; this is for the
   signed-in one. */
.session-actions {
	display: flex;
	align-items: center;
	gap: var(--size-3);
}

.session-actions form { margin: 0; }

.session-actions button {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: .9rem;
	color: var(--text-muted);
	cursor: pointer;
}

.session-actions button:hover { color: var(--accent-bright); }

/* Active sessions on the settings page. */
.session-list {
	list-style: none;
	margin: 0 0 var(--size-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-2);
}

.session {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-3);
	padding: .85rem var(--size-3);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.session-current {
	border-color: var(--accent-deep);
}

.session-what {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

/* A user agent is long and arbitrary; it must not push the button off-screen. */
.session-what strong {
	color: var(--text-strong);
	font-size: var(--text-item-title);
	font-weight: var(--font-weight-6);
	overflow-wrap: anywhere;
}

.session-what .meta { overflow-wrap: anywhere; }

.session-badge {
	flex-shrink: 0;
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
}

.session form { margin: 0; flex-shrink: 0; }
.session .button { padding: .4rem .8rem; font-size: var(--text-meta); }

/* ==========================================================================
   Filter tabs — the active filter must be visible, not only announced to a
   screen reader. The tabs are ghost buttons; aria-current="page" is the single
   source of truth for which one is active (set in the template), so the visible
   treatment keys off the same attribute rather than a separate class.
   ========================================================================== */

nav.tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-2);
	list-style: none;
	margin: 0 0 var(--size-5);
	padding: 0;
}

nav.tabs a[aria-current="page"] {
	background: var(--brand);
	border-color: var(--accent-deep);
	color: var(--text-strong);
	font-weight: var(--font-weight-6);
}

nav.tabs a[aria-current="page"]:hover {
	background: var(--accent-deep);
	color: var(--text-on-accent);
}

/* ==========================================================================
   Badges — a small pill: always .badge plus one modifier. Green reads as
   done/cleared/eligible, red as denied/ineligible, amber as pending, grey as
   awaiting/draft. Provenance: human (blue) was added by the legal team, auto
   (grey) was extracted, corrected (violet) was extracted then changed.
   Go returns the modifier strings (admin.go, legal.go, terms_rules.go) and
   tests assert them; rename one only with both.
   ========================================================================== */

.badge {
	display: inline-block;
	padding: .2rem .6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-fixed);
	font-size: .7rem;
	font-weight: var(--font-weight-5);
	letter-spacing: .04em;
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: middle;
}

.badge-green {
	background: var(--success-fill);
	border-color: var(--success-border);
	color: var(--success-text);
}

.badge-red {
	background: var(--danger-fill);
	border-color: var(--danger-border);
	color: var(--danger-text);
}

.badge-amber {
	background: var(--warning-fill);
	border-color: var(--warning-border);
	color: var(--warning-text);
}

.badge-grey,
.badge-auto {
	background: var(--neutral-fill);
	border-color: var(--border-strong);
	color: var(--text-muted);
}

.badge-human {
	background: var(--info-fill);
	border-color: var(--info-border);
	color: var(--info-text);
}

.badge-corrected {
	background: var(--revised-fill);
	border-color: var(--revised-border);
	color: var(--revised-text);
}

td.stage { white-space: nowrap; }

/* The Deadlines table's due date and state badge read on one line. */
#deadlines td.due,
#deadlines td.state { white-space: nowrap; }

.legend {
	font-size: var(--text-meta);
	color: var(--text-muted);
	margin: var(--size-2) 0 var(--size-3);
}

.reject-reason {
	margin: var(--size-1) 0 0;
	font-style: italic;
}

/* ==========================================================================
   Decision guard — the decision buttons, disabled until a verification
   exists (see .button:disabled).
   ========================================================================== */

.decision-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

/* Short helper copy under a form field, explaining what it is for. */
.field-help {
	margin: .2rem 0 var(--size-2);
	font-size: var(--text-meta);
	line-height: 1.5;
	color: var(--text-muted);
}

/* Visually-hidden but available to assistive technology — for labels that a
   sighted user reads from context (e.g. an actions column header) but a screen
   reader still needs announced. The clip pattern keeps it out of the layout
   without display:none, which would remove it from the accessibility tree too. */
.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;
}

/* ==========================================================================
   Application pages (intake list, review queue, legal tab)

   These reuse .auth for its heading/eyebrow treatment but carry data tables and
   panels, so they take the full content width rather than the 26rem sign-in
   column. Forms placed on them stay a readable width.
   ========================================================================== */

.auth.wide { max-width: var(--content-width); }

.auth.wide .auth-form { max-width: 28rem; }

/* A wide table stays inside its own horizontal scroll on a narrow screen rather
   than forcing the whole page to scroll sideways. */
.table-scroll {
	position: relative;
	overflow-x: auto;
	margin: var(--size-3) 0 var(--size-7);
}

.wide table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: .9rem;
}

.wide th,
.wide td {
	padding: .6rem .85rem;
	text-align: left;
	vertical-align: baseline;
	border-bottom: 1px solid var(--border);
}

.wide thead th {
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	font-weight: var(--font-weight-5);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom-color: var(--border-strong);
	white-space: nowrap;
}

/* A row's name leads it: the row header (or the leading .athlete cell)
   reads as an item title. */
.wide tbody th[scope="row"],
.wide tbody td.athlete {
	font-weight: var(--font-weight-6);
	color: var(--text-strong);
}

.wide tbody th[scope="row"] a,
.wide tbody td.athlete a { color: var(--text-strong); text-decoration-color: var(--accent-underline); }
.wide tbody th[scope="row"] a:hover,
.wide tbody td.athlete a:hover { color: var(--accent-bright); }

/* The caption says what the table lists, quietly, above it. */
.wide caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 var(--size-2);
	font-size: var(--text-meta);
	color: var(--text-muted);
}

/* A row's action is a small secondary button, never a bare link. */
.wide td .button,
.wide td .row-button { padding: .4rem .8rem; font-size: var(--text-meta); white-space: nowrap; }

/* Links in a row's other cells (a school, a sport, a count) read in the
   body colour, so the name stays the row's one loud link. */
.wide tbody td a:not(.button) { color: var(--text); text-decoration-color: var(--border-strong); }
.wide tbody td a:not(.button):hover { color: var(--accent-bright); text-decoration-color: currentColor; }
.wide tbody td.count a:not(.button) { color: var(--text-muted); }

/* A table's filter: one quiet row of compact fields above the table, each
   label over its field, the submit a secondary button. Below 40rem it
   stacks like any form. */
.auth.wide .auth-form.filter-form { max-width: none; margin: 0 0 var(--size-1); }

@media (min-width: 40rem) {
	.auth-form.filter-form {
		display: grid;
		grid-template-rows: auto auto;
		grid-auto-flow: column;
		justify-content: start;
		align-items: end;
		gap: .3rem var(--size-3);
	}
	.auth-form.filter-form label { margin-top: 0; }
	.auth-form.filter-form > :is(.button, a) { grid-row: 2; margin-top: 0; }
}

.auth-form.filter-form :is(input, select) { padding-block: .45rem; }
.auth-form.filter-form input[type="search"] { min-width: 14rem; }
.auth-form.filter-form .button { padding: .45rem .9rem; }

.wide tbody tr:last-child th,
.wide tbody tr:last-child td { border-bottom: 0; }

/* The provenance column carries a section label and a quote; keep it legible and
   stop it collapsing to one word per line. */
.wide td.provenance { min-width: 15rem; }
.wide .source-section { display: block; color: var(--text-muted); font-size: var(--text-meta); }
.wide .source-quote {
	margin: .3rem 0 0;
	padding-left: .6rem;
	border-left: 2px solid var(--border-strong);
	color: var(--text);
	font-style: italic;
}

/* ==========================================================================
   Checkbox rows — the eligibility "Checks" fieldset

   Without this the checkbox inherits .auth-form input { width:100% } and stacks
   as a full-width block above its label. Each row is a compact inline pair.
   ========================================================================== */

fieldset.checks {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .75rem var(--size-3) var(--size-3);
	margin: .85rem 0 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}

fieldset.checks legend {
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	font-weight: var(--font-weight-5);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 0 .4rem;
}

.auth-form label.check {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-family: var(--font-body);
	font-size: .95rem;
	font-weight: var(--font-weight-4);
	letter-spacing: normal;
	text-transform: none;
	color: var(--text);
}

.auth-form label.check input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	padding: 0;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--brand);
}

/* The eligibility-status <select> should match the text inputs, not fall back to
   the smaller browser-default control. A custom chevron replaces the native one
   so it reads the same in the dark theme. */
.auth-form select {
	width: 100%;
	padding: .7rem 2.4rem .7rem .85rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text-strong);
	background-color: var(--field);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	transition: border-color .15s ease;
	appearance: none;
	-webkit-appearance: none;
	/* The chevron cannot read a token: keep its stroke in step with --text-muted. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa3b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85rem center;
	background-size: .85rem;
}

/* The single provenance note sits below the tables, set apart from them. */
.legend-note { margin-top: var(--size-6); font-size: var(--text-meta); }

/* The role guide's definition lists: term (a page name or a state badge) above its
   explanation, with comfortable spacing. */
.guide-list { margin: var(--size-3) 0 0; }
.guide-list dt { font-weight: var(--font-weight-6); color: var(--text-strong); margin-top: 1.1rem; }
.guide-list dt:first-child { margin-top: 0; }
.guide-list dd { margin: .3rem 0 0; color: var(--text); }
article.auth section ul { margin: var(--size-2) 0 0; padding-left: 1.2rem; }
article.auth section li { margin: .3rem 0; }

/* The role switcher on the guide, shown to staff so they can read any role's guide. */
.guide-switch { display: flex; flex-wrap: wrap; gap: var(--size-2); margin: var(--size-5) 0 var(--size-2); }
.guide-switch a {
	font-family: var(--font-fixed); font-size: var(--text-label); text-transform: uppercase;
	letter-spacing: .06em; padding: .35rem .75rem; border: 1px solid var(--border);
	border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
}
.guide-switch a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--text-strong); }

/* Accounts: role badges sit in a row with a little breathing room. */
.roles .badge { margin-right: .3rem; }
.roles .badge:last-child { margin-right: 0; }

/* The athlete's own contract list on /contract: each contract a card with its
   filename, lifecycle state, and a state-specific note. The upload form follows
   the list so another contract can always be added. */
.contract-list { list-style: none; margin: var(--size-4) 0 0; padding: 0; }
.contract-item {
	margin: var(--size-3) 0 0; padding: var(--size-4); border: 1px solid var(--border);
	border-radius: var(--radius); background: var(--surface);
}
.contract-item .contract-name { display: block; margin: 0 0 var(--size-2); overflow-wrap: anywhere; }
.contract-item .status-line { margin: 0 0 var(--size-2); }
.contract-item .contract-line { margin: 0; }
.contract-item .contract-note { display: block; color: var(--text); }
.contract-item .reject-reason { display: block; color: var(--text); }
.contract-item .contract-revision { margin: var(--size-2) 0 0; }
.contract-item .contract-actions { margin: var(--size-3) 0 0; }
.contract-item .upload-revision { margin: var(--size-3) 0 0; }
.contract-item .upload-revision > summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-meta); }
.contract-item .upload-revision[open] > summary { margin-bottom: var(--size-2); }

/* The Legal tab groups terms by contract: each contract is a bordered section with
   its name, state, a download link, and its own obligations/payments tables. */
.legal-contract {
	margin-top: var(--size-6); padding: var(--size-5) var(--size-5) var(--size-4); border: 1px solid var(--border);
	border-radius: var(--radius-lg); background: var(--surface);
}
.legal-contract > h2 { margin: 0 0 var(--size-2); overflow-wrap: anywhere; }
.legal-contract .status-line { margin-bottom: var(--size-3); }
.legal-contract h3 { margin: var(--size-5) 0 var(--size-2); }
.legal-contract .contract-source { margin: 0; }
.legal-contract .contract-empty { margin: .75rem 0 0; }
.legal-contract .terms-contact { margin: var(--size-3) 0 0; }
.legal-contract .revision-notice { margin: var(--size-3) 0 0; }

/* The Legal tab's Upcoming section: one row per open deadline, its label and
   badge on one wrapping line, then one meta line. */
#deadlines { margin-top: var(--size-6); }
#deadlines .deadlines { list-style: none; margin: var(--size-3) 0 0; padding: 0; }
#deadlines .deadline { margin: 0; padding: var(--size-3) 0; border-top: 1px solid var(--border); }
.deadline:last-child { border-bottom: 1px solid var(--border); }
.deadline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--size-1) var(--size-2); }
.deadline-head .deadline-label { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.deadline-meta { margin: var(--size-1) 0 0; overflow-wrap: anywhere; }
/* A waived item's reason, then a refusal, then the viewer's actions: small
   secondary buttons, one form each, wrapping; Waive… opens its note below. */
.deadline-note { margin: var(--size-2) 0 0; overflow-wrap: anywhere; }
.deadline .form-error { margin: var(--size-2) 0 0; }
.deadline-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--size-2); margin-top: var(--size-2); }
.deadline-actions form { margin: 0; }
.deadline-actions .button { padding: .4rem .8rem; font-size: var(--text-meta); line-height: 1.25; }
.deadline-waive[open] { flex-basis: 100%; }
.deadline-waive > summary { list-style: none; }
.deadline-waive > summary::-webkit-details-marker { display: none; }
.deadline-waive[open] > summary { border-color: var(--accent-deep); color: var(--accent-bright); }
.deadline-waive-form { max-width: var(--measure); margin: var(--size-2) 0 0; }
.deadline-waive-form textarea {
	width: 100%;
	padding: .7rem .85rem;
	font: inherit;
	color: var(--text-strong);
	background: var(--field);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
}
.deadline-waive-form textarea[aria-invalid="true"] { border-color: var(--danger); }
.deadline-waive-form .field-help { margin: 0; }
.auth-form.deadline-waive-form .button { margin-top: var(--size-2); align-self: flex-start; }
/* Done items, folded under "Done (N)" below the open list. */
.deadlines-done { margin-top: var(--size-4); }
.deadlines-done > summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-meta); }
.deadlines-done[open] > summary { margin-bottom: var(--size-2); }

/* A contract's revisions, newest first: one meta line each. */
.revision-history { list-style: none; margin: var(--size-2) 0 0; padding: 0; }
.revision-history .revision-row { font-size: var(--text-meta); color: var(--text-muted); margin: 0 0 var(--size-1); }
.revision-history .revision-row .badge, .revision-list .badge { font-size: .65rem; }
.revision-list { margin: var(--size-2) 0 var(--size-5); padding-left: 1.2rem; font-size: var(--text-meta); color: var(--text-muted); }
.revision-list li { margin: 0 0 var(--size-1); }
.auth-form > h3:first-child { margin-bottom: var(--size-2); }

/* A record's summary (intake, account, revision): a bordered card of label and
   value rows, so the record reads as a structured panel rather than a bare
   stack of lines. Each row is one pair (tested). */
dl.summary {
	display: grid;
	/* Two tracks, label then value, so a pair always shares a row. */
	grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
	column-gap: var(--size-4);
	margin: var(--size-5) 0 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--border);
	padding: var(--size-3);

	dt {
		font-family: var(--font-fixed);
		font-size: var(--text-label);
		font-weight: var(--font-weight-5);
		letter-spacing: .08em;
		text-transform: uppercase;
		align-self: baseline;
		padding-top: .2em;
		color: var(--text-muted);
	}
	dd {
		color: var(--text-strong);
		font-size: var(--text-data);
		font-family: var(--font-body);
		margin: 0 0 var(--size-2);
		overflow-wrap: anywhere;
	}
	dd .badge { font-size: .75rem; }
}

/* ==========================================================================
   Contract terms — the attorney's editor and the athlete's confirmed-terms
   card.
   ========================================================================== */

/* #terms-notice is always rendered, so a partial swap has a target; it only
   shows when it says something. */
.form-notice:empty { display: none; }

.terms-checklist { margin: 0 0 var(--size-3); }

/* The gaps before Confirm: one warning callout, a lead, then a plain list. */
.terms-warnings-callout { max-width: var(--measure); margin: 0 0 var(--size-4); }
.terms-warnings-lead { margin: 0 0 var(--size-1); font-weight: var(--font-weight-6); }
article.auth section ul.terms-warnings { margin: 0; padding-left: 1.1rem; }
.terms-editor .source-quote summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-meta); }
.terms-editor td .condition,
.terms-editor td .due-on,
.legal-contract td .condition,
.legal-contract td .due-on { font-size: var(--text-meta); color: var(--text-muted); }
.terms-editor td .due-on, .legal-contract td .due-on { color: var(--text); }
.terms-editor .source-quote blockquote { margin: .35rem 0 0; font-style: italic; }
.legal-contract .edit-terms { margin-left: .75rem; }

/* The athlete's card and its states: lists, never tables, nothing clamped, so
   it stacks at phone width. */
.athlete-terms-card,
.terms-state {
	margin: var(--size-3) 0;
	padding: var(--size-3) var(--size-4);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--accent-wash);
	overflow-wrap: anywhere;
}

.athlete-terms-card h3:first-child { margin-top: 0; }
.athlete-terms-card ul { margin: var(--size-1) 0 var(--size-3); padding-left: 1.1rem; }
.athlete-terms-card li { margin: 0 0 .75rem; }
.athlete-terms-card .card-detail,
.athlete-terms-card .card-section { display: block; font-size: var(--text-data); color: var(--text); }
.athlete-terms-card .card-section { color: var(--text-muted); font-size: var(--text-meta); }
.athlete-terms-card .card-amount,
.athlete-terms-card .card-due { font-family: var(--font-fixed); font-size: var(--text-data); color: var(--text-strong); }
.athlete-terms-card .card-confirmed { margin: 0 0 var(--size-3); }
.athlete-terms-card .card-footer {
	margin: var(--size-4) 0 0;
	padding-top: .75rem;
	border-top: 1px solid var(--border);
	color: var(--text-muted);
	font-size: var(--text-meta);
}
.terms-state p { margin: 0; }

/* The Add panels and the term forms: What / When / Where fieldsets, the quote
   and page folded, the due date secondary. Errors sit under their field and in
   the alert at the top of the form. */
.add-term { margin: var(--size-3) 0 0; }
.add-term > summary { cursor: pointer; color: var(--accent-bright); font-weight: var(--font-weight-5); }
.add-term[open] > summary { margin-bottom: .75rem; }
.term-form fieldset {
	margin: 0;
	padding: .75rem var(--size-3) var(--size-3);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.term-form legend { padding: 0 .35rem; color: var(--text); font-size: .85rem; }
.term-form input[aria-invalid="true"] { border-color: var(--danger); }
.term-form textarea {
	width: 100%;
	padding: .7rem .85rem;
	font: inherit;
	color: var(--text-strong);
	background: var(--field);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
}
.term-form textarea[aria-invalid="true"] { border-color: var(--danger); }
.term-form label.secondary { color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.term-form .source-quote-fields summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-meta); }
.term-form .form-error ul { margin: var(--size-1) 0 0; padding-left: 1.1rem; }
.term-form .form-error a { color: inherit; }
.field-error { margin: 0; color: var(--danger-text); font-size: var(--text-meta); }

/* A row's controls, and its edit state: one cell spanning the row, the form
   laid out as a block so Save and Cancel stay in view without scrolling. */
.terms-editor .row-actions { white-space: nowrap; text-align: right; }
.terms-editor .row-actions .button { padding: .35rem .7rem; font-size: var(--text-meta); }
.terms-editor tr.editing > td { padding: var(--size-3); background: var(--accent-wash); }
.terms-editor tr.editing .term-form { max-width: none; margin: 0; }
.term-form .form-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: var(--size-3); }
.term-form .form-actions .button { margin-top: 0; }
.term-form .form-error dl { margin: var(--size-1) 0; }

/* "Originally extracted": a quiet fold under a corrected row, not a warning. */
.originally-extracted { margin-top: .35rem; font-size: var(--text-meta); color: var(--text-muted); }
.originally-extracted summary { cursor: pointer; }
.originally-extracted dl { margin: var(--size-1) 0 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; }
.originally-extracted dd { margin: 0; }

/* The athlete's card after a republish: noticeable, not alarming. */
.athlete-terms-card .terms-updated { margin: 0 0 var(--size-3); }

/* Delete sits last in the row, set apart from Edit. */
.terms-editor .row-delete { display: inline; margin: 0 0 0 .75rem; }

/* The contract summary on the athlete's card: restrictions and rights first,
   then the summary as label/value pairs that wrap rather than clamp, stacking
   at phone width. */
.athlete-terms-card .card-restrictions li { margin-bottom: .4rem; }
.athlete-terms-card dl.card-summary {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: .35rem var(--size-4);
	margin: var(--size-1) 0 var(--size-3);
	font-size: var(--text-data);
}
.athlete-terms-card dl.card-summary dt {
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding-top: .25em;
}
.athlete-terms-card dl.card-summary dd { margin: 0; color: var(--text-strong); }
.athlete-terms-card dl.card-summary dd.card-data { font-family: var(--font-fixed); }
@media (max-width: 480px) {
	.athlete-terms-card dl.card-summary { grid-template-columns: 1fr; }
	.athlete-terms-card dl.card-summary dd { margin-bottom: .4rem; }
}

/* Re-extract: a secondary action below Confirm, or, once the terms have been
   worked on by hand, the calm line saying why it is off. */
.terms-editor .re-extract,
.terms-editor #re-extract-off { margin-top: var(--size-7); padding-top: var(--size-3); border-top: 1px solid var(--border); }
.terms-editor .re-extract .field-help { margin: var(--size-2) 0 0; }

/* The editor's checklist: one item per line with its detail indented, the
   toggle form on one row. */
.terms-editor .checklist { list-style: none; margin: 0; padding: 0; }
.terms-editor .checklist-item { padding: var(--size-3) 0 var(--size-3) var(--size-3); border-top: 1px solid var(--border); border-left: 3px solid var(--warning-border); }
.terms-editor .checklist-head { margin: 0; font-weight: var(--font-weight-6); color: var(--text-strong); }
.terms-editor .checklist-head input[type="checkbox"] { width: 1rem; height: 1rem; margin-right: .4rem; vertical-align: -.1rem; accent-color: var(--brand); }
.terms-editor .checklist-detail { margin: var(--size-1) 0 0 1.6rem; font-size: var(--text-data); color: var(--text); }
.terms-editor .checklist-ticked { margin: var(--size-1) 0 0 1.6rem; font-size: var(--text-meta); color: var(--text-muted); }
.terms-editor .checklist-toggle { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--size-2); margin: var(--size-2) 0 0 1.6rem; max-width: none; }
.terms-editor .checklist-toggle label { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 14rem; margin: 0; }
.terms-editor .checklist-toggle .button { margin: 0; }
/* A ticked item recedes: no marker, its facts in meta, and a compact form. */
.terms-editor .checklist-item:has(.checklist-head input:checked) { border-left-color: transparent; }
.terms-editor .checklist-item:has(.checklist-head input:checked) .checklist-head { font-weight: var(--font-weight-5); color: var(--text-muted); }
.terms-editor .checklist-item:has(.checklist-head input:checked) .checklist-detail { color: var(--text-muted); font-size: var(--text-meta); }
.terms-editor .checklist-item:has(.checklist-head input:checked) .checklist-toggle label { flex: 0 1 18rem; }
.terms-editor .checklist-item:has(.checklist-head input:checked) .checklist-toggle input { padding: .4rem .6rem; font-size: var(--text-meta); }
.terms-editor .checklist-item:has(.checklist-head input:checked) .checklist-toggle .button { padding: .4rem .8rem; font-size: var(--text-meta); }

/* The terms audit log: filters in one row at desktop that stack at phone
   width, and each change on its own line, the old value struck and the new
   one marked. */
.audit-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--size-2) var(--size-3); max-width: none; }
.audit-filters select { min-width: 12rem; }
.audit-filters .button { margin-top: 0; }
.audit-filters + #audit-limit, .audit-filters + #audit-document { margin-top: var(--size-3); }
@media (max-width: 480px) {
	.audit-filters { flex-direction: column; align-items: stretch; }
}
.audit-changes { margin: 0; padding-left: var(--size-3); }
.audit-changes li { margin-bottom: var(--size-1); overflow-wrap: anywhere; }
.audit-changes .change-label { color: var(--text-muted); margin-right: var(--size-1); }
.audit-changes del { color: var(--danger-text); }
.audit-changes ins { color: var(--accent-bright); text-decoration: none; }
.audit-changes details { display: inline; }
.audit-counts { display: block; font-size: var(--text-meta); color: var(--text); }

/* The internal Legal tab's draft: labelled, so staff don't quote it to a
   family. The snapshot view's banner says whose card it is. */
.legal-contract .draft-label { margin: .75rem 0 0; }
.legal-contract .terms-history { margin-left: .75rem; }
.terms-snapshot .snapshot-banner { margin-bottom: var(--size-3); }

/* The editor's summary form: its three fieldsets stack like a term form's. */
.summary-form { max-width: none; display: flex; flex-direction: column; gap: .75rem; }
.summary-form .field-help { margin: 0; }

/* The admin guide's state charts. Each chart keeps a readable size and
   scrolls sideways inside its figure on a narrow screen. */
.state-chart {
	margin: var(--size-6) 0;
}

.state-chart h3 { margin: 0 0 var(--size-1); }

.state-chart-summary { margin: 0 0 var(--size-3); color: var(--text-muted); }

.diagram-scroll { overflow-x: auto; }
.diagram-scroll .resource-model { display: block; min-width: 760px; }

/* The revision page: the diff is detail, read in its own scroll box so a
   long one never becomes the page, and never pushes it sideways. */
.revision-diff {
	max-height: 36rem;
	overflow: auto;
	margin: var(--size-3) 0 0;
	padding: var(--size-3);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	font-size: var(--text-meta);
	line-height: 1.5;
}

.revision-comparison .comparison-facts { margin: 0 0 var(--size-2); }

/* The athlete feed: a heading per day, the author's initials in a circle,
   the body as typed (pre-wrap keeps its line breaks), the composer at the
   bottom at the article's full width. */
.feed-day-group { margin: 0 0 var(--size-6); }
.feed-day {
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	font-weight: var(--font-weight-5);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: var(--size-6) 0 var(--size-3);
}
ol.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--size-2); }
/* A message is a card: the author its item title, the body the one thing
   to read. An event is a quiet line between the cards. */
.feed-entry {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--size-3);
	align-items: center;
	padding: var(--size-3) var(--size-4);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}
.feed-entry.feed-event {
	padding: var(--size-1) var(--size-2);
	border: 0;
	background: none;
}
.feed-author {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: var(--text-item-title);
	font-weight: var(--font-weight-6);
	color: var(--text-strong);
}
.feed-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--accent-fill);
	border: 1px solid var(--accent-deep);
	color: var(--text-strong);
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	letter-spacing: .05em;
}
/* The organisation speaking (the contracts team) shows the logo mark. */
.feed-avatar-org { background: none; border: 0; overflow: hidden; }
.feed-avatar-org img { display: block; width: 100%; height: 100%; }
.feed-time { font-family: var(--font-fixed); font-size: var(--text-label); letter-spacing: .04em; color: var(--text-muted); }
.feed-body {
	grid-column: 1 / -1;
	margin: var(--size-2) 0 0;
	color: var(--text-strong);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* An event in the feed: a small icon, the audit log's wording as the item
   title (regular weight, body colour), who did it, and a meta line for what
   it was about. Quieter than a message, so people's words pop. */
.feed-event-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	font-size: var(--text-data);
	color: var(--text);
}
.feed-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1px solid var(--border);
	color: var(--text-muted);
	font-size: .75rem;
}
.feed-icon-confirmation { color: var(--success-text); border-color: var(--success-border); }
/* An event the organisation speaks (a deadline reminder) shows the logo mark
   in the icon's place, at the icon's size, so its line aligns. A long line
   (a deadline's sentence) wraps beside its icon rather than below it. */
.feed-event-line .feed-avatar { width: 1.5rem; height: 1.5rem; }
.feed-event-line { flex-wrap: nowrap; }
.feed-event-line .feed-label { min-width: 0; }
.feed-event-line .feed-who { flex: none; }
.feed-who { color: var(--text-muted); }
.feed-who::before { content: "· "; }
.feed-detail {
	grid-column: 1 / -1;
	margin: .15rem 0 0 2rem;
	font-size: var(--text-meta);
	color: var(--text-muted);
	overflow-wrap: anywhere;
}
#compose { max-width: none; margin-top: var(--size-5); }
#compose textarea {
	width: 100%;
	padding: .7rem .85rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text-strong);
	background: var(--field);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	resize: vertical;
}

/* A feed entry's topic chip, after the body: the page the comment was made
   on. Comment panels reuse the feed entry's author, time and body styles;
   the form is the composer's at the page's width. */
.feed-topic {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: var(--size-2);
	padding: .15rem .55rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	letter-spacing: .04em;
	color: var(--text-muted);
	text-decoration: none;
}
.feed-event .feed-topic { margin: .15rem 0 0 2rem; }
a.feed-topic { color: var(--text-strong); }
a.feed-topic:hover { border-color: var(--text-muted); }
ol.comments { list-style: none; margin: var(--size-3) 0 0; padding: 0; }
.comment {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--size-3);
	align-items: center;
	padding: var(--size-3) var(--size-4);
	margin: 0 0 var(--size-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}
.comment-form { max-width: none; }
.comment-form textarea {
	width: 100%;
	padding: .7rem .85rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text-strong);
	background: var(--field);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	resize: vertical;
}

/* The view-as banner sits above the nav on every page, outside any disabled
   fieldset, so Exit always works. */
#view-as-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-2) var(--size-4);
	padding: .5rem var(--size-4);
	border-bottom: 1px solid var(--border-strong);
	background: var(--accent-fill);
	color: var(--text);
	font-size: .9rem;
}
#view-as-banner p { margin: 0; }
#view-as-banner form { margin: 0; }

/* View as sits inline in an account or athlete row: a compact button, as in
   a session row, with no box of its own. */
form.view-as { margin: 0; display: inline; }
form.view-as .button { padding: .4rem .8rem; font-size: var(--text-meta); white-space: nowrap; }

/* The read-only fieldset wraps main and the footer while viewing as someone.
   It adds no box of its own, so the layout is the viewed user's; the controls
   it disables natively are only dimmed. */
fieldset.read-only {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
fieldset.read-only :disabled {
	opacity: .6;
	cursor: not-allowed;
}

.diagram-scroll .state-chart-figure { display: block; min-width: 34rem; }

.state-chart figcaption ul {
	margin: var(--size-3) 0 0;
	padding-left: var(--size-4);
	font-size: var(--text-data);
	color: var(--text-muted);
}

.state-chart figcaption li + li { margin-top: var(--size-1); }

/* ==========================================================================
   Pipeline board
   ========================================================================== */

/* The dashboard is the one page wider than the content column: six 15rem
   columns and their gaps need 95rem. The audit section below shares the width. */
main:has(> .dashboard),
.auth.wide.dashboard { max-width: var(--content-width-wide); }

/* Six columns, each at least 15rem. When they do not fit, the board scrolls
   sideways inside its own box (so it is focusable) and the page never does. */
.board {
	list-style: none;
	margin: var(--size-5) 0 0;
	padding: 0 0 var(--size-3);
	display: grid;
	grid-template-columns: repeat(6, minmax(15rem, 1fr));
	gap: var(--size-3);
	overflow-x: auto;
}

/* Below the nav's breakpoint the board becomes a snapping horizontal strip. */
@media (max-width: 52rem) {
	.board {
		display: flex;
		scroll-snap-type: x mandatory;
	}

	.board > .column {
		flex: 0 0 82vw;
		scroll-snap-align: start;
	}
}

.column {
	min-width: 0;
	min-height: 12rem;
	padding: var(--size-3);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.board .column h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--size-1) var(--size-2);
	margin: 0 0 var(--size-3);
	font-family: var(--font-fixed);
	font-size: var(--text-label);
	font-weight: var(--font-weight-5);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* The label and its count stay on one line; only the link drops below them. */
.board .column h3 > span { white-space: nowrap; }

.board .column h3 .count { margin-left: auto; }

.board .column h3 .column-link {
	order: 2;
	flex-basis: 100%;
	font-family: var(--font-body);
	font-size: var(--text-meta);
	font-weight: var(--font-weight-5);
	letter-spacing: 0;
	text-transform: none;
	color: var(--accent);
	text-decoration: none;
	white-space: nowrap;
}

.board .column h3 .column-link:hover { text-decoration: underline; }

.column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-2);
}

.column .empty { font-size: var(--text-meta); }

/* Nothing in a card may push past it: the card shrinks to its column, words
   wrap at spaces, and a single unbreakable token (an email as a name) breaks
   inside itself only as a last resort. */
.pipeline-card {
	display: grid;
	gap: var(--size-2);
	min-width: 0;
	padding: var(--size-3);
	overflow-wrap: anywhere;
	background: var(--canvas);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

/* The name is the card's title, the one thing to read first. */
.pipeline-card > a {
	color: var(--text-strong);
	text-decoration: none;
}

.pipeline-card > a > strong {
	font-size: var(--text-item-title);
	font-weight: var(--font-weight-6);
	letter-spacing: -.01em;
}

.pipeline-card > a:hover { text-decoration: underline; }

/* A long status wraps onto a second line and keeps its pill shape. */
.pipeline-card .badge {
	justify-self: start;
	white-space: normal;
	line-height: 1.5;
	padding: .2rem .75rem;
}


.dashboard #pipeline h2,
.dashboard #audit > h2 { margin-top: 0; }

.dashboard #audit { margin-top: var(--size-9); }

/* Settings: one section per concern, its heading, a line of context, one
   action. The sections are separated by space, not rules. */
.settings section + section { margin-top: var(--size-8); }
.settings section > p { margin: 0 0 var(--size-3); max-width: var(--measure); }
.settings .auth-form { margin-bottom: 0; }
.settings .auth-form .button { align-self: flex-start; }
.settings .org-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--size-4); }
.settings .org-links li { display: flex; flex-wrap: wrap; gap: var(--size-1) var(--size-2); }
.settings .org-links .meta { flex-basis: 100%; }

/* The Legal tab's and the review page's companion links, one meta line. */
.legal-links { margin: 0 0 var(--size-5); }