/* ABOUTME: All surface styles for the Readme LMS learner template (/learn/) — consumes tokens.css exclusively. */
/* ABOUTME: Covers shell, header, sticky bar, panels, dashboard, syllabus, lesson types, quiz, signing, and completion. */

/*
 * Principles:
 *  - Calm and flat: 1px borders; only the two token shadows.
 *  - Teal-wash body, white radius-lg/xl panels.
 *  - Display face ONLY on headings >= 28px. One big display moment per journey.
 *  - Orange rationed: progress fill + ONE primary action per screen.
 *  - Every value comes from tokens.css. No hardcoded brand values here.
 */

/* ====================================================================== */
/* Base / shell                                                           */
/* ====================================================================== */

body.readme-learn {
	margin: 0;
	background: var(--readme-page);
	color: var(--readme-ink);
	font-family: var(--readme-font-body);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

.readme-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Skip link — off-screen until focused, then the first thing a keyboard user
   lands on. Positioned over the header rather than shifting it, so sighted
   mouse users never see the layout move. */
.readme-learn .readme-skip {
	position: fixed;
	top: 0;
	left: var(--readme-space-4);
	/* Above the WP toolbar (99999) — an admin is the person most likely to be
	   keyboard-driving the console, and a skip link tucked under the toolbar
	   is a skip link nobody can see. */
	z-index: 100000;
	transform: translateY(-120%);
	background: var(--readme-navy);
	color: var(--readme-ink-inverse);
	padding: var(--readme-space-2) var(--readme-space-4);
	border-radius: 0 0 var(--readme-radius-md) var(--readme-radius-md);
	font-weight: 600;
	text-decoration: none;
}

.readme-learn .readme-skip:focus-visible,
.readme-learn .readme-skip:focus {
	transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
	.readme-learn .readme-skip {
		transition: transform 120ms ease-out;
	}
}

/* Focus ring — everywhere, always visible for keyboard users. */
.readme-learn :focus-visible {
	outline: 2px solid var(--readme-focus);
	outline-offset: 2px;
}

/* Programmatic focus target (skip-to-content / SPA-style focus moves). */
.readme-main:focus {
	outline: none;
}

/* Focusables should never be hidden behind the sticky bar when tabbed to. */
.readme-learn a,
.readme-learn button,
.readme-learn input,
.readme-learn textarea,
.readme-learn select,
.readme-learn [tabindex] {
	scroll-margin-bottom: 96px;
}

/* Headings */
.readme-learn h1 {
	font-family: var(--readme-font-display);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--readme-ink-heading);
	margin: 0 0 var(--readme-space-4);
}

/* Sub-28px headings stay in the body face for calm, readable hierarchy. */
.readme-learn h2,
.readme-learn h3,
.readme-learn h4 {
	font-family: var(--readme-font-body);
	color: var(--readme-ink-heading);
	line-height: 1.3;
	margin: var(--readme-space-5) 0 var(--readme-space-3);
}

.readme-learn h2 { font-size: 1.375rem; }
.readme-learn h3 { font-size: 1.125rem; }

/* Text links */
.readme-learn a {
	color: var(--readme-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.readme-learn a:hover {
	text-decoration-thickness: 2px;
}

/* Component links opt OUT of the content-link treatment. The generic rule
   above is 0-1-1, so these overrides carry the extra class to outrank it. */
.readme-learn a.readme-button,
.readme-learn a.readme-back,
.readme-learn a.readme-bar__back,
.readme-learn a.readme-syllabus__title {
	text-decoration: none;
}
.readme-learn a.readme-back,
.readme-learn a.readme-syllabus__title {
	color: var(--readme-navy);
}
.readme-learn a.readme-bar__back {
	color: var(--readme-ink-inverse);
}
.readme-learn a.readme-button--primary {
	color: var(--readme-action-ink);
}
.readme-learn a.readme-button--ghost {
	/* Without this, the generic content-link rule (0-1-1) beats the ghost's
	   own navy (0-1-0) and anchor ghosts render orange while button ghosts
	   render navy — and the one-orange-action ration quietly breaks. */
	color: var(--readme-navy);
}

/* Visually hidden — live announcer + WP convention. */
.readme-announcer,
.readme-learn .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ====================================================================== */
/* Header                                                                 */
/* ====================================================================== */

.readme-header {
	background: var(--readme-surface);
	border-bottom: 1px solid var(--readme-border);
	min-height: 64px;
	display: flex;
	align-items: center;
	/* Gutter lives OUT here, measure box inside — the same recipe as
	   .readme-main/.readme-footer/.readme-bar, so the header shares their
	   left edge instead of sitting 48px off the page grid. */
	padding: 0 clamp(16px, 4vw, 48px);
}

.readme-header__inner {
	width: 100%;
	max-width: var(--readme-measure);
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--readme-space-4);
}

.readme-back {
	color: var(--readme-navy);
	text-decoration: none;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
	min-height: 44px;
}

.readme-back:hover {
	text-decoration: underline;
}

.readme-header__position {
	font-size: 14px;
	color: var(--readme-ink-muted);
	white-space: nowrap;
}

.readme-header__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-3);
	flex-shrink: 0;
}

/* The footer sits above the sticky bar without every screen placing it. */
.readme-shell > .readme-footer { order: 8; }
.readme-shell > .readme-bar { order: 9; }

.readme-help {
	min-height: 44px;
}

/* Thin progress bar — full bleed, directly under header. */
.readme-progress-thin {
	height: 3px;
	background: var(--readme-progress-track);
}

.readme-progress-thin__fill {
	height: 100%;
	background: var(--readme-accent);
	transition: width 300ms ease;
}

/* ====================================================================== */
/* Main / panels                                                          */
/* ====================================================================== */

.readme-main {
	flex: 1;
	padding: var(--readme-space-5) clamp(16px, 4vw, 48px);
	/* The bar is sticky, so it occupies its own flow slot at page end —
	   normal breathing room is enough; no 120px clearance band. */
	padding-bottom: var(--readme-space-7);
}

.readme-panel {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-6);
	max-width: var(--readme-measure-text);
	margin-left: auto;
	margin-right: auto;
}

.readme-panel--wide {
	max-width: var(--readme-measure);
}

.readme-panel--narrow {
	max-width: 420px;
}

/* ====================================================================== */
/* Sticky bottom bar                                                      */
/* ====================================================================== */

.readme-bar {
	position: sticky;
	bottom: 0;
	z-index: 10;
	background: var(--readme-navy);
	color: var(--readme-ink-inverse);
	min-height: 72px;
	box-shadow: var(--readme-shadow-bar);
	padding: var(--readme-space-3) clamp(16px, 4vw, 48px);
	padding-bottom: calc(var(--readme-space-3) + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
}

.readme-bar__inner {
	width: 100%;
	max-width: var(--readme-measure);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--readme-space-4);
}

.readme-bar__back {
	color: var(--readme-ink-inverse);
	text-decoration: underline;
	text-underline-offset: 2px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
	min-width: 0;
}

.readme-bar__back > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.readme-bar__position {
	font-size: 13px;
	color: var(--readme-ink-inverse);
	opacity: 0.7;
}

.readme-bar__action {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
}

/* "Watch the video to continue" style status — yellow dot marker, not text color. */
.readme-bar__status {
	color: var(--readme-ink-inverse);
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
	font-size: 15px;
}

.readme-bar__status::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--readme-attention);
	flex-shrink: 0;
}

/* Saving… — keep full opacity so it never looks broken mid-request. */
.readme-bar button[aria-busy="true"] {
	opacity: 1;
	cursor: wait;
}

/* Inline error inside the bar area stays readable on navy. */
.readme-bar .readme-error-text {
	color: var(--readme-ink-inverse);
	background: var(--readme-error);
	border-radius: var(--readme-radius-sm);
	padding: var(--readme-space-1) var(--readme-space-2);
}

/* ====================================================================== */
/* Buttons                                                                */
/* ====================================================================== */

.readme-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--readme-space-2);
	min-height: 44px;
	padding: var(--readme-space-2) var(--readme-space-5);
	border: 0;
	border-radius: var(--readme-radius-md);
	font-family: var(--readme-font-body);
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
}

/* Primary — the one loud action per screen, now navy with white text.
   White on the brand orange is 3.07:1 and fails AA outright; navy on orange
   passes at 4.77:1 but reads muddy at button weight. White on navy is 14.65:1.
   Size, weight and position already say "this is the action", so the accent is
   better spent on links, icons and the attention chip. */
.readme-button--primary {
	background: var(--readme-action);
	color: var(--readme-action-ink);
	font-weight: 700;
	min-height: 48px;
}

.readme-button--primary:hover {
	background: var(--readme-action-hover);
}

/* Ghost — quiet secondary action. */
.readme-button--ghost {
	background: transparent;
	border: 1.5px solid var(--readme-navy);
	color: var(--readme-navy);
}

/* Ghost inside the navy bar flips to inverse ink. */
.readme-bar .readme-button--ghost {
	border-color: var(--readme-ink-inverse);
	color: var(--readme-ink-inverse);
}

/* Looks like a text link, behaves like a button. */
.readme-button--link-style {
	background: transparent;
	border: 0;
	padding: var(--readme-space-2);
	color: var(--readme-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-size: inherit;
}

/* ====================================================================== */
/* Forms — THE single control definition                                  */
/* ====================================================================== */

/*
 * One box for every control on every screen (sign-in, register, signing,
 * feedback). Do not redeclare these below; earlier revisions did, and the
 * silently-losing copy is what made the register controls look mismatched.
 */
.readme-learn input[type="text"],
.readme-learn input[type="email"],
.readme-learn input[type="tel"],
.readme-learn input[type="search"],
.readme-learn input[type="url"],
.readme-learn select,
.readme-learn textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--readme-space-3) var(--readme-space-4);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	font: inherit;
	color: var(--readme-ink);
	background: var(--readme-surface);
	margin-bottom: var(--readme-space-4);
}

.readme-learn textarea {
	min-height: 7rem;
	resize: vertical;
}

/* The select must not paint native chrome inside our box: same height, same
   border, same type size as the text inputs, with our own caret. */
.readme-learn select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: var(--readme-space-7);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346536b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--readme-space-4) center;
	background-size: 20px 20px;
}

.readme-learn select::-ms-expand {
	display: none;
}

/* Hover: a quiet 1px darkening. No motion, no shadow. */
.readme-learn input[type="text"]:hover,
.readme-learn input[type="email"]:hover,
.readme-learn input[type="tel"]:hover,
.readme-learn input[type="url"]:hover,
.readme-learn select:hover,
.readme-learn textarea:hover {
	border-color: var(--readme-ink-muted);
}

.readme-learn input:focus,
.readme-learn select:focus,
.readme-learn textarea:focus {
	border-color: var(--readme-navy);
}

.readme-learn label {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	margin-bottom: var(--readme-space-1);
}

/* Help text under a field belongs to the field: tighten the pair. */
.readme-field__help {
	font-size: 0.875rem;
	color: var(--readme-ink-muted);
	margin: calc(-1 * var(--readme-space-3)) 0 var(--readme-space-4);
}

/* Auth/registration forms want a full-width primary; the quiz does NOT
   (its action lives in the sticky bar). Scope it deliberately. */
.readme-learn .readme-signin form .readme-button[type="submit"],
.readme-learn .readme-register form .readme-button[type="submit"],
.readme-learn .readme-sign button[type="submit"] {
	width: 100%;
	margin-top: var(--readme-space-2);
}

/* Field groups — a legend does the work "— optional" suffixes used to do. */
.readme-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--readme-space-6);
	min-inline-size: 0;
}

.readme-fieldset__legend {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
	width: 100%;
	padding: 0;
	margin-bottom: var(--readme-space-5);
	font-family: var(--readme-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
}

.readme-fieldset__legend::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--readme-border);
}

/* ====================================================================== */
/* Sign-in                                                                */
/* ====================================================================== */

.readme-signin {
	margin-top: var(--readme-space-8);
}

.readme-signin form {
	display: flex;
	flex-direction: column;
	gap: var(--readme-space-4);
}

.readme-signin .readme-button--primary {
	width: 100%;
}

.readme-signin__sent {
	text-align: center;
}

.readme-signin__sent .readme-check {
	margin: 0 auto var(--readme-space-4);
}

.readme-signin__email {
	font-family: var(--readme-font-mono);
	font-size: 16px;
}

/* Green check circle (48px default, 64px --big). */
.readme-check {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--readme-success);
	color: var(--readme-ink-inverse);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	flex-shrink: 0;
}

/* No ::before tick here. Every .readme-check now carries a real icon, and the
   two together painted a small text tick beside a large drawn one — on the
   quiz pass banner, which is the reward moment. */

/* ====================================================================== */
/* Dashboard                                                              */
/* ====================================================================== */

/* The big display moment: greeting (and completion h1).
   Carries .readme-learn so it outranks the generic `.readme-learn h1` rule —
   without it these were silently rendering at the ordinary h1 size. */
.readme-learn .readme-greeting,
.readme-learn .readme-complete h1 {
	font-size: clamp(2rem, 4.5vw, 3rem);
}

.readme-section-label {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--readme-ink-muted);
	margin: var(--readme-space-6) 0 var(--readme-space-3);
}

/* First label in the main column starts flush with the rail's first card. */
.readme-layout__main > .readme-section-label:first-child {
	margin-top: 0;
}

.readme-course-card {
	display: block;
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-xl);
	padding: var(--readme-space-5);
	margin-bottom: var(--readme-space-4);
	color: inherit;
	text-decoration: none;
}

.readme-course-card__title {
	font-family: var(--readme-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--readme-navy);
	margin: 0 0 var(--readme-space-1);
}

.readme-course-card__meta {
	font-size: 14px;
	color: var(--readme-ink-muted);
	margin: 0 0 var(--readme-space-3);
}

/* Chunky course progress bar. */
.readme-progress {
	height: 8px;
	background: var(--readme-progress-track);
	border-radius: var(--readme-radius-md);
	overflow: hidden;
}

.readme-progress__fill {
	height: 100%;
	background: var(--readme-accent);
	border-radius: var(--readme-radius-md);
}

.readme-progress__text {
	font-size: 14px;
	color: var(--readme-ink-muted);
	margin-top: var(--readme-space-2);
}

/* "Done" chip on completed course cards. */
.readme-chip--done {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-1);
	font-size: 14px;
	font-weight: 600;
	color: var(--readme-success);
	background: var(--readme-success-wash);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-1) var(--readme-space-3);
}

.readme-chip--done::before {
	content: "\2713"; /* ✓ */
}

/* How long a completed course stays valid. Same row as the done chip. */
.readme-chip--validity {
	font-size: 14px;
	font-weight: 500;
	white-space: normal;
	color: var(--readme-ink-muted);
	background: var(--readme-surface-sunken, transparent);
}

.readme-chip--validity-expiring {
	color: var(--readme-ink-heading);
	background: color-mix(in srgb, var(--readme-attention) 14%, transparent);
}

.readme-chip--validity-expired {
	color: var(--readme-error);
	background: color-mix(in srgb, var(--readme-error) 10%, transparent);
}

.readme-course-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--readme-space-2);
	align-items: center;
}

/* ====================================================================== */
/* Course overview / syllabus                                             */
/* ====================================================================== */

.readme-syllabus {
	list-style: none;
	margin: var(--readme-space-4) 0 0;
	padding: 0;
}

.readme-syllabus__row {
	min-height: 64px;
	display: flex;
	align-items: center;
	gap: var(--readme-space-4);
	padding: var(--readme-space-3) var(--readme-space-2);
	border-top: 1px solid var(--readme-border);
}

.readme-syllabus__row a {
	color: var(--readme-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.readme-syllabus__row a:hover {
	text-decoration: underline;
}

.readme-syllabus__title {
	flex: 1;
}

/* State circle: 32px. */
.readme-syllabus__state {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

.readme-syllabus__row--done .readme-syllabus__state {
	background: var(--readme-surface);
	border: 1.5px solid var(--readme-success);
	color: var(--readme-success);
}

/* The orange "Up next" treatment and the dimmed lock that used to live here were
   both superseded further down (search: "Up next" is NAVY). Their declarations
   were dead except for one that wasn't: the doubled padding-left survived the
   override and pushed the active row's content ~11px right of every sibling
   row. The live definitions own this state now — do not re-add it here. */

.readme-syllabus__flag {
	font-weight: 600;
	color: var(--readme-link);
	font-size: 14px;
}

/* Locked rows: muted, non-interactive text. */
.readme-syllabus__row--locked {
	color: var(--readme-ink-muted);
}

.readme-syllabus__hint {
	font-size: 13px;
	color: var(--readme-ink-muted);
	display: block;
}

/* Right-aligned score/date receipts. */
.readme-syllabus__meta {
	font-family: var(--readme-font-mono);
	font-size: 13px;
	color: var(--readme-ink-muted);
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

/* ====================================================================== */
/* Lesson content (text lessons / Gutenberg output)                       */
/* ====================================================================== */

.readme-lesson-content {
	max-width: var(--readme-measure-text);
	margin: 0 auto;
}

.readme-lesson-content p {
	margin: 0 0 var(--readme-space-4);
}

/* Lists: markers live INSIDE the content column — no hanging bullets. */
.readme-lesson-content ul,
.readme-lesson-content ol {
	padding-left: 1.5rem;
	margin: var(--readme-space-3) 0 var(--readme-space-4);
}

.readme-lesson-content li {
	margin-bottom: var(--readme-space-2);
}

.readme-lesson-content li::marker {
	color: var(--readme-ink-muted);
}

.readme-lesson-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--readme-radius-md);
}

.readme-lesson-content blockquote {
	margin: 0 0 var(--readme-space-4);
	padding: var(--readme-space-2) var(--readme-space-4);
	border-left: 3px solid var(--readme-border);
	color: var(--readme-ink-muted);
}

.readme-lesson-content code {
	font-family: var(--readme-font-mono);
	font-size: 0.9em;
	background: var(--readme-surface-alt);
	border-radius: var(--readme-radius-sm);
	padding: 0.1em 0.35em;
}

/* ====================================================================== */
/* Video                                                                  */
/* ====================================================================== */

.readme-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--readme-radius-lg);
	overflow: hidden;
	background: var(--readme-navy);
	margin-bottom: var(--readme-space-3);
}

.readme-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.readme-video__note {
	font-size: 14px;
	color: var(--readme-ink-muted);
}

/* Embedded deck (Canva) inside lesson content. Editors paste Canva's embed as
   a Custom HTML block with this wrapper and no inline styles — the deck sizes
   to the lesson column and matches the video player's frame. */
.readme-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--readme-radius-lg);
	overflow: hidden;
	background: var(--readme-navy);
	margin: var(--readme-space-5) 0 var(--readme-space-2);
}

.readme-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.readme-embed__credit {
	font-size: 14px;
	color: var(--readme-ink-muted);
	margin-top: 0;
}

/* ====================================================================== */
/* Slides                                                                 */
/* ====================================================================== */

.readme-slides__track {
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	background: var(--readme-surface);
	overflow: hidden;
}

.readme-slide {
	padding: var(--readme-space-6);
	min-height: 16rem;
}

/* When JS activates the deck, non-current slides get [hidden]. */
.readme-slide[hidden] {
	display: none;
}

.readme-slides__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--readme-space-4);
	margin-top: var(--readme-space-4);
}

/* Prev/next: 44px ghost circles. */
.readme-slides__nav {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--readme-navy);
	background: transparent;
	color: var(--readme-navy);
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.readme-slides__nav:disabled {
	opacity: 0.4;
	cursor: default;
}

.readme-slides__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.readme-slides__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--readme-ink-muted);
	background: transparent;
	cursor: pointer;
	transition: width 150ms ease, background-color 150ms ease;
}

.readme-slides__dot[aria-current="true"] {
	width: 20px;
	background: var(--readme-accent);
	border-color: var(--readme-accent);
}

.readme-slides__count {
	font-family: var(--readme-font-mono);
	font-size: 13px;
	color: var(--readme-ink-muted);
}

.readme-slides__status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ====================================================================== */
/* Quiz                                                                   */
/* ====================================================================== */

.readme-question {
	margin: var(--readme-space-6) 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.readme-question__prompt {
	font-size: 20px;
	font-weight: 700;
	color: var(--readme-navy);
	line-height: 1.3;
	padding: 0;
	margin-bottom: var(--readme-space-3);
}

/* Each choice is a full-width tappable card; the input stays visible. */
.readme-question__choice {
	display: flex;
	align-items: flex-start;
	gap: var(--readme-space-3);
	width: 100%;
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-4);
	margin-bottom: var(--readme-space-2);
	cursor: pointer;
	font-weight: 400;
}

.readme-question__choice input {
	accent-color: var(--readme-navy);
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	flex-shrink: 0;
}

.readme-question__choice:has(input:checked) {
	border: 2px solid var(--readme-navy);
	/* Compensate for the thicker border so cards don't shift. */
	padding: calc(var(--readme-space-4) - 1px);
}

/* Result states — set by JS after grading. */
.readme-question.is-correct {
	border-left: 3px solid var(--readme-success);
	background: var(--readme-success-wash);
	padding: var(--readme-space-4);
	border-radius: var(--readme-radius-md);
}

.readme-question.is-incorrect {
	background: var(--readme-error-wash);
	padding: var(--readme-space-4);
	border-radius: var(--readme-radius-md);
}

.readme-question.is-incorrect .readme-question__prompt::after {
	content: " \2717"; /* ✗ */
	color: var(--readme-error);
}

.readme-question__result {
	font-size: 14px;
	margin: var(--readme-space-2) 0 0;
}

.readme-quiz__error-summary {
	background: var(--readme-error-wash);
	color: var(--readme-error);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-4);
	margin-bottom: var(--readme-space-5);
}

.readme-quiz__error-summary a {
	color: var(--readme-error);
	font-weight: 600;
}

/* Pass panel: celebratory but calm. Fail: plain white, navy heading, no red banner. */
.readme-quiz__result {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-6);
}

.readme-quiz__result--pass {
	background: var(--readme-success-wash);
	border-color: var(--readme-success);
	text-align: center;
}

.readme-quiz__result--pass .readme-quiz__score {
	font-family: var(--readme-font-display);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--readme-ink-heading);
}

.readme-quiz__review {
	list-style: none;
	margin: var(--readme-space-4) 0 0;
	padding: 0;
	text-align: left;
	font-size: 15px;
}

.readme-quiz__review li {
	padding: var(--readme-space-1) 0;
}

.readme-quiz__escalation {
	margin-top: var(--readme-space-3);
	font-size: 15px;
	color: var(--readme-ink-muted);
}

/* ====================================================================== */
/* Feedback                                                               */
/* ====================================================================== */

.readme-feedback__intro {
	color: var(--readme-ink-muted);
}

.readme-feedback textarea {
	width: 100%;
	min-height: 8rem;
	padding: var(--readme-space-3) var(--readme-space-4);
	font-family: var(--readme-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--readme-ink);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	margin-bottom: var(--readme-space-4);
	resize: vertical;
}

/* ====================================================================== */
/* Signing                                                                */
/* ====================================================================== */

.readme-sign {
	/* White with the amber "needs your signature" edge — the same language as
	   the dashboard's signature strip. The old teal fill re-painted the page
	   canvas INSIDE the white card: teal-white-teal-white nesting. */
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-left: 4px solid var(--readme-attention);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-6) var(--readme-space-6) var(--readme-space-6) calc(var(--readme-space-6) - 3px);
}

.readme-sign__context {
	font-size: 15px;
	color: var(--readme-ink-muted);
	margin-bottom: var(--readme-space-4);
}

/* The legally consequential control on this screen. It was a bare native
   checkbox between 48px fields, which made the one irreversible thing on the
   page the smallest thing on it. */
.readme-sign__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--readme-space-3);
	margin: var(--readme-space-4) 0;
	padding: var(--readme-space-4);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	background: var(--readme-surface-alt);
	font-weight: 400;
	cursor: pointer;
}

.readme-sign__consent:focus-within {
	border-color: var(--readme-action);
}

.readme-sign__consent input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	flex-shrink: 0;
	accent-color: var(--readme-action);
}

.readme-sign__pad {
	position: relative;
	margin: var(--readme-space-4) 0 var(--readme-space-2);
}

.readme-sign__pad canvas {
	display: block;
	width: 100%;
	height: 160px;
	background: var(--readme-surface);
	border: 2px dashed var(--readme-border);
	border-radius: var(--readme-radius-md);
	touch-action: none; /* Pointer Events drawing — stop scroll from stealing the stroke */
	cursor: crosshair;
}

.readme-sign__pad canvas.has-ink {
	border: 2px solid var(--readme-navy);
}

/* Signature baseline: thin rule with an ✕ marker, floated above canvas bottom. */
.readme-sign__baseline {
	position: absolute;
	left: var(--readme-space-5);
	right: var(--readme-space-5);
	bottom: 36px;
	border-bottom: 1px solid var(--readme-border);
	pointer-events: none;
	color: var(--readme-ink-muted);
	font-size: 14px;
}

.readme-sign__baseline::before {
	content: "\2715"; /* ✕ */
	position: absolute;
	left: 0;
	bottom: 2px;
}

.readme-quiz__next-steps {
	margin: var(--readme-space-3) 0 0;
	padding-left: 22px;
}

.readme-quiz__next-steps li {
	margin-bottom: var(--readme-space-2);
}

.readme-sign__clear {
	background: transparent;
	border: 0;
	padding: var(--readme-space-2);
	min-height: 44px;
	color: var(--readme-navy); /* quiet utility — orange is spent on Sign document */
	text-decoration: underline;
	text-underline-offset: 2px;
	font-size: 15px;
	cursor: pointer;
}

/* The accessible typed fallback was shipping as a raw UA button (outset
   border and all). Quiet text control, same voice as Clear. */
.readme-sign__typed-toggle {
	background: transparent;
	border: 0;
	padding: var(--readme-space-2) 0;
	min-height: 44px;
	color: var(--readme-navy);
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.readme-sign__typed-note {
	font-size: 15px;
	color: var(--readme-ink-muted);
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-4);
	margin: var(--readme-space-4) 0;
}

/* Receipt shown after signing. */
.readme-sign__receipt {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-5);
	display: flex;
	align-items: flex-start;
	gap: var(--readme-space-4);
}

.readme-sign__receipt-name {
	font-weight: 600;
}

.readme-sign__receipt-date {
	font-family: var(--readme-font-mono);
	font-size: 14px;
	color: var(--readme-ink-muted);
}

.readme-sign__image {
	display: block;
	max-height: 80px;
	max-width: 100%;
	margin-top: var(--readme-space-2);
}

/* ====================================================================== */
/* Completion                                                             */
/* ====================================================================== */

/* The <main> is a layout wrapper, NOT a card — the .readme-panel inside it
   already paints the surface. Skinning both rendered an identical white card
   nested inside an identical white card, and stacked their padding into the
   dead space under the receipt. */
.readme-complete {
	max-width: var(--readme-measure-text);
	margin: 0 auto;
	text-align: center;
}

/* The ledger carries margin-bottom: 0 (it is the last child everywhere else),
   so the receipt ran straight into the action row. */
.readme-complete .readme-ledger + p {
	margin-top: var(--readme-space-6);
}

.readme-check--big {
	width: 64px;
	height: 64px;
	font-size: 32px;
	margin: 0 auto var(--readme-space-4);
}

@media (prefers-reduced-motion: no-preference) {
	.readme-check--big {
		animation: readme-check-pop 200ms ease-in;
	}

	@keyframes readme-check-pop {
		from { transform: scale(0.8); }
		to { transform: scale(1); }
	}
}

/* "What you did" ledger — mono receipts, dotted leaders. */
.readme-ledger {
	font-family: var(--readme-font-mono);
	font-size: 14px;
	text-align: left;
	margin: var(--readme-space-6) 0 0;
	display: grid;
	/* The label column can never be starved to nothing. `1fr auto` sized the
	   value column to its longest line and gave the label whatever was left,
	   which on a narrow screen was zero — and with overflow:hidden carrying
	   the dot leaders, a 0px label does not clip, it disappears. The
	   completion record showed four identical "passed · 100%" lines with
	   nothing saying which quiz, and the page scrolled sideways. */
	grid-template-columns: minmax(6rem, 1fr) auto;
	gap: var(--readme-space-2) var(--readme-space-4);
}

.readme-ledger dt {
	position: relative;
	overflow: hidden;
}

.readme-ledger dt::after {
	content: " ..............................................................";
	position: absolute;
	color: var(--readme-border);
	white-space: nowrap;
	padding-left: var(--readme-space-2);
}

.readme-ledger dd {
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

/* Two ledgers take their labels from content — quiz and document titles on the
   completion record, and the signing receipt — so a label can be any length.
   They run out of room long before a rail card whose labels are all one word,
   which is why they stack at the layout breakpoint rather than the narrow one. */
@media (max-width: 899px) {
	.readme-complete .readme-ledger,
	.readme-sign__receipt .readme-ledger {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.readme-complete .readme-ledger dt,
	.readme-sign__receipt .readme-ledger dt {
		overflow: visible;
		margin-top: var(--readme-space-3);
		color: var(--readme-ink-muted);
	}

	.readme-complete .readme-ledger dt:first-of-type,
	.readme-sign__receipt .readme-ledger dt:first-of-type {
		margin-top: 0;
	}

	.readme-complete .readme-ledger dt::after,
	.readme-sign__receipt .readme-ledger dt::after {
		content: none;
	}

	.readme-complete .readme-ledger dd,
	.readme-sign__receipt .readme-ledger dd {
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
		margin-top: 2px;
	}
}

/* Every other ledger has short fixed labels and survives two columns much
   further down, but not to a phone. */
@media (max-width: 599px) {
	.readme-ledger {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.readme-ledger dt {
		overflow: visible;
		margin-top: var(--readme-space-3);
		color: var(--readme-ink-muted);
	}

	.readme-ledger dt:first-of-type {
		margin-top: 0;
	}

	.readme-ledger dt::after {
		content: none;
	}

	.readme-ledger dd {
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
		margin-top: 2px;
	}
}

/* ====================================================================== */
/* Help dialog                                                            */
/* ====================================================================== */

.readme-help-dialog {
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	box-shadow: var(--readme-shadow-raised);
	padding: var(--readme-space-6);
	max-width: 24rem;
	width: calc(100% - 2 * var(--readme-space-4));
	color: var(--readme-ink);
	font-family: var(--readme-font-body);
}

.readme-help-dialog::backdrop {
	background: rgb(18 40 76 / 0.4);
}

/* Hostile third-party CSS sometimes unhides <dialog>. Belt and suspenders. */
.readme-help-dialog:not([open]) {
	display: none !important;
}

/* ====================================================================== */
/* Utilities                                                              */
/* ====================================================================== */

.readme-error-text {
	color: var(--readme-error);
	font-size: 14px;
}

.readme-notice {
	background: var(--readme-surface-alt);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-4);
	font-size: 15px;
}

/* ====================================================================== */
/* Reduced motion                                                         */
/* ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.readme-learn *,
	.readme-learn *::before,
	.readme-learn *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ====================================================================== */
/* Print                                                                  */
/* ====================================================================== */

@media print {
	body.readme-learn {
		background: #fff;
		color: #000;
	}

	.readme-bar,
	.readme-header,
	.readme-help,
	.readme-progress-thin {
		display: none !important;
	}

	.readme-main {
		padding: 0;
	}

	.readme-panel,
	.readme-complete {
		border: 0;
		box-shadow: none;
		max-width: 100%;
	}

	.readme-ledger {
		width: 100%;
	}

	/* Paper is about 816px, so the narrow-screen stacking above would apply to
	   a printed record too. On paper there is no scrolling to save and the
	   two-column receipt is the point, so put it back — matching the selectors
	   above, which are more specific than a bare .readme-ledger. */
	.readme-ledger,
	.readme-complete .readme-ledger,
	.readme-sign__receipt .readme-ledger {
		grid-template-columns: minmax(6rem, 1fr) auto;
		gap: var(--readme-space-2) var(--readme-space-4);
	}

	.readme-ledger dt,
	.readme-complete .readme-ledger dt,
	.readme-sign__receipt .readme-ledger dt {
		overflow: hidden;
		margin-top: 0;
	}

	.readme-ledger dt::after,
	.readme-complete .readme-ledger dt::after,
	.readme-sign__receipt .readme-ledger dt::after {
		content: " ..............................................................";
	}

	.readme-ledger dd,
	.readme-complete .readme-ledger dd,
	.readme-sign__receipt .readme-ledger dd {
		text-align: right;
		white-space: nowrap;
		margin-top: 0;
	}
}

/* ====================================================================== */
/* In-lesson content polish — collapsibles, separators, document tools    */
/* ====================================================================== */

/* Collapsible sections: WordPress core/details, dressed as calm cards. */
.readme-lesson-content .wp-block-details {
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	background: var(--readme-surface);
	margin: var(--readme-space-4) 0;
}

.readme-lesson-content .wp-block-details summary {
	list-style: none;
	cursor: pointer;
	padding: var(--readme-space-4) var(--readme-space-5);
	font-weight: 700;
	color: var(--readme-ink-heading);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--readme-space-3);
	min-height: 44px;
	border-radius: var(--readme-radius-md);
}

.readme-lesson-content .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.readme-lesson-content .wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--readme-ink-muted);
	border-bottom: 2px solid var(--readme-ink-muted);
	transform: rotate(45deg);
	transition: transform 150ms ease;
	margin-right: 2px;
}

.readme-lesson-content .wp-block-details[open] summary::after {
	transform: rotate(225deg);
}

.readme-lesson-content .wp-block-details[open] summary {
	border-bottom: 1px solid var(--readme-border);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.readme-lesson-content .wp-block-details summary:hover {
	background: var(--readme-surface-alt);
}

.readme-lesson-content .wp-block-details summary:focus-visible {
	outline: 2px solid var(--readme-focus);
	outline-offset: 2px;
}

.readme-lesson-content .wp-block-details > *:not(summary) {
	padding-left: var(--readme-space-5);
	padding-right: var(--readme-space-5);
}

.readme-lesson-content .wp-block-details > *:nth-child(2) {
	padding-top: var(--readme-space-4);
}

.readme-lesson-content .wp-block-details > *:last-child {
	padding-bottom: var(--readme-space-4);
}

@media (prefers-reduced-motion: reduce) {
	.readme-lesson-content .wp-block-details summary::after {
		transition: none;
	}
}

/* Separators: quiet rules, generous rhythm. */
.readme-lesson-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--readme-border);
	margin: var(--readme-space-6) 0;
}

/* Ghost-button links inside content (e.g. "Open the slides") keep button chrome. */
.readme-lesson-content p > a.readme-button {
	margin-top: var(--readme-space-2);
}

/* Document tools row (under every rendered document). */
.readme-doc-tools {
	display: flex;
	align-items: center;
	gap: var(--readme-space-4);
	flex-wrap: wrap;
	margin: var(--readme-space-4) 0;
}

.readme-doc-tools__note {
	font-family: var(--readme-font-mono);
	font-size: 0.8125rem;
	color: var(--readme-ink-muted);
}

/* Sign-in fork styles live ONCE, in the Sign-in section below. The old dashed
   treatment read as "unfinished" rather than "quieter". */

.readme-signin__hint {
	font-size: 0.875rem;
	color: var(--readme-ink-muted);
	margin-bottom: 0;
}

/* Comparison cards: two equal columns, distinct urgency accents, clear CTAs.
   Authored as core/columns with .readme-compare / .readme-compare__card. */
.readme-lesson-content .readme-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--readme-space-4);
	margin: var(--readme-space-5) 0;
}

@media (max-width: 719px) {
	.readme-lesson-content .readme-compare {
		grid-template-columns: 1fr;
	}
}

.readme-lesson-content .readme-compare__card {
	border: 1px solid var(--readme-border);
	border-top: 4px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-5);
	background: var(--readme-surface);
	display: flex;
	flex-direction: column;
	flex-basis: auto !important; /* core/columns inline flex-basis defers to the grid */
	margin: 0 !important;
}

.readme-lesson-content .readme-compare__card--low {
	border-top-color: var(--readme-teal);
}

.readme-lesson-content .readme-compare__card--high {
	border-top-color: var(--readme-error);
}

.readme-lesson-content .readme-compare__card h3 {
	margin-top: 0;
	margin-bottom: var(--readme-space-1);
}

.readme-lesson-content .readme-compare__card > p:last-child {
	margin-top: auto; /* CTA pinned to the card foot — columns stay comparable */
	padding-top: var(--readme-space-3);
	margin-bottom: 0;
}

.readme-lesson-content .readme-compare__kicker {
	font-size: 0.875rem;
	color: var(--readme-ink-muted);
	margin-top: 0;
}

/* Navy solid button — the "clear CTA" that doesn't spend the orange budget. */
.readme-button--navy {
	background: var(--readme-navy);
	color: var(--readme-ink-inverse);
	border: 1.5px solid var(--readme-navy);
	font-weight: 700;
}

.readme-learn a.readme-button--navy {
	color: var(--readme-ink-inverse);
}

.readme-button--navy:hover {
	filter: brightness(1.15);
}

/* Registration: first/last name side-by-side on wide screens. */
.readme-register__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--readme-space-3);
}

@media (max-width: 479px) {
	.readme-register__row { grid-template-columns: 1fr; }
}

/* Dashboard signature strip — the compliance to-do list, amber-edged. */
.readme-sign-strip {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-left: 4px solid var(--readme-attention);
	border-radius: var(--readme-radius-lg);
	/* Left padding absorbs the 3px extra border so content stays on-column. */
	padding: var(--readme-space-2) var(--readme-space-5) var(--readme-space-2) calc(var(--readme-space-5) - 3px);
	margin-bottom: var(--readme-space-5);
}

.readme-sign-strip__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--readme-space-4);
	padding: var(--readme-space-3) 0;
	flex-wrap: wrap;
}

.readme-sign-strip__row + .readme-sign-strip__row {
	border-top: 1px solid var(--readme-border);
}

.readme-sign-strip__title {
	font-weight: 500;
}

.readme-sign-strip__later {
	font-size: 0.875rem;
	color: var(--readme-ink-muted);
}

/* Honeypot: must never render — bots fill it, humans never see it. */
.readme-register__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Control, label and submit-width rules live ONCE, in the Forms section above. */

.readme-register__row span { display: block; }

/* Header cluster styles live ONCE, in the Header cluster section below. */

/*
 * Duotone draws two layers. Font Awesome's default secondary opacity is 40%,
 * which at the hairline `thin` weight lets the secondary MASS out-shout the
 * meaningful stroke — the help button's question mark disappeared into a grey
 * disc, and a teal tick read as grey. Quieter secondary, and the primary is
 * currentColor as usual.
 */
.readme-icon {
	vertical-align: -0.2em;
	flex-shrink: 0;
	--fa-secondary-opacity: 0.22;
}

/* Below the label step the thin stroke stops carrying at all, so small icons
   step up a weight rather than shrinking into a smudge. */
.readme-icon[style*="font-size:18px"],
.readme-icon[style*="font-size:16px"] {
	font-weight: 300; /* fa-light */
	--fa-secondary-opacity: 0.3;
}

.readme-signed-copy { margin-top: var(--readme-space-3); }
.readme-signed-copy .readme-button { width: auto; display: inline-flex; gap: var(--readme-space-2); }

/* Responsive header rules live at the END of this file, after the header
   cluster definitions they need to override. */

/* ====================================================================== */
/* Icons — Phosphor, via readme_icon(). Clarify state or type, never       */
/* decorate. Always paired with text; regular weight, fill = achieved.     */
/* ====================================================================== */

.readme-icon--16 { width: 16px; height: 16px; }
.readme-icon--24 { width: 24px; height: 24px; }
.readme-icon--32 { width: 32px; height: 32px; }

/* ====================================================================== */
/* Page layout — ONE grid, shared with the header and the sticky bar.      */
/* ====================================================================== */

.readme-layout {
	width: 100%;
	max-width: var(--readme-measure);
	margin: 0 auto;
}

/* Content + secondary rail. Collapses to one column under 900px. */
.readme-layout--rail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--readme-rail);
	gap: var(--readme-space-6);
	align-items: start;
}

.readme-layout__main {
	min-width: 0;
}

.readme-rail {
	display: flex;
	flex-direction: column;
	gap: var(--readme-space-4);
	min-width: 0;
}

.readme-rail-card {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-5);
	box-shadow: var(--readme-shadow-card);
}

/* Carries .readme-learn — the generic `.readme-learn h2` rule (0-1-1) would
   otherwise beat this class (0-1-0) and hand every rail card a 22px title
   with 24px of phantom margin above it. Same leak family as the anchor
   ghosts; same cure. */
.readme-learn .readme-rail-card__title {
	display: flex;
	align-items: center;
	gap: var(--readme-space-2);
	font-family: var(--readme-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--readme-ink-heading);
	margin: 0 0 var(--readme-space-3);
}

.readme-rail-card p {
	font-size: 0.9375rem;
	color: var(--readme-ink-muted);
}

.readme-rail-card p:last-child,
.readme-rail-card .readme-ledger + p:last-child {
	margin-bottom: 0;
}

.readme-rail-card .readme-button {
	width: auto;
}

/* Signed-documents shelf — rides the .readme-recent row idiom; the pen icon
   stays ink-colored (a record, not a fresh success), and each meta carries a
   view / PDF link to the exact frozen version signed. */
.readme-signed-docs__icon {
	color: var(--readme-ink-heading);
}

.readme-signed-docs .readme-recent__meta a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.readme-rail-card .readme-ledger {
	margin: 0;
}

@media (max-width: 899px) {
	.readme-layout--rail {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--readme-space-5);
	}
	/* Reassurance before the work on a phone. */
	.readme-rail--first {
		order: -1;
	}
}

/* ====================================================================== */
/* Page footer — every screen gets a bottom edge.                         */
/* ====================================================================== */

.readme-footer {
	/* Small print on the canvas, not a second white band — the navy bar
	   (lessons) or the wash itself is the page's true bottom edge. */
	border-top: 1px solid var(--readme-teal);
	background: transparent;
	padding: var(--readme-space-5) clamp(16px, 4vw, 48px);
	font-size: 0.875rem;
	color: var(--readme-ink-muted);
}

.readme-footer__inner {
	width: 100%;
	max-width: var(--readme-measure);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--readme-space-5);
	flex-wrap: wrap;
}

.readme-footer__org {
	font-weight: 600;
	color: var(--readme-ink-heading);
}

.readme-learn .readme-footer a {
	color: var(--readme-ink-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.readme-learn .readme-footer a:hover {
	color: var(--readme-ink);
	text-decoration-thickness: 2px;
}

/* ====================================================================== */
/* Header cluster — home chip, identity, sign out, help.                  */
/* ====================================================================== */

.readme-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
	font-weight: 700;
	color: var(--readme-navy);
	text-decoration: none;
	min-height: 44px;
}

.readme-header__left {
	display: flex;
	align-items: center;
	gap: var(--readme-space-4);
	min-width: 0;
}

.readme-header__context {
	font-size: 0.9375rem;
	color: var(--readme-ink-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Home is a filled chip: persistent, unmistakable, one click from anywhere. */
.readme-learn a.readme-header__home {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
	min-height: 44px;
	padding: var(--readme-space-2) var(--readme-space-4);
	border-radius: var(--readme-radius-md);
	background: var(--readme-navy-wash);
	color: var(--readme-navy);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.readme-learn a.readme-header__home:hover {
	background: var(--readme-progress-track);
}

.readme-header__who {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
	font-size: 0.9375rem;
	color: var(--readme-ink-heading);
	white-space: nowrap;
	border-left: 1px solid var(--readme-border);
	padding-left: var(--readme-space-4);
}

/* Icon-only sign out: 44px target, accessible name, visible label on hover. */
.readme-learn a.readme-header__signout {
	width: 44px;
	height: 44px;
	border-radius: var(--readme-radius-md);
	border: 1.5px solid var(--readme-navy); /* one border grammar for the header cluster — matches Need help? */
	background: var(--readme-surface);
	color: var(--readme-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color 150ms ease;
}

.readme-learn a.readme-header__signout:hover,
.readme-learn a.readme-header__signout:focus-visible {
	background: var(--readme-navy-wash);
}

/* ====================================================================== */
/* Chips + eyebrows — small shared vocabulary                             */
/* ====================================================================== */

.readme-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-1);
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-1) var(--readme-space-3);
	white-space: nowrap;
}

/*
 * Three tones, and only three. A chip's colour is a claim about how the reader
 * should feel; `--pending` was carrying eight different meanings in one look —
 * "offboarded", "2 to sign", "failed", "not published", "voided", "open" — so
 * a delivery failure and a routine label were indistinguishable. `--required`
 * was byte-identical to `--pending`, so one of the two modifiers did nothing.
 *
 *   neutral    a fact about the row            (required, not published)
 *   attention  somebody needs to do something  (2 to sign, open)
 *   bad        something went wrong            (failed, voided)
 */
.readme-chip--required,
.readme-chip--pending,
.readme-chip--invited,
.readme-chip--neutral {
	color: var(--readme-ink-heading);
	background: var(--readme-navy-wash);
}

.readme-chip--attention {
	gap: 5px;
	color: var(--readme-attention);
	background: var(--readme-attention-wash);
}

.readme-chip--bad,
.readme-chip--failed,
.readme-chip--expired {
	color: var(--readme-error, #a02020);
	background: var(--readme-error-wash, #fdf0f0);
}

.readme-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--readme-space-2);
	font-family: var(--readme-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
	margin: 0 0 var(--readme-space-3);
}

/* A quiet inline meta row: "11 lessons · about 30 min · Required". */
.readme-metarow {
	display: flex;
	align-items: center;
	gap: var(--readme-space-4);
	flex-wrap: wrap;
	font-size: 0.9375rem;
	color: var(--readme-ink-muted);
	margin: 0 0 var(--readme-space-5);
}

.readme-metarow > span {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
}

/* ====================================================================== */
/* Dashboard                                                              */
/* ====================================================================== */

.readme-dash-mast {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--readme-space-6);
	flex-wrap: wrap;
	margin-bottom: var(--readme-space-6);
}

.readme-dash-mast .readme-greeting {
	margin-bottom: var(--readme-space-2);
}

.readme-dash-mast__status {
	font-size: 1.125rem;
	color: var(--readme-ink-muted);
	margin: 0;
	max-width: 42ch;
}

.readme-dash-mast__pct {
	text-align: right;
	margin: 0; /* UA dl margin otherwise inflates the flex row and pushes the greeting down */
}

.readme-dash-mast__pct dt {
	font-family: var(--readme-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
	margin-bottom: var(--readme-space-1);
}

.readme-dash-mast__pct dd {
	margin: 0;
	font-family: var(--readme-font-display);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--readme-ink-heading);
}

/* The "continue" card: horizontal, with the next lesson named. */
.readme-course-card--hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--readme-space-6);
	align-items: center;
	border-radius: var(--readme-radius-xl);
	padding: var(--readme-space-5); /* same inset as every sibling card — no 8px title jog down the stack */
	transition: border-color 150ms ease;
}

.readme-course-card--hero:hover {
	border-color: var(--readme-navy);
}

.readme-course-card__next {
	display: flex;
	align-items: center;
	gap: var(--readme-space-2);
	font-size: 1rem;
	margin: var(--readme-space-3) 0 0;
}

.readme-course-card__next b {
	color: var(--readme-ink-heading);
}

@media (max-width: 599px) {
	.readme-course-card--hero {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--readme-space-4);
	}
	.readme-course-card--hero .readme-button {
		width: 100%;
	}
}

/* Recently completed — the receipt a compliance learner wants to see. */
.readme-recent {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-2) var(--readme-space-5);
	list-style: none;
	margin: 0;
}

.readme-recent__row {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
	padding: var(--readme-space-3) 0;
	min-height: 44px;
	font-size: 1rem;
	flex-wrap: wrap;
}

.readme-recent__row + .readme-recent__row {
	border-top: 1px solid var(--readme-border);
}

.readme-recent__title {
	flex: 1;
	min-width: 12ch;
}

.readme-recent__meta {
	font-family: var(--readme-font-mono);
	font-size: 0.8125rem;
	color: var(--readme-ink-muted);
	white-space: nowrap;
}

.readme-recent__icon {
	color: var(--readme-success);
	flex-shrink: 0;
}

/* First run: nothing started yet. Point at one thing. */
.readme-firstrun {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-xl);
	padding: var(--readme-space-6);
	box-shadow: var(--readme-shadow-card);
}

.readme-firstrun h2 {
	margin-top: 0;
}

/* Signature strip rows get the type icon + a mono receipt column. */
.readme-sign-strip__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 3.25rem;
	color: var(--readme-accent);
	line-height: 1;
}

.readme-sign-strip__title {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-3);
	font-weight: 500;
}

/* ====================================================================== */
/* Course overview — typed, dated syllabus rows                           */
/* ====================================================================== */

.readme-syllabus__group {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
	font-family: var(--readme-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
	margin: var(--readme-space-6) 0 0;
}

.readme-syllabus__group::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--readme-border);
}

/* Fixed type column: icon + "Quiz · 4 q". Fills the dead left-of-title space. */
.readme-syllabus__type {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
	width: 7rem;
	flex: 0 0 auto;
	font-family: var(--readme-font-mono);
	font-size: 0.8125rem;
	color: var(--readme-ink-muted);
}

.readme-syllabus__row {
	transition: background-color 150ms ease;
}

.readme-syllabus__row:hover {
	background: var(--readme-surface-alt);
}

/* "Up next" is NAVY, not orange. Orange is progress fill + the one bar
   action; spending it here is what made the bar button stop reading. */
.readme-syllabus__row--next {
	border-left: 3px solid var(--readme-navy);
	/* White, not navy-wash: this row sits on the teal canvas, where the pale
	   navy tint reads as a stray gray panel. White is the site's "you are
	   here" surface — same language as the cards. */
	background: var(--readme-surface);
	border-radius: 0 var(--readme-radius-md) var(--readme-radius-md) 0;
	/* Absorb the rule into the existing gutter so the row's content stays on the
	   same left edge as every other row. */
	padding-left: calc(var(--readme-space-2) - 3px);
}

.readme-syllabus__row--next .readme-syllabus__state {
	background: var(--readme-navy);
	color: var(--readme-ink-inverse);
	font-weight: 700;
}

.readme-syllabus__flag {
	color: var(--readme-ink-heading);
	font-weight: 700;
}

.readme-syllabus__row--next .readme-syllabus__meta {
	color: var(--readme-ink-heading);
	font-weight: 700;
}

/* Locked: a lock is a promise ("later"); a dimmed tick reads as a bug. */
.readme-syllabus__row--locked .readme-syllabus__state {
	opacity: 1;
	color: var(--readme-ink-muted);
}

.readme-syllabus__blurb {
	display: block;
	font-size: 0.875rem;
	color: var(--readme-ink-muted);
}

@media (max-width: 719px) {
	.readme-syllabus__type {
		width: auto;
		order: 3;
		flex-basis: 100%;
		padding-left: calc(32px + var(--readme-space-4));
	}
	.readme-syllabus__row {
		flex-wrap: wrap;
	}
}

/* ====================================================================== */
/* Lesson shell — outline rail, media breakout, foot                      */
/* ====================================================================== */

/* <main> carries .readme-lesson-content as a hook, but it must NOT also carry
   the prose measure — that squeezed the whole outline+content grid into 68ch.
   Reading width is applied to the prose children instead (below). */
.readme-main.readme-lesson-content {
	max-width: none;
	margin: 0;
}

.readme-lesson-layout {
	display: grid;
	grid-template-columns: var(--readme-outline) minmax(0, 1fr);
	gap: var(--readme-space-7);
	align-items: start;
	width: 100%;
	max-width: var(--readme-measure);
	margin: 0 auto;
}

.readme-lesson-layout .readme-panel {
	max-width: none;
	margin: 0;
}

/* Prose keeps its reading measure even though the panel is wider. */
.readme-lesson-layout .readme-panel > p,
.readme-lesson-layout .readme-panel > ul,
.readme-lesson-layout .readme-panel > ol,
.readme-lesson-layout .readme-panel > h2,
.readme-lesson-layout .readme-panel > h3,
.readme-lesson-layout .readme-panel > blockquote {
	max-width: var(--readme-measure-text);
}

/* Media breaks out past the reading measure — a 16:9 embed at 68ch is a stamp. */
.readme-lesson-layout .readme-video,
.readme-lesson-layout .readme-slides__track,
.readme-lesson-layout .readme-document__file {
	max-width: none;
}

/* The nav divider spans the panel like the form above it — a rule that
   stops at the prose measure under a full-width panel reads as a glitch. */
.readme-lesson-layout .readme-panel > .readme-lesson-nav {
	max-width: none;
}

.readme-outline {
	position: sticky;
	top: var(--readme-space-4);
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-4) var(--readme-space-2);
	max-height: calc(100vh - var(--readme-space-7));
	overflow-y: auto;
}

.readme-outline__title {
	font-family: var(--readme-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
	margin: var(--readme-space-1) var(--readme-space-3) var(--readme-space-3);
}

.readme-outline__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The rail lives inside .readme-lesson-content, whose prose-list rules
   (margins, indents meant for body text) leak into the list AND its li's —
   the ol picked up the prose padding-left and shoved every row rightward.
   Rows are chrome, not prose — hard reset, carrying .readme-learn so the
   prose rules (0-1-1) cannot win. */
.readme-learn .readme-outline__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.readme-learn .readme-outline__list li {
	margin: 0;
	padding: 0;
}

.readme-outline__item {
	display: flex;
	align-items: center;
	gap: var(--readme-space-2);
	min-height: 44px;
	padding: var(--readme-space-2) var(--readme-space-3);
	border-radius: var(--readme-radius-md);
	font-size: 0.9062rem;
	line-height: 1.35;
	color: var(--readme-ink-muted);
}

.readme-learn a.readme-outline__item {
	text-decoration: none;
	color: var(--readme-ink);
	transition: background-color 150ms ease;
}

.readme-learn a.readme-outline__item:hover {
	background: var(--readme-surface-alt);
}

.readme-outline__item[aria-current="page"] {
	background: var(--readme-navy-wash);
	color: var(--readme-ink-heading);
	font-weight: 600;
}

.readme-outline__item--locked {
	color: var(--readme-ink-muted);
}

.readme-outline__icon {
	flex-shrink: 0;
	color: currentColor;
}

.readme-outline__item--done .readme-outline__icon {
	color: var(--readme-success);
}

/* Desktop: the disclosure wrapper is invisible chrome — the rail just shows.
   Under 1200px it becomes a real <details> under the header, because a rail is
   never hidden without a route back to it. */
.readme-outline-toggle > summary {
	display: none;
}

@media (max-width: 1199px) {
	.readme-lesson-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--readme-space-4);
	}
	.readme-outline {
		position: static;
		max-height: none;
		padding: 0;
		border: 0;
		background: transparent;
	}
	.readme-outline-toggle {
		border: 1px solid var(--readme-border);
		border-radius: var(--readme-radius-md);
		background: var(--readme-surface);
	}
	.readme-outline-toggle > summary {
		display: flex;
		list-style: none;
		cursor: pointer;
		min-height: 44px;
		align-items: center;
		gap: var(--readme-space-2);
		padding: var(--readme-space-3) var(--readme-space-4);
		font-weight: 600;
		color: var(--readme-ink-heading);
	}
	.readme-outline-toggle > summary::-webkit-details-marker {
		display: none;
	}
	.readme-outline-toggle[open] > summary {
		border-bottom: 1px solid var(--readme-border);
	}
	.readme-outline-toggle .readme-outline {
		padding: var(--readme-space-2);
	}
	.readme-outline__title {
		display: none;
	}
}

/* ====================================================================== */
/* View-as banner: an admin is looking, and nothing here is real.         */
/* ====================================================================== */

.readme-preview-banner {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--readme-space-4);
	flex-wrap: wrap;
	background: repeating-linear-gradient(135deg, #fde68a 0 14px, #facc15 14px 28px);
	color: #1c1917;
	border-bottom: 3px solid #1c1917;
	padding: var(--readme-space-3) clamp(16px, 4vw, 48px);
	font-size: 15px;
}

.readme-preview-banner__text strong {
	color: #1c1917;
}

.readme-preview-banner__stop {
	white-space: nowrap;
}

/* ====================================================================== */
/* Admin strip on the learner home: the console, impossible to miss.      */
/* ====================================================================== */

.readme-admin-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--readme-space-5);
	flex-wrap: wrap;
	background: var(--readme-navy);
	color: var(--readme-ink-inverse);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-5) var(--readme-space-6);
	margin-bottom: var(--readme-space-6);
	box-shadow: var(--readme-shadow-bar);
}

.readme-admin-strip__eyebrow {
	margin: 0 0 var(--readme-space-1);
	font-family: var(--readme-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
}

.readme-learn .readme-admin-strip h2.readme-admin-strip__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.1;
	color: var(--readme-ink-inverse);
}

.readme-admin-strip__sub {
	margin: var(--readme-space-2) 0 0;
	opacity: 0.85;
}

.readme-admin-strip__actions {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
	flex-wrap: wrap;
}

.readme-admin-strip__actions .readme-button {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
}

.readme-admin-strip__main {
	min-height: 60px;
	padding-inline: var(--readme-space-6);
	font-size: 1.125rem;
}

.readme-learn a.readme-button.readme-admin-strip__ghost {
	border-color: var(--readme-ink-inverse);
	color: var(--readme-ink-inverse);
	background: transparent;
}

.readme-learn a.readme-button.readme-admin-strip__ghost:hover,
.readme-learn a.readme-button.readme-admin-strip__ghost:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 599px) {
	.readme-admin-strip__actions,
	.readme-admin-strip__actions .readme-button {
		width: 100%;
	}
	.readme-admin-strip__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.readme-admin-strip__actions .readme-button {
		justify-content: center;
	}
}

/* ====================================================================== */
/* Lesson nav: Back + the primary action, in the content, where the eyes  */
/* are when the reader finishes. Replaces the sticky bar on lesson pages. */
/* ====================================================================== */

.readme-lesson-nav {
	border-top: 1px solid var(--readme-border);
	margin-top: var(--readme-space-6);
	padding-top: var(--readme-space-5);
}

.readme-lesson-nav__next {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
	flex-wrap: wrap;
	font-size: 1rem;
	margin: 0 0 var(--readme-space-4);
}

.readme-lesson-nav__next b {
	color: var(--readme-ink-heading);
}

.readme-lesson-nav__meta {
	font-family: var(--readme-font-mono);
	font-size: 0.8125rem;
	color: var(--readme-ink-muted);
}

.readme-lesson-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--readme-space-4);
	flex-wrap: wrap;
}

.readme-lesson-nav__back {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
}

.readme-lesson-nav__action {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--readme-space-3);
	flex-wrap: wrap;
	margin-left: auto;
}

/* The primary action is the biggest thing on the page after the heading. */
.readme-lesson-nav__action .readme-button--primary {
	min-height: 52px;
	padding-inline: var(--readme-space-6);
	font-size: 1.0625rem;
}

/* Status text inherits the bar's class for the JS state machine, but sits on
   a light panel here, so it takes normal ink instead of inverse. */
.readme-lesson-nav .readme-bar__status {
	color: var(--readme-ink);
}

.readme-lesson-nav .readme-error-text {
	color: var(--readme-ink-inverse);
	background: var(--readme-error);
	border-radius: var(--readme-radius-sm);
	padding: var(--readme-space-1) var(--readme-space-2);
}

.readme-lesson-nav button[aria-busy="true"] {
	opacity: 1;
	cursor: wait;
}

@media (max-width: 599px) {
	.readme-lesson-nav__row,
	.readme-lesson-nav__action {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.readme-lesson-nav__action {
		margin-left: 0;
	}

	.readme-lesson-nav__back,
	.readme-lesson-nav__action .readme-button {
		justify-content: center;
		width: 100%;
	}
}

/* ====================================================================== */
/* Quiz — numbered cards, tracker, states                                 */
/* ====================================================================== */

.readme-question {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-5) var(--readme-space-6);
	margin: 0 0 var(--readme-space-4);
}

.readme-question__number {
	display: flex;
	align-items: center;
	gap: var(--readme-space-2);
	font-family: var(--readme-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
	margin: 0 0 var(--readme-space-3);
}

.readme-question__choice {
	min-height: 48px;
	align-items: center;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.readme-question__choice:hover {
	border-color: var(--readme-ink-muted);
	background: var(--readme-surface-alt);
}

/* The ring belongs to the whole card, not the 20px radio inside it. */
.readme-question__choice:has(input:focus-visible) {
	outline: 2px solid var(--readme-focus);
	outline-offset: 2px;
}

.readme-question__choice:last-child {
	margin-bottom: 0;
}

/* Result states keep the card chrome rather than replacing it. */
.readme-question.is-correct,
.readme-question.is-incorrect {
	padding: var(--readme-space-5) var(--readme-space-6);
	border-radius: var(--readme-radius-lg);
}

.readme-question.is-correct {
	border-left: 3px solid var(--readme-success);
}

.readme-question.is-incorrect {
	border-left: 3px solid var(--readme-error);
}

.readme-quiz__actions {
	margin-top: var(--readme-space-5);
}

/* ====================================================================== */
/* Quiz passed — a page, not a lonely card                                */
/* ====================================================================== */

.readme-pass-band {
	background: var(--readme-success-wash);
	border: 1px solid var(--readme-success);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-5) var(--readme-space-6);
	display: flex;
	align-items: center;
	gap: var(--readme-space-5);
	flex-wrap: wrap;
	margin-bottom: var(--readme-space-5);
}

.readme-pass-band__body {
	flex: 1;
	min-width: 16ch;
}

.readme-pass-band__body h2 {
	margin: 0 0 var(--readme-space-1);
	font-size: 1.5rem;
}

.readme-pass-band__body p {
	margin: 0;
	font-size: 1rem;
	color: var(--readme-ink-muted);
}

.readme-pass-band__score {
	font-family: var(--readme-font-display);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--readme-ink-heading);
	margin: 0;
}

/* The review: the actual questions and the learner's actual answers. A score
   alone is not a receipt — and re-reading a correct answer is the best
   retention moment in the course. */
.readme-pass-review {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-2) var(--readme-space-5);
	margin: 0 0 var(--readme-space-5);
	list-style: none;
}

.readme-pass-review__row {
	display: flex;
	gap: var(--readme-space-3);
	padding: var(--readme-space-4) 0;
}

.readme-pass-review__row + .readme-pass-review__row {
	border-top: 1px solid var(--readme-border);
}

.readme-pass-review__icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--readme-success);
}

.readme-pass-review__row--wrong .readme-pass-review__icon {
	color: var(--readme-error);
}

.readme-pass-review__q {
	font-size: 0.9375rem;
	color: var(--readme-ink-muted);
	margin: 0 0 var(--readme-space-1);
}

.readme-pass-review__a {
	font-size: 1rem;
	color: var(--readme-ink);
	margin: 0;
}

/* What's next — navy ghost, so the orange stays with the bar action. */
.readme-pass-next {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--readme-space-5);
	flex-wrap: wrap;
}

.readme-pass-next h3 {
	margin: 0 0 var(--readme-space-1);
}

.readme-pass-next p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--readme-ink-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.readme-pass-band .readme-check--big {
		animation: readme-check-pop 200ms ease-in;
	}
}

/* ====================================================================== */
/* Sign-in — the front door, composed                                     */
/* ====================================================================== */

.readme-signin-split {
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
	grid-template-rows: auto auto;
	width: 100%;
	max-width: var(--readme-measure);
	margin: 0 auto;
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-xl);
	overflow: hidden;
	background: var(--readme-surface);
}

/* The one big navy moment. Spends no orange, so the ration is untouched. */
.readme-signin-split__welcome {
	background: var(--readme-navy);
	color: var(--readme-ink-inverse);
	padding: var(--readme-space-7) var(--readme-space-6);
	display: flex;
	flex-direction: column;
	/* Centred, like the form beside it. The column stretches to the taller of
	   the two, and top-aligned content left a navy hole under the headline. */
	justify-content: center;
}

/* Small teal label above the headline — the one place the org name is stated
   at full voice, so the headline itself can be about the reader. */
.readme-signin-split__eyebrow {
	font-family: var(--readme-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--readme-teal);
	margin: 0 0 var(--readme-space-3);
	opacity: 1;
}

.readme-signin-split__welcome h2 {
	font-family: var(--readme-font-display);
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--readme-ink-inverse);
	margin: 0 0 var(--readme-space-4);
	text-wrap: balance;
}

.readme-signin-split__welcome p {
	color: var(--readme-ink-inverse);
	opacity: 0.86;
	font-size: 1.0625rem;
}

.readme-signin-split__headline span {
	display: block;
}

.readme-signin-split__lede {
	max-width: 34ch;
	line-height: 1.6;
	margin: 0;
	font-size: 1.125rem;
}

/* A hairline above the three activities separates "what this is" from
   "what's waiting for you" without adding another box. */
.readme-signin-points {
	list-style: none;
	margin: var(--readme-space-6) 0 0;
	padding: var(--readme-space-6) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-direction: column;
	gap: var(--readme-space-4);
}

.readme-signin-points li {
	display: flex;
	align-items: center;
	gap: var(--readme-space-4);
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--readme-ink-inverse);
}

.readme-signin-points li span {
	display: block;
	opacity: 0.86;
}

.readme-signin-points li strong {
	display: block;
	font-weight: 600;
	opacity: 1;
	margin-bottom: 1px;
}

.readme-signin-points .readme-icon {
	color: var(--readme-teal);
	flex: 0 0 auto;
	width: 2.75rem;
	text-align: center;
	line-height: 1;
}

/* Follows the lede rather than being pinned to the floor. With the activity
   list gone the panel is short, and margin-top:auto left a hole in the middle
   that read as a mistake rather than as space. */
.readme-signin-split__foot {
	margin-top: var(--readme-space-6);
	padding-top: var(--readme-space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.875rem;
	color: var(--readme-ink-inverse);
	opacity: 0.75;
	max-width: 34ch;
}

/* The panel carries .readme-signin too, which brings a top margin meant for the
   standalone sign-in page. Inside the split that margin is a 64px dent in the
   top of the card — invisible as "dead space" rather than obviously wrong. */
.readme-signin-split .readme-signin {
	margin-top: 0;
}

/* Centre the column's content instead of stretching it corner to corner: the
   navy panel is taller, and pinning "New here?" to the bottom left a dead gap
   in the middle of the primary action. */
.readme-signin-split__form {
	padding: var(--readme-space-7) var(--readme-space-6);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.readme-signin-split__form h1 {
	font-size: 2rem;
	margin-bottom: var(--readme-space-2);
}

/* The fork stops competing: a bordered foot strip, not a second dashed card. */
.readme-signin__new {
	margin-top: var(--readme-space-6);
	padding-top: var(--readme-space-5);
	border-top: 1px solid var(--readme-border);
	border-radius: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--readme-space-5);
	flex-wrap: wrap;
}

.readme-signin__new h2 {
	margin: 0 0 var(--readme-space-1);
	font-size: 1.125rem;
}

.readme-signin__new p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--readme-ink-muted);
}

.readme-signin__new-body {
	flex: 1;
	min-width: 18ch;
}

.readme-learn .readme-signin__new .readme-button {
	width: auto;
	flex-shrink: 0;
}

/* Sent state: named address in mono, an expectation, and a recovery path. */
.readme-signin__sent {
	text-align: left;
	border: 1px solid var(--readme-success);
	background: var(--readme-success-wash);
	border-radius: var(--readme-radius-lg);
	padding: var(--readme-space-5);
	display: flex;
	align-items: flex-start;
	gap: var(--readme-space-4);
}

.readme-signin__sent .readme-check {
	margin: 0;
}

.readme-signin__sent h2 {
	margin: 0 0 var(--readme-space-1);
}

.readme-signin__sent p:last-child {
	margin-bottom: 0;
}

.readme-signin__recover {
	margin-top: var(--readme-space-5);
}

.readme-signin__recover ul {
	margin: 0 0 var(--readme-space-5);
	padding-left: 1.25rem;
	font-size: 1rem;
	color: var(--readme-ink-muted);
}

@media (max-width: 899px) {
	.readme-signin-split {
		grid-template-columns: minmax(0, 1fr);
	}
	.readme-signin-split__welcome {
		padding: var(--readme-space-6) var(--readme-space-5);
	}
	.readme-signin-split__form {
		padding: var(--readme-space-6) var(--readme-space-5);
	}

	/* Sign-in comes first on a phone. Stacked, the hero pushed the button a
	   screen and a half down, and most arrivals are people who already have an
	   account and were told to come here. Anyone new still meets "New here?"
	   inside this panel, and the hero reads as the explanation below it. */
	.readme-signin-split__form {
		order: -1;
		/* Centring only earns its keep beside a taller navy panel. Stacked, it
		   just opens the page with a void above the heading. */
		justify-content: flex-start;
	}
}

/* ====================================================================== */
/* "How it works" — the three steps under the sign-in fold                */
/* ====================================================================== */

/* The card's foot. It used to float on the page wash under the card, which
   left two objects with nothing holding them together — the card looked
   finished and then something else began. Inside, spanning both columns, it
   closes the composition and fills the navy column's short side. */
.readme-how {
	grid-column: 1 / -1;
	background: var(--readme-surface-alt);
	border-top: 1px solid var(--readme-border);
	padding: var(--readme-space-6);
}

.readme-how__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--readme-space-5);
}

/* Horizontal: the card already carries its height from the hero, so the foot
   stays a band rather than becoming a third panel. */
.readme-how__item {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--readme-space-4);
}

.readme-how__icon {
	flex: 0 0 auto;
	display: block;
	color: var(--readme-accent);
	line-height: 1;
}

.readme-how__text {
	min-width: 0;
}

.readme-learn .readme-how__title {
	font-size: 1rem;
	margin: 0 0 2px;
	color: var(--readme-ink-heading);
}

.readme-how__body {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--readme-ink-muted);
}

@media (max-width: 899px) {
	.readme-how {
		padding: var(--readme-space-5);
	}

	.readme-how__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--readme-space-4);
	}
}

/* ====================================================================== */
/* Register — composed card with head / body / foot                       */
/* ====================================================================== */

.readme-register-card {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-xl);
	overflow: hidden;
	max-width: var(--readme-measure-form);
}

.readme-register-card__head {
	padding: var(--readme-space-6) var(--readme-space-6) var(--readme-space-5);
	border-bottom: 1px solid var(--readme-border);
}

.readme-register-card__head h1 {
	font-size: 2rem;
	margin-bottom: var(--readme-space-2);
}

.readme-register-card__head p {
	margin: 0;
	color: var(--readme-ink-muted);
	font-size: 1rem;
}

.readme-register-card__body {
	padding: var(--readme-space-6) var(--readme-space-6) var(--readme-space-2);
}

.readme-register-card__foot {
	padding: var(--readme-space-5) var(--readme-space-6) var(--readme-space-6);
	border-top: 1px solid var(--readme-border);
	background: var(--readme-surface-alt);
}

.readme-register-card__foot p {
	margin: var(--readme-space-3) 0 0;
	text-align: center;
	font-size: 0.875rem;
	color: var(--readme-ink-muted);
}

/* ====================================================================== */
/* Help dialog — head / body / foot, navy primary                         */
/* ====================================================================== */

.readme-help-dialog {
	padding: 0;
	max-width: 27.5rem;
}

.readme-learn .readme-help-dialog h2 {
	margin-top: 0; /* first element of the dialog head — no inherited content-heading margin */
}

.readme-help-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--readme-space-4);
	padding: var(--readme-space-5) var(--readme-space-5) var(--readme-space-4);
	border-bottom: 1px solid var(--readme-border);
}

.readme-help-dialog__head h2 {
	margin: 0 0 var(--readme-space-1);
}

.readme-help-dialog__head p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--readme-ink-muted);
}

.readme-help-dialog__close {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	background: var(--readme-surface);
	color: var(--readme-ink-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.readme-help-dialog__close:hover {
	background: var(--readme-surface-alt);
	color: var(--readme-ink);
}

.readme-help-dialog__body {
	padding: var(--readme-space-5);
}

.readme-help-dialog__body > p:last-child {
	margin-bottom: 0;
	font-size: 0.875rem;
	color: var(--readme-ink-muted);
}

.readme-help-dialog__foot {
	padding: var(--readme-space-4) var(--readme-space-5);
	border-top: 1px solid var(--readme-border);
	background: var(--readme-surface-alt);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--readme-space-3);
	flex-wrap: wrap;
}

/* Routed reasons: the learner picks a situation, we write the subject line.
   A confused person cannot describe where they are — so we do it for them. */
.readme-help-routes {
	list-style: none;
	margin: 0 0 var(--readme-space-4);
	padding: 0;
}

.readme-learn a.readme-help-route {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
	width: 100%;
	min-height: 48px;
	padding: var(--readme-space-3) var(--readme-space-4);
	margin-bottom: var(--readme-space-2);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	background: var(--readme-surface);
	color: var(--readme-ink);
	text-decoration: none;
	font-size: 1rem;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.readme-learn a.readme-help-route:hover {
	background: var(--readme-surface-alt);
	border-color: var(--readme-navy);
}

.readme-help-route .readme-icon {
	color: var(--readme-navy);
	flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.readme-help-dialog[open] {
		animation: readme-fade-in 150ms ease-out;
	}
	.readme-help-dialog[open]::backdrop {
		animation: readme-fade-in 150ms ease-out;
	}
	@keyframes readme-fade-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}

@media (max-width: 479px) {
	.readme-help-dialog__foot {
		flex-direction: column-reverse;
	}
	.readme-help-dialog__foot .readme-button {
		width: 100%;
	}
}

/* ====================================================================== */
/* Print — receipts are real compliance artifacts                         */
/* ====================================================================== */

@media print {
	.readme-footer,
	.readme-outline,
	.readme-outline-toggle,
	.readme-rail,
	.readme-help-dialog,
	.readme-pass-next,
	.readme-lesson-nav {
		display: none !important;
	}

	.readme-layout--rail,
	.readme-lesson-layout {
		display: block;
	}

	/* The pass band, the review and the syllabus receipts must survive. */
	.readme-pass-band,
	.readme-pass-review,
	.readme-question {
		border: 1px solid #999;
		background: none;
	}

	.readme-syllabus__meta,
	.readme-pass-review__a {
		color: #000;
	}
}

/* ====================================================================== */
/* Small shared utilities + component hooks                               */
/* ====================================================================== */

.readme-muted {
	color: var(--readme-ink-muted);
}

/* readme_icon() returns "" when the Plumbline manifest is absent, so every
   icon slot degrades to its character fallback rather than vanishing. */
.readme-check:empty::before {
	content: "\2713"; /* ✓ */
}

.readme-check {
	line-height: 1;
}

/* The question number lives INSIDE the legend (legend must be first child),
   so give it its own block. */
.readme-question__prompt {
	display: block;
	width: 100%;
}

.readme-question__text {
	display: block;
}

.readme-lesson-layout__main {
	min-width: 0;
}

/* Signing receipt: same mono-ledger treatment as a passed quiz. */
.readme-sign__receipt-body {
	flex: 1;
	min-width: 0;
}

.readme-sign__receipt-name {
	margin-bottom: var(--readme-space-3);
}

.readme-learn a.readme-dash-signout {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
	min-height: 44px;
	color: var(--readme-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--readme-border);
}

.readme-learn a.readme-dash-signout:hover {
	border-color: currentColor;
}

/* "Completed" chip on a finished course card. */
/* Quiz result wrapper no longer paints its own card — the band, review and
   receipt inside it each carry their own chrome. */
.readme-quiz__result--pass {
	background: transparent;
	border: 0;
	padding: 0;
	text-align: left;
}

/* Sign-in lede sits under the h1 in the form column. */
.readme-signin__lede {
	color: var(--readme-ink-muted);
	font-size: 1rem;
	margin-bottom: var(--readme-space-5);
}

.readme-signin__email {
	font-family: var(--readme-font-mono);
	font-size: 0.9375rem;
	word-break: break-word;
}

/* Register: the layout rail should not stretch the form card. */
.readme-register .readme-register-card {
	width: 100%;
}

/* 375px: the sticky bar must stay usable. */
@media (max-width: 479px) {
	.readme-bar__inner {
		gap: var(--readme-space-3);
	}
	.readme-bar__position {
		display: none;
	}
	.readme-bar .readme-button--primary {
		flex: 1;
		max-width: 60%;
	}
	.readme-bar__back > span {
		max-width: 8rem;
	}
	.readme-dash-mast__pct {
		text-align: left;
	}
}

/* ====================================================================== */
/* Responsive header — MUST stay last: these override the header cluster  */
/* definitions above, and source order decides for equal specificity.     */
/* ====================================================================== */

.readme-learn a.readme-header__home {
	white-space: nowrap;
}

@media (max-width: 899px) {
	.readme-header__context,
	.readme-header__position {
		display: none;
	}
	.readme-header__who {
		border-left: 0;
		padding-left: 0;
	}
	/* Identity collapses to the avatar; the name is not load-bearing. */
	.readme-header__who {
		font-size: 0;
		gap: 0;
	}
}

@media (max-width: 599px) {
	.readme-header__inner {
		gap: var(--readme-space-2);
		padding: 0 var(--readme-space-4);
	}
	.readme-header__who {
		display: none;
	}
	.readme-learn .readme-header .readme-help {
		padding-left: var(--readme-space-3);
		padding-right: var(--readme-space-3);
	}
	.readme-learn .readme-header .readme-help > span {
		display: none;
	}
	.readme-learn a.readme-header__home {
		padding: var(--readme-space-2) var(--readme-space-3);
	}
}

/* Small-screen composition tidy-ups. */
.readme-course-card__next > .readme-muted {
	white-space: nowrap;
}

@media (max-width: 899px) {
	.readme-dash-mast {
		align-items: flex-start;
		gap: var(--readme-space-4);
	}
	.readme-dash-mast__pct {
		text-align: left;
	}
	.readme-dash-mast__pct dd {
		font-size: 2.25rem;
	}
	/* Prose measure is meaningless once the column is narrower than it. */
	.readme-lesson-layout .readme-panel > p,
	.readme-lesson-layout .readme-panel > ul,
	.readme-lesson-layout .readme-panel > ol,
	.readme-lesson-layout .readme-panel > h2,
	.readme-lesson-layout .readme-panel > h3,
	.readme-lesson-layout .readme-panel > blockquote {
		max-width: none;
	}
}

@media (max-width: 599px) {
	.readme-panel,
	.readme-register-card__head,
	.readme-register-card__body,
	.readme-register-card__foot {
		padding-left: var(--readme-space-4);
		padding-right: var(--readme-space-4);
	}
	.readme-pass-band {
		gap: var(--readme-space-4);
		padding: var(--readme-space-5) var(--readme-space-4);
	}
	.readme-pass-band__score {
		font-size: 2.25rem;
	}
}

/* Phones: the header keeps home + help + sign out. The course-title link goes —
   the lesson eyebrow and the outline summary already say where you are. */
@media (max-width: 899px) {
	.readme-learn a.readme-back {
		display: none;
	}
}

/* The sticky bar's primary action never wraps or shrinks; the back label
   truncates instead. */
@media (max-width: 719px) {
	.readme-bar__inner {
		gap: var(--readme-space-3);
	}
	.readme-bar .readme-button--primary {
		flex: 0 0 auto;
		max-width: none;
		white-space: nowrap;
		padding-left: var(--readme-space-4);
		padding-right: var(--readme-space-4);
		font-size: 15px;
	}
	.readme-bar__back {
		flex: 0 1 auto;
		min-width: 0;
	}
	.readme-bar__back > span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.readme-bar__status {
		font-size: 14px;
	}
}

/* Bar status dot turns pine once nothing is outstanding — amber means "waiting". */
.readme-bar__status--ready::before {
	background: var(--readme-success);
}

/* ==========================================================================
   Admin console (/learn/manage/)

   Same shell, same tokens, deliberately a different register: the learner
   surface is warm and paced; the console is dense and scannable. The navy
   header rule is the tell that you are looking at everyone's data, not yours.
   ========================================================================== */

.readme-header--manage {
	border-bottom: 2px solid var(--readme-navy);
}

.readme-console-nav {
	display: flex;
	gap: var(--readme-space-3);
	align-items: center;
}

.readme-learn .readme-console-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--readme-ink-muted);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: var(--readme-space-2) 0;
	border-bottom: 2px solid transparent;
}

.readme-learn .readme-console-nav__item:hover,
.readme-learn .readme-console-nav__item:focus-visible {
	color: var(--readme-ink-heading);
}

.readme-learn .readme-console-nav__item.is-current {
	color: var(--readme-ink-heading);
	border-bottom-color: var(--readme-accent);
}

.readme-console {
	display: flex;
	flex-direction: column;
	gap: var(--readme-space-5);
}

.readme-console__head h1 {
	margin: 0 0 var(--readme-space-2);
}

.readme-console__purpose {
	margin: 0;
	color: var(--readme-ink-muted);
	max-width: 60ch;
}

.readme-console__aside {
	color: var(--readme-ink-muted);
	font-size: 14px;
}

.readme-console-flag {
	margin: var(--readme-space-3) 0 0;
	padding: var(--readme-space-3) var(--readme-space-4);
	background: var(--readme-navy-wash);
	border-left: 3px solid var(--readme-navy);
	border-radius: 0 var(--readme-radius-md) var(--readme-radius-md) 0;
	color: var(--readme-ink);
}

.readme-console-notice {
	padding: var(--readme-space-3) var(--readme-space-4);
	border-radius: var(--readme-radius-md);
	border-left: 3px solid var(--readme-success);
	background: var(--readme-surface);
}

.readme-console-notice--error {
	border-left-color: var(--readme-accent);
}

.readme-console-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--readme-space-3);
	margin-top: var(--readme-space-4);
}

.readme-console__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--readme-space-3);
	align-items: flex-end;
}

/* Without this the shared `width: 100%` makes every control take a whole line
   in a wrap container, so the intended single filter row became four. */
/* Narrow enough that three fields, the Filter button and the download all sit
   on one line inside a card — at 15rem they totalled a couple of pixels more
   than the row, so the download wrapped and read as a fourth control. */
.readme-console__filters > .readme-console-field {
	flex: 0 1 12rem;
	min-width: 9rem;
}

.readme-console-section {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-4) var(--readme-space-5);
	box-shadow: var(--readme-shadow-card);
}

.readme-console-section h2 {
	margin: 0 0 var(--readme-space-3);
	font-size: 18px;
}

/* Heading + its icon. The icon is the scanning handle in a page of tables, so
   it keeps full ink while the rule under it stays quiet. */
.readme-learn .readme-console-heading {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
}

.readme-console-heading .readme-icon {
	color: var(--readme-accent);
	flex: 0 0 auto;
}

.readme-console-person .readme-console-heading .readme-icon,
.readme-console-section .readme-console-heading .readme-icon {
	color: var(--readme-navy);
}

/* "Nothing outstanding" reads faster as a tick than as a zero. */
.readme-console-clear {
	color: var(--readme-success);
	display: inline-flex;
}

/* Row and footer links that go somewhere, with the direction shown. */
.readme-learn .readme-console-golink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.readme-console-golink .readme-icon {
	flex: 0 0 auto;
}

/* ----------------------------- Repeater ----------------------------- */

/* A list of rows you can scan: one line each, opened only when edited. Nine
   fully-expanded tasks was six screens of form. */
.readme-repeater {
	margin: var(--readme-space-3) 0 0;
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	overflow: hidden;
}

.readme-repeater--flat {
	list-style: none;
	padding: 0;
}

.readme-repeater__row + .readme-repeater__row {
	border-top: 1px solid var(--readme-border);
}

.readme-repeater__row--flat,
.readme-repeater__summary {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
	padding: 10px var(--readme-space-3);
	font-size: 14px;
}

.readme-repeater__summary {
	cursor: pointer;
	list-style: none;
}

/* The row controls live in the summary, so they must not inherit its pointer
   semantics or look like part of the label. */
.readme-repeater__summary .readme-repeater__controls {
	margin-left: auto;
}

.readme-repeater__summary::-webkit-details-marker {
	display: none;
}

/* The disclosure triangle, hand-rolled so it sits where the eye expects. */
.readme-repeater__summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	opacity: 0.55;
	transition: transform 120ms ease;
}

.readme-repeater__row[open] > .readme-repeater__summary::before {
	transform: rotate(90deg);
}

.readme-repeater__title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.readme-repeater__meta {
	flex: 0 0 auto;
	color: var(--readme-ink-muted);
	font-size: 13px;
}

.readme-repeater__controls {
	flex: 0 0 auto;
	display: inline-flex;
	gap: 4px;
}

.readme-learn .readme-repeater__btn {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-sm);
	background: transparent;
	color: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.readme-learn .readme-repeater__btn:hover {
	border-color: currentColor;
}

.readme-learn .readme-repeater__btn--remove:hover {
	color: var(--readme-error, #a02020);
}

.readme-repeater__body {
	display: flex;
	flex-direction: column;
	gap: var(--readme-space-3);
	padding: var(--readme-space-3);
	border-top: 1px dashed var(--readme-border);
}

/* The blank row at the bottom: present, clearly not a task yet. */
/* The spare carries row controls only so a clone of it can move; on the
   spare itself there is nothing to move yet. */
.readme-repeater__row.is-spare .readme-repeater__controls {
	display: none;
}

.readme-repeater__spare .readme-repeater__row {
	margin-top: var(--readme-space-3);
	border: 1px dashed var(--readme-border);
	border-radius: var(--readme-radius-md);
}

.readme-repeater__add {
	display: flex;
	flex-wrap: wrap;
	gap: var(--readme-space-2);
	align-items: center;
	margin-top: var(--readme-space-3);
}

.readme-repeater__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--readme-space-2);
	margin: var(--readme-space-3) 0 0;
}

/* A section heading among the tasks: tinted, so a scan down the list sees
   where each group starts and never counts it as a task. */
.readme-repeater__row--heading > .readme-repeater__summary {
	background: var(--readme-navy-wash);
}

.readme-repeater__kind {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: var(--readme-radius-sm);
	background: var(--readme-navy);
	color: var(--readme-ink-inverse);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The instructions editor (richtext.js): a toolbar, the writing area, and a
   link form that opens between them. Built to look like the text inputs
   around it, so it reads as a field with three buttons, not an app. */
.readme-richtext__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px;
	border: 1px solid var(--readme-border);
	border-bottom: 0;
	border-radius: var(--readme-radius-md) var(--readme-radius-md) 0 0;
	background: var(--readme-surface-alt);
}

.readme-learn .readme-richtext__btn {
	min-height: 32px;
	padding: 4px 12px;
	border: 1px solid transparent;
	border-radius: var(--readme-radius-sm);
	background: transparent;
	color: var(--readme-ink-heading);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.readme-learn .readme-richtext__bar .readme-richtext__btn:hover {
	border-color: var(--readme-border);
	background: var(--readme-surface);
}

.readme-learn .readme-richtext__btn[aria-pressed="true"] {
	border-color: var(--readme-navy);
	background: var(--readme-surface);
}

.readme-learn .readme-richtext__btn[data-readme-rt="bold"] {
	font-weight: 800;
}

.readme-richtext__editor {
	min-height: 6em;
	max-height: 24em;
	overflow-y: auto;
	padding: var(--readme-space-3) var(--readme-space-4);
	border: 1px solid var(--readme-border);
	border-radius: 0 0 var(--readme-radius-md) var(--readme-radius-md);
	background: var(--readme-surface);
	color: var(--readme-ink);
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: var(--readme-space-2);
	cursor: text;
}

.readme-richtext__editor:hover {
	border-color: var(--readme-ink-muted);
}

.readme-richtext__editor:focus {
	outline: 2px solid var(--readme-focus);
	outline-offset: 1px;
	border-color: var(--readme-navy);
}

.readme-richtext__editor > :first-child {
	margin-top: 0;
}

.readme-richtext__editor > :last-child {
	margin-bottom: 0;
}

.readme-richtext__editor p,
.readme-richtext__editor ul,
.readme-richtext__editor ol {
	margin: 0 0 0.5em;
}

.readme-richtext__editor ul,
.readme-richtext__editor ol {
	padding-left: 1.25rem;
}

.readme-richtext__editor a {
	color: var(--readme-link);
	text-decoration: underline;
}

.readme-richtext__editor.is-empty:focus::before {
	content: none;
}

.readme-richtext__editor.is-empty:not(:focus)::before {
	content: attr(data-placeholder);
	color: var(--readme-ink-muted);
	opacity: 0.8;
	pointer-events: none;
}

/* The link form sits between toolbar and text, so it is plainly about the
   words just selected. */
.readme-richtext__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--readme-space-2) var(--readme-space-3);
	padding: var(--readme-space-3);
	border: 1px solid var(--readme-border);
	border-bottom: 0;
	background: var(--readme-navy-wash);
}

.readme-richtext__panel[hidden] {
	display: none;
}

.readme-learn .readme-richtext__panel-label {
	flex: 1 1 16rem;
	margin: 0;
	font-size: 13px;
}

.readme-learn .readme-richtext__panel input {
	margin: 4px 0 0;
}

.readme-richtext__panel-actions {
	display: flex;
	gap: 4px;
}

.readme-learn .readme-richtext__panel .readme-richtext__btn {
	border-color: var(--readme-border);
	background: var(--readme-surface);
}

.readme-learn .readme-richtext__panel [data-readme-rt="apply"] {
	border-color: var(--readme-action);
	background: var(--readme-action);
	color: var(--readme-action-ink);
}

.readme-learn .readme-richtext__panel .readme-richtext__btn[hidden] {
	display: none;
}

/* The save bar only exists once something has changed, so it never sits there
   inviting a save of nothing. */
/* `display: flex` beats the hidden attribute, so say it explicitly or the bar
   sits there announcing unsaved changes to a page nobody has touched. */
.readme-console-savebar[hidden],
.readme-repeater__btn[hidden] {
	display: none;
}

.readme-console-savebar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--readme-space-3);
	margin-top: var(--readme-space-4);
	padding: var(--readme-space-3);
	border-top: 1px solid var(--readme-border);
	background: var(--readme-surface, #fff);
	box-shadow: 0 -4px 12px rgb(0 0 0 / 6%);
}

/* ------------------------------ Setup ------------------------------ */

/* Tab rows sit in the page rather than the header bar, so they need the gap
   the header's own flex was providing. */
.readme-console-nav--tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--readme-space-3);
	margin-bottom: var(--readme-space-4);
}

/* One field per line beats a grid here: the labels are sentences, not words,
   and half of them carry a paragraph of explanation underneath. */
.readme-console-group {
	margin: var(--readme-space-3) 0 0;
	padding: var(--readme-space-3);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
}

.readme-console-group legend {
	padding: 0 6px;
	font-weight: 600;
	font-size: 13px;
}

.readme-console-group.is-spare {
	border-style: dashed;
}

.readme-console-setup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--readme-space-3);
	align-items: center;
	margin-top: var(--readme-space-4);
}

.readme-console-setup__hex {
	display: flex;
	align-items: center;
	gap: var(--readme-space-2);
}

.readme-learn .readme-console-setup__hex input[type="color"] {
	width: 44px;
	min-width: 44px;
	height: 32px;
	padding: 2px;
}

.readme-learn .readme-console-setup__hex input[type="text"] {
	max-width: 12rem;
	font-family: var(--readme-font-mono);
}

/* The one golink that is a button. Minting a sign-in link changes something,
   so it has to post — it should still read as the links beside it. */
.readme-console-signin__ask {
	margin: 0 0 var(--readme-space-3);
}

.readme-learn .readme-console-signin__ask button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--readme-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.readme-console-signin__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--readme-space-2);
	margin-top: var(--readme-space-3);
}

/* The link is long and the point is to take all of it: let it have the row,
   and keep min-width so a flex child does not refuse to shrink. */
.readme-learn .readme-console-signin__url {
	flex: 1 1 22rem;
	min-width: 0;
	font-family: var(--readme-font-mono);
	font-size: 13px;
}

/* Chips that carry an icon need it to sit on the text baseline. */
.readme-chip .readme-icon {
	margin-right: 4px;
	vertical-align: -2px;
}

.readme-console-section__empty {
	margin: 0;
	color: var(--readme-ink-muted);
}

/* Tables scroll inside themselves — the page never scrolls sideways. */
/* A real table again. `display: block` made the rows size to content, so every
   row rule and every shaded is-waiting row stopped dead 250-300px short of the
   card's right edge — and the horizontal scroll it was meant to buy never
   engaged, because nothing ever forced the table wider than its box. The
   wrapper below does the scrolling, which is what a wrapper is for. */
.readme-console-tablewrap {
	overflow-x: auto;
	scrollbar-width: thin;
}

.readme-console-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

/* Dates and short status words must not wrap into three lines to avoid a
   scrollbar. Names and titles still wrap — they are the flexible column. */
.readme-console-table th,
.readme-console-table td {
	white-space: nowrap;
	border-bottom: 1px solid var(--readme-border);
}

.readme-console-table td {
	padding: var(--readme-space-3);
	vertical-align: top;
}

/* Only cells that ASK to wrap do. This used to be `td:first-child`, on the
   assumption that the first column always holds a name — the email log's
   first column holds a timestamp, and every one of them broke over three
   lines. Everything else stays on one line and the wrapper scrolls. */
.readme-console-table .readme-console-table__wrap {
	white-space: normal;
	min-width: 12rem;
}

/* A subject line is unbounded. Give it a ceiling and the full text on hover
   rather than letting one email set the table's width. */
.readme-console-table .readme-console-table__clip {
	max-width: 28rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.readme-console-table thead th {
	text-align: left;
	font-family: var(--readme-font-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
	border-bottom: 1px solid var(--readme-border);
	padding: var(--readme-space-2) var(--readme-space-3);
	white-space: nowrap;
}

.readme-console-table tr:last-child td {
	border-bottom: none;
}

.readme-console-table__sub {
	display: block;
	color: var(--readme-ink-muted);
	font-size: 13px;
}

/* Valid-until cell on the person view's training table. */
.readme-console-validity--expiring { color: var(--readme-ink-heading); font-weight: 600; }
.readme-console-validity--expiring .readme-console-table__sub { color: var(--readme-attention); }
.readme-console-validity--expired,
.readme-console-validity--expired .readme-console-table__sub { color: var(--readme-error); font-weight: 600; }

.readme-console-table__empty {
	color: var(--readme-ink-muted);
	text-align: center;
}

.readme-learn .readme-console-table__name {
	font-weight: 600;
	color: var(--readme-ink-heading);
}

.readme-console-hash {
	font-family: var(--readme-font-mono, ui-monospace, monospace);
	font-size: 12px;
}

.readme-console-detail summary {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: var(--readme-ink-muted);
	font-size: 13px;
	list-style: none;
}

.readme-console-detail summary::-webkit-details-marker {
	display: none;
}

/* One disclosure marker across the console. The panels used the browser's
   triangle, the person log used a right-aligned chevron and the small details
   used nothing at all — three idioms for one gesture, often on one screen. */
.readme-console-detail summary::before,
.readme-console-panel__summary::before {
	content: "\25B8";
	flex: none;
	font-size: 0.85em;
	line-height: 1;
	transition: transform 120ms ease;
}

.readme-console-detail[open] summary::before,
.readme-console-panel[open] .readme-console-panel__summary::before {
	transform: rotate(90deg);
}

.readme-console-form {
	display: flex;
	flex-direction: column;
	gap: var(--readme-space-3);
	/* `flex-start` here shrank every child to its content width, which is how
	   a textarea ended up 245px wide inside a 978px panel. Stretch, and let
	   individual fields cap themselves. */
	align-items: stretch;
	margin-top: var(--readme-space-3);
}

.readme-console-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}

.readme-console-lessons {
	margin: var(--readme-space-3) 0 0;
	padding-left: var(--readme-space-4);
	font-size: 13px;
}

.readme-console-lessons__state {
	color: var(--readme-ink-muted);
	margin-left: var(--readme-space-2);
}

/* The timeline is the point of the person view: one column of time, one of
   fact. Tabular figures keep the timestamps in a readable column. */
.readme-console-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.readme-console-timeline__when {
	font-family: var(--readme-font-mono, ui-monospace, monospace);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--readme-ink-muted);
}

.readme-console-timeline__kind {
	min-width: 0;
	font-family: var(--readme-font-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
}

.readme-console-timeline__actor {
	color: var(--readme-ink-muted);
}

.readme-siglist {
	list-style: none;
	margin: 0 0 var(--readme-space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--readme-space-3);
}

.readme-siglist__row {
	display: flex;
	align-items: center;
	gap: var(--readme-space-4);
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-left: 3px solid var(--readme-accent);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-3) var(--readme-space-4);
}

.readme-siglist__body {
	flex: 1 1 auto;
	min-width: 0;
}

.readme-siglist__title {
	display: block;
	font-weight: 600;
	color: var(--readme-ink-heading);
}

.readme-siglist__meta {
	display: block;
	font-size: 13px;
	color: var(--readme-ink-muted);
}

.readme-doc__version {
	color: var(--readme-ink-muted);
	font-size: 14px;
}

@media (max-width: 640px) {
	.readme-console-timeline__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* Onboarding checklist — deliberately not a syllabus. Tasks live in other
   systems, so each row reads as an errand with a way out to it, not a lesson. */
.readme-checklist {
	list-style: none;
	margin: 0 0 var(--readme-space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--readme-space-3);
}

.readme-checklist__row {
	display: flex;
	align-items: flex-start;
	gap: var(--readme-space-3);
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-4);
}

.readme-checklist__row.is-done {
	background: var(--readme-success-wash);
	border-color: var(--readme-success);
}

/*
 * A status marker, not a control. It used to be a 44px empty ring — visually
 * identical to a checkbox, and clicking it does nothing, because these items
 * are ticked by the button on the right, by an admin, or by an API. An empty
 * ring promises a click; a dash reports a state.
 */
.readme-checklist__mark {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	color: var(--readme-success);
}

.readme-checklist__row:not(.is-done) .readme-checklist__mark::before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: var(--readme-border);
}

.readme-checklist__row.is-done .readme-checklist__mark {
	border-color: var(--readme-success);
}

.readme-checklist__body {
	flex: 1 1 auto;
	min-width: 0;
}

.readme-checklist__title {
	margin: 0;
	font-weight: 600;
	color: var(--readme-ink-heading);
}

.readme-checklist__optional {
	font-weight: 400;
	font-size: 13px;
	color: var(--readme-ink-muted);
	margin-left: var(--readme-space-2);
}

.readme-checklist__help,
.readme-checklist__done {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--readme-ink-muted);
}

.readme-checklist__action {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--readme-space-2);
}

.readme-checklist__form {
	display: flex;
	align-items: center;
	gap: var(--readme-space-2);
}

.readme-checklist__waiting {
	font-size: 14px;
	color: var(--readme-ink-muted);
}

/* Help text is a few paragraphs, a link or a short list now, not one line. */
.readme-checklist__help > :first-child,
.readme-checklist-section__intro > :first-child {
	margin-top: 0;
}

.readme-checklist__help p,
.readme-checklist__help ul,
.readme-checklist__help ol,
.readme-checklist-section__intro p,
.readme-checklist-section__intro ul,
.readme-checklist-section__intro ol {
	margin: 6px 0 0;
}

.readme-checklist__help ul,
.readme-checklist__help ol,
.readme-checklist-section__intro ul,
.readme-checklist-section__intro ol {
	padding-left: 1.25rem;
}

.readme-checklist__help a,
.readme-checklist-section__intro a {
	color: var(--readme-link);
}

/* Section headings: a label over a group of rows, not another row. Sits on
   the page rather than in a card, so it never reads as something to tick. */
.readme-checklist-section {
	margin: var(--readme-space-5) 0 var(--readme-space-3);
}

.readme-layout__main > .readme-checklist-section:first-child {
	margin-top: 0;
}

.readme-checklist-section__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--readme-space-2) var(--readme-space-3);
	margin: 0;
	padding-bottom: var(--readme-space-2);
	border-bottom: 2px solid var(--readme-teal);
	font-size: 1.125rem;
	color: var(--readme-ink-heading);
}

.readme-checklist-section.is-done .readme-checklist-section__title {
	border-bottom-color: var(--readme-success);
}

.readme-checklist-section__count {
	margin-left: auto;
	font-size: 13px;
	font-weight: 400;
	color: var(--readme-ink-muted);
}

.readme-checklist-section.is-done .readme-checklist-section__count {
	color: var(--readme-success);
}

.readme-checklist-section__intro {
	margin-top: var(--readme-space-2);
	font-size: 14px;
	color: var(--readme-ink-muted);
}

@media (max-width: 640px) {
	.readme-checklist__row {
		flex-wrap: wrap;
	}

	.readme-checklist__action {
		width: 100%;
		padding-left: calc(24px + var(--readme-space-3));
	}
}


/* ======================================================================= */
/* Icons at feature size — the layout gives them room                      */
/* ======================================================================= */

/* The documents hub: the pen leads each row, not the text. */
.readme-siglist__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 3.25rem;
	color: var(--readme-accent);
	line-height: 1;
}

/* Checklist ticks read as a state, so the ring stays and only grows. */
.readme-checklist__mark .readme-icon {
	font-size: 24px;
}

/* Rail-card headings: icon sized with the title rather than tucked beside it. */
.readme-rail-card__title .readme-icon {
	color: var(--readme-accent);
	vertical-align: -3px;
	margin-right: 6px;
}

/* Completion: the tick is the whole moment. */
.readme-check--big {
	width: auto;
	height: auto;
	background: none;
	color: var(--readme-success);
	line-height: 1;
}

/* Console headings scale with their level. */
.readme-console__head .readme-console-heading .readme-icon {
	font-size: 56px !important;
}

/* ---------------------------------------------------------------------------
 * Console: Reports.
 *
 * Two controls, two shapes. Which report you are reading is a place, so it is
 * an underlined tab; which window you are reading it over is a filter, so it is
 * a small pill. Making both pills made them read as one six-item control.
 * ------------------------------------------------------------------------- */

.readme-console-reportbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--readme-space-3) var(--readme-space-5);
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--readme-border);
	padding-bottom: var(--readme-space-2);
	margin-bottom: calc(var(--readme-space-5) * -1 + var(--readme-space-3));
}

.readme-console-ranges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--readme-space-1);
}

.readme-learn .readme-console-range {
	font-size: 13px;
	color: var(--readme-ink-muted);
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 999px;
}

.readme-learn .readme-console-range:hover,
.readme-learn .readme-console-range:focus-visible {
	color: var(--readme-ink-heading);
	background: var(--readme-surface-alt);
}

/* A filled navy lozenge beside four plain text links was the loudest thing on
   a screen full of quiet numbers — the range is a filter, not the headline.
   Same shape as its neighbours, just picked out. */
.readme-learn .readme-console-range.is-current {
	color: var(--readme-ink-heading);
	background: var(--readme-navy-wash);
	font-weight: 600;
}

/*
 * Headline figures — figures, not boxes.
 *
 * These were four bordered, shadowed tiles sitting inside a bordered, shadowed
 * card: rectangles nested in a rectangle, and a thin grey outline around each
 * one is exactly what a browser draws for keyboard focus. A row of figures
 * needs no boxes at all. A hairline does the separating and the numbers do
 * the talking.
 */
.readme-console-stats {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Sized to their content, packed left. Equal 1fr columns stretched four small
 * facts across the full width of the page, so each number sat alone in a
 * 470px room with a rule beside it — the emptiness was the ugly part, not the
 * rules. No card either: a box around figures that do not fill it just draws
 * attention to how much of it is nothing.
 */
.readme-console-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 var(--readme-space-6);
	border-left: 1px solid var(--readme-border);
}

.readme-console-stat:first-child {
	border-left: 0;
	padding-left: 0;
}

/* Wrapped onto a second row, a column hairline leaves a stray vertical mark. */
@media (max-width: 640px) {
	.readme-console-stats {
		gap: var(--readme-space-4) var(--readme-space-5);
	}

	.readme-console-stat {
		border-left: 0;
		padding: 0;
	}
}

.readme-console-stat__value {
	font-family: var(--readme-font-display);
	font-size: 34px;
	line-height: 1;
	color: var(--readme-ink-heading);
}

.readme-console-stat__label {
	font-size: 13px;
	color: var(--readme-ink-muted);
}

/* A tone is a claim that something needs you. Zero queued is a clean state, so
   it stays neutral — colouring it amber cries wolf on every page load. */
.readme-console-stat--good .readme-console-stat__value {
	color: var(--readme-success);
}

/* With no box to flag, the figure carries it: the number in the accent and
   the label given weight. Drawing a rectangle around one tile in a row of
   tiles is what made this look like a focus ring in the first place. */
.readme-console-stat--attention .readme-console-stat__value {
	color: var(--readme-attention);
}

.readme-console-stat--attention .readme-console-stat__label {
	color: var(--readme-attention);
	font-weight: 600;
}

/* Bars are a visual aid on top of a real number, never a replacement for it. */
.readme-console-bar {
	display: inline-block;
	vertical-align: middle;
	width: 72px;
	height: 6px;
	border-radius: 999px;
	background: var(--readme-progress-track);
	overflow: hidden;
}

.readme-console-bar__fill {
	display: block;
	height: 100%;
	background: var(--readme-success);
}

.readme-console-bar__fill--active {
	background: var(--readme-navy);
}

.readme-console-bar__num {
	margin-left: var(--readme-space-2);
	font-variant-numeric: tabular-nums;
}

.readme-console-subhead {
	margin: var(--readme-space-5) 0 var(--readme-space-2);
	font-size: 15px;
	color: var(--readme-ink-heading);
}

.readme-console-subhead:first-of-type {
	margin-top: var(--readme-space-4);
}

/* Feedback is somebody talking. Set it as speech, not as a table cell. */
.readme-console-quotes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--readme-space-3);
}

.readme-console-quote {
	border-left: 3px solid var(--readme-border);
	padding: 0 0 0 var(--readme-space-4);
}

.readme-console-quote__text {
	margin: 0;
	color: var(--readme-ink);
}

.readme-console-quote__by {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--readme-ink-muted);
}

/* ---------------------------------------------------------------------------
 * Console: forms, panels and the request queue.
 * ------------------------------------------------------------------------- */

/* A panel is a whole action folded away until wanted — "Invite someone" is a
   real room, not a link, so it opens in place rather than navigating off. */
.readme-console-panel {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-3) var(--readme-space-4);
	box-shadow: var(--readme-shadow-card);
}

.readme-console-panel[open] {
	padding-bottom: var(--readme-space-4);
}

.readme-console-panel__summary {
	display: flex;
	align-items: center;
	gap: var(--readme-space-2);
	cursor: pointer;
	font-weight: 600;
	color: var(--readme-ink-heading);
	list-style: none;
}

.readme-console-panel__summary::-webkit-details-marker {
	display: none;
}

.readme-console-panel[open] .readme-console-panel__summary {
	margin-bottom: var(--readme-space-4);
	padding-bottom: var(--readme-space-3);
	border-bottom: 1px solid var(--readme-border);
}

/* A section that is asking for something, rather than reporting something. */


.readme-console-request {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: var(--readme-space-5);
	padding: var(--readme-space-4) 0;
	border-top: 1px solid var(--readme-border);
}

.readme-console-request__name {
	margin: 0;
	font-weight: 600;
	color: var(--readme-ink-heading);
}

.readme-console-request__decide {
	display: flex;
	flex-direction: column;
	gap: var(--readme-space-3);
}

@media (max-width: 782px) {
	.readme-console-request {
		grid-template-columns: 1fr;
	}
}

/* Console form furniture. Labels sit above their field and stay visible —
   placeholder-as-label vanishes exactly when someone is checking their work. */
/* Buttons are the exception: they should be their own size, not the form's. */
.readme-console-form > button,
.readme-console-form > .readme-button {
	align-self: flex-start;
}

.readme-console-form--row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--readme-space-3) var(--readme-space-4);
}

.readme-console-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	min-width: 0;
	max-width: 34rem;
	flex: 0 0 auto;
}

/* Only the row variant wants these to share a line and grow sideways. */
.readme-console-form--row > .readme-console-field {
	flex: 1 1 14rem;
	min-width: 11rem;
}

.readme-console-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--readme-ink-heading);
}

/* Console controls are the SAME controls, only tighter and not stacked. Take
   the shared box wholesale and override the two things that differ: the
   bottom margin (these live in flex rows, which own their own gaps) and the
   height. Never `background:` here — it is a shorthand, and it silently ate
   the select caret set above, leaving a menu that looked like a text box. */
.readme-learn .readme-console-field input,
.readme-learn .readme-console-field select,
.readme-learn .readme-console-field textarea,
.readme-learn .readme-console__filters input,
.readme-learn .readme-console__filters select,
.readme-learn .readme-console-form input,
.readme-learn .readme-console-form select,
.readme-learn .readme-console-form textarea {
	margin-bottom: 0;
	min-height: 44px;
	padding-top: var(--readme-space-2);
	padding-bottom: var(--readme-space-2);
}

/* Checkboxes and radios are not boxes and must not inherit one. */
.readme-learn .readme-console-form input[type="checkbox"],
.readme-learn .readme-console-form input[type="radio"],
.readme-learn .readme-console-check input {
	width: auto;
	min-height: 0;
	margin-bottom: 0;
	padding: 0;
}

.readme-console-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.readme-console-fieldset legend {
	font-size: 13px;
	font-weight: 600;
	color: var(--readme-ink-heading);
	padding: 0 0 4px;
}

/* Carries .readme-console-form so it outranks that block's
   `label { flex-direction: column }` — without it every radio and checkbox
   sat ABOVE its own words, and the second radio read as belonging to the
   first one's dropdown. */
.readme-console-check,
.readme-console-form .readme-console-check,
.readme-console-fieldset .readme-console-check {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: var(--readme-space-2);
	padding: 3px 0;
	font-weight: 400;
}

.readme-console-check em {
	font-style: normal;
}

/* The email preview. Body copy is shown as sent — monospaced, unwrapped,
   scrolling in its own box rather than reflowing the page. */
.readme-console-preview__to {
	margin: 0 0 var(--readme-space-3);
}

.readme-console-preview__body {
	margin: 0;
	padding: var(--readme-space-3);
	background: var(--readme-surface-alt);
	border-radius: var(--readme-radius-sm);
	font-family: var(--readme-font-mono);
	font-size: 13px;
	white-space: pre-wrap;
	max-height: 24rem;
	overflow: auto;
}

.readme-console-preview__list {
	list-style: none;
	margin: var(--readme-space-2) 0 0;
	padding: 0;
	display: grid;
	gap: 4px;
	max-height: 18rem;
	overflow: auto;
}

/* ---------------------------------------------------------------------------
 * Console: the overview.
 * ------------------------------------------------------------------------- */

.readme-console-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--readme-space-4);
}

.readme-console-card {
	background: var(--readme-surface);
	border: 1px solid var(--readme-border);
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-4);
	box-shadow: var(--readme-shadow-card);
}

/* Only a queue with something in it earns colour. An empty one still shows —
   a card that vanishes when it empties teaches people to distrust the screen —
   but it says so quietly. */
/* The flag. Never an outline — a full thin rectangle in the accent is what a
   browser draws for keyboard focus, and borrowing it for "this needs you"
   makes every flagged card look focused. A solid left edge and a warm ground
   say the same thing without impersonating a control state. */
.readme-console-card.is-waiting,
.readme-console-outstanding,
.readme-console-section--attention {
	border: 1px solid var(--readme-border);
	border-left: 4px solid var(--readme-attention);
	background: var(--readme-attention-wash);
}

.readme-learn .readme-console-card__link {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon count" "icon label";
	align-items: center;
	column-gap: var(--readme-space-3);
	text-decoration: none;
	color: inherit;
}

.readme-console-card__icon {
	grid-area: icon;
	color: var(--readme-ink-muted);
}

.readme-console-card.is-waiting .readme-console-card__icon {
	color: var(--readme-attention);
}

.readme-console-card__count {
	grid-area: count;
	font-family: var(--readme-font-display);
	font-size: 32px;
	line-height: 1;
	color: var(--readme-ink-heading);
}

.readme-console-card__label {
	grid-area: label;
	font-size: 13px;
	color: var(--readme-ink-muted);
}

.readme-learn .readme-console-card__link:hover .readme-console-card__label,
.readme-learn .readme-console-card__link:focus-visible .readme-console-card__label {
	color: var(--readme-ink-heading);
}

/* A queue that is outstanding but not actionable here. It keeps its card, so
   the number stays visible, and loses the accent edge and the heading-weight
   count so it cannot be mistaken for the ones an admin can clear. Reuses
   .readme-console__aside for the wording; only the grid placement is new. */
/* The no-JS quiz result. Same left-edge language as every other "read this"
   band in the console — never an outline, which reads as keyboard focus. */
.readme-quiz__notice {
	margin: 0 0 var(--readme-space-4);
	padding: var(--readme-space-3) var(--readme-space-4);
	border-left: 4px solid var(--readme-navy);
	background: var(--readme-navy-wash);
	border-radius: var(--readme-radius-sm);
}

.readme-quiz__notice--retry {
	border-left-color: var(--readme-attention);
	background: var(--readme-attention-wash);
}

.readme-console-card__aside {
	grid-column: 2;
	font-size: 12px;
	font-style: italic;
	color: var(--readme-ink-muted);
}

.readme-console-card--outstanding .readme-console-card__count {
	color: var(--readme-ink-muted);
}

.readme-console-card__empty,
.readme-console-card__list {
	margin: var(--readme-space-3) 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--readme-ink-muted);
}

.readme-console-card__list li {
	padding: 3px 0;
	border-top: 1px solid var(--readme-border);
}

.readme-console-timeline__what {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Console: the person view — what is open, and the log.
 * ------------------------------------------------------------------------- */

.readme-console-outstanding {
	border-radius: var(--readme-radius-md);
	padding: var(--readme-space-4);
}

.readme-console-outstanding__title {
	margin: 0 0 var(--readme-space-3);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
}

.readme-console-outstanding__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--readme-space-4);
}

.readme-console-outstanding__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--readme-space-3);
}

.readme-console-outstanding__list .readme-icon {
	color: var(--readme-attention);
	flex: none;
}

.readme-console-outstanding__list span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* The all-clear. Same weight as the warning, so "nothing open" reads as an
   answer rather than as an absence of one. */
.readme-console-clearline {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
	margin: 0;
	padding: var(--readme-space-3) var(--readme-space-4);
	background: var(--readme-success-wash);
	border-radius: var(--readme-radius-md);
	color: var(--readme-ink);
}

.readme-console-clearline .readme-icon {
	color: var(--readme-success);
}

.readme-console-table tr.is-waiting td {
	background: var(--readme-surface-alt);
}

/* The log, folded. */
.readme-console-log__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--readme-space-3);
	cursor: pointer;
	list-style: none;
}

.readme-console-log__summary::-webkit-details-marker {
	display: none;
}

.readme-console-log__summary .readme-console-heading {
	margin: 0;
}

.readme-console-log__count {
	font-size: 13px;
	color: var(--readme-ink-muted);
}

.readme-console-log__summary::before {
	content: "\25B8";
	color: var(--readme-ink-muted);
	transition: transform 120ms ease;
}

.readme-console-log[open] .readme-console-log__summary::before {
	transform: rotate(90deg);
}

.readme-console-log__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--readme-space-3);
	margin: var(--readme-space-3) 0;
}

/* The copy source and the no-JS fallback: real, selectable text, off-screen
   until somebody wants it. Not display:none — that is not selectable. */
.readme-console-log__plain {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: pre;
}

/* Log rows: time, kind, then what happened. Below the fold of a narrow screen
   the three stack into two lines rather than squeezing into three columns. */
.readme-console-timeline__row {
	display: grid;
	grid-template-columns: 11rem 6rem minmax(0, 1fr);
	gap: var(--readme-space-2) var(--readme-space-3);
	align-items: baseline;
	padding: var(--readme-space-2) 0;
	border-bottom: 1px solid var(--readme-border);
	font-size: 14px;
}

.readme-console-timeline__row:last-child {
	border-bottom: 0;
}

@media (max-width: 640px) {
	.readme-console-timeline__row {
		grid-template-columns: auto 1fr;
		grid-template-areas: "when kind" "what what";
	}

	.readme-console-timeline__when { grid-area: when; }
	.readme-console-timeline__kind { grid-area: kind; }
	.readme-console-timeline__what { grid-area: what; }
}


/* ---------------------------------------------------------------------------
 * Console: responsive, and defending against the theme.
 * ------------------------------------------------------------------------- */

/*
 * The theme's base.css sets `li + li { margin-block-start: .35em }` globally.
 * It lands on every list this plugin builds, so the first stat tile sat 6px
 * proud of the other three and the timeline's rhythm was the theme's, not the
 * component's. The plugin already defends against its OWN generic rules
 * (trap #3); this is the same lesson one layer out.
 */
/*
 * `:where()` on purpose: this whole selector weighs nothing, so any component
 * that sets its own list padding or spacing simply wins. Written at its natural
 * 0-2-1 it beat every single-class component rule in the file — the stat strip
 * lost its padding to it, silently, and nothing about the symptom pointed here.
 * A defensive reset must not outrank the thing it is defending.
 */
:where(.readme-learn) :where(ul[class], ol[class]) > li {
	margin-block-start: 0;
	padding-inline-start: 0;
}

/*
 * The console header. The nav needs ~487px and the brand ~136px, so below
 * roughly 695px they were drawn on top of each other and the page then
 * scrolled sideways — 152px of overflow at 375. The learner header has had
 * responsive rules since it shipped; the console nav never got one.
 */
@media (max-width: 899px) {
	.readme-header--manage .readme-header__inner {
		flex-wrap: wrap;
		row-gap: var(--readme-space-2);
	}

	.readme-header--manage .readme-header__left {
		flex: 0 0 auto;
		min-width: 0;
	}

	.readme-console-nav {
		flex-wrap: wrap;
		row-gap: 2px;
	}
}

@media (max-width: 699px) {
	/* Below this the nav gets its own full-width row and scrolls sideways in
	   its own box rather than pushing the page. `min-width: 0` is the whole
	   trick: without it a flex item refuses to shrink below its content, so
	   the 511px nav simply widened the page instead of scrolling. */
	.readme-header--manage .readme-header__right {
		flex: 1 1 100%;
		min-width: 0;
		max-width: 100%;
	}

	.readme-console-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		max-width: 100%;
		min-width: 0;
		scrollbar-width: thin;
		margin: 0 calc(var(--readme-space-3) * -1);
		padding: 0 var(--readme-space-3);
	}

	.readme-learn .readme-console-nav__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

@media (max-width: 640px) {
	.readme-console-request {
		grid-template-columns: 1fr;
	}

	.readme-console__filters {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * `flex-basis` is main-axis, and the main axis is now HEIGHT — so the
	 * 12rem basis these fields carry for the row layout was making each one
	 * 192px tall, with the input stretching to fill it. Any flex sizing
	 * written for a row has to be undone when the direction flips.
	 */
	.readme-console__filters > .readme-console-field {
		flex: 0 0 auto;
	}

	.readme-learn .readme-console__filters input,
	.readme-learn .readme-console__filters select {
		flex: 0 0 auto;
		width: 100%;
	}

	.readme-console-form--row {
		flex-direction: column;
		align-items: stretch;
	}

	.readme-console-form--row > .readme-console-field {
		flex: 1 1 auto;
		max-width: none;
	}
}

/* The learner document list: a 56px pen, a wrapping title and a button do not
   fit on one line at 375. */
@media (max-width: 640px) {
	.readme-siglist__row {
		flex-wrap: wrap;
	}

	.readme-siglist__body {
		flex-basis: 100%;
	}

	.readme-siglist__row .readme-button {
		width: 100%;
		justify-content: center;
	}

	.readme-siglist__icon .readme-icon {
		font-size: 28px !important;
	}
}

/* The three things you can do about one document, side by side in the full
   width of the card. They used to be three stacked forms inside a 205px table
   cell, next to five empty ones. */
.readme-console-actionrow > td {
	white-space: normal;
	padding-bottom: var(--readme-space-4);
	border-bottom: 1px solid var(--readme-border);
}

.readme-console-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--readme-space-5);
	margin-top: var(--readme-space-3);
}

.readme-console-choices > form {
	gap: var(--readme-space-2);
}

.readme-console-choices__title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
}

.readme-learn .readme-console-choices label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	font-size: 13px;
	font-weight: 600;
	color: var(--readme-ink-heading);
}

.readme-console-detail--wide {
	white-space: normal;
}

/* Offboarding closes obligations, kills sign-in links and starts a retention
   clock. It looked exactly like "Assign" and "Filter". */
.readme-console-section--danger {
	border-color: var(--readme-border);
	border-left: 4px solid var(--readme-error);
	background: var(--readme-error-wash);
}

.readme-learn .readme-button--danger {
	background: var(--readme-error, #a02020);
	border-color: var(--readme-error, #a02020);
	color: #fff;
}

.readme-learn .readme-button--danger:hover,
.readme-learn .readme-button--danger:focus-visible {
	filter: brightness(0.92);
}

.readme-learn .readme-console-outstanding__go {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Anchored sections must not land under the sticky header. */
[id^="readme-person-"] {
	scroll-margin-top: var(--readme-space-7);
}

/* The three activities, as a list of places rather than a paragraph of links. */
.readme-places {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--readme-space-2);
}

.readme-learn .readme-places a {
	display: flex;
	align-items: center;
	gap: var(--readme-space-3);
	padding: var(--readme-space-2) 0;
	text-decoration: none;
	color: var(--readme-ink-heading);
	font-weight: 600;
}

.readme-learn .readme-places a:hover span,
.readme-learn .readme-places a:focus-visible span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.readme-places .readme-icon {
	color: var(--readme-accent);
}

/* An empty state is where the `display` icon step was designed to live: the
   block has no content to compete with, so the icon can carry it. */
.readme-firstrun {
	text-align: center;
}

.readme-firstrun__icon {
	display: block;
	margin-bottom: var(--readme-space-3);
	color: var(--readme-ink-muted);
	--fa-secondary-opacity: 0.15;
}

.readme-firstrun h2 {
	margin-top: 0;
}

.readme-firstrun p {
	margin-bottom: 0;
	color: var(--readme-ink-muted);
}

/* The signing form, named step by step.
   It used to call two different controls "your signature" — the typed name
   ("that's your signature") and the canvas ("your signature — draw it below") —
   and then offer to let you type it when you already had. */
.readme-sign__step {
	margin: var(--readme-space-5) 0 var(--readme-space-2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--readme-ink-muted);
}

.readme-sign__step:first-of-type {
	margin-top: var(--readme-space-4);
}



/* Checklist rows at 375: the mark, the title and the action each took a line
   of their own, turning a one-line errand into a 340px card. */
@media (max-width: 640px) {
	.readme-checklist__row {
		flex-wrap: wrap;
		row-gap: var(--readme-space-3);
	}

	.readme-checklist__body {
		flex: 1 1 0;
		min-width: 0;
	}

	.readme-checklist__action {
		flex-basis: 100%;
	}

	.readme-checklist__action .readme-button,
	.readme-checklist__action .readme-checklist__form {
		width: 100%;
	}

	.readme-checklist__action .readme-button {
		justify-content: center;
	}
}

/* Reports: a labelled range control, and the completions chart. */
.readme-console-ranges__label {
	font-size: 13px;
	color: var(--readme-ink-muted);
	margin-right: var(--readme-space-1);
}

/* A lone stat has no row to share, so auto-fit stretched it the full width of
   the card with a 34px number marooned in the corner. */
.readme-console-bars {
	list-style: none;
	margin: var(--readme-space-3) 0 0;
	padding: 0;
	display: grid;
	gap: var(--readme-space-2);
}

.readme-console-bars__row {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) 3rem;
	gap: var(--readme-space-3);
	align-items: center;
	font-size: 13px;
}

.readme-console-bars__label {
	color: var(--readme-ink-muted);
	font-variant-numeric: tabular-nums;
}

.readme-console-bar__fill--wide,
.readme-console-bars .readme-console-bar {
	width: 100%;
}

.readme-console-bars .readme-console-bar__num {
	margin-left: 0;
	text-align: right;
}

/* A one-decision screen — confirm sign-in, a bare receipt — should sit in the
   middle of the viewport rather than clinging to the top-left of it. */
.readme-main--centred {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
	text-align: center;
}

.readme-main--centred .readme-panel--narrow {
	width: 100%;
	max-width: 30rem;
}

.readme-signin__mark {
	display: block;
	margin-bottom: var(--readme-space-3);
	color: var(--readme-accent);
	--fa-secondary-opacity: 0.18;
}

.readme-main--centred form {
	display: flex;
	justify-content: center;
}

.readme-main--centred .readme-notice {
	text-align: left;
}

/* Identity as the foot of the places card rather than a card of its own. Every
   learner screen used to say who you were twice — once in the header, once in
   a rail card written out three times. */
.readme-places__foot {
	margin-top: var(--readme-space-3);
	padding-top: var(--readme-space-3);
	border-top: 1px solid var(--readme-border);
}

.readme-places__foot p {
	margin: 0 0 var(--readme-space-2);
}

.readme-places__foot p:last-child {
	margin-bottom: 0;
}

/* The dashboard is the brand chip now, so it needs a current state like the
   nav items have. */
.readme-learn .readme-header__home.is-current {
	color: var(--readme-ink-heading);
	box-shadow: inset 0 -2px 0 var(--readme-accent);
}

/* The "show more" foot of a folded log. */
.readme-console-log__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--readme-space-3);
	margin-top: var(--readme-space-4);
	padding-top: var(--readme-space-3);
	border-top: 1px solid var(--readme-border);
}

/* Anchored from its own "show more" link, so it must not land under the
   sticky header. */
#activity {
	scroll-margin-top: var(--readme-space-6);
}


/* A link that leaves the console. The console is a place; wp-admin is a
   different one, and a link that changes which building you are in should not
   look identical to one that scrolls you down a page. The marker is a real
   icon rather than a text arrow — U+2197 at 0.9em is a hairline diagonal. */
.readme-console-golink--away .readme-icon:last-child {
	opacity: 0.6;
}

/* The roster's own head: a count, then the controls that narrow it. The
   filters used to float on the page above a table that floated too, which was
   the only place in the console where a table had no card of its own. */
.readme-console-roster__head {
	margin-bottom: var(--readme-space-3);
}

.readme-console-section > .readme-console__filters {
	padding-bottom: var(--readme-space-4);
	margin-bottom: var(--readme-space-2);
	border-bottom: 1px solid var(--readme-border);
}

/* Downloading is not one of the filters — it acts on what they produced. Sent
   to the far end so it stops looking like a fourth control that wrapped. */
.readme-console__filters-end {
	margin-left: auto;
}

@media (max-width: 782px) {
	.readme-console__filters-end {
		margin-left: 0;
	}
}

.readme-console-section > .readme-console__aside {
	margin: var(--readme-space-4) 0 0;
	padding-top: var(--readme-space-3);
	border-top: 1px solid var(--readme-border);
}

/* ---------------------------------------------------------------------------
 * The console header: wordmark, then pills.
 *
 * The bar used to mark the current section with a 2px accent rule sitting
 * directly on a navy border — two brand colours touching, with nothing
 * between them. A pill needs no baseline, so nothing can fight one. And the
 * top left is the product's NAME now rather than a fourth destination, which
 * is what stopped the dashboard announcing itself twice.
 * ------------------------------------------------------------------------- */

.readme-header--manage {
	min-height: 60px;
}

.readme-header--manage .readme-header__inner {
	justify-content: flex-start;
	gap: var(--readme-space-4);
}

.readme-learn .readme-console-wordmark {
	display: inline-flex;
	align-items: center;
	gap: var(--readme-space-2);
	font-family: var(--readme-font-display);
	font-size: 22px;
	letter-spacing: 0.01em;
	color: var(--readme-ink-heading);
	text-decoration: none;
	white-space: nowrap;
}

.readme-console-wordmark .readme-icon {
	color: var(--readme-accent);
}

.readme-console-rule {
	width: 1px;
	align-self: stretch;
	margin: var(--readme-space-3) var(--readme-space-2);
	background: var(--readme-border);
}

.readme-header--manage .readme-console-nav {
	gap: var(--readme-space-1);
}

.readme-learn .readme-header--manage .readme-console-nav__item {
	font-size: 15px;
	padding: var(--readme-space-2) var(--readme-space-4);
	border-radius: 999px;
	border-bottom: 0;
}

.readme-learn .readme-header--manage .readme-console-nav__item:hover,
.readme-learn .readme-header--manage .readme-console-nav__item:focus-visible {
	background: var(--readme-surface-alt);
	color: var(--readme-ink-heading);
}

.readme-learn .readme-header--manage .readme-console-nav__item.is-current {
	background: var(--readme-navy-wash);
	color: var(--readme-ink-heading);
}

@media (max-width: 899px) {
	.readme-header--manage .readme-header__inner {
		gap: var(--readme-space-3);
	}
}

@media (max-width: 699px) {
	.readme-console-rule {
		display: none;
	}

	.readme-learn .readme-header--manage .readme-console-nav__item {
		font-size: 14px;
		padding: var(--readme-space-2) var(--readme-space-3);
		gap: 4px;
	}
}

/* The dashboard leads with its one live sentence instead of its own name. */
.readme-learn .readme-console-lede {
	font-family: var(--readme-font-display);
	font-size: 34px;
	line-height: 1.15;
	color: var(--readme-ink-heading);
	margin: 0;
}