/**
 * Growth Scorecard
 *
 * Everything is scoped under .rcgc-scorecard so nothing leaks into the rest of
 * the Bricks site.
 *
 * TYPOGRAPHY
 * ----------
 * Sizes come from the theme's fluid type scale (--text-body, --text-h4 and so
 * on), never from fixed pixel values and never from em multipliers.
 *
 * The em approach that this file used previously was the wrong idea: it made
 * every size relative to whatever it inherited, so the component compounded the
 * theme's scale instead of sitting inside it. Worse, the card's h2 and h3 picked
 * up full page-heading sizes -- --text-h2 reaches 4.48rem -- which is right for
 * a page title and much too big for a heading inside a card.
 *
 * So headings are mapped down a level or two: a card headline uses --text-h4,
 * a section heading --text-h5, a question --text-h6. Every one is overridable
 * via the --rcgc-text-* aliases below without touching this file.
 *
 * WIDTH
 * -----
 * No max-width. The component fills whatever Bricks container holds it, and
 * width is controlled on the site.
 */

.rcgc-scorecard {
	/* --- mapped from the Bricks palette --- */
	--rcgc-surface:      var(--color-5, #fefefe);
	--rcgc-canvas:       var(--color-6, #eef2de);
	--rcgc-ink:          var(--color-9, #16210f);
	--rcgc-ink-soft:     var(--color-9-t-4, hsla(97, 38%, 9%, 0.67));
	--rcgc-ink-faint:    var(--color-9-t-2, hsla(97, 38%, 9%, 0.33));
	--rcgc-line:         var(--color-3, #e2eac6);
	--rcgc-line-strong:  var(--color-4, #e1eabf);
	--rcgc-accent:       var(--color-1, #5aa600);
	--rcgc-accent-deep:  var(--color-2, #005715);
	--rcgc-accent-wash:  var(--color-1-t-1, hsla(87, 100%, 33%, 0.17));
	--rcgc-accent-line:  var(--color-1-t-3, hsla(87, 100%, 33%, 0.5));
	--rcgc-highlight:    var(--color-10, #c7d440);

	/* --- plugin-owned: no Bricks equivalent exists for these --- */
	--rcgc-level-low:      #d9694c;
	--rcgc-level-low-ink:  #c0512f;
	--rcgc-level-mid:      #c9a52e;
	--rcgc-level-mid-ink:  #b07a12;
	--rcgc-level-high:     var(--rcgc-accent);
	--rcgc-level-high-ink: var(--rcgc-accent);
	--rcgc-error:          #c0392b;
	--rcgc-error-wash:     rgba(192, 57, 43, 0.08);

	/* --- mapped from the theme's fluid type scale --- */
	--rcgc-text-xs:      var(--text-b-xs, 0.78rem);
	--rcgc-text-s:       var(--text-b-s,  0.88rem);
	--rcgc-text-body:    var(--text-body, 1rem);
	--rcgc-text-lead:    var(--text-body, 1rem);
	--rcgc-text-question: var(--text-h6,  1.2rem);
	--rcgc-text-section: var(--text-h5,   1.35rem);
	--rcgc-text-card:    var(--text-h4,   1.6rem);
	--rcgc-text-hero:    var(--text-h3,   1.9rem);

	/* --- geometry --- */
	--rcgc-radius-sm: 5px;
	--rcgc-radius-md: 10px;
	--rcgc-radius-lg: 20px;

	color: var(--rcgc-ink);
	font-size: var(--rcgc-text-body);
}

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

.rcgc-card {
	background: var(--rcgc-surface);
	border-radius: var(--rcgc-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Screens fade in on change. Suppressed for reduced-motion users below. */
.rcgc-screen {
	animation: rcgc-fade 0.3s ease;
}

/*
 * Intro screen is centred. text-align handles the headings, lead and eyebrow
 * (inline-flex, so it respects text-align); the meta row and buttons are flex
 * containers and need their own centring.
 */
.rcgc-screen--center {
	text-align: center;
}

.rcgc-screen--center .rcgc-meta {
	justify-content: center;
}

.rcgc-screen--center .rcgc-btn--block {
	text-align: center;
}

@keyframes rcgc-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.rcgc-card :focus-visible {
	outline: 2px solid var(--rcgc-accent-deep);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- typography */

/*
 * Font family and weight are never set: the theme owns those. Only size is
 * assigned, and only so a card heading does not render at page-title scale.
 */
.rcgc-card h2 {
	font-size: var(--rcgc-text-card);
	line-height: 1.15;
	margin: 0 0 0.5em;
}

.rcgc-card h3 {
	font-size: var(--rcgc-text-section);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

/*
 * Spacing applies to every paragraph, but the body size applies only to
 * unclassed ones.
 *
 * `.rcgc-card p` (0,1,1) outranks a bare class like `.rcgc-eyebrow` (0,1,0), so
 * a blanket size rule here silently overrode every classed paragraph and the
 * eyebrow rendered at body size. Excluding classed elements fixes the whole
 * category rather than one selector at a time, so a new classed paragraph
 * cannot reintroduce the bug.
 */
.rcgc-card p {
	margin: 0 0 1em;
}

.rcgc-card p:not([class]) {
	font-size: var(--rcgc-text-body);
}

.rcgc-card p:last-child {
	margin-bottom: 0;
}

.rcgc-card h2[tabindex="-1"]:focus,
.rcgc-card legend[tabindex="-1"]:focus {
	outline: none;
}

.rcgc-card .rcgc-lead {
	color: var(--rcgc-ink-soft);
	font-size: var(--rcgc-text-lead);
}

/* ---------------------------------------------------------------- utility */

.rcgc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot. Hidden from humans and assistive tech, visible to naive bots. */
.rcgc-hp {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

.rcgc-card .rcgc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--rcgc-surface);
	border: 1px solid var(--rcgc-line);
	border-radius: 999px;
	padding: 0.45em 1em;
	margin-bottom: 1.1em;
	font-size: var(--text-b-xs, 0.78rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rcgc-accent-deep);
}

.rcgc-divider {
	height: 1px;
	background: var(--rcgc-line);
	border: 0;
	margin: 1.6rem 0;
}

.rcgc-card .rcgc-trust,
.rcgc-card .rcgc-reassure {
	font-size: var(--rcgc-text-xs);
	color: var(--rcgc-ink-soft);
	text-align: center;
}

/* Trust line sits directly under the start button; give it breathing room. */
.rcgc-card .rcgc-trust {
	margin-top: 0.85rem;
}

.rcgc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: var(--rcgc-text-s);
	font-weight: 700;
	color: var(--rcgc-ink-soft);
}

.rcgc-meta__item {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.rcgc-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rcgc-accent);
	flex: none;
}

/* ---------------------------------------------------------------- buttons */

/*
 * Primary buttons also carry the theme's `bricks-background-primary` class, so
 * background and text colour come from Bricks. Only geometry and size are set
 * here, and background is left unset so the theme class wins without an
 * !important war.
 */
/*
 * Layout only. Buttons also carry `brxe-button bricks-button`, so size, padding,
 * radius and colour belong to Bricks.
 *
 * Anything opinionated sits behind :not(.bricks-button) so it applies only when
 * the theme classes are absent, such as in an isolated preview. Declaring
 * padding and radius unconditionally would leave the outcome to stylesheet
 * order, which is not something a plugin should be betting on.
 */
.rcgc-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.12s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.rcgc-btn:not(.bricks-button) {
	border: 0;
	font-size: var(--rcgc-text-body);
	font-weight: 700;
	padding: 0.9em 1.75em;
	border-radius: 999px;
}

.rcgc-btn:hover:not(:disabled) {
	transform: translateY(-1px);
}

.rcgc-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

/* Fallback only: applies when the theme class is absent (e.g. preview). */
.rcgc-btn--primary:not(.bricks-background-primary) {
	background: var(--rcgc-accent);
	color: var(--rcgc-surface);
}

.rcgc-btn--secondary {
	background: var(--rcgc-surface);
	color: var(--rcgc-accent-deep);
	border: 1.5px solid var(--rcgc-line);
}

.rcgc-btn--secondary:hover {
	background: var(--rcgc-accent-wash);
}

/*
 * Ghost buttons are the exception: they are text links in a button's clothing,
 * so the theme's solid button styling is explicitly undone for them.
 */
.rcgc-btn--ghost,
.rcgc-btn--ghost.bricks-button {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--rcgc-ink-soft);
	padding: 0.6em 0.25em;
	font-size: var(--rcgc-text-s);
}

/*
 * Subtle button: the quiet, self-serve "Download my results" action. Modelled
 * on the site's understated CTA - a bordered white pill with green text and a
 * green underline accent, so it reads as secondary to the two conversion
 * buttons below it. The theme's solid fill is explicitly removed.
 */
.rcgc-btn--subtle,
.rcgc-btn--subtle.bricks-button {
	background: var(--rcgc-surface);
	color: var(--rcgc-accent-deep);
	border: 1.5px solid var(--rcgc-line);
	box-shadow: none;
	text-decoration: underline;
	text-decoration-color: var(--rcgc-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.rcgc-btn--subtle:hover:not(:disabled) {
	background: var(--rcgc-accent-wash);
	border-color: var(--rcgc-accent);
}

.rcgc-cta-stack--pair {
	margin-top: 0.7rem;
}

/* On wider cards the two conversion buttons sit side by side. */
@media (min-width: 30rem) {
	.rcgc-cta-stack--pair {
		flex-direction: row;
	}

	.rcgc-cta-stack--pair > * {
		flex: 1 1 0;
	}
}

/* Application confirmation, shown in place of the two buttons once applied. */
.rcgc-card .rcgc-applied {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin-top: 0.7rem;
	padding: 0.9em 1.1em;
	background: var(--rcgc-accent-wash);
	border: 1.5px solid var(--rcgc-accent-line);
	border-radius: var(--rcgc-radius-md);
	font-size: var(--rcgc-text-s);
	font-weight: 700;
	color: var(--rcgc-accent-deep);
}

.rcgc-applied__tick {
	flex: none;
	font-weight: 900;
}

/* Standalone application success tick. */
.rcgc-done-tick {
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--rcgc-accent);
	color: var(--rcgc-surface);
	font-size: 1.6rem;
	font-weight: 900;
	line-height: 1;
}

/* Scoring interstitial spinner. */
.rcgc-spinner {
	width: 2.5rem;
	height: 2.5rem;
	margin: 1.5rem auto 0;
	border: 3px solid var(--rcgc-line);
	border-top-color: var(--rcgc-accent);
	border-radius: 50%;
	animation: rcgc-spin 0.8s linear infinite;
}

@keyframes rcgc-spin {
	to { transform: rotate( 360deg ); }
}

.rcgc-btn--ghost:hover {
	color: var(--rcgc-accent-deep);
	transform: none;
}

.rcgc-btn--block {
	width: 100%;
}

.rcgc-cta-stack {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.rcgc-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.rcgc-btn.is-busy {
	pointer-events: none;
	opacity: 0.7;
}

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

.rcgc-progress {
	margin-bottom: 1.5rem;
}

.rcgc-progress__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.rcgc-area-tag {
	font-size: var(--rcgc-text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rcgc-accent-deep);
}

.rcgc-qnum {
	font-size: var(--rcgc-text-xs);
	font-weight: 800;
	color: var(--rcgc-ink-soft);
	white-space: nowrap;
}

.rcgc-progress__bar {
	height: 6px;
	background: var(--rcgc-canvas);
	border-radius: 999px;
	overflow: hidden;
}

/*
 * Width comes from a custom property set by JS. That keeps the computed value
 * out of the markup as a style rule while still letting the stylesheet own how
 * the bar looks and animates.
 */
.rcgc-progress__fill {
	display: block;
	height: 100%;
	width: var(--rcgc-progress, 0%);
	background: var(--rcgc-accent);
	border-radius: 999px;
	transition: width 0.35s ease;
}

/* -------------------------------------------------------------- questions */

.rcgc-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.rcgc-legend {
	padding: 0;
	margin-bottom: 1.4rem;
	font-size: var(--rcgc-text-question);
	font-weight: 800;
	line-height: 1.3;
}

.rcgc-options {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.rcgc-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.85em;
	border: 1.5px solid var(--rcgc-line);
	border-radius: var(--rcgc-radius-md);
	padding: 0.9em 1.1em;
	cursor: pointer;
	background: var(--rcgc-surface);
	font-size: var(--rcgc-text-body);
	font-weight: 700;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rcgc-option:hover {
	border-color: var(--rcgc-accent);
	background: var(--rcgc-accent-wash);
}

/*
 * Compact variant, used for choices that sit inside the registration form
 * rather than being the whole screen. Matches .rcgc-input so a radio question
 * and a text field read as the same weight of thing; the full-size .rcgc-option
 * above stays for the scorecard's own answers.
 */
.rcgc-options--compact .rcgc-option {
	font-size: var(--rcgc-text-s);
	font-weight: 600;
	padding: 0.75em 0.95em;
	gap: 0.7em;
}

.rcgc-options--compact .rcgc-option__mark {
	width: 1.15em;
	height: 1.15em;
}

/*
 * A real radio input, visually hidden but still focusable. This is what buys
 * keyboard navigation, screen reader announcement and form semantics for free,
 * where the prototype's div+onclick had none of it.
 */
.rcgc-option__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.rcgc-option__mark {
	width: 1.35em;
	height: 1.35em;
	max-width: 24px;
	max-height: 24px;
	border-radius: 50%;
	border: 2px solid var(--rcgc-ink-faint);
	flex: none;
	position: relative;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rcgc-option__input:checked ~ .rcgc-option__mark {
	border-color: var(--rcgc-accent);
	background: var(--rcgc-accent);
}

.rcgc-option__input:checked ~ .rcgc-option__mark::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--rcgc-surface);
}

.rcgc-option:has(.rcgc-option__input:checked) {
	border-color: var(--rcgc-accent);
	background: var(--rcgc-accent-wash);
}

/* Fallback for browsers without :has(). JS mirrors the state onto the label. */
.rcgc-option.is-selected {
	border-color: var(--rcgc-accent);
	background: var(--rcgc-accent-wash);
}

.rcgc-option__input:focus-visible ~ .rcgc-option__mark {
	outline: 2px solid var(--rcgc-accent-deep);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ mode select */

.rcgc-modes {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.rcgc-mode {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	border: 1.5px solid var(--rcgc-line);
	border-radius: var(--rcgc-radius-md);
	padding: 1.2em 1.35em;
	cursor: pointer;
	background: var(--rcgc-surface);
	text-align: left;
	font-family: inherit;
	color: inherit;
	width: 100%;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}

.rcgc-mode:hover {
	border-color: var(--rcgc-accent);
	background: var(--rcgc-accent-wash);
	transform: translateY(-1px);
}

.rcgc-mode__title {
	font-size: var(--rcgc-text-question);
	font-weight: 900;
	line-height: 1.25;
}

.rcgc-mode__sub {
	font-size: var(--rcgc-text-s);
	font-weight: 600;
	color: var(--rcgc-ink-soft);
}

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

.rcgc-fields {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.rcgc-field__label {
	display: block;
	margin-bottom: 0.4em;
	font-size: var(--rcgc-text-xs);
	font-weight: 800;
	color: var(--rcgc-ink-soft);
}

.rcgc-field__optional {
	font-weight: 600;
	text-transform: none;
	opacity: 0.75;
}

/*
 * Field height is set explicitly rather than left to font-size plus padding.
 * With a fluid type scale that arithmetic drifts with the viewport, and the
 * fields came out around 53px. 44px is inside the requested 40-45px range and
 * is also the minimum comfortable tap target, so it is a floor rather than a
 * fixed height: the box still grows if the theme sets a very large base size.
 */
.rcgc-scorecard {
	--rcgc-field-height: 44px;
}

.rcgc-input,
.rcgc-textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--rcgc-text-s);
	line-height: 1.3;
	padding: 0.5em 0.75em;
	border: 1.5px solid var(--rcgc-line);
	border-radius: var(--rcgc-radius-sm);
	background: var(--rcgc-surface);
	color: var(--rcgc-ink);
}

.rcgc-input {
	min-height: var(--rcgc-field-height);
}

/*
 * Selects reuse .rcgc-input for box, border and height. Appearance is left
 * native on purpose: the disclosure arrow then follows the platform and the
 * user's colour scheme, which is one less colour for this component to own and
 * one less thing to go wrong against a dark theme.
 */
.rcgc-select {
	cursor: pointer;
	/* Safari imposes its own line-height on selects and ignores the shared one. */
	line-height: normal;
}

.rcgc-textarea {
	min-height: calc(var(--rcgc-field-height) * 2.5);
	resize: vertical;
	line-height: 1.5;
}

.rcgc-input:focus,
.rcgc-textarea:focus {
	outline: none;
	border-color: var(--rcgc-accent);
	box-shadow: 0 0 0 3px var(--rcgc-accent-wash);
}

.rcgc-input.is-invalid,
.rcgc-textarea.is-invalid {
	border-color: var(--rcgc-error);
}

.rcgc-card .rcgc-field__hint {
	margin: 0.4em 0 0;
	font-size: var(--rcgc-text-xs);
	color: var(--rcgc-ink-soft);
}

.rcgc-card .rcgc-field__error {
	margin: 0.4em 0 0;
	font-size: var(--rcgc-text-xs);
	font-weight: 700;
	color: var(--rcgc-error);
}

.rcgc-consent {
	display: flex;
	gap: 0.65em;
	align-items: flex-start;
	font-size: var(--rcgc-text-xs);
	color: var(--rcgc-ink-soft);
	cursor: pointer;
}

.rcgc-consent input {
	width: auto;
	margin-top: 0.25em;
	flex: none;
	accent-color: var(--rcgc-accent);
}

/*
 * The eligibility tickbox borrows the consent row's layout but is a question
 * being asked, not fine print being acknowledged. It takes the small body size
 * and full ink colour, and sits in its own box so it does not read as part of
 * the marketing opt-in immediately below it.
 */
.rcgc-consent--question {
	font-size: var(--rcgc-text-s);
	color: var(--rcgc-ink);
	border: 1.5px solid var(--rcgc-line);
	border-radius: var(--rcgc-radius-md);
	padding: 0.9em 1.1em;
	margin-bottom: 1rem;
}

.rcgc-alert {
	margin-bottom: 1rem;
	padding: 0.85em 1em;
	border: 1.5px solid var(--rcgc-error);
	border-radius: var(--rcgc-radius-sm);
	background: var(--rcgc-error-wash);
	color: var(--rcgc-error);
	font-size: var(--rcgc-text-s);
	font-weight: 700;
}

/* ---------------------------------------------------------------- results */

.rcgc-stage {
	text-align: center;
}

.rcgc-card .rcgc-stage__label {
	font-size: var(--rcgc-text-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rcgc-accent-deep);
	margin-bottom: 0.3em;
}

/* The one place a larger heading is right: it is the payoff of the whole form. */
.rcgc-card h2.rcgc-stage__name {
	font-size: var(--rcgc-text-hero);
	margin: 0.2em 0 0.4em;
}

.rcgc-score-pill {
	display: inline-block;
	background: var(--rcgc-accent-deep);
	color: var(--rcgc-highlight);
	font-size: var(--rcgc-text-s);
	font-weight: 800;
	padding: 0.5em 1.15em;
	border-radius: 999px;
}

.rcgc-card .rcgc-stage__blurb {
	text-align: center;
	margin: 1.1rem 0 1.5rem;
	color: var(--rcgc-ink-soft);
}

.rcgc-areas__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1.1rem;
}

.rcgc-card h3.rcgc-areas__title {
	margin: 0;
	font-weight: 900;
}

.rcgc-areas__meta {
	font-size: var(--rcgc-text-xs);
	font-weight: 700;
	color: var(--rcgc-ink-soft);
	white-space: nowrap;
}

.rcgc-bars {
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
}

.rcgc-bar__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.5em;
}

.rcgc-bar__name {
	font-size: var(--rcgc-text-s);
	font-weight: 800;
}

.rcgc-bar__level {
	font-size: var(--rcgc-text-s);
	font-weight: 800;
	white-space: nowrap;
}

.rcgc-bar__track {
	height: 9px;
	background: var(--rcgc-canvas);
	border-radius: 999px;
	overflow: hidden;
}

.rcgc-bar__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rcgc-bar__fill.is-filled {
	width: var(--rcgc-fill, 0%);
}

/* Level colours live here rather than being injected inline per bar. */
.rcgc-bar__fill.is-low  { background: var(--rcgc-level-low); }
.rcgc-bar__fill.is-mid  { background: var(--rcgc-level-mid); }
.rcgc-bar__fill.is-high { background: var(--rcgc-level-high); }

.rcgc-bar__level.is-low  { color: var(--rcgc-level-low-ink); }
.rcgc-bar__level.is-mid  { color: var(--rcgc-level-mid-ink); }
.rcgc-bar__level.is-high { color: var(--rcgc-level-high-ink); }

.rcgc-inwords {
	background: var(--rcgc-accent-wash);
	border: 1.5px solid var(--rcgc-line);
	border-radius: var(--rcgc-radius-md);
	padding: 1.1em 1.25em;
}

.rcgc-card .rcgc-inwords__key {
	font-size: var(--rcgc-text-xs);
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--rcgc-accent-deep);
	margin-bottom: 0.5em;
}

.rcgc-card .rcgc-inwords__quote {
	margin: 0;
	font-weight: 700;
	font-style: italic;
}

.rcgc-opp {
	background: var(--rcgc-accent-wash);
	border: 1.5px solid var(--rcgc-line);
	border-radius: var(--rcgc-radius-md);
	padding: 1.4em;
}

.rcgc-card .rcgc-opp__kicker {
	font-size: var(--rcgc-text-xs);
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--rcgc-level-low-ink);
	margin-bottom: 0.5em;
}

/*
 * Headroom variant. When the lowest-scoring area is itself strong the block is
 * not a warning, so the kicker drops the low-level red for the accent. Colour
 * still comes from the mapped palette, never a literal.
 */
.rcgc-card .rcgc-opp__kicker.is-headroom {
	color: var(--rcgc-accent-deep);
}

.rcgc-card .rcgc-opp__body {
	color: var(--rcgc-ink-soft);
}

.rcgc-card .rcgc-opp__maps {
	font-size: var(--rcgc-text-s);
	background: var(--rcgc-surface);
	border: 1px solid var(--rcgc-line);
	border-radius: var(--rcgc-radius-sm);
	padding: 0.8em 0.95em;
	margin: 0;
}

.rcgc-opp__maps b,
.rcgc-opp__maps strong {
	color: var(--rcgc-ink);
	font-weight: 800;
}

.rcgc-card .rcgc-emailed {
	text-align: center;
	font-size: var(--rcgc-text-xs);
	color: var(--rcgc-ink-soft);
}

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

@media (max-width: 32rem) {
	.rcgc-nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.rcgc-nav .rcgc-btn {
		width: 100%;
	}

	.rcgc-areas__head {
		flex-direction: column;
		gap: 0.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rcgc-screen,
	.rcgc-btn,
	.rcgc-option,
	.rcgc-mode,
	.rcgc-progress__fill,
	.rcgc-bar__fill,
	.rcgc-spinner {
		animation: none !important;
		transition: none !important;
	}
}