/* 76 Design Solutions Help Center: brand layer over the Citizen skin (TSK-2026-2093).
   Colors and type match 76designsolutions.com (read 10/24/2026): navy rgb(11 47 92), red #ee1111,
   cyan rgb(0 163 224), ink #1a1f24, Space Grotesk headings (served from this host), system sans text. */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url( '/resources-76ds/space-grotesk-latin.woff2' ) format( 'woff2' );
}

:root,
.skin-theme-clientpref-day {
	/* Citizen builds its palette from these (OKLCH): navy as the action color. */
	--color-primary-oklch__h: 256.2;
	--color-progressive-oklch__h: 256.2;
	--color-progressive-oklch__l: 30.8%;
	--color-progressive-oklch__c: 0.0901;
	--color-progressive-hsl__h: 213;
	--color-progressive-hsl__s: 79%;
	--color-progressive-hsl__l: 20%;
	/* White, neutral surfaces like 76designsolutions.com (Citizen tints them with the action hue by default). */
	--color-surface-0-oklch__l: 100%;
	--color-surface-0-oklch__c: 0;
	--color-surface-1-oklch__c: 0.003;
	--color-surface-2-oklch__c: 0.003;
	--color-surface-3-oklch__c: 0.003;
	--color-surface-4-oklch__c: 0.003;
	--font-family-citizen-base: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ds-navy: rgb( 11 47 92 );
	--ds-red: #ee1111;
	--ds-cyan: rgb( 0 163 224 );
	--ds-ink: #1a1f24;
}

body {
	color: var( --ds-ink );
}

/* Headings in Space Grotesk, as on 76designsolutions.com. */
h1,
h2,
h3,
.mw-page-title-main,
.citizen-page-heading,
.firstHeading {
	font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	letter-spacing: -0.01em;
	color: var( --ds-ink );
}

/* Header: the thin brand-red rule under it, as on the main site. */
.citizen-header {
	border-bottom: 3px solid var( --ds-red );
}

/* Header logo: the 76 Design Solutions wordmark (as in the main site's header), not the round badge. */
.citizen-header__logo .mw-logo-icon {
	content: url( '/resources-76ds/logo-nav-dark.webp' );
	width: auto;
	height: 2.5rem;
	max-width: 10rem;
}
.citizen-footer__siteinfo .mw-logo-icon {
	display: none;
}

/* Links in navy; underline on hover only. */
.mw-body-content a:not( .new ) {
	color: var( --ds-navy );
}
.mw-body-content a:not( .new ):hover {
	text-decoration: underline;
}

/* Help-center components used by the Main Page and article templates. */
.ds-hero {
	padding: 1.5rem 0 1rem;
}
.ds-hero p {
	font-size: 1.125rem;
	max-width: 42rem;
	margin: 0.5rem 0 1rem;
}
.ds-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	gap: 1rem;
	margin: 1rem 0 2rem;
}
.ds-card {
	border: 1px solid #d9dee5;
	border-top: 3px solid var( --ds-navy );
	border-radius: 6px;
	padding: 1rem 1.125rem;
	background: #fff;
}
.ds-card h3,
.ds-card .mw-heading {
	margin: 0 0 0.375rem;
	padding: 0;
	font-size: 1.125rem;
	border: 0;
}
.ds-card .mw-heading h3 {
	margin: 0;
}
.ds-card .mw-editsection {
	display: none;
}
.ds-card p {
	margin: 0 0 0.5rem;
	color: #3d4651;
}
.ds-note {
	border-left: 4px solid var( --ds-navy );
	background: #f4f6f9;
	padding: 0.75rem 1rem;
	margin: 1rem 0;
	border-radius: 0 6px 6px 0;
}
.ds-note--warn {
	border-left-color: var( --ds-red );
}
.ds-summary {
	border: 1px solid #d9dee5;
	border-radius: 6px;
	padding: 0.875rem 1rem;
	margin: 0 0 1.25rem;
	background: #fbfcfd;
}
.ds-help {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid #d9dee5;
}

/* Logged-out readers: no Discussion, history, appearance or page tools (Samuel 10/24). */
body.ds-anon #ca-talk,
body.ds-anon #ca-history,
body.ds-anon #ca-viewsource,
body.ds-anon .citizen-preferences,
body.ds-anon .citizen-preferences-dropdown,
body.ds-anon .page-actions-history {
	display: none !important;
}

/* Honeypot field on the login form: kept in the form for bots, out of sight and reach for people. */
.ds-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Fix (a), Samuel 10/24: logged-out readers get no page-actions menu (the floating three dots) or sticky-header menu. */
body.ds-anon .citizen-page-actions,
body.ds-anon .citizen-page-actions-more,
body.ds-anon .citizen-sticky-header-dropdown-container {
	display: none !important;
}
/* ...and the contents button never covers text on narrow screens: below 1120 px it sits in the page flow
   instead of floating fixed over the article (a fixed button always covers whatever line is under it). */
@media ( max-width: 1119px ) {
	#citizen-toc {
		position: static !important;
		margin: 0 0 1rem;
	}
	.mw-body-content {
		padding-bottom: 2rem;
	}
}

/* Fix (b): the footer wordmark at the header's size, so its text is legible. */
.citizen-footer__sitetitle .mw-logo-wordmark {
	width: 10rem !important;
	height: auto !important;
	max-width: 100%;
}