/* Scoped reset (ARCHITECTURE 14.5).

   Every rule starts with one of the three scope classes, so a theme's or
   wp-admin's rules (button {}, .entry-content input {}, #wpbody h1) lose,
   and nothing here reaches outside our content. !important appears only in
   the form-control reset, where wp-admin's forms.css styles bare inputs
   with selectors we cannot otherwise outrank. */

.gc-admin, .gc-portal, .gc-range {
	color: var(--text-strong);
	font: var(--type-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-size-adjust: 100%;
}
:is(.gc-admin, .gc-portal, .gc-range) *,
:is(.gc-admin, .gc-portal, .gc-range) *::before,
:is(.gc-admin, .gc-portal, .gc-range) *::after { box-sizing: border-box; }

:is(.gc-admin, .gc-portal, .gc-range) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote) { margin: 0; padding: 0; }
:is(.gc-admin, .gc-portal, .gc-range) :is(h1, h2, h3, h4, h5, h6) { color: inherit; font: inherit; }
:is(.gc-admin, .gc-portal, .gc-range) :is(ul, ol) { list-style: none; }
:is(.gc-admin, .gc-portal, .gc-range) :is(img, svg) { display: block; max-width: 100%; }
:is(.gc-admin, .gc-portal, .gc-range) svg { flex: none; }
:is(.gc-admin, .gc-portal, .gc-range) code { font: 500 13px var(--font-mono); background: none; padding: 0; }
:is(.gc-admin, .gc-portal, .gc-range) b, :is(.gc-admin, .gc-portal, .gc-range) strong { font-weight: 700; }
:is(.gc-admin, .gc-portal, .gc-range) table { border-collapse: collapse; border-spacing: 0; }
:is(.gc-admin, .gc-portal, .gc-range) [hidden][hidden] { display: none; }

/* Links: red, underlined red on hover (README, Interactions). */
:is(.gc-admin, .gc-portal, .gc-range) a { color: var(--text-link); text-decoration: none; box-shadow: none; }
:is(.gc-admin, .gc-portal, .gc-range) a:hover { color: var(--red-700); text-decoration: underline; }

/* Focus: 3px solid red, 2px offset (README). The #gc-portal twins keep it
   in a theme whose focus rules outrank a class (Twenty Twenty-One:
   .site a:focus:not(.wp-block-button__link), outline 2px transparent). */
:is(.gc-admin, .gc-portal, .gc-range) :focus, #gc-portal :focus { outline: none; box-shadow: none; }
:is(.gc-admin, .gc-portal, .gc-range) :focus-visible, #gc-portal :focus-visible { outline: var(--gc-focus); outline-offset: var(--gc-focus-offset); box-shadow: none; }

/* Form controls: wp-admin's forms.css and themes style bare controls. */
:is(.gc-admin, .gc-portal, .gc-range) :is(input, select, textarea, button) {
	font-family: inherit;
	margin: 0;
	box-shadow: none;
	min-height: 0;
	line-height: normal;
}
:is(.gc-admin, .gc-portal, .gc-range) :is(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) {
	border-radius: var(--gc-radius);
	color: var(--text-strong);
}
:is(.gc-admin, .gc-portal, .gc-range) input[type="checkbox"] {
	accent-color: var(--red-500);
	width: 16px !important;
	height: 16px !important;
	border-radius: 3px !important;
	appearance: auto !important;
	vertical-align: middle;
}
:is(.gc-admin, .gc-portal, .gc-range) input[type="checkbox"]::before, :is(.gc-admin, .gc-portal, .gc-range) :is(input[type="checkbox"], input[type="radio"])::after { content: none !important; }
:is(.gc-admin, .gc-portal, .gc-range) button { cursor: pointer; }

/* Inside a theme (decision m10_themes 4). The portal is a block in the
   club's theme, and a theme styles bare elements our components leave to
   the browser: Twenty Twenty-One sets the font of lists, labels and
   paragraphs, its links' underline, a label's bottom margin, a legend's
   display, an input's width and a select's appearance (its own arrow,
   none of ours); Twenty Twenty-Five spaces its body's and headings'
   letters and wraps headings and paragraphs its own way (text-wrap:
   pretty). Each goes back to what the portal inherits or the browser
   draws; a component's own rule (a scope class and a gc- class) still
   decides. */
.gc-portal {
	/* What a theme sets on its <body> and our text would inherit. */
	letter-spacing: normal;
	word-spacing: normal;
	text-align: start;
	text-indent: 0;
	text-transform: none;
	overflow-wrap: break-word;
	text-wrap: wrap;
}
.gc-portal :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figure, label, legend) { font: inherit; letter-spacing: inherit; overflow-wrap: inherit; text-wrap: inherit; }
.gc-portal a { text-underline-offset: auto; text-decoration-thickness: auto; text-decoration-skip-ink: auto; }
.gc-portal label { margin: 0; }
.gc-portal legend { display: block; }
.gc-portal :is(input, select, textarea) { max-width: 100%; }
.gc-portal select { appearance: auto; }

/* Screen-reader text, as WordPress does it. */
:is(.gc-admin, .gc-portal, .gc-range) .gc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes gc-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes gc-spin { to { transform: rotate(360deg); } }