/*
 * Safety portal styles.
 *
 * Everything is scoped under .gfcsp so it cannot leak into the surrounding
 * theme, and nothing here depends on the theme's own classes. Colours are
 * declared as custom properties on .gfcsp, so a site owner can restyle the
 * portal by overriding a handful of variables in their theme.
 */

.gfcsp {
	--gfcsp-ink: #111827;
	--gfcsp-ink-soft: #4b5563;
	--gfcsp-ink-faint: #6b7280;
	--gfcsp-line: #e5e7eb;
	--gfcsp-surface: #ffffff;
	--gfcsp-surface-sunken: #f9fafb;
	--gfcsp-brand: #14532d;
	--gfcsp-brand-ink: #ffffff;
	--gfcsp-brand-soft: #ecfdf5;
	--gfcsp-danger: #b91c1c;
	--gfcsp-danger-soft: #fef2f2;
	--gfcsp-warn: #92400e;
	--gfcsp-warn-soft: #fffbeb;
	--gfcsp-info-soft: #eff6ff;
	--gfcsp-info: #1e40af;
	--gfcsp-radius: 10px;

	max-width: 46rem;
	margin: 0 auto;
	color: var(--gfcsp-ink);
	font-size: 1rem;
	line-height: 1.6;
}

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

/* ---------------------------------------------------------------- layout */

.gfcsp-card,
.gfcsp-panel {
	background: var(--gfcsp-surface);
	border: 1px solid var(--gfcsp-line);
	border-radius: var(--gfcsp-radius);
	padding: 1.75rem;
	margin: 0 0 1.25rem;
}

.gfcsp-card--narrow {
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
}

.gfcsp-panel--done {
	border-color: #a7f3d0;
	background: var(--gfcsp-brand-soft);
}

.gfcsp-panel--alert {
	border-color: #fcd34d;
	background: var(--gfcsp-warn-soft);
}

.gfcsp-panel--cta {
	border-color: var(--gfcsp-brand);
	border-width: 2px;
}

.gfcsp-title {
	margin: 0 0 .5rem;
	font-size: 1.35rem;
	line-height: 1.3;
	font-weight: 650;
	color: var(--gfcsp-ink);
}

.gfcsp-subtitle {
	margin: 0 0 .75rem;
	font-size: 1.1rem;
	font-weight: 650;
}

.gfcsp-lede {
	margin: 0 0 1.25rem;
	color: var(--gfcsp-ink-soft);
}

.gfcsp-hint {
	margin: .4rem 0 0;
	font-size: .875rem;
	color: var(--gfcsp-ink-faint);
	line-height: 1.5;
}

.gfcsp-hint--spaced {
	margin-top: 1rem;
}

/* Status while a phone photo is being converted to a JPEG in the browser. */
.gfcsp-file-note {
	font-weight: 600;
	color: var(--gfcsp-ink-soft);
}

.gfcsp-breadcrumb {
	margin: 0 0 .75rem;
	font-size: .875rem;
}

.gfcsp-prose p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- header */

.gfcsp-header {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 1rem;
}

.gfcsp-header__name {
	margin: 0;
	font-weight: 650;
	font-size: 1.05rem;
}

.gfcsp-header__meta {
	margin: 0;
	font-size: .875rem;
	color: var(--gfcsp-ink-faint);
}

.gfcsp-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 1.25rem;
	border-bottom: 1px solid var(--gfcsp-line);
	margin: 0 0 1.5rem;
	padding: 0 0 .75rem;
	font-size: .95rem;
}

.gfcsp-nav__item {
	text-decoration: none;
	color: var(--gfcsp-ink-soft);
	padding: .25rem 0;
	border-bottom: 2px solid transparent;
}

.gfcsp-nav__item.is-current {
	color: var(--gfcsp-ink);
	font-weight: 600;
	border-bottom-color: var(--gfcsp-brand);
}

.gfcsp-nav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4em;
	min-height: 1.5rem;
	box-sizing: border-box;
	margin-left: .3rem;
	padding: .05rem .4rem;
	border-radius: 999px;
	background: var(--gfcsp-surface-sunken);
	border: 1px solid var(--gfcsp-line);
	font-size: .78rem;
	color: var(--gfcsp-ink-faint);
}

.gfcsp-nav__signout {
	margin-left: auto;
}

/* ----------------------------------------------------------------- forms */

.gfcsp-form {
	margin: 0;
}

.gfcsp-form--inline {
	display: inline-block;
	margin: 0;
}

.gfcsp-field {
	margin: 0 0 1.1rem;
}

.gfcsp-field label {
	display: block;
	margin: 0 0 .35rem;
	font-weight: 600;
	font-size: .93rem;
}

.gfcsp input[type="text"],
.gfcsp input[type="email"],
.gfcsp input[type="tel"],
.gfcsp input[type="password"],
.gfcsp select {
	width: 100%;
	padding: .65rem .75rem;
	border: 1px solid #cbd5e1;
	border-radius: 7px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--gfcsp-ink);
	background: var(--gfcsp-surface);
}

.gfcsp input:focus,
.gfcsp select:focus,
.gfcsp button:focus-visible,
.gfcsp a:focus-visible {
	outline: 2px solid var(--gfcsp-brand);
	outline-offset: 2px;
}

.gfcsp input:disabled {
	background: var(--gfcsp-surface-sunken);
	color: var(--gfcsp-ink-faint);
	cursor: not-allowed;
}

.gfcsp-input--code {
	font-size: 1.6rem;
	letter-spacing: .5em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	max-width: 11rem;
	padding-left: 1rem;
}

.gfcsp-input--signature {
	font-size: 1.15rem;
}

.gfcsp-button {
	/* inline-flex rather than inline-block: a <button> centres its own text,
	   an <a> sits on the baseline, and the two are used interchangeably here.
	   Centring on both axes makes them render identically. appearance:none
	   stops Safari drawing a native control that ignores both. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 2.75rem;
	padding: .7rem 1.3rem;
	border: 1px solid var(--gfcsp-brand);
	border-radius: 7px;
	background: var(--gfcsp-brand);
	color: var(--gfcsp-brand-ink);
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.gfcsp-button:hover {
	filter: brightness(1.15);
	color: var(--gfcsp-brand-ink);
}

.gfcsp-button:disabled,
.gfcsp-button[disabled] {
	opacity: .45;
	cursor: not-allowed;
	filter: none;
}

.gfcsp-button--quiet {
	background: var(--gfcsp-surface);
	color: var(--gfcsp-brand);
	border-color: #cbd5e1;
}

.gfcsp-button--quiet:hover {
	color: var(--gfcsp-brand);
	border-color: var(--gfcsp-brand);
	filter: none;
}

.gfcsp-button--large {
	padding: .9rem 1.6rem;
	font-size: 1.05rem;
}

.gfcsp-linkbutton {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .95rem;
	color: var(--gfcsp-brand);
	text-decoration: underline;
	cursor: pointer;
}

.gfcsp-buttonrow {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.1rem 0 0;
	align-items: center;
}

.gfcsp-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin: 1.4rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--gfcsp-line);
	font-size: .93rem;
}

/* ---------------------------------------------------------------- alerts */

.gfcsp-alert {
	border-radius: 8px;
	padding: .85rem 1rem;
	margin: 0 0 1.25rem;
	border: 1px solid;
	font-size: .95rem;
}

.gfcsp-alert p {
	margin: 0 0 .4rem;
}

.gfcsp-alert p:last-child {
	margin-bottom: 0;
}

.gfcsp-alert--error {
	background: var(--gfcsp-danger-soft);
	border-color: #fecaca;
	color: var(--gfcsp-danger);
}

.gfcsp-alert--success {
	background: var(--gfcsp-brand-soft);
	border-color: #a7f3d0;
	color: #065f46;
}

.gfcsp-alert--warning {
	background: var(--gfcsp-warn-soft);
	border-color: #fde68a;
	color: var(--gfcsp-warn);
}

.gfcsp-alert--info {
	background: var(--gfcsp-info-soft);
	border-color: #bfdbfe;
	color: var(--gfcsp-info);
}

/* --------------------------------------------------------------- badges */

.gfcsp-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .25rem .7rem;
	min-height: 1.6rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid;
	box-sizing: border-box;
}

.gfcsp-badge--complete {
	background: var(--gfcsp-brand-soft);
	border-color: #a7f3d0;
	color: #065f46;
}

.gfcsp-badge--in-progress {
	background: var(--gfcsp-info-soft);
	border-color: #bfdbfe;
	color: var(--gfcsp-info);
}

.gfcsp-badge--not-started {
	background: var(--gfcsp-surface-sunken);
	border-color: var(--gfcsp-line);
	color: var(--gfcsp-ink-faint);
}

.gfcsp-badge--resign-required,
.gfcsp-badge--expired {
	background: var(--gfcsp-warn-soft);
	border-color: #fde68a;
	color: var(--gfcsp-warn);
}

/* ------------------------------------------------------------- progress */

.gfcsp-progress {
	margin: 0 0 1.25rem;
}

.gfcsp-progress__bar {
	height: 8px;
	border-radius: 999px;
	background: var(--gfcsp-line);
	overflow: hidden;
}

.gfcsp-progress__fill {
	display: block;
	height: 100%;
	background: var(--gfcsp-brand);
	border-radius: 999px;
	transition: width .3s ease;
}

.gfcsp-progress__label {
	margin: .5rem 0 0;
	font-size: .875rem;
	color: var(--gfcsp-ink-faint);
}

/* ------------------------------------------------------------- doc list */

.gfcsp-doclist {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 1px solid var(--gfcsp-line);
	border-radius: var(--gfcsp-radius);
	overflow: hidden;
	background: var(--gfcsp-surface);
}

.gfcsp-doclist__item {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--gfcsp-line);
}

.gfcsp-doclist__item:last-child {
	border-bottom: 0;
}

.gfcsp-doclist__item.is-signed {
	background: var(--gfcsp-surface-sunken);
}

.gfcsp-doclist__main {
	flex: 1 1 18rem;
	min-width: 0;
}

.gfcsp-doclist__type {
	margin: 0;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gfcsp-ink-faint);
}

.gfcsp-doclist__title {
	margin: .15rem 0 .25rem;
	font-size: 1.05rem;
	font-weight: 650;
	line-height: 1.35;
}

.gfcsp-doclist__meta,
.gfcsp-doclist__signed,
.gfcsp-doclist__flag {
	margin: 0;
	font-size: .85rem;
	color: var(--gfcsp-ink-faint);
}

.gfcsp-doclist__signed {
	color: #065f46;
}

.gfcsp-doclist__flag {
	color: var(--gfcsp-warn);
	font-weight: 600;
}

.gfcsp-doclist__action {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex: 0 0 auto;
}

.gfcsp-tick {
	color: #059669;
	font-size: 1.3rem;
	line-height: 1;
}

/* ------------------------------------------------------------ sign-offs */

.gfcsp-declaration {
	background: var(--gfcsp-surface-sunken);
	border: 1px solid var(--gfcsp-line);
	border-radius: 8px;
	padding: 1rem;
	margin: 0 0 1.25rem;
}

.gfcsp-declaration--major {
	border-left: 4px solid var(--gfcsp-brand);
}

.gfcsp-checkbox {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	cursor: pointer;
	font-weight: 400;
	font-size: .95rem;
	line-height: 1.55;
}

.gfcsp-checkbox input[type="checkbox"] {
	margin: .25rem 0 0;
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
	accent-color: var(--gfcsp-brand);
}

.gfcsp-changenote {
	background: var(--gfcsp-info-soft);
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	padding: .85rem 1rem;
	margin: 1rem 0 0;
}

.gfcsp-changenote p {
	margin: 0;
	font-size: .93rem;
}

.gfcsp-changenote__label {
	font-weight: 650;
	font-size: .8rem !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gfcsp-info);
	margin-bottom: .25rem !important;
}

/* ------------------------------------------------------------------ 2FA */

.gfcsp-steps {
	margin: 0;
	padding: 0 0 0 1.3rem;
}

.gfcsp-steps > li {
	margin: 0 0 1.5rem;
	padding-left: .3rem;
}

.gfcsp-steps > li > p {
	margin: .3rem 0 .75rem;
	color: var(--gfcsp-ink-soft);
	font-size: .95rem;
}

.gfcsp-qr {
	display: inline-block;
	padding: .75rem;
	background: #ffffff;
	border: 1px solid var(--gfcsp-line);
	border-radius: 8px;
	line-height: 0;
}

.gfcsp-qr svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.gfcsp-details {
	margin: .9rem 0 0;
	font-size: .93rem;
}

.gfcsp-details summary {
	cursor: pointer;
	color: var(--gfcsp-brand);
	font-weight: 600;
}

.gfcsp-secret {
	display: inline-block;
	font-size: 1rem;
	letter-spacing: .12em;
	background: var(--gfcsp-surface-sunken);
	border: 1px solid var(--gfcsp-line);
	border-radius: 5px;
	padding: .3rem .55rem;
	word-break: break-all;
}

.gfcsp-codes {
	list-style: none;
	margin: 1rem 0;
	padding: 1rem;
	background: var(--gfcsp-surface-sunken);
	border: 1px solid var(--gfcsp-line);
	border-radius: 8px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: .5rem;
}

.gfcsp-codes code {
	font-size: 1rem;
	letter-spacing: .05em;
}

/* --------------------------------------------------------------- tables */

.gfcsp-keyvalue {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: .4rem 1rem;
	margin: 0;
	font-size: .95rem;
}

.gfcsp-keyvalue dt {
	color: var(--gfcsp-ink-faint);
}

.gfcsp-keyvalue dd {
	margin: 0;
}

.gfcsp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	margin: .5rem 0 1rem;
}

.gfcsp-table th,
.gfcsp-table td {
	text-align: left;
	padding: .55rem .6rem;
	border-bottom: 1px solid var(--gfcsp-line);
	vertical-align: top;
}

.gfcsp-table th {
	font-size: .78rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gfcsp-ink-faint);
}

.gfcsp-hash {
	font-size: .8rem;
	color: var(--gfcsp-ink-faint);
	word-break: break-all;
}

.gfcsp-bullets,
.gfcsp-checklist {
	margin: .75rem 0 0;
	padding: 0 0 0 1.2rem;
}

.gfcsp-checklist {
	list-style: none;
	padding: 0;
}

.gfcsp-checklist li {
	display: flex;
	gap: .6rem;
	align-items: baseline;
	padding: .35rem 0;
	border-bottom: 1px solid var(--gfcsp-line);
}

.gfcsp-checklist li:last-child {
	border-bottom: 0;
}

.gfcsp-checklist__version {
	color: var(--gfcsp-ink-faint);
	font-size: .85rem;
	margin-left: .3rem;
}

.gfcsp-sessionlist {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: .92rem;
}

.gfcsp-sessionlist li {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	align-items: center;
	padding: .55rem 0;
	border-bottom: 1px solid var(--gfcsp-line);
}

.gfcsp-sessionlist__where {
	color: var(--gfcsp-ink-faint);
	font-variant-numeric: tabular-nums;
}

.gfcsp-status-line {
	display: flex;
	gap: .6rem;
	align-items: center;
	margin: 0 0 .75rem;
}

/* ---------------------------------------------------------- certificate */

.gfcsp-certificate {
	background: var(--gfcsp-surface);
	border: 2px solid var(--gfcsp-ink);
	border-radius: var(--gfcsp-radius);
	padding: 2rem;
	margin: 0 0 1.25rem;
}

.gfcsp-certificate__head {
	text-align: center;
	border-bottom: 1px solid var(--gfcsp-line);
	padding-bottom: 1.1rem;
	margin-bottom: 1.4rem;
}

.gfcsp-certificate__company {
	margin: 0;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gfcsp-ink-faint);
}

.gfcsp-certificate__title {
	margin: .3rem 0 0;
	font-size: 1.5rem;
	font-weight: 700;
}

.gfcsp-certificate__subtitle {
	margin: 1.75rem 0 .5rem;
	font-size: 1rem;
	font-weight: 650;
}

.gfcsp-certificate__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1rem 1.5rem;
	margin: 0;
}

.gfcsp-certificate__facts dt {
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gfcsp-ink-faint);
	margin: 0 0 .15rem;
}

.gfcsp-certificate__facts dd {
	margin: 0;
	font-weight: 600;
}

.gfcsp-certificate__foot {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--gfcsp-line);
	font-size: .8rem;
	color: var(--gfcsp-ink-faint);
}

/* --------------------------------------------------------- small screens */

@media (max-width: 40rem) {
	.gfcsp-card,
	.gfcsp-panel,
	.gfcsp-certificate {
		padding: 1.25rem;
	}

	.gfcsp-doclist__item {
		padding: 1rem;
	}

	.gfcsp-doclist__action {
		width: 100%;
	}

	.gfcsp-doclist__action .gfcsp-button {
		flex: 1 1 auto;
		text-align: center;
	}

	.gfcsp-keyvalue {
		grid-template-columns: 1fr;
		gap: 0 0;
	}

	.gfcsp-keyvalue dt {
		margin-top: .6rem;
	}
}

/* ----------------------------------------------------------------- print */

@media print {
	.gfcsp-noprint,
	.gfcsp-nav,
	.gfcsp-header__status {
		display: none !important;
	}

	.gfcsp {
		max-width: none;
	}

	.gfcsp-certificate {
		border: 1px solid #000;
		page-break-inside: avoid;
	}
}

/* Screen reader only, in case the theme does not provide it. */
.gfcsp .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------- induction training */

.gfcsp-eyebrow {
	margin: 0 0 .35rem;
	font-size: .8125rem;
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gfcsp-brand);
}

.gfcsp-step {
	background: var(--gfcsp-surface);
	border: 1px solid var(--gfcsp-line);
	border-left: 3px solid var(--gfcsp-brand);
	border-radius: var(--gfcsp-radius);
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.25rem;
}

.gfcsp-step--done {
	border-left-color: #a7f3d0;
	background: var(--gfcsp-brand-soft);
}

.gfcsp-step__head {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	justify-content: space-between;
}

.gfcsp-step__head .gfcsp-subtitle {
	margin: 0;
}

.gfcsp-step__meta {
	margin: .4rem 0 .9rem;
	color: var(--gfcsp-ink-soft);
	font-size: .9375rem;
}

.gfcsp-badge--todo {
	background: var(--gfcsp-surface-sunken);
	color: var(--gfcsp-ink-soft);
}

/* The module body is authored HTML, so it needs its own typography. */

.gfcsp-module-body h3 {
	margin: 1.75rem 0 .5rem;
	font-size: 1.05rem;
	font-weight: 650;
	color: var(--gfcsp-ink);
}

.gfcsp-module-body h3:first-child {
	margin-top: 0;
}

.gfcsp-module-body p,
.gfcsp-module-body li {
	color: var(--gfcsp-ink-soft);
}

.gfcsp-module-body ul,
.gfcsp-module-body ol {
	margin: 0 0 1rem;
	padding-left: 1.35rem;
}

.gfcsp-module-body li {
	margin: 0 0 .35rem;
}

.gfcsp-module-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	font-size: .9375rem;
}

.gfcsp-module-body th,
.gfcsp-module-body td {
	text-align: left;
	padding: .55rem .75rem;
	border-bottom: 1px solid var(--gfcsp-line);
	vertical-align: top;
}

.gfcsp-module-body th {
	background: var(--gfcsp-surface-sunken);
	font-weight: 650;
	color: var(--gfcsp-ink);
}

/* Wide tables scroll inside the card rather than pushing the page sideways. */
.gfcsp-module-body {
	overflow-x: auto;
}

/* ------------------------------------------------- assessment */

.gfcsp-question {
	border: 1px solid var(--gfcsp-line);
	margin: 0 0 1.25rem;
}

.gfcsp-question__legend {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	align-items: baseline;
	padding: 0;
	margin: 0 0 .75rem;
	font-size: .8125rem;
}

.gfcsp-question__number {
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gfcsp-brand);
}

.gfcsp-question__module {
	color: var(--gfcsp-ink-faint);
}

.gfcsp-question__body {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 650;
	line-height: 1.45;
	color: var(--gfcsp-ink);
}

.gfcsp-choices {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.gfcsp-choice {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	padding: .85rem 1rem;
	border: 1px solid var(--gfcsp-line);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .12s, background .12s;
}

.gfcsp-choice:hover {
	border-color: var(--gfcsp-brand);
	background: var(--gfcsp-surface-sunken);
}

.gfcsp-choice input {
	margin: .2rem 0 0;
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--gfcsp-brand);
}

/* Selecting an option should be obvious at a glance on a phone in daylight. */
.gfcsp-choice:has(input:checked) {
	border-color: var(--gfcsp-brand);
	border-width: 2px;
	padding: calc(.85rem - 1px) calc(1rem - 1px);
	background: var(--gfcsp-brand-soft);
}

.gfcsp-choice:focus-within {
	outline: 2px solid var(--gfcsp-brand);
	outline-offset: 2px;
}

.gfcsp-choice__body {
	line-height: 1.5;
	color: var(--gfcsp-ink);
}

.gfcsp-list--review .gfcsp-list__title {
	font-weight: 650;
}

.gfcsp-linklist {
	margin: 0;
	padding-left: 1.25rem;
}

.gfcsp-linklist li {
	margin: 0 0 .35rem;
}

.gfcsp-certificate__note {
	font-size: .8125rem;
	font-weight: 400;
	color: var(--gfcsp-ink-faint);
}

/* --------------------------------------------------- list component
 *
 * Used for the training modules and the review list on a failed
 * assessment. Every row is an opaque panel: the portal is often placed
 * on a page with a photographic background, and text sitting directly
 * on a photo is unreadable on a phone in daylight.
 */

.gfcsp-list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	counter-reset: gfcsp-step;
}

.gfcsp-list__item {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	align-items: flex-start;
	justify-content: space-between;
	background: var(--gfcsp-surface);
	border: 1px solid var(--gfcsp-line);
	border-radius: var(--gfcsp-radius);
	padding: 1.1rem 1.35rem;
}

.gfcsp-list__item.is-done {
	border-color: #a7f3d0;
	background: var(--gfcsp-brand-soft);
}

.gfcsp-list__main {
	flex: 1 1 16rem;
	min-width: 0;
}

.gfcsp-list__aside {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.gfcsp-list__title {
	margin: 0 0 .25rem;
	font-size: 1.05rem;
	font-weight: 650;
	line-height: 1.35;
	color: var(--gfcsp-ink);
}

.gfcsp-list__title a {
	color: inherit;
	text-decoration: none;
}

.gfcsp-list__title a:hover,
.gfcsp-list__title a:focus {
	text-decoration: underline;
}

.gfcsp-list__meta {
	margin: .2rem 0 0;
	font-size: .875rem;
	color: var(--gfcsp-ink-soft);
	line-height: 1.5;
}

/* Numbered modules: the order is real, so show it. */
.gfcsp-list--modules .gfcsp-list__main {
	position: relative;
	padding-left: 2.15rem;
}

.gfcsp-list--modules .gfcsp-list__main::before {
	counter-increment: gfcsp-step;
	content: counter(gfcsp-step);
	position: absolute;
	left: 0;
	top: .05rem;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--gfcsp-brand);
	color: var(--gfcsp-brand-ink);
	font-size: .8125rem;
	font-weight: 650;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gfcsp-list--review .gfcsp-list__item {
	display: block;
}

/* ------------------------------------ readable on any background
 *
 * The portal is dropped into whatever page the site owner builds, and
 * that page may have a full-bleed photograph behind it. Anything that
 * carries words gets its own opaque surface rather than relying on
 * whatever happens to be underneath.
 */

.gfcsp-progress {
	background: var(--gfcsp-surface);
	border: 1px solid var(--gfcsp-line);
	border-radius: var(--gfcsp-radius);
	padding: 1rem 1.35rem;
	margin: 0 0 1.25rem;
}

.gfcsp-header,
.gfcsp-nav {
	background: var(--gfcsp-surface);
	border: 1px solid var(--gfcsp-line);
	border-radius: var(--gfcsp-radius);
}

.gfcsp-header {
	padding: 1rem 1.35rem;
	margin: 0 0 1rem;
}

.gfcsp-nav {
	padding: .35rem .5rem;
	margin: 0 0 1.25rem;
}

/* Standalone hints — the "back to..." links that sit between panels. */
.gfcsp-hint--spaced {
	background: var(--gfcsp-surface);
	border: 1px solid var(--gfcsp-line);
	border-radius: var(--gfcsp-radius);
	padding: .75rem 1.35rem;
	margin-top: 1.25rem;
}

/* Inside a panel there is already a surface, so do not double up. */
.gfcsp-card .gfcsp-hint--spaced,
.gfcsp-panel .gfcsp-hint--spaced {
	background: none;
	border: 0;
	padding: 0;
}

.gfcsp-linklist {
	margin: 0;
	padding-left: 1.25rem;
}

.gfcsp-linklist li {
	margin: 0 0 .35rem;
	color: var(--gfcsp-ink-soft);
}

/* Alerts already carry their own tint; make sure it is opaque. */
.gfcsp-alert {
	background: var(--gfcsp-surface);
}

/* ------------------------------------------------ remaining components */

.gfcsp-badge--done {
	background: var(--gfcsp-brand);
	color: var(--gfcsp-brand-ink);
}

.gfcsp-button--small {
	padding: .5rem .9rem;
	font-size: .875rem;
}

.gfcsp-quiz {
	display: block;
}

.gfcsp-header__identity {
	min-width: 0;
}

.gfcsp-form--code {
	max-width: 20rem;
}

.gfcsp-sessionlist__when {
	font-size: .875rem;
	color: var(--gfcsp-ink-faint);
	white-space: nowrap;
}

.gfcsp-signoff {
	background: var(--gfcsp-surface-sunken);
	border: 1px solid var(--gfcsp-line);
	border-radius: var(--gfcsp-radius);
	padding: 1rem 1.25rem;
	margin: 0 0 1.25rem;
}

/* ------------------------------------------- reference documents */

.gfcsp-section-title {
	/* No bottom margin: any gap here lets the page background show through
	   between this and the note below, which reads as a dividing line. */
	margin: 2rem 0 0;
	font-size: 1.15rem;
	font-weight: 650;
	color: var(--gfcsp-ink);
	background: var(--gfcsp-surface);
	border: 1px solid var(--gfcsp-line);
	border-bottom: 0;
	border-radius: var(--gfcsp-radius) var(--gfcsp-radius) 0 0;
	padding: .9rem 1.35rem .5rem;
}

.gfcsp-section-note {
	margin: 0 0 1rem;
	font-size: .9375rem;
	color: var(--gfcsp-ink-soft);
	background: var(--gfcsp-surface);
	border: 1px solid var(--gfcsp-line);
	border-top: 0;
	border-radius: 0 0 var(--gfcsp-radius) var(--gfcsp-radius);
	padding: 0 1.35rem .9rem;
}

.gfcsp-badge--optional {
	background: var(--gfcsp-surface-sunken);
	color: var(--gfcsp-ink-soft);
	border: 1px solid var(--gfcsp-line);
}


/* ------------------------------------------------ theme reset defence
 *
 * The portal is dropped into whatever theme the site runs. Hello Elementor,
 * and many others, reset buttons and form controls with selectors like
 * [type=submit] — specificity (0,1,0), identical to a single class. On a tie
 * the later stylesheet wins, which is not something a plugin can rely on.
 *
 * Everything below repeats the component rules one level more specific, so
 * the portal looks the same no matter what the theme does or when it loads.
 */

.gfcsp .gfcsp-button,
.gfcsp button.gfcsp-button,
.gfcsp a.gfcsp-button {
	/* Safari honours -webkit-appearance: button by drawing a native control,
	   and a native control lays out its own label — ignoring the padding and
	   flex alignment set here. Hello Elementor's reset sets exactly that, so
	   without turning it off these rules apply everywhere except Safari,
	   which is most phones on a work site. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 2.75rem;
	padding: .7rem 1.3rem;
	border: 1px solid var(--gfcsp-brand);
	border-radius: 7px;
	background: var(--gfcsp-brand);
	background-color: var(--gfcsp-brand);
	color: var(--gfcsp-brand-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
}

.gfcsp .gfcsp-button:hover,
.gfcsp .gfcsp-button:focus,
.gfcsp button.gfcsp-button:hover,
.gfcsp button.gfcsp-button:focus {
	background-color: #0f3d21;
	border-color: #0f3d21;
	color: var(--gfcsp-brand-ink);
	text-decoration: none;
}

.gfcsp .gfcsp-button--quiet,
.gfcsp button.gfcsp-button--quiet,
.gfcsp a.gfcsp-button--quiet {
	background: var(--gfcsp-surface);
	background-color: var(--gfcsp-surface);
	color: var(--gfcsp-brand);
	border-color: var(--gfcsp-line);
}

.gfcsp .gfcsp-button--quiet:hover,
.gfcsp .gfcsp-button--quiet:focus {
	background-color: var(--gfcsp-surface-sunken);
	color: var(--gfcsp-brand);
	border-color: var(--gfcsp-brand);
}

.gfcsp .gfcsp-button--small {
	min-height: 2.25rem;
	padding: .5rem .9rem;
	font-size: .875rem;
}

.gfcsp .gfcsp-button--large {
	min-height: 3.1rem;
	padding: .9rem 1.6rem;
	font-size: 1.05rem;
}

.gfcsp .gfcsp-button[disabled],
.gfcsp .gfcsp-button:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.gfcsp .gfcsp-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .25rem .7rem;
	min-height: 1.6rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.2;
	box-sizing: border-box;
}

.gfcsp .gfcsp-nav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4em;
	min-height: 1.5rem;
	box-sizing: border-box;
}

/* The reset also restyles inputs, which would otherwise not match the
   buttons sitting beside them. */
.gfcsp .gfcsp-field input[type="text"],
.gfcsp .gfcsp-field input[type="email"],
.gfcsp .gfcsp-field input[type="password"],
.gfcsp .gfcsp-field input[type="tel"],
.gfcsp .gfcsp-field textarea,
.gfcsp .gfcsp-field select {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	box-sizing: border-box;
}


/* Safari draws native form controls unless told not to, which is why fields
   and buttons look right everywhere else and slightly wrong on an iPhone. */

.gfcsp input[type="text"],
.gfcsp input[type="email"],
.gfcsp input[type="password"],
.gfcsp input[type="tel"],
.gfcsp input[type="number"],
.gfcsp textarea,
.gfcsp select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 7px;
}

/* Checkboxes and radios must keep their native appearance — replacing them
   wholesale would mean rebuilding the tick, and they are what a worker taps
   to make a legal declaration. */
.gfcsp input[type="checkbox"],
.gfcsp input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
}


/* ------------------------------------------------ card footer links
 *
 * Two links sitting side by side under a form. align-items:center lines up
 * their boxes, which is not the same as lining up their text — if the theme
 * gives links a different line-height, centred boxes still leave the words
 * on different lines. baseline aligns what the reader actually sees.
 */

.gfcsp .gfcsp-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: .5rem 1.75rem;
	margin: 1.4rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--gfcsp-line);
	font-size: .93rem;
	line-height: 1.5;
}

.gfcsp .gfcsp-card__footer a {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	vertical-align: baseline;
}


/* ------------------------------------------- buttons inside flex rows
 *
 * A button sitting in a document row is a flex item, and a flex item's
 * height is decided by its parent unless it says otherwise. Chromium and
 * Safari disagree about what an <a display:flex> does here: Chromium leaves
 * it at its content height, Safari stretches it to the row — which on a
 * three-line row makes a very tall button with its label adrift.
 *
 * align-self:center settles it in the element itself rather than relying on
 * the parent's align-items, so no parent, theme or browser can stretch it.
 */

.gfcsp .gfcsp-button,
.gfcsp a.gfcsp-button,
.gfcsp button.gfcsp-button {
	align-self: center;
	flex-shrink: 0;
	height: auto;
	vertical-align: middle;
}

/* The action column itself must not stretch either, or it grows and takes
   the button with it. */
.gfcsp .gfcsp-doclist__action,
.gfcsp .gfcsp-list__aside {
	align-self: center;
	align-items: center;
}

/* At phone width the button goes full width, where it should fill the row
   across but still hug its own text vertically. */
@media (max-width: 640px) {
	/* Width is the point here, and in a horizontal flex row width is the MAIN
	   axis — so width:100% and flex-basis handle it. align-self controls the
	   CROSS axis, which is vertical: setting it to stretch made the button as
	   tall as the row rather than as wide as it. Beside a three-line document
	   title that produced a very tall button with its label adrift, which is
	   exactly the fault this was meant to prevent. */
	.gfcsp .gfcsp-doclist__action {
		width: 100%;
	}

	.gfcsp .gfcsp-doclist__action .gfcsp-button {
		align-self: center;
		width: 100%;
		flex: 1 1 auto;
		height: auto;
	}
}


/* ------------------------------------------------------ portal nav
 *
 * Each item is a label with an optional counter beside it. Left as inline
 * content the two sit on a shared baseline, so an item with a counter ends
 * up a different height from one without, and any stray whitespace inside
 * the counter changes its size. Making the item a flex row removes both:
 * the label and counter are aligned to each other, not to a baseline.
 */

.gfcsp .gfcsp-nav {
	align-items: stretch;
}

.gfcsp .gfcsp-nav__item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 2rem;
	padding: .25rem 0;
	line-height: 1.3;
	white-space: nowrap;
}

.gfcsp .gfcsp-nav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* No min-width: it turned a short count like 5/5 into a circle while a
	   longer one like 4/16 stayed a pill. Padding alone keeps them the same
	   shape whatever the numbers are. */
	min-width: 0;
	height: 1.5rem;
	margin: 0;
	padding: 0 .5rem;
	border-radius: 999px;
	font-size: .78rem;
	line-height: 1;
	white-space: nowrap;
	flex: 0 0 auto;
	align-self: center;
}

.gfcsp .gfcsp-nav__signout {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	margin-left: auto;
	white-space: nowrap;
}


/* ---------------------------------------------- optical centring
 *
 * Centring a line of text geometrically does not make it look centred.
 * The glyph box runs from the tallest ascender to the lowest descender,
 * so a label like "Read and sign" — with a descending g — has its box
 * dragged downwards while the capitals, which is what the eye reads as
 * the text, sit above the middle. Centre the box and the words look low.
 *
 * The correction is a little more padding underneath than above, which
 * lifts the content off the bottom. Tuned for 16px labels; --gfcsp-lift
 * is here so it can be adjusted in one place rather than five.
 */

.gfcsp {
	--gfcsp-lift: 2px;
	--gfcsp-lift-small: 1px;
}

.gfcsp .gfcsp-button,
.gfcsp a.gfcsp-button,
.gfcsp button.gfcsp-button {
	padding-top: calc(.7rem - var(--gfcsp-lift));
	padding-bottom: calc(.7rem + var(--gfcsp-lift));
}

.gfcsp .gfcsp-button--small {
	padding-top: calc(.5rem - var(--gfcsp-lift-small));
	padding-bottom: calc(.5rem + var(--gfcsp-lift-small));
}

.gfcsp .gfcsp-button--large {
	padding-top: calc(.9rem - var(--gfcsp-lift));
	padding-bottom: calc(.9rem + var(--gfcsp-lift));
}

/* Status pills carry the same problem — "In progress" has a descending p. */
.gfcsp .gfcsp-badge {
	padding-top: calc(.25rem - var(--gfcsp-lift-small));
	padding-bottom: calc(.25rem + var(--gfcsp-lift-small));
}

.gfcsp .gfcsp-nav__count {
	padding-top: var(--gfcsp-lift-small);
	padding-bottom: calc(var(--gfcsp-lift-small) * 3);
}

/* ---------------------------------------------- nav bar spacing
 *
 * The current item's underline was sitting flush against the bottom edge
 * of the bar, which reads as clipped rather than deliberate. Give the row
 * room so the underline has space beneath it, and centre everything in it.
 */

.gfcsp .gfcsp-nav {
	align-items: center;
	padding: .5rem .85rem .35rem;
	gap: .25rem 1.5rem;
}

.gfcsp .gfcsp-nav__item {
	padding-top: .3rem;
	padding-bottom: .35rem;
	border-bottom-width: 2px;
}


/* ---------------------------------------------- label position
 *
 * Flex centring, which renders reliably everywhere. The lift below moves
 * the text up off the bottom: centring a line box geometrically leaves the
 * capitals — the part the eye reads — sitting low, because the box is
 * dragged down by descenders like the g in "sign".
 *
 * An earlier attempt replaced flex with a fixed line-height. It measured
 * better but made the label vanish in Safari, so it is not worth it: a
 * button with no text on it is a much worse failure than one whose text
 * sits a pixel low.
 */

.gfcsp {
	--gfcsp-lift: 3px;
	--gfcsp-lift-small: 2px;
}

.gfcsp .gfcsp-button,
.gfcsp a.gfcsp-button,
.gfcsp button.gfcsp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 2.75rem;
	line-height: 1.2;
	padding: calc(.7rem - var(--gfcsp-lift)) 1.3rem calc(.7rem + var(--gfcsp-lift));
	text-align: center;
	white-space: nowrap;
	box-sizing: border-box;
}

.gfcsp .gfcsp-button--small {
	min-height: 2.25rem;
	padding: calc(.5rem - var(--gfcsp-lift-small)) .9rem calc(.5rem + var(--gfcsp-lift-small));
}

.gfcsp .gfcsp-button--large {
	min-height: 3.1rem;
	padding: calc(.9rem - var(--gfcsp-lift)) 1.6rem calc(.9rem + var(--gfcsp-lift));
}

.gfcsp .gfcsp-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.65rem;
	height: auto;
	line-height: 1.2;
	padding: calc(.25rem - var(--gfcsp-lift-small)) .7rem calc(.25rem + var(--gfcsp-lift-small));
	white-space: nowrap;
	box-sizing: border-box;
}

.gfcsp .gfcsp-nav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.5rem;
	height: auto;
	line-height: 1.2;
	padding: 0 .5rem calc(var(--gfcsp-lift-small) * 1.5);
	white-space: nowrap;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.gfcsp .gfcsp-doclist__action .gfcsp-button {
		display: flex;
		width: 100%;
	}
}


/* ---------------------------------------------- Safari label lift
 *
 * Safari places the glyphs inside a centred line box lower than Blink does,
 * so a label that measures centred in Chrome reads as sitting on the floor
 * of the button in Safari — which is most phones on a work site.
 *
 * -webkit-named-image() is recognised only by Safari, so this raises the
 * lift there without pushing the label too high on Chrome or Android.
 *
 * The step is deliberately large. Earlier adjustments moved the text by a
 * single pixel, which nobody can see, so each round produced "no change"
 * and told us nothing.
 */
@supports (background: -webkit-named-image(i)) {
	.gfcsp {
		--gfcsp-lift: 10px;
		--gfcsp-lift-small: 5px;
	}
}


/* ---------------------------------------------- nav bar alignment
 *
 * Three things were fighting here. The counter pills had asymmetric padding
 * of their own, which lifted them clear of the words beside them. The
 * current item carries a bottom border the others do not draw, which
 * changed its height. And the labels were being aligned as boxes rather
 * than as text.
 *
 * Fixed by giving every item the same box: one height, one border width
 * (transparent when not current), and the label and its counter centred
 * against each other rather than against the row.
 */

.gfcsp .gfcsp-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 1.5rem;
	padding: .55rem .85rem;
}

.gfcsp .gfcsp-nav__item,
.gfcsp .gfcsp-nav__signout {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	height: 2rem;
	padding: 0;
	line-height: 1;
	border-bottom: 2px solid transparent;
	box-sizing: content-box;
	white-space: nowrap;
}

.gfcsp .gfcsp-nav__item.is-current {
	border-bottom-color: var(--gfcsp-brand);
}

.gfcsp .gfcsp-nav__signout {
	margin-left: auto;
}

/* The counter sits centred against its label, with even padding, so it
   cannot float above the words. */
.gfcsp .gfcsp-nav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	height: 1.4rem;
	min-height: 0;
	padding: 0 .5rem;
	margin: 0;
	line-height: 1;
	border-radius: 999px;
	font-size: .78rem;
	white-space: nowrap;
	box-sizing: border-box;
	flex: 0 0 auto;
}


/* ================================================================
 * Final label positioning
 *
 * Three separate adjustments, because three different elements need
 * different amounts:
 *
 *  - <button> and <a> styled as buttons measure identically in Blink but
 *    not in Safari, where a <button> places its label higher. Same class,
 *    same padding, different result — so the button element gets its own
 *    smaller lift.
 *  - Badges and counters were over-lifted and sat high.
 *
 * Each is a single value, so any of them can be nudged on its own without
 * disturbing the others.
 * ================================================================ */

.gfcsp {
	--gfcsp-lift-btn-el: var(--gfcsp-lift);   /* <button> elements */
	--gfcsp-badge-lift: 2px;
	--gfcsp-count-drop: 2px;                  /* pushes counters DOWN */
}

@supports (background: -webkit-named-image(i)) {
	.gfcsp {
		/* Safari puts a <button> label higher than the same label in an <a>,
		   so it needs roughly 6px less lift to end up in the same place. */
		--gfcsp-lift-btn-el: 4px;
		--gfcsp-badge-lift: 1px;
		--gfcsp-count-drop: 3px;
	}
}

.gfcsp button.gfcsp-button,
.gfcsp input[type="submit"].gfcsp-button {
	padding-top: calc(.7rem - var(--gfcsp-lift-btn-el));
	padding-bottom: calc(.7rem + var(--gfcsp-lift-btn-el));
}

.gfcsp .gfcsp-badge {
	padding-top: calc(.25rem - var(--gfcsp-badge-lift));
	padding-bottom: calc(.25rem + var(--gfcsp-badge-lift));
}

/* Counters sat high, so this pushes them down rather than lifting them.
   Padding is split either side of the content box, so the visible shift is
   about half the value — hence doubling it here. */
.gfcsp .gfcsp-nav__count {
	padding-top: calc(var(--gfcsp-count-drop) * 2);
	padding-bottom: 0;
	height: auto;
	min-height: 1.4rem;
}


/* ---------------------------------------------- 2FA footer alignment
 *
 * "Cancel" is a submit button wrapped in its own <form> so it can post a
 * logout. That <form> is what sits in the footer's flex row, not the button
 * — so the button's text cannot line up with the link beside it, and the two
 * end up on different levels.
 *
 * display:contents removes the form from the layout while leaving it in the
 * document, so the button becomes a direct sibling of the link and the two
 * share a baseline. The form still submits exactly as before; only its box
 * disappears.
 */

.gfcsp .gfcsp-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: .5rem 1.75rem;
}

.gfcsp .gfcsp-card__footer .gfcsp-form--inline {
	display: contents;
}

.gfcsp .gfcsp-card__footer .gfcsp-linkbutton,
.gfcsp .gfcsp-card__footer a {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: .95rem;
	line-height: 1.5;
	vertical-align: baseline;
}

/* ---------------------------------------------- button label, 7px lower
 *
 * Applies to <button> elements — "Verify and sign in" and "Sign in" are the
 * same component, so both move together.
 */

.gfcsp {
	--gfcsp-lift-btn-el: -4px;
}

@supports (background: -webkit-named-image(i)) {
	.gfcsp {
		--gfcsp-lift-btn-el: -3px;
	}
}


/* ---------------------------------------------- badge and counter, split
 *
 * "Reference" and "In progress" are the same component but sit differently:
 * one is a document badge, the other the status badge in the header. With a
 * single shared value, correcting one always broke the other, so they now
 * have their own.
 *
 *   --gfcsp-badge-lift    document badges (Reference)   — already correct
 *   --gfcsp-status-lift   the header status badge       — was sitting low
 *   --gfcsp-count-drop    nav counters (4/16, 5/5)      — was sitting high
 */

.gfcsp {
	--gfcsp-status-lift: 3px;
	--gfcsp-count-drop: 5px;
}

@supports (background: -webkit-named-image(i)) {
	.gfcsp {
		--gfcsp-status-lift: 4px;
		--gfcsp-count-drop: 6px;
	}
}

/* The header status badge, whichever status it is showing. */
.gfcsp .gfcsp-header__status .gfcsp-badge {
	padding-top: calc(.25rem - var(--gfcsp-status-lift));
	padding-bottom: calc(.25rem + var(--gfcsp-status-lift));
}


/* ---------------------------------------------- counter position
 *
 * The counter sits too high next to its label. Padding was the wrong tool:
 * it moves the digits within the pill and stretches the pill in the process,
 * which is visible as a taller lozenge with the numbers sagging inside it.
 *
 * The pill itself needs to move. A relative offset shifts the whole thing
 * without touching its shape or the row's height.
 */

.gfcsp {
	--gfcsp-count-nudge: 2px;
}

@supports (background: -webkit-named-image(i)) {
	.gfcsp {
		--gfcsp-count-nudge: 3px;
	}
}

.gfcsp .gfcsp-nav__count {
	position: relative;
	top: var(--gfcsp-count-nudge);
	padding: 0 .5rem;
	height: 1.4rem;
	min-height: 0;
}


/* ---------------------------------------------- final nudges
 *
 * The tick and "View again" sit in the same flex row, centred against each
 * other — but the tick is set at 1.3rem against the link's 0.95rem, and a
 * check glyph sits high within its own em box. Centring the boxes therefore
 * leaves the tick riding above the words.
 *
 * Aligning them on the text baseline instead lines up what is actually
 * visible, whatever size each is set at.
 */

.gfcsp {
	--gfcsp-count-nudge: 7px;    /* 4px lower than before */
	--gfcsp-status-lift: 8px;    /* 4px higher than before */
}

@supports (background: -webkit-named-image(i)) {
	.gfcsp {
		--gfcsp-count-nudge: 7px;
		--gfcsp-status-lift: 8px;
	}
}

.gfcsp .gfcsp-doclist__action:has(.gfcsp-tick) {
	align-items: baseline;
}

.gfcsp .gfcsp-tick {
	font-size: 1.3rem;
	line-height: 1;
	position: relative;
	top: 1px;
}

/* :has() is widely supported now, but if it is missing the tick still needs
   to come down to meet the link. */
@supports not selector(:has(*)) {
	.gfcsp .gfcsp-tick {
		top: 3px;
	}
}


/* ================================================================
 * Portal nav, simplified
 *
 * Two destinations, both set in the same weight, no underline. Without a
 * rule beneath the current item there still has to be some way to tell
 * which page you are on, so the current item keeps full-strength ink while
 * the other sits back in a softer grey. Quieter than a line, and it does
 * not add anything to align.
 * ================================================================ */

.gfcsp .gfcsp-nav__item {
	font-weight: 600;
	border-bottom: 0;
	padding: 0;
	color: var(--gfcsp-ink-faint);
}

.gfcsp .gfcsp-nav__item.is-current {
	color: var(--gfcsp-ink);
	border-bottom: 0;
}

.gfcsp .gfcsp-nav__item:hover,
.gfcsp .gfcsp-nav__item:focus-visible {
	color: var(--gfcsp-ink);
}

/* The counter follows its label, so a page you are not on reads as one
   quiet unit rather than a grey word beside a dark pill. */
.gfcsp .gfcsp-nav__item .gfcsp-nav__count {
	background: var(--gfcsp-surface-sunken);
	border-color: var(--gfcsp-line);
	color: var(--gfcsp-ink-faint);
}

.gfcsp .gfcsp-nav__item.is-current .gfcsp-nav__count {
	background: var(--gfcsp-brand-soft);
	border-color: #a7f3d0;
	color: var(--gfcsp-brand);
}

/* Account now lives in the header line under the worker's name. */
.gfcsp .gfcsp-header__sep {
	margin: 0 .4rem;
	color: var(--gfcsp-ink-faint);
}

.gfcsp .gfcsp-header__account {
	color: var(--gfcsp-brand);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.gfcsp .gfcsp-header__account:hover,
.gfcsp .gfcsp-header__account:focus-visible,
.gfcsp .gfcsp-header__account.is-current {
	border-bottom-color: currentColor;
}


/* Sign out kept a transparent 2px border from when the current item was
   marked with a rule underneath. That border is gone now, and the leftover
   was enough to sit it a pixel above its neighbours. */
.gfcsp .gfcsp-nav__signout {
	border-bottom: 0;
	padding: 0;
}


/* ---------------------------------------------- account screen buttons
 *
 * Same component as the sign-in button, but sitting differently on this
 * screen — so it gets its own value rather than sharing one. Positive lift
 * raises the label; the sign-in and 2FA buttons keep theirs.
 */

/* Specificity has to beat `.gfcsp button.gfcsp-button` (0,2,1), which sets
   the shared button lift — hence the doubled container class and the
   element name. */
.gfcsp.gfcsp-view-security button.gfcsp-button,
.gfcsp.gfcsp-view-security a.gfcsp-button,
.gfcsp.gfcsp-view-recovery-codes button.gfcsp-button,
.gfcsp.gfcsp-view-recovery-codes a.gfcsp-button {
	padding-top: calc(.7rem - var(--gfcsp-lift-account));
	padding-bottom: calc(.7rem + var(--gfcsp-lift-account));
}

.gfcsp {
	--gfcsp-lift-account: 7px;   /* 10px higher than the -3px used elsewhere */
}

@supports (background: -webkit-named-image(i)) {
	.gfcsp {
		--gfcsp-lift-account: 7px;
	}
}


/* ---------------------------------------------- account page rows
 *
 * A badge is taller than the text beside it, so centring the two boxes
 * leaves their words on different levels. Aligning on the text baseline
 * lines up what is actually read, and lets the pill sit around it.
 */

.gfcsp .gfcsp-status-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1rem .6rem;
	margin: .35rem 0 .75rem;      /* closer to the heading above */
}

.gfcsp .gfcsp-sessionlist li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem 1rem;
	padding: .55rem 0;
}

/* Inside these rows the badge is a lozenge wrapped around a word, so it
   needs to hang off the same baseline rather than sit centred on the box. */
.gfcsp .gfcsp-status-line .gfcsp-badge,
.gfcsp .gfcsp-sessionlist .gfcsp-badge {
	position: relative;
	top: var(--gfcsp-row-badge-nudge);
}

.gfcsp {
	/* Zero: baseline alignment already puts the badge's text on the same
	   line as its neighbour, so any nudge here is pure overcorrection.
	   Kept as a variable in case a future badge needs one. */
	--gfcsp-row-badge-nudge: 0px;
}

/* The heading above a status line does not need its full gap. */
.gfcsp .gfcsp-title + .gfcsp-status-line {
	margin-top: 0;
}


/* ================================================================
 * Account rows — inline layout, not flex
 *
 * These rows were using flex with align-items:baseline. That measures
 * correctly in Blink but Safari mishandles baseline alignment in a
 * wrapping flex row, and the items ended up scattered across two lines.
 *
 * Inline layout puts text on a shared baseline by default — it is what
 * inline boxes have always done, implemented the same way in every engine
 * for decades. Nothing here for a layout algorithm to interpret.
 * ================================================================ */

.gfcsp .gfcsp-status-line,
.gfcsp .gfcsp-sessionlist li {
	display: block;
	margin: .35rem 0 .75rem;
}

.gfcsp .gfcsp-sessionlist li {
	margin: 0;
	padding: .55rem 0;
	border-bottom: 1px solid var(--gfcsp-line);
}

.gfcsp .gfcsp-status-line > *,
.gfcsp .gfcsp-sessionlist li > * {
	display: inline-block;
	vertical-align: baseline;
	margin-right: 1rem;
}

.gfcsp .gfcsp-status-line > *:last-child,
.gfcsp .gfcsp-sessionlist li > *:last-child {
	margin-right: 0;
}

/* The badge sits on the same baseline as the words beside it. */
.gfcsp .gfcsp-status-line .gfcsp-badge,
.gfcsp .gfcsp-sessionlist .gfcsp-badge {
	position: static;
	top: auto;
	vertical-align: baseline;
}

/* ---------------------------------------------- account buttons, 3px up */

.gfcsp {
	--gfcsp-lift-account: 10px;
}

@supports (background: -webkit-named-image(i)) {
	.gfcsp {
		--gfcsp-lift-account: 10px;
	}
}


/* ================================================================
 * Portal nav — inline layout, not flex
 *
 * Same fault as the account rows: a flex row aligning a label against a
 * counter pill, which Safari places differently from Blink. Inline layout
 * puts them on a shared baseline the way inline boxes always have, so the
 * label, its counter and the sign-out link all sit on one line.
 *
 * Sign out floats right rather than using margin-left:auto, since that is
 * a flex property and flex is exactly what is being removed here.
 * ================================================================ */

.gfcsp .gfcsp-nav {
	display: block;
	padding: .6rem .85rem;
	line-height: 1.5;
}

.gfcsp .gfcsp-nav::after {
	content: "";
	display: block;
	clear: both;
}

.gfcsp .gfcsp-nav__item {
	display: inline-block;
	vertical-align: baseline;
	margin: 0 1.75rem 0 0;
	padding: 0;
	border-bottom: 0;
	height: auto;
	min-height: 0;
	line-height: 1.5;
}

.gfcsp .gfcsp-nav__count {
	display: inline-block;
	vertical-align: baseline;
	position: static;
	top: auto;
	margin-left: .4rem;
	line-height: 1.2;
}

.gfcsp .gfcsp-nav__signout {
	display: inline-block;
	vertical-align: baseline;
	float: right;
	margin: 0;
	padding: 0;
	border-bottom: 0;
	height: auto;
	min-height: 0;
	line-height: 1.5;
}


/* ================================================================
 * Nav, compact
 *
 * Each item now carries its own state, so the row holds more. Tighter
 * padding and smaller badges keep it from becoming a block of its own,
 * and the items sit one per line — which reads clearly and stops the
 * layout changing shape with the width.
 * ================================================================ */

.gfcsp .gfcsp-nav {
	display: block;
	padding: .45rem .85rem;
	line-height: 1.4;
}

.gfcsp .gfcsp-nav__item {
	display: block;
	margin: 0;
	padding: .3rem 0;
	line-height: 1.4;
}

.gfcsp .gfcsp-nav__count {
	display: inline-block;
	vertical-align: baseline;
	margin-left: .4rem;
	padding: 0 .45rem;
	min-height: 1.3rem;
	height: auto;
	font-size: .75rem;
	line-height: 1.3rem;
}

/* The state badge is a label, not a button — quieter than the counter. */
.gfcsp .gfcsp-nav__state {
	display: inline-block;
	vertical-align: baseline;
	margin-left: .45rem;
	padding: 0 .5rem;
	min-height: 1.3rem;
	height: auto;
	/* Same size and line box as the counter beside it: a different font size
	   inside an identical line box puts the baseline in a different place,
	   which showed up as a one-pixel step between the two pills. */
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.3rem;
	letter-spacing: .01em;
}

/* Sign out sits where the status badge used to, top right of the header. */
.gfcsp .gfcsp-header__status {
	align-self: center;
}

.gfcsp .gfcsp-header__status .gfcsp-linkbutton {
	font-size: .95rem;
	white-space: nowrap;
}


/* ---------------------------------------------- header meta line
 *
 * "Employee · Account" was wrapping, which left a long gap on the first
 * line and dropped Account onto its own. It is short enough to hold
 * together on one line, so it is told to.
 */

.gfcsp .gfcsp-header__meta {
	white-space: nowrap;
	margin: .1rem 0 0;
	line-height: 1.4;
}

.gfcsp .gfcsp-header__sep {
	margin: 0 .3rem;
}

/* ---------------------------------------------- nav, tighter still
 *
 * The state badge sits on its own line under its label, so the spacing
 * between rows is what makes the box tall. Less padding on each row and a
 * closer badge bring the whole thing in without crowding the text.
 */

.gfcsp .gfcsp-nav {
	padding: .5rem .85rem .55rem;
	line-height: 1.35;
}

.gfcsp .gfcsp-nav__item {
	padding: .15rem 0;
	line-height: 1.35;
}

.gfcsp .gfcsp-nav__item + .gfcsp-nav__item {
	margin-top: .35rem;
}

.gfcsp .gfcsp-nav__state {
	margin-top: .1rem;
}


/* ---------------------------------------------- nav, tighter again
 *
 * The state badge sits on its own line under its label, which is fine —
 * what makes the box tall is the space around those lines. Tightening the
 * line height and the gap between sections brings it in without the text
 * touching.
 *
 * The separator margins go too: the header line now carries its own
 * non-breaking spaces, so margins there would double the gap.
 */

.gfcsp .gfcsp-header__sep {
	margin: 0;
}

.gfcsp .gfcsp-nav {
	padding: .4rem .85rem .45rem;
	line-height: 1.2;
}

.gfcsp .gfcsp-nav__item {
	padding: 0;
	line-height: 1.2;
}

.gfcsp .gfcsp-nav__item + .gfcsp-nav__item {
	margin-top: .5rem;
}

.gfcsp .gfcsp-nav__state {
	margin-top: .15rem;
	min-height: 1.25rem;
	line-height: 1.25rem;
}

.gfcsp .gfcsp-nav__count {
	min-height: 1.25rem;
	line-height: 1.25rem;
}


/* ---------------------------------------------- signed tick
 *
 * The tick now sits beside the document name rather than beside the button,
 * so it reads as a property of the document. It also removes the alignment
 * problem entirely: there is no longer a second element for it to line up
 * against — it is part of the heading's own line.
 */

.gfcsp .gfcsp-doclist__title .gfcsp-tick {
	display: inline;
	position: static;
	top: auto;
	color: #059669;
	font-size: .95em;
	font-weight: 700;
	line-height: inherit;
	vertical-align: baseline;
}

/* With the tick gone from the action column, the link stands alone. */
.gfcsp .gfcsp-doclist__action {
	align-items: center;
}


/* ---------------------------------------------- nav rows on one line
 *
 * The markup now carries non-breaking spaces, so the label, counter and
 * state badge cannot be split apart. These margins would sit on top of that
 * spacing and double it, so they go.
 */

.gfcsp .gfcsp-nav__count,
.gfcsp .gfcsp-nav__state {
	margin-left: 0;
	margin-top: 0;
	vertical-align: baseline;
}

.gfcsp .gfcsp-nav__item {
	white-space: nowrap;
}

.gfcsp .gfcsp-nav__item + .gfcsp-nav__item {
	margin-top: .3rem;
}


/* ================================================================
 * Vertical rhythm, tightened
 *
 * Height only — the horizontal padding stays, so cards keep their width
 * and text keeps its margin from the edge. What comes down is the space
 * above and below content, which was making short cards look mostly empty.
 * ================================================================ */

.gfcsp .gfcsp-card,
.gfcsp .gfcsp-panel {
	padding-top: 1.15rem;
	padding-bottom: 1.15rem;
	margin-bottom: .85rem;
}

/* Headings and their intro sit closer to what follows. */
.gfcsp .gfcsp-title {
	margin-bottom: .35rem;
}

.gfcsp .gfcsp-lede {
	margin-bottom: .85rem;
}

.gfcsp .gfcsp-subtitle {
	margin-bottom: .4rem;
}

.gfcsp .gfcsp-buttonrow {
	margin-top: .85rem;
}

/* The trailing hint under the buttons. */
.gfcsp .gfcsp-card > .gfcsp-hint:last-child,
.gfcsp .gfcsp-panel > .gfcsp-hint:last-child {
	margin-bottom: 0;
}

/* "Back to my induction" and friends: a slim strip, not a full card. */
.gfcsp .gfcsp-hint--spaced {
	padding-top: .55rem;
	padding-bottom: .55rem;
	margin-top: .85rem;
	margin-bottom: 0;
}

.gfcsp .gfcsp-breadcrumb {
	margin: 0 0 .5rem;
}

.gfcsp .gfcsp-doclist__item {
	padding-top: .85rem;
	padding-bottom: .85rem;
}

.gfcsp .gfcsp-step {
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-bottom: .85rem;
}

.gfcsp .gfcsp-progress {
	padding-top: .8rem;
	padding-bottom: .8rem;
	margin-bottom: .85rem;
}


/* ================================================================
 * Even space above and below
 *
 * A card's last paragraph keeps its own bottom margin, which lands on top
 * of the card's padding — so the space under the text is the sum of the
 * two while the space above it is padding alone. That is why the bottom
 * of almost every card looked slack.
 *
 * Clearing the first child's top margin and the last child's bottom margin
 * leaves the padding to set the spacing on its own, evenly.
 * ================================================================ */

.gfcsp .gfcsp-card > *:first-child,
.gfcsp .gfcsp-panel > *:first-child,
.gfcsp .gfcsp-step > *:first-child,
.gfcsp .gfcsp-list__item > *:first-child,
.gfcsp .gfcsp-list__main > *:first-child,
.gfcsp .gfcsp-doclist__item > *:first-child,
.gfcsp .gfcsp-doclist__main > *:first-child,
.gfcsp .gfcsp-list__aside > *:first-child,
.gfcsp .gfcsp-doclist__action > *:first-child {
	margin-top: 0;
}

.gfcsp .gfcsp-card > *:last-child,
.gfcsp .gfcsp-panel > *:last-child,
.gfcsp .gfcsp-step > *:last-child,
.gfcsp .gfcsp-list__item > *:last-child,
.gfcsp .gfcsp-list__main > *:last-child,
.gfcsp .gfcsp-doclist__item > *:last-child,
.gfcsp .gfcsp-doclist__main > *:last-child,
.gfcsp .gfcsp-list__aside > *:last-child,
.gfcsp .gfcsp-doclist__action > *:last-child {
	margin-bottom: 0;
}

/* A form is usually the last thing in a card, and its own last field
   carries the same trailing margin. */
.gfcsp .gfcsp-card > form > *:last-child,
.gfcsp .gfcsp-panel > form > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------- the back link strip
 *
 * This is a paragraph acting as a strip of its own, so its line box sets
 * the height. An explicit line height makes the space above and below the
 * words identical rather than leaving it to the font.
 */

.gfcsp .gfcsp-hint--spaced {
	padding-top: .6rem;
	padding-bottom: .6rem;
	line-height: 1.4;
}

.gfcsp .gfcsp-hint--spaced > a {
	line-height: 1.4;
	vertical-align: baseline;
}

/* ---------------------------------------------- module rows
 *
 * The numbered marker was pinned near the top of its row rather than
 * sitting with the title it belongs to. Aligning it with the heading's
 * line lets the row close up.
 */

.gfcsp .gfcsp-list--modules .gfcsp-list__main::before {
	top: .12rem;
	width: 1.5rem;
	height: 1.5rem;
	font-size: .78rem;
}

.gfcsp .gfcsp-list--modules .gfcsp-list__main {
	padding-left: 2rem;
}

.gfcsp .gfcsp-list__item {
	padding-top: .8rem;
	padding-bottom: .8rem;
}

.gfcsp .gfcsp-list {
	gap: .5rem;
}




/* The theme gives headings a top margin of their own — 22px on an h4.
   Inside a card or a row that margin lands under the top border and
   makes the space above the words far larger than the space below.
   Headings that open a block set their spacing from the padding. */

.gfcsp .gfcsp-card > :is(h1,h2,h3,h4,h5):first-child,
.gfcsp .gfcsp-panel > :is(h1,h2,h3,h4,h5):first-child,
.gfcsp .gfcsp-step > :is(h1,h2,h3,h4,h5):first-child,
.gfcsp .gfcsp-list__main > :is(h1,h2,h3,h4,h5):first-child,
.gfcsp .gfcsp-doclist__main > :is(h1,h2,h3,h4,h5):first-child {
	margin-top: 0;
}


/* ------------------------------------------------ reference documents
 *
 * Reference material uses the same doclist component as the documents that
 * must be signed, so the two present identically and cannot drift apart as
 * either changes. Only the meaningful differences remain: no tick, no signed
 * date, and an action that opens the document rather than asking for a
 * signature.
 *
 * The modifier exists so the section can be told apart in the markup and in
 * future styling, without duplicating the component.
 */

.gfcsp .gfcsp-doclist--reference {
	margin-bottom: 0;
}


/* A quiet parenthetical inside a form label — "(if shown)" — marking a field
   the worker can leave alone. Muted so the label still reads as one thing. */

.gfcsp .gfcsp-optional {
	color: var(--gfcsp-ink-soft);
	font-weight: 400;
}


/* ------------------------------------------------ action alignment
 *
 * The action used to be centred against the whole row, so on a row with an
 * eyebrow, a title and a meta line it floated between the title and the
 * version line with nothing to line up against.
 *
 * The first fix dropped it by a fixed amount meant to equal the height of the
 * eyebrow. It measured perfectly where it was written and was wrong on the
 * live site, because the number assumed a font and a root size the real page
 * does not have.
 *
 * So it is placed rather than nudged. The text column is a two-column grid;
 * the title and the action are both put in row two and both centred in it, so
 * whichever is taller sets the row height and the other centres against it.
 * They cannot drift apart when a font changes, a label wraps, or another
 * stylesheet loads, because nothing is being offset by a measured amount.
 */

.gfcsp .gfcsp-doclist__item {
	display: block;
}

.gfcsp .gfcsp-doclist__main {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	column-gap: 1rem;
	align-items: start;
}

.gfcsp .gfcsp-doclist__main > * {
	grid-column: 1;
	min-width: 0;
}

/* Row two holds the title. The action joins it in the second column, and both
   are centred so they share a midline whatever their heights. */
.gfcsp .gfcsp-doclist__title,
.gfcsp .gfcsp-doclist__action {
	grid-row: 2;
	align-self: center;
}

.gfcsp .gfcsp-doclist__action {
	grid-column: 2;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0;

	/* The action must not decide how tall the title's row is. Given a height
	   of its own it would, and a 44px button would prise the eyebrow, title
	   and version line apart — which is what made the rows look padded out.
	   A zero-height box takes no part in sizing the row; its contents centre
	   on the row's midline and hang over it evenly, so they sit on the title
	   while the text column keeps its own rhythm. */
	height: 0;
	min-height: 0;
}

/* A text link's line box is taller than its capitals, so centring the box puts
   the letters a few pixels low next to a badge or a button. Collapsing the box
   onto the text removes the gap at the source rather than nudging it back. */
.gfcsp .gfcsp-doclist__action > .gfcsp-linkbutton {
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

/* Stacked on a phone: one column, action beneath the text. */
@media ( max-width: 40rem ) {
	.gfcsp .gfcsp-doclist__main {
		grid-template-columns: minmax( 0, 1fr );
	}

	.gfcsp .gfcsp-doclist__title,
	.gfcsp .gfcsp-doclist__action {
		grid-row: auto;
	}

	.gfcsp .gfcsp-doclist__action {
		grid-column: 1;
		grid-row: auto;
		justify-content: flex-start;
		margin-top: .4rem;

		/* Back in normal flow here, so it needs its height again — a
		   zero-height box would let the button overlap the row below. */
		height: auto;
		min-height: 0;
	}
}


/* ------------------------------------------------ badge beside a link
 *
 * Stacking the badge above the link was tried and reverted. It removed the
 * baseline problem, but to stop the stack growing the row it had to sit at
 * zero height, which pushed the badge flush with the top edge of the row —
 * and the list clips its overflow, so on some renderings the badge simply
 * vanished. A status a worker cannot see is worse than one sitting two
 * pixels off, so they are side by side again.
 *
 * The lift badges carry is dropped in this pairing: it exists so a pill reads
 * right standing alone, and beside a text link it is what makes the two
 * disagree.
 */

.gfcsp .gfcsp-doclist__action .gfcsp-badge {
	padding-top: .25rem;
	padding-bottom: .25rem;
}