/*
 * CyberSlam base ground and base layer.
 *
 * Until 055 this file fought Divi: Divi hardcoded `#main-content { background:
 * #fff }` in an inline block, and this file out-ranked it with `html body
 * #main-content` (0,1,2) rather than racing its load order. Divi is gone
 * (CSDS 0.8.0). The `#main-content` selectors stay because Federation
 * Manager's template still prints `<div id="main-content">`; the Divi-only ones
 * (`#page-container`, `#et-main-area`, `.et_pb_*`) went with Divi.
 *
 * The ground and the text still change together (constitution): cream `ink`
 * over a white ground measured 1.41:1.
 */
html body,
html body #main-content {
	background-color: var(--csds-surface-base);
	color: var(--csds-ink);
}

html body #main-content h1,
html body #main-content h2,
html body #main-content h3,
html body #main-content h4,
html body #main-content h5,
html body #main-content h6 {
	color: var(--csds-ink);
}

/*
 * The base layer Divi used to supply, now said out loud.
 *
 * Divi's own stylesheet reached every csds page until 055, and the pages were
 * built and reviewed on top of it without anyone listing what it gave. When
 * Divi went, 82 of 90 regression shots moved: links grew underlines, the top
 * bar widened by 48px, paragraphs lost their spacing. `dump-styles.mjs`
 * compared the COMPUTED style of every element on 17 pages with and without
 * Divi (specs/055-divi-removal); these are the rules behind the differences,
 * each copied from Divi's stylesheet with its value, never from memory:
 *
 *   *{box-sizing:border-box}                       1,690 elements
 *   input,select,textarea{font-family:inherit}       119
 *   a{text-decoration:none}                           69
 *   p{padding-bottom:1em}, the last one 0             79
 *   h1…h6{padding-bottom:10px}                        58
 *   img{max-width:100%;height:auto}                   57
 *   strong{font-weight:700}                            2
 *
 * All inside `:where()`, so each has no specificity at all: any class a
 * component sets wins, whatever order the stylesheets load in. Divi's
 * `p:not(.has-background):last-of-type` was (0,2,1) and silently beat
 * single-class paddings — technical-debt.md, "it cost an afternoon". Here it
 * is (0,0,0) and cannot.
 *
 * Divi's select colours (`#4e4e4e` on `#fff`) are NOT carried: they are
 * literals, not tokens, and a select no plugin styles now shows the browser's
 * own control.
 */
:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(input, select, textarea, button) {
	font-family: inherit;
}

:where(a) {
	text-decoration: none;
}

:where(p) {
	padding-bottom: 1em;
}

:where(p:not(.has-background):last-of-type) {
	padding-bottom: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
	padding-bottom: 10px;
}

:where(img) {
	max-width: 100%;
	height: auto;
}

:where(strong) {
	font-weight: 700;
}

/*
 * Links. Cream, underlined, gold on hover — decided 2026-09-18 and recorded in
 * tokens.json as `link` / `link-hover`, not invented here.
 *
 * The first version of this file set crimson. Crimson on surface-base is
 * 3.44:1, which is the brand book's own flagged pair, restricted to bold
 * uppercase labels 13px/700+. Putting it on 14px body links broke the rule the
 * design system states. No red in the palette clears the 4.5:1 body floor on a
 * dark ground: scarlet is the closest at 4.37:1 and still short.
 *
 * The underline matters as much as the colour: `link` is the same value as
 * `ink`, so without it a link is not distinguishable from body copy at all.
 */
html body #main-content a {
	color: var(--csds-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

html body #main-content a:hover,
html body #main-content a:focus {
	color: var(--csds-link-hover);
}

/*
 * Where crimson IS correct: a link that is already a bold uppercase label at
 * body-button scale or larger clears the 3:1 large-text floor.
 */
html body #main-content a.csds-link-label {
	color: var(--csds-crimson);
	font: var(--csds-body-button);
	text-transform: uppercase;
	text-decoration: none;
}

/* Horizontal rules and borders that were drawn for a light ground. */
html body #main-content hr {
	border-color: var(--csds-border-default);
}

/* --------------------------------------------------- form controls ---- */
/*
 * A field's ground and its text travel together (0.10.0).
 *
 * Both halves are supplied by the browser when a stylesheet gives only one,
 * and the result is invisible to any audit of that stylesheet: the wrestler
 * edit form set a dark ground and no colour, so the name read black on black
 * (1.12:1, measured), and a form with a colour and no ground reads cream on
 * white. This is the floor under every field on a csds surface.
 *
 * `:where()` carries NO specificity, so any plugin, theme or component rule
 * still wins. It only fills the gap where nothing else speaks.
 */
:where(
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]),
	select,
	textarea
) {
	background-color: var(--csds-surface-raised);
	color: var(--csds-ink);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
}

:where(input, select, textarea)::placeholder {
	color: var(--csds-ink-muted);
	opacity: 1;
}

/* An option list is painted by the browser from the option's own colours. */
:where(select) option {
	background-color: var(--csds-surface-raised);
	color: var(--csds-ink);
}