/* Afifen Learning Portal — Front-end portal styles (Phase 2F) */

/* ---- Wrapper -------------------------------------------------------------- */
.aflp-portal {
	max-width: 860px;
	margin: 0 auto;
	padding: 16px 0 48px;
	font-family: inherit;
	color: inherit;
}

/* Universal Participant Form Experience — desktop presentation (§4, and the
   Visual Design Pass that widened/layered it further).
   Three layers, page background → wide central form surface → sections,
   deliberately modelled on Google Forms' composition (not its branding):
     1. This wrapper is the PAGE-BACKGROUND layer — a tinted band, wider than
        the content column, so the column visibly sits "on" a page rather
        than filling it edge to edge.
     2. Every direct child (breadcrumb, header, notices, privacy block, the
        form itself) shares one centred content-column width — see the
        `> *` rule below — so nothing floats narrower/wider than its
        neighbours.
     3. .aflp-form-header and .aflp-form-section (further down this file)
        are the actual white surfaces the participant reads/answers on.
   Compound selector so this only ever applies to the one wrapper
   AFLP_Form_Renderer::render() emits (see render()), never to the
   dashboard/other .aflp-portal screens. Client Entry reaches the same
   layered look through its own .aflp-portal-wrap/.aflp-auth-card pairing
   (see the Client Entry section of this file) — two entry points, one
   shared visual language, no per-entry-point or per-programme styling. */
.aflp-portal.aflp-participant-form-wrap {
	max-width: 1100px;
	/* Card/Canvas Contrast + Visual Hierarchy Redesign corrections: bumped
	   from white-adjacent #f0f4f8 to a clearly-tinted, still-neutral
	   #eef2f6 so the canvas is unmistakably visible in every gap between
	   cards, not just inferable from their borders. Kept identical to
	   .aflp-section-body and .aflp-auth-card--form's tone below so every
	   canvas surface in a participant form — page-wide here, per-section on
	   the authenticated path, and the whole Client Entry form surface now
	   that it is no longer one big white card — reads as one consistent
	   tone, not several slightly different greys. */
	/* Client Entry Form Presentation Architecture correction: --aflp-form-bg,
	   when set (AFLP_Form_Renderer::render_presentation_colours() from
	   header_bg_colour), overrides this page-canvas tone for this one form
	   only. The var() fallback is the exact pre-existing literal, so an
	   unconfigured form renders pixel-identical to before this existed. */
	background: var(--aflp-form-bg, #eef2f6);
	padding: 40px 24px 72px;
	box-sizing: border-box;
}

.aflp-portal.aflp-participant-form-wrap > * {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/* Below ~1020px available width the 960px cap is already moot (the wrap
   itself is narrower), so the gutter self-removes without a breakpoint —
   this media query only tightens the wrap's own outer padding as the
   viewport narrows further. */
@media (max-width: 768px) {
	.aflp-portal.aflp-participant-form-wrap {
		padding: 28px 16px 48px;
	}
}

@media (max-width: 480px) {
	.aflp-portal.aflp-participant-form-wrap {
		padding: 20px 12px 40px;
	}
}

/* ---- Tabs ----------------------------------------------------------------- */
.aflp-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #e0e0e0;
	margin-bottom: 32px;
}

.aflp-tab {
	padding: 10px 24px;
	font-size: 0.95em;
	font-weight: 500;
	color: #555;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
}

.aflp-tab:hover { color: #1a1a1a; }

.aflp-tab.is-active {
	color: #1a6fa8;
	border-bottom-color: #1a6fa8;
}

/* ---- Notices -------------------------------------------------------------- */
.aflp-notice {
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 0.95em;
}

.aflp-notice-info {
	background: #eaf4fb;
	border-left: 4px solid #1a6fa8;
	color: #1a3a50;
}

.aflp-notice-error {
	background: #fdf2f2;
	border-left: 4px solid #d63638;
	color: #5c1c1c;
}

.aflp-notice-warning {
	background: #fffbea;
	border-left: 4px solid #dba617;
	color: #5a4000;
}

/* ---- Universal form header (programme identity) ---------------------------
   Config-driven: logo(s), programme title, form title, optional subtitle/date,
   introduction. Every piece except the form title is conditional in markup —
   an absent subtitle/introduction/logo leaves no empty block behind.
   Visual Design Pass: this is the first white surface the participant
   reads — programme identity → form title → introduction, in one card, the
   same "paper" language the sections below continue (§4). Reached through
   AFLP_Form_Renderer::render() inside .aflp-participant-form-wrap (see that
   rule above); .aflp-form-intro-card is Client Entry's equivalent — same
   identity/title/context pieces, added by the Visual Hierarchy Redesign
   correction once .aflp-auth-card--form stopped being one big enclosing
   white card (§1) and this content needed a surface of its own, sharing
   this exact treatment rather than inventing a second one. */
.aflp-form-header,
.aflp-form-intro-card {
	background: #fff;
	border: 1px solid #e5e9f0;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
	padding: 36px 40px;
	margin-bottom: 28px;
}

@media (max-width: 768px) {
	.aflp-form-header,
	.aflp-form-intro-card {
		padding: 28px 24px;
		border-radius: 12px;
	}
}

@media (max-width: 480px) {
	.aflp-form-header,
	.aflp-form-intro-card {
		padding: 20px 16px;
		margin-bottom: 20px;
		border-radius: 10px;
	}
}

/* Information Architecture Correction: the cohort's optional form banner
   (cohorts.form_banner_url — see AFLP_Admin_Cohorts/
   AFLP_Portal_Client_Entry::cohort_form_banner_url()), pulled out to the
   intro card's own edges (negative margin matching that card's padding at
   each breakpoint) so it reads as a banner across the top of the card, not
   an inset image sitting inside the card's padding. Absent entirely — no
   space reserved — when the cohort has none configured. */
.aflp-form-banner {
	display: block;
	width: calc(100% + 80px);
	max-width: none; /* the active theme's own `img { max-width: 100% }` reset
	                    otherwise clamps the calc() below back down to plain
	                    100%, silently cancelling the bleed-to-the-edge effect. */
	margin: -36px -40px 24px;
	max-height: 220px;
	object-fit: cover;
	border-radius: 14px 14px 0 0;
}

@media (max-width: 768px) {
	.aflp-form-banner {
		width: calc(100% + 48px);
		margin: -28px -24px 20px;
		max-height: 160px;
		border-radius: 12px 12px 0 0;
	}
}

@media (max-width: 480px) {
	.aflp-form-banner {
		width: calc(100% + 32px);
		margin: -20px -16px 16px;
		max-height: 120px;
		border-radius: 10px 10px 0 0;
	}
}

/* Persistent compact identity bar (§4 of the correction): banner
   thumbnail + programme name + "Completing as: X", shown on every section
   screen once the participant clicks Begin — replacing the full
   .aflp-form-intro-card above, never repeating it. Rendered once by
   AFLP_Portal_Client_Entry::render(), hidden by default; aflp-portal.js
   toggles it in the same action that hides the intro card. */
.aflp-form-compact-identity {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.aflp-form-compact-identity-banner {
	height: 32px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	border-radius: 4px;
	flex-shrink: 0;
}

.aflp-form-compact-identity-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.aflp-form-compact-identity-programme {
	font-size: .76em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #5a6b7d;
}

.aflp-form-compact-identity-participant {
	font-size: .9em;
	font-weight: 600;
	color: #1a2340;
}

.aflp-form-header-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
}

.aflp-form-header-logo {
	max-height: 64px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.aflp-form-header-programme {
	margin: 0 0 4px;
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #555;
}

.aflp-form-header-subtitle {
	margin: -8px 0 12px;
	color: #555;
}

.aflp-form-header-intro {
	margin: 0 0 8px;
	color: #333;
	line-height: 1.6;
	font-size: 1.02em;
}

.aflp-form-header-intro p {
	margin: 0 0 12px;
}

.aflp-form-header-intro p:last-child {
	margin-bottom: 0;
}

/* Estimated-completion-time badge — configured per form (schema_json.presentation),
   never invented at render time; absent entirely when not configured. */
.aflp-form-time-estimate {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 16px;
	padding: 4px 12px;
	border-radius: 20px;
	background: #f0f4f8;
	color: #445;
	font-size: .85em;
	font-weight: 600;
}

.aflp-form-time-estimate-icon {
	font-size: 1em;
}

/* ---- Form Footer (Closing region) -----------------------------------------
   Client Entry Form Presentation Architecture correction: shown at the very
   bottom of the completed form (AFLP_Form_Renderer::render_footer()) —
   configurable per form/release (header_footer). Visually distinct from the
   form body/question cards above it — a divider, muted/smaller text, no card
   surface of its own — so it reads as a closing region, not another question
   section. Renders nothing when unconfigured (no markup at all), so this rule
   only ever applies when there is real content. No fixed width wider than the
   existing content column — inherits the page's own max-width. */
.aflp-form-footer {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid #dfe6ee;
}

.aflp-form-footer-content {
	color: #6b7280;
	font-size: .85em;
	line-height: 1.6;
	text-align: center;
}

.aflp-form-footer-content p {
	margin: 0 0 8px;
}

.aflp-form-footer-content p:last-child {
	margin-bottom: 0;
}

.aflp-form-footer-content a {
	color: var(--aflp-primary, #1a6fa8);
	font-weight: 600;
}

@media (max-width: 480px) {
	.aflp-form-header-logo {
		max-height: 48px;
	}
}

/* ---- Section headings ----------------------------------------------------- */
.aflp-section-title {
	font-size: 1.25em;
	font-weight: 600;
	margin: 0 0 12px;
}

/* Section-level presentation metadata (configured in schema, not hard-coded):
   a short framing sentence directly under the section heading, and an optional
   secondary guidance note (e.g. "this is not a test"). Both plain text, both
   optional — a section with neither renders exactly as before this existed. */
.aflp-section-intro {
	color: #555;
	line-height: 1.5;
	margin: 0 0 16px;
}

.aflp-section-guidance {
	color: #6b7280;
	font-size: .9em;
	font-style: italic;
	line-height: 1.5;
	margin: -8px 0 16px;
}

/* ---- Forms ---------------------------------------------------------------- */
.aflp-form {
	max-width: 480px;
}

.aflp-field {
	margin-bottom: 18px;
}

.aflp-field label {
	display: block;
	font-weight: 500;
	margin-bottom: 4px;
	line-height: 1.4;
}

.aflp-field input[type="text"],
.aflp-field input[type="email"],
.aflp-field input[type="tel"],
.aflp-field input[type="password"] {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #c8c8c8;
	border-radius: 4px;
	font-size: 1em;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.aflp-field input:focus {
	outline: none;
	border-color: #1a6fa8;
	box-shadow: 0 0 0 2px rgba(26, 111, 168, 0.15);
}

.aflp-field-hint {
	margin: 4px 0 0;
	font-size: 0.85em;
	color: #666;
}

.aflp-required {
	color: #d63638;
}

.aflp-field-check {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aflp-field-check input { margin: 0; }

/* ---- Buttons -------------------------------------------------------------- */
.aflp-btn {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 4px;
	font-size: 0.95em;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background 0.15s, color 0.15s;
}

.aflp-btn-primary {
	background: #1a6fa8;
	color: #fff;
}
.aflp-btn-primary:hover { background: #155d8f; color: #fff; }

.aflp-btn-ghost {
	background: transparent;
	color: #555;
	border: 1px solid #c8c8c8;
}
.aflp-btn-ghost:hover { background: #f5f5f5; color: #1a1a1a; }

.aflp-btn-sm { padding: 6px 14px; font-size: 0.875em; }

/* ---- Portal header -------------------------------------------------------- */
.aflp-portal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e0e0e0;
}

.aflp-greeting {
	font-size: 1.4em;
	font-weight: 600;
	margin: 0 0 4px;
}

.aflp-cohort-name,
.aflp-portal-role {
	color: #555;
	margin: 0;
	font-size: 0.95em;
}

.aflp-portal-header__actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ---- Tables --------------------------------------------------------------- */
.aflp-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.aflp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.93em;
}

.aflp-table th,
.aflp-table td {
	padding: 9px 12px;
	text-align: left;
	border-bottom: 1px solid #e8e8e8;
}

.aflp-table th {
	font-weight: 600;
	background: #f8f8f8;
	color: #333;
}

.aflp-table tbody tr:hover { background: #fafafa; }

/* ---- Forms list (Participant Portal) -------------------------------------- */
.aflp-forms-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.aflp-form-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #e8e8e8;
}

.aflp-form-item:last-child { border-bottom: none; }

.aflp-form-item__title {
	font-weight: 500;
	display: block;
}

.aflp-form-item__due {
	font-size: 0.85em;
	color: #888;
	display: block;
	margin-top: 2px;
}

.aflp-form-item__action { flex-shrink: 0; }

/* ---- Badges --------------------------------------------------------------- */
.aflp-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.8em;
	font-weight: 500;
}

.aflp-badge-coming-soon {
	background: #f0f0f1;
	color: #555;
}

.aflp-badge-pending {
	background: #fef8e7;
	color: #7a5800;
}

.aflp-badge-clear {
	background: #f0f0f1;
	color: #888;
}

.aflp-status-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 0.8em;
	text-transform: capitalize;
	background: #f0f0f1;
	color: #444;
}

.aflp-status-badge.aflp-status-active { background: #d7f0e2; color: #1a7e3e; }
.aflp-status-badge.aflp-status-draft  { background: #f0f0f1; color: #555; }
.aflp-status-badge.aflp-status-closed { background: #fef8e7; color: #7a5800; }

/* ---- Breadcrumb ----------------------------------------------------------- */
.aflp-breadcrumb {
	font-size: 0.875em;
	color: #888;
	margin-bottom: 16px;
}
.aflp-breadcrumb a { color: #1a6fa8; text-decoration: none; }
.aflp-breadcrumb a:hover { text-decoration: underline; }
.aflp-breadcrumb__sep { margin: 0 6px; }

/* ---- Misc ----------------------------------------------------------------- */
.aflp-section { margin-bottom: 40px; }

.aflp-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.aflp-login-alt {
	margin-top: 20px;
	font-size: 0.9em;
	color: #555;
}
.aflp-login-alt a { color: #1a6fa8; }

.aflp-empty {
	color: #888;
	font-style: italic;
}

.aflp-portal-phase-notice {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
}

/* ---- Participant form (Phase 3A) ------------------------------------------ */
.aflp-form-full {
	/* Width is controlled by .aflp-participant-form-wrap/.aflp-auth-card now
	   (§4) — the form itself simply fills its container so the breadcrumb,
	   header and questions all read as one consistently-wide column instead
	   of a narrower form floating inside a wider page. */
	max-width: 100%;
}

/* ---- Sections as the primary organising unit (Section Architecture
   correction, restructured by the Restructure Form Visual Hierarchy
   correction) -------------------------------------------------------------
   FORM → SECTION → QUESTION → ANSWER. A section is still the strongest
   visual grouping conceptually, but .aflp-form-section itself is now a
   plain, invisible structural/layout unit — no background, no border, no
   shadow — kept only because aflp-portal.js's multi-step paging shows and
   hides one whole .aflp-form-section at a time (§9 of the correction: the
   existing Next/Back/progress/section-progression behaviour is unchanged,
   so the element it toggles has to stay). Everything a participant
   actually SEES is one of its two children, each now its own real surface:
     .aflp-section-header — a bordered, shadowed card of its own: the
       lettered number badge (A, B, C…, derived purely from schema order —
       see AFLP_Form_Renderer::section_letter(), never authored/hard-coded),
       the section title, and its optional description/guidance. Visually
       stronger than a question card (bigger padding, bolder title).
     .aflp-section-body   — NOT a card. A borderless, shadowless tinted
       canvas (the same #eef2f6 tone used as the page background elsewhere
       in this file — .aflp-participant-form-wrap / .aflp-auth-card--form)
       that the question cards
       (.aflp-field, further down) float on, with that canvas colour
       showing through every gap between them — the page-background-
       visible-between-cards effect the Google Forms reference is modelled
       on. This is what replaced the old "one white .aflp-form-section
       card enclosing a white .aflp-section-body enclosing white
       .aflp-field cards" nesting — .aflp-section-header and every
       .aflp-field now read as siblings sitting on a canvas, not boxes
       inside a box inside a box.
   Skipped only for the one schema shape with no title/description at all
   — see render_fields()'s $show_header check — so a form's questions are
   never wrapped in an invented, empty section header. */
.aflp-form-section {
	margin-bottom: 24px;
}

.aflp-form-section:last-of-type {
	margin-bottom: 0;
}

.aflp-section-header {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: #f4f7fb;
	border: 1px solid #dde3ec;
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
	padding: 24px 28px;
	margin-bottom: 22px;
}

.aflp-section-number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--aflp-primary, #1a6fa8);
	color: #fff;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1;
}

.aflp-section-heading-text {
	flex: 1;
	min-width: 0;
	padding-top: 3px;
}

.aflp-form-section-title {
	font-size: 1.2em;
	font-weight: 800;
	color: #16324a;
	margin: 0;
	line-height: 1.35;
	letter-spacing: .01em;
}

.aflp-section-heading-text .aflp-section-intro,
.aflp-section-heading-text .aflp-section-guidance {
	margin-top: 8px;
	margin-bottom: 0;
}

/* Horizontal padding deliberately 0 — a .aflp-field card's outer edge must
   line up exactly with .aflp-section-header's outer edge above it (true
   siblings, same column width, per the correction's reference diagrams).
   The vertical padding is what gives the canvas a little breathing room
   above the first question and below the last, beyond what the header's
   and each field's own margin-bottom already contribute.
   Card/Canvas Contrast correction: background strengthened from #f0f4f8
   (read as too close to white next to the white .aflp-field cards on it)
   to #eef2f6 — same value as .aflp-participant-form-wrap and
   .aflp-auth-card--form above, so every canvas in a participant form reads
   as one consistent tone. */
.aflp-section-body {
	background: #eef2f6;
	border-radius: 12px;
	padding: 6px 0;
}

@media (max-width: 768px) {
	.aflp-section-header {
		padding: 18px 20px;
		gap: 14px;
		border-radius: 10px;
	}
	.aflp-section-number {
		width: 34px;
		height: 34px;
		font-size: .95em;
	}
}

@media (max-width: 480px) {
	.aflp-form-section {
		margin-bottom: 18px;
	}
	.aflp-section-header {
		padding: 14px 14px;
		gap: 12px;
		border-radius: 10px;
		margin-bottom: 16px;
	}
	.aflp-section-body {
		border-radius: 10px;
	}
	.aflp-section-number {
		width: 30px;
		height: 30px;
		font-size: .85em;
	}
	.aflp-form-section-title {
		font-size: 1.08em;
	}
}

/* ---- Multi-step section navigation (Multi-Step Participant Form
   correction) -------------------------------------------------------------
   Progressive enhancement — aflp-portal.js discovers the existing
   .aflp-form-section blocks (no markup change was needed) and toggles
   this one class to show exactly one at a time. A form with no JS, or
   fewer than two sections, never gets this class applied and simply
   renders every section on one scrolling page — the previous, already-
   correct behaviour. */
/* !important: a state-toggle utility, unconditionally hiding whatever it's
   applied to (.aflp-form-section — including the Data Protection section,
   a real .aflp-form-section itself now — .aflp-form-intro-card, or
   .aflp-form-compact-identity) regardless of that element's own `display`
   rule elsewhere in this file at equal, single-class specificity. The last
   section's .aflp-form-actions bar needs no toggle of its own — it is
   relocated inside the last section's body (see aflp-portal.js), so hiding
   that section already hides it. */
.aflp-step-hidden {
	display: none !important;
}

.aflp-step-progress {
	margin: 0 0 28px;
}

.aflp-step-progress-text {
	margin: 0 0 8px;
	font-size: .92em;
	font-weight: 700;
	color: #34506b;
}

.aflp-step-progress-track {
	height: 8px;
	background: #dfe6ee;
	border-radius: 4px;
	overflow: hidden;
}

.aflp-step-progress-fill {
	height: 100%;
	width: 0;
	background: var(--aflp-primary, #1a6fa8);
	border-radius: 4px;
	transition: width .3s ease;
}

/* Back/Next — every section but the last gets its own trailing nav; the
   last section reuses its existing .aflp-form-actions bar
   (Submit/Cancel/Complete Registration) as its nav instead — see
   aflp-portal.js and .aflp-form-actions--paged below, which puts that bar
   through the same left/right split as this one. flex-end + margin-right:
   auto on Back means Next always sits at the right edge whether or not a
   Back button is present, without a modifier class.
   Navigation Visual Correction: the border-top + padding-top combination
   made this row read as a bounded strip/container of its own sitting on
   the section canvas — removed. It now just floats on that canvas with
   plain margin-top spacing (20-24px, matching the gap between question
   cards), no boundary line implying a second surface. */
.aflp-step-nav {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 22px;
}

.aflp-step-nav .aflp-step-back {
	margin-right: auto;
}

.aflp-step-nav .aflp-btn,
.aflp-form-actions .aflp-btn {
	min-width: 104px;
	text-align: center;
}

@media (max-width: 480px) {
	.aflp-step-nav {
		margin-top: 24px;
		padding-top: 18px;
	}
}

/* Question-Level Card Layout correction: every question (render_field()'s
   .aflp-field wrapper — every type, radio/checkbox/select/text/textarea/
   conditional alike, the same one wrapper for all of them) is its own
   clearly bordered card inside the section body, so a section with several
   questions reads as a stack of separate cards rather than one continuous
   block. Modest by design — a plain border and comfortable padding, not a
   shadow or a second heavy surface competing with .aflp-form-section above.
   Compact Question Cards correction: padding/margin/radius trimmed —
   combined with the option-row tightening below, a 6-option question like
   Age went from ~420px to fit a screen comfortably, closer to the intended
   Google-Forms-style rhythm (a clear but efficient block, not a mostly-
   empty rectangle). */
/* Card/Canvas Contrast + Visual Hierarchy Redesign corrections:
   margin-bottom raised to 22px desktop / 18px mobile (20-24px range) — the
   gap between cards, exposing the canvas colour, not the padding inside
   them. Padding raised to 24px/26px desktop (22-28px range) and 20px
   mobile, radius to 10px (10-12px range), and a subtle shadow added — a
   deliberate reversal of the earlier Compact Question Cards correction's
   padding cut, per the Product Architect's later, more specific target;
   the option-row compactness that correction actually fixed (min-height,
   inter-option gap, below) is untouched, so a 6-option question is still
   nowhere near its old ~420px despite the card itself breathing more. */
.aflp-form-full .aflp-field {
	background: #fff;
	border: 1px solid #e3e8f0;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
	padding: 24px 26px;
	margin-bottom: 22px;
}

.aflp-form-full .aflp-field:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.aflp-form-full .aflp-field {
		padding: 22px;
		margin-bottom: 20px;
	}
}

@media (max-width: 480px) {
	.aflp-form-full .aflp-field {
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 18px;
	}
}

/* A field/password-field jumped or scrolled to (error-summary link, or the
   on-load scroll-to-first-error in aflp-portal.js) lands with a little
   clearance above it rather than flush against the viewport edge. The Data
   Protection consent question is an ordinary .aflp-field now (see
   render_privacy_block()), so it no longer needs its own entry here. */
.aflp-field,
.aflp-auth-field {
	scroll-margin-top: 20px;
}

/* Conditional questions (fields carrying visible_when) — still a full
   question card (same border/radius/padding as every other one, so hiding
   or revealing it never leaves a mismatched gap), additionally connected
   visually to the question that governs it: indented, a tinted background,
   an accent rule down the left edge, and a small connector mark on its
   label. Every field still always renders server-side (nothing here is
   about presence in the DOM); aflp-portal.js additionally toggles
   aflp-field-conditional-hidden to actually show/hide it client-side based
   on the governing field's current answer — see
   AFLP_Form_Renderer::render_field()/normalize_visible_when(). */
.aflp-form-full .aflp-field.aflp-field-conditional {
	margin-left: 20px;
	background: #f8fafc;
	border-color: #dbe3ee;
	border-left-width: 3px;
	border-left-color: #94a3b8;
}

.aflp-field-conditional .aflp-field-label::before {
	content: "\21B3";
	display: inline-block;
	margin-right: 6px;
	color: #94a3b8;
	font-weight: 400;
}

.aflp-field-conditional-hidden {
	display: none;
}

@media (max-width: 480px) {
	.aflp-form-full .aflp-field.aflp-field-conditional {
		margin-left: 10px;
	}
}

.aflp-field-label {
	display: block;
	font-weight: 600;
	font-size: 1.1em;
	line-height: 1.4;
	margin-bottom: 4px;
	color: #1a1a1a;
}

/* Question hierarchy (§3): label → hint sits directly under it, with its own
   breathing room before the control below. Compact Question Cards
   correction: trimmed from 10px — the hint is a small aside, not a second
   paragraph, and the old gap was part of what made an empty-feeling card. */
.aflp-field-hint {
	margin: 0 0 6px;
	font-size: 0.88em;
	line-height: 1.45;
	color: #666;
}

/* The invalid question's own card carries the error state (Question-Level
   Card Layout correction §8) — border and a faint tint on the whole card,
   not just the control inside it — so the participant sees which question
   card needs fixing before reading any text. */
.aflp-form-full .aflp-field.aflp-field-has-error {
	border-color: #d63638;
	background: #fff9f9;
}

.aflp-field-has-error > .aflp-field-label,
.aflp-field-has-error > .aflp-field-label .aflp-required {
	color: #d63638;
}

.aflp-field-has-error .aflp-input,
.aflp-field-has-error .aflp-textarea,
.aflp-field-has-error .aflp-select {
	border-color: #d63638;
	background: #fff9f9;
}

/* Validation experience (§7/§9): the message sits immediately below the
   control it belongs to — never only in the top-of-form summary — and never
   depends on colour alone (icon + bold weight carry the same signal). */
.aflp-field-error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 0 0;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.45;
	color: #b32424;
}

.aflp-field-error-icon {
	flex-shrink: 0;
	font-size: 1em;
}

.aflp-input,
.aflp-textarea,
.aflp-select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #c8c8c8;
	border-radius: 4px;
	font-size: 1em;
	font-family: inherit;
	color: #1a1a1a;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.aflp-input:focus,
.aflp-textarea:focus,
.aflp-select:focus {
	outline: none;
	border-color: #1a6fa8;
	box-shadow: 0 0 0 2px rgba(26, 111, 168, 0.15);
}

.aflp-textarea {
	resize: vertical;
	min-height: 100px;
}

.aflp-input-number { max-width: 200px; }
.aflp-input-date   { max-width: 240px; }

/* Option layout (§1): one column, stacked vertically, by default and
   universally — every radio/checkbox group on every current and future
   AFLP form (no multi-column grid to misjudge an odd option count or an
   unpredictable label length into an awkward incomplete row).
   Compact Question Cards correction: the options are subordinate content
   inside a question card, not a second tier of cards of their own — gap
   cut from 10px (it was stacking on top of each row's own padding, the
   main cause of a 6-option question running 400px+ tall) to a tight 2px;
   rows read as one scannable answer list, not a series of separated
   boxes. */
.aflp-radio-group,
.aflp-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
}

/* Lighter option controls (Section Architecture correction §4, tightened by
   the Compact Question Cards correction): the section is the dominant
   visual block, the question card is the next one down — an individual
   option must read as a subordinate list row within it, not another card
   competing for the same attention. No border and no white card
   background at rest — a plain, comfortably-tappable row. min-height
   dropped from 44px (a large-touch-target value that, stacked six deep for
   a question like Age, was most of the excess height) to 34px — still a
   real click/tap target given the row's full horizontal width and
   generous hit area, just no longer sized as if it were its own button.
   The input stays nested in its label exactly as render_field() already
   emits it (no markup change); :has() gives the checked row a subtle
   tint, and falls back to an unhighlighted-but-fully-functional row on the
   rare browser without :has() support. */
.aflp-radio-label,
.aflp-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-weight: normal;
	line-height: 1.4;
	padding: 5px 8px;
	border-radius: 5px;
	min-height: 34px;
	box-sizing: border-box;
	transition: background .12s;
}

/* Long labels wrap within the row instead of colliding with the next
   option (§1) — the input never shrinks to make room. */
.aflp-radio-label,
.aflp-checkbox-label {
	overflow-wrap: anywhere;
}

.aflp-radio-label:hover,
.aflp-checkbox-label:hover {
	background: #f4f7fa;
}

/* Navigation Visual Correction §5: the selected-option background was
   reading as a strong full-width blue rectangle, competing with the
   Next/Complete Registration buttons for visual weight that should stay
   with those primary actions. Selection is communicated primarily by the
   checked radio/checkbox control itself and the bolder label text; the
   background is now only a very faint tint, barely stronger than hover. */
.aflp-radio-label:has(input:checked),
.aflp-checkbox-label:has(input:checked) {
	background: #f5f8fb;
	font-weight: 600;
}

/* Visible keyboard focus on the row itself, not just the small native
   input inside it (§10). This is the one place a border earns its keep —
   a genuine interaction (keyboard focus), not decoration. */
.aflp-radio-label:focus-within,
.aflp-checkbox-label:focus-within {
	outline: 2px solid #1a6fa8;
	outline-offset: 2px;
}

.aflp-radio-label input[type="radio"],
.aflp-checkbox-label input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	accent-color: #1a6fa8;
}

.aflp-form-due-date {
	font-size: 0.875em;
	color: #888;
	margin: -4px 0 20px;
}

.aflp-error-list {
	margin: 8px 0 0 20px;
	padding: 0;
}

.aflp-error-list li {
	margin-bottom: 6px;
}

/* Submission error summary (§8): supplementary to the field-level messages,
   not a replacement — each item links to the field so the participant can
   jump straight to it. */
.aflp-error-list a {
	color: #5c1c1c;
	text-decoration: underline;
	font-weight: 600;
}

.aflp-error-list a:hover {
	color: #d63638;
}

.aflp-form-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid #e0e0e0;
}

@media (max-width: 480px) {
	.aflp-form-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.aflp-form-actions .aflp-btn {
		text-align: center;
	}
}

/* Multi-step wizard's final step (Multi-Step Navigation correction):
   aflp-portal.js relocates the form's existing .aflp-form-actions bar into
   the last section and adds this modifier, wrapping the bar's pre-existing
   content (Submit/Cancel, or Complete Registration alone) in
   .aflp-form-actions-primary. That leaves exactly two children — Back and
   the wrapped group — so the same left/right split as .aflp-step-nav (Back
   left, everything else right) works with a plain space-between, on both
   desktop and mobile: no stacking, same row, same order, as every other
   step's nav (§6/§7 of the correction). A form with fewer than two
   sections never gets this modifier and .aflp-form-actions keeps its
   original grouped-left layout untouched. */
/* Navigation Visual Correction: same border-top removal as .aflp-step-nav
   above, scoped to the paged (multi-step) state only — the plain
   Submit/Cancel .aflp-form-actions bar (no --paged modifier, a
   single-section form or the pre-multi-step fallback) keeps its original
   border-top separator untouched. */
.aflp-form-actions--paged {
	justify-content: space-between;
	margin-top: 22px;
	padding-top: 0;
	border-top: none;
}

.aflp-form-actions-primary {
	display: flex;
	align-items: center;
	gap: 12px;
}

@media (max-width: 480px) {
	.aflp-form-actions--paged {
		flex-direction: row;
		align-items: center;
	}
	.aflp-form-actions--paged .aflp-btn {
		text-align: center;
	}
}

/* Navigation Visual Correction §2: explicit, self-contained styling for the
   multi-step nav buttons specifically (.aflp-step-next/.aflp-step-back are
   unique to aflp-portal.js's JS-built nav; .aflp-form-actions--paged
   .aflp-btn-primary/.aflp-btn-ghost is the pre-existing final-step
   Complete Registration/Back pairing when in paged mode) — !important
   because the active WordPress theme's own button/link defaults were
   bleeding through .aflp-btn-primary/.aflp-btn-ghost's own (non-!important)
   colours here, rendering as a faint themed outline instead of the
   intended solid Afifen navy; .aflp-btn-outline elsewhere in this file
   already established !important as this codebase's fix for exactly that.
   Deliberately a fixed navy (#011F5F, the same fallback used everywhere
   else in this file), not var(--aflp-primary) — the per-programme branding
   colour — per the Product Architect's explicit instruction for this one
   control; every other branded button/accent in the plugin still respects
   var(--aflp-primary) untouched. */
.aflp-step-next,
.aflp-form-intro-begin,
.aflp-form-actions--paged .aflp-btn-primary {
	background: #011F5F !important;
	border: 1px solid #011F5F !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 28px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 7px;
	box-shadow: none;
}

.aflp-step-next:hover,
.aflp-form-intro-begin:hover,
.aflp-form-actions--paged .aflp-btn-primary:hover {
	background: #01173f !important;
	border-color: #01173f !important;
}

/* Sits at the end of the intro card's own content (identity, confirmation,
   title, purpose, time estimate, participant identity) — right-aligned,
   matching every other primary action's position in this system. */
.aflp-form-intro-begin {
	display: flex;
	margin: 8px 0 0 auto;
}

.aflp-step-back,
.aflp-form-actions--paged .aflp-btn-ghost {
	background: #fff !important;
	border: 1px solid #cbd5e1 !important;
	color: #011F5F !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 28px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 7px;
	box-shadow: none;
}

.aflp-step-back:hover,
.aflp-form-actions--paged .aflp-btn-ghost:hover {
	background: #f8fafc !important;
	border-color: #94a3b8 !important;
}

@media (max-width: 480px) {
	.aflp-step-next,
	.aflp-step-back,
	.aflp-form-actions--paged .aflp-btn-primary,
	.aflp-form-actions--paged .aflp-btn-ghost {
		padding: 0 18px;
	}
}

/* ---- Completion screen ----------------------------------------------------- */
.aflp-completion-screen {
	text-align: center;
	padding: 48px 24px;
	max-width: 480px;
	margin: 0 auto;
}

.aflp-completion-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #d7f0e2;
	color: #1a7e3e;
	font-size: 1.6em;
	line-height: 56px;
	margin: 0 auto 20px;
}

.aflp-completion-heading {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 12px;
	color: #1a1a1a;
}

.aflp-completion-message {
	color: #555;
	font-size: 1em;
	margin: 0 0 28px;
	line-height: 1.6;
}

/* Universal completion experience — "what happens next", configured per
   form/release via completion_action_json.screen (see
   AFLP_Form_Renderer::render_completion_inner()). All optional; a form
   with none of this configured renders exactly as before it existed. */
.aflp-completion-next {
	text-align: left;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 0 0 24px;
}

.aflp-completion-next-heading {
	font-size: 1em;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 8px;
}

.aflp-completion-next-body {
	color: #444;
	font-size: .93em;
	line-height: 1.6;
}

.aflp-completion-next-body p {
	margin: 0 0 10px;
}

.aflp-completion-next-body p:last-child {
	margin-bottom: 0;
}

.aflp-completion-contact {
	color: #6b7280;
	font-size: .88em;
	margin: 0 0 20px;
}

.aflp-completion-additional {
	text-align: left;
	color: #555;
	font-size: .9em;
	line-height: 1.6;
	margin: 0 0 24px;
}

.aflp-completion-additional p {
	margin: 0 0 10px;
}

/* ==========================================================================
   Data Protection & Privacy — configured per form/release via
   privacy_title/privacy_notice/privacy_consent_question/privacy_consent_option_text
   (see AFLP_Form_Renderer::render_privacy_block()). Information Architecture
   Correction: this is now a real .aflp-form-section (its own section-header
   card + an .aflp-field question card for the consent checkbox — same
   markup and CSS every schema section already uses, no separate treatment
   left to maintain) rather than a standalone block only styled to resemble
   one. Only .aflp-privacy-notice remains here — the plain-text styling for
   the agreement copy itself, nested inside its .aflp-field. Renders
   nothing at all when no privacy_notice is configured. */
.aflp-privacy-notice {
	color: #444;
	font-size: .95em;
	line-height: 1.6;
}

.aflp-privacy-notice p {
	margin: 0 0 10px;
}

.aflp-privacy-notice p:last-child {
	margin-bottom: 0;
}

/* The notice-text card is read-only content, not an answerable question —
   no error state is possible on it, so it skips the vertical rhythm a real
   question's label/hint/control stack needs; the consent question right
   after it (an ordinary .aflp-field) is unaffected. */
.aflp-field--static {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* ==========================================================================
   Workbook Engine — supplemental portal.css rules
   (Worksheet styles live in aflp-worksheet.css, enqueued only on workbook page)
   ========================================================================== */

/* Workbook list items on participant portal dashboard */
.aflp-wb-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* (Workbook chrome suppression, header bars, sidebar, and layout CSS moved to
   aflp-worksheet.css which is enqueued only on the workbook page.) */



.aflp-wb-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
	gap: 12px;
}

.aflp-wb-list-item:last-child { border-bottom: none; }

.aflp-wb-list-item__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.aflp-wb-list-item__title {
	font-weight: 600;
	font-size: .95em;
}

.aflp-wb-list-item__meta {
	font-size: .82em;
	color: #777;
}

.aflp-wb-list-item__action { flex-shrink: 0; }

/* ── WORKSHEET STATUS badge (portal list) ────────────────────────────────── */
.aflp-wb-list .aflp-wb-ws-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: .8em;
	font-weight: 600;
	font-style: normal;
	color: initial;
}

.aflp-wb-ws-status-not_started { background: #f0f0f0; color: #666; }
.aflp-wb-ws-status-in_progress { background: #fef3c7; color: #92400e; }
.aflp-wb-ws-status-completed   { background: #d1fae5; color: #065f46; }


/* ==========================================================================
   Phase 3D+ — 2-row portal header, dashboard upgrades, new pages
   ========================================================================== */

/* ---- 2-row portal header ------------------------------------------------- */
.aflp-portal-wrap {
    width: 100%; max-width: 900px; margin: 0 auto; padding: 4px 16px 16px;
    box-sizing: border-box; font-family: inherit; color: inherit;
}
.aflp-portal-header {
    display: flex; flex-direction: column;
    align-items: stretch; justify-content: flex-start; gap: 0;
    width: 100%; border-radius: 8px; overflow: hidden;
    margin-bottom: 20px; padding-bottom: 0; border-bottom: 0; color: #fff;
}

.aflp-portal-hdr-row1 {
    display: flex; align-items: center; gap: 12px;
    padding: 0 20px; height: 72px;
}
.aflp-portal-logo {
    max-height: 44px; width: auto; object-fit: contain; flex-shrink: 0;
    background: #fff; padding: 5px 10px; border-radius: 6px;
}
.aflp-portal-prog-name {
    color: #fff; font-weight: 700; font-size: 1.1em;
    flex: 1; text-align: right;
}

.aflp-portal-hdr-row2 {
    display: flex; align-items: center; gap: 0;
    position: relative;
    padding: 0 20px; height: 52px;
}
.aflp-hdr2-left  { display: flex; align-items: center; gap: 4px; flex: 1; }
.aflp-hdr2-mid   {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-weight: 700; font-size: .72em; color: #fff; opacity: .85;
    text-align: center; white-space: nowrap;
}
.aflp-hdr2-right { display: flex; align-items: center; gap: 10px; }

.aflp-subnav-btn {
    color: rgba(255,255,255,.85); text-decoration: none; font-size: .72em;
    font-weight: 600; padding: 6px 10px; border-radius: 4px;
    transition: background .15s;
}
.aflp-subnav-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

.aflp-portal-welcome { color: rgba(255,255,255,.9); font-size: .72em; font-weight: 600; }
.aflp-logout-btn {
    color: rgba(255,255,255,.9); text-decoration: none; font-size: .70em;
    background: rgba(255,255,255,.15); border-radius: 6px; padding: 6px 12px;
    transition: background .15s;
}
.aflp-logout-btn:hover { background: rgba(255,255,255,.25); color: #fff; }

/* ---- Data notice ---------------------------------------------------------- */
.aflp-data-notice {
    background: #f0f9ff; border-left: 4px solid #19A9DD; padding: 10px 20px;
    font-size: .85em; color: #1e40af; margin: 0;
}

/* ---- Motivation strip ----------------------------------------------------- */
.aflp-motivation-strip {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    background: #fff; border-radius: 0; border-bottom: 1px solid #e5e7eb;
    padding: 14px 24px;
}
.aflp-motivation-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.aflp-motivation-label { font-size: .8em; font-weight: 700; color: #6b7280; white-space: nowrap; }
.aflp-motivation-bar-wrap { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; min-width: 80px; }
.aflp-motivation-bar { height: 100%; background: var(--aflp-primary, #011F5F); border-radius: 4px; transition: width .4s; }
.aflp-motivation-pct { font-size: .8em; font-weight: 700; color: var(--aflp-primary, #011F5F); white-space: nowrap; }
.aflp-motivation-msg { flex: 1; font-size: .85em; color: #6b7280; line-height: 1.5; min-width: 160px; }

/* ---- Hero card ------------------------------------------------------------ */
.aflp-hero-card {
    background: var(--aflp-primary, #011F5F); color: #fff;
    padding: 28px 28px 24px; margin: 0 0 0;
}
.aflp-hero-eyebrow {
    font-size: .78em; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; opacity: .7; margin-bottom: 6px;
}
.aflp-hero-chapter { font-size: 1.35em; font-weight: 800; margin: 0 0 14px; line-height: 1.25; }
.aflp-hero-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.aflp-hero-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,.25); border-radius: 3px; overflow: hidden; max-width: 280px; }
.aflp-hero-bar { height: 100%; background: #fff; border-radius: 3px; transition: width .4s; }
.aflp-hero-counts { font-size: .8em; opacity: .8; white-space: nowrap; }
.aflp-hero-last-edited { font-size: .8em; opacity: .65; margin-bottom: 18px; }
.aflp-hero-btn {
    display: inline-block; padding: 10px 24px; border-radius: 5px;
    font-weight: 700; font-size: .9em; text-decoration: none;
    margin-top: 8px; transition: opacity .15s;
}
.aflp-hero-btn:hover { opacity: .88; }
.aflp-hero-complete-msg { opacity: .85; font-size: .9em; margin: 0 0 14px; line-height: 1.6; }

/* ---- Section grid --------------------------------------------------------- */
.aflp-section-grid {
    display: flex; gap: 14px; flex-wrap: wrap; padding: 20px 24px;
    background: #f9fafb; border-bottom: 1px solid #e5e7eb;
}
.aflp-section-card {
    display: flex; flex-direction: column; align-items: center;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 18px 16px; text-decoration: none; color: inherit;
    min-width: 120px; flex: 1; max-width: 160px;
    transition: box-shadow .15s, border-color .15s;
}
.aflp-section-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); border-color: var(--aflp-primary, #011F5F); }
.aflp-section-icon { font-size: 2em; margin-bottom: 6px; }
.aflp-section-label { font-size: .82em; font-weight: 700; text-align: center; color: #374151; }
.aflp-section-badge {
    font-size: .72em; margin-top: 6px; padding: 2px 8px; border-radius: 10px;
    background: #e5e7eb; color: #6b7280;
}
.aflp-section-badge.aflp-badge-success { background: #d1fae5; color: #065f46; }

.aflp-lower-feature-card {
    display: flex; align-items: center; gap: 14px; padding: 16px;
    border: 1px solid #dbe3ee; border-radius: 8px; background: #fff;
    color: #1f2937; text-decoration: none;
}
.aflp-lower-feature-card:hover { border-color: var(--aflp-primary, #011F5F); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.aflp-lower-feature-icon { font-size: 1.7em; }
.aflp-lower-feature-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.aflp-lower-feature-copy small { color: #6b7280; font-size: .78em; }
.aflp-lower-feature-cta { color: var(--aflp-primary, #011F5F); font-size: .8em; font-weight: 700; }
.aflp-support-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aflp-support-grid a {
    display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 11px;
    border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
    color: #374151; font-size: .78em; font-weight: 700; text-decoration: none;
}
.aflp-support-grid a:hover { border-color: var(--aflp-primary, #011F5F); }
.aflp-resource-handout {
    display: flex; align-items: center; gap: 12px; margin: 18px 24px 0; padding: 14px 16px;
    border: 1px solid #dbe3ee; border-radius: 8px; background: #f8fafc;
}
.aflp-resource-handout > span { font-size: 1.6em; }
.aflp-resource-handout > div { display: flex; flex: 1; flex-direction: column; }
.aflp-resource-handout small { color: #6b7280; }
.aflp-package-page-content { max-width: 900px; margin: 0 auto; padding: 28px 24px 40px; color: #374151; line-height: 1.7; }
.aflp-package-page-content h2, .aflp-package-page-content h3 { color: var(--aflp-primary, #011F5F); }

/* ---- Worksheet list (dashboard) ------------------------------------------ */
.aflp-dash-subsection { padding: 20px 24px 4px; }
.aflp-dash-subsection h3 { font-size: 1em; font-weight: 700; color: #374151; margin: 0 0 14px; }
.aflp-ws-list { display: flex; flex-direction: column; gap: 0; }
.aflp-ws-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid #f0f0f0;
}
.aflp-ws-item:last-child { border-bottom: none; }
.aflp-ws-dot {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85em; font-weight: 700;
}
.aflp-ws-done .aflp-ws-dot { background: #d1fae5; color: #065f46; }
.aflp-ws-open .aflp-ws-dot { background: #dbeafe; color: #1e40af; border: 2px solid #93c5fd; }
.aflp-ws-locked .aflp-ws-dot { background: #f3f4f6; color: #9ca3af; }
.aflp-ws-info { flex: 1; }
.aflp-ws-name { font-weight: 700; font-size: .9em; color: #111; }
.aflp-ws-counts { font-size: .78em; color: #6b7280; margin-top: 2px; }
.aflp-ws-status-label { font-size: .78em; color: #6b7280; margin-top: 2px; }
.aflp-ws-status-label.aflp-ws-complete { color: #065f46; font-weight: 700; }
.aflp-ws-status-label.aflp-ws-lock-label { color: #92400e; }
.aflp-ws-last-edited { font-size: .75em; color: #9ca3af; margin-top: 2px; font-style: italic; }
.aflp-ws-open-btn {
    display: inline-block; background: var(--aflp-primary, #011F5F); color: #fff;
    text-decoration: none; border-radius: 4px; padding: 6px 14px;
    font-size: .8em; font-weight: 700; white-space: nowrap; flex-shrink: 0;
    transition: opacity .15s;
}
.aflp-ws-open-btn:hover { opacity: .85; }
.aflp-form-badge {
    display: inline-block; font-size: .72em; font-weight: 700;
    padding: 2px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle;
}
.aflp-form-badge-available { background: #dbeafe; color: #1e40af; }
.aflp-form-badge-submitted { background: #d1fae5; color: #065f46; }
.aflp-form-badge-locked { background: #f3f4f6; color: #9ca3af; }
.aflp-forms-intro { font-size: .85em; color: #6b7280; margin: 0 0 12px; }

/* ---- Portal footer -------------------------------------------------------- */
.aflp-portal-footer {
    text-align: center; padding: 20px 24px; font-size: .8em; color: #9ca3af;
    border-top: 1px solid #e5e7eb; margin-top: 32px;
}
.aflp-portal-footer a { color: #6b7280; text-decoration: none; }
.aflp-portal-footer a:hover { text-decoration: underline; }

/* ---- Welcome modal -------------------------------------------------------- */
.aflp-welcome-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 99999; align-items: center; justify-content: center;
}
.aflp-welcome-overlay.aflp-welcome-hiding { opacity: 0; transition: opacity .3s; }
.aflp-welcome-box {
    background: #fff; border-radius: 10px; max-width: 500px; width: 92%;
    padding: 32px 32px 24px; text-align: center; position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.aflp-welcome-logo { margin-bottom: 14px; }
.aflp-welcome-logo img { max-height: 50px; width: auto; }
.aflp-welcome-title { font-size: 1.2em; color: var(--aflp-primary, #011F5F); margin: 0 0 20px; line-height: 1.3; }
.aflp-welcome-steps { text-align: left; margin: 0 0 24px; }
.aflp-welcome-step {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
}
.aflp-welcome-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--aflp-primary, #011F5F); color: #fff;
    font-size: .78em; font-weight: 800; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.aflp-welcome-step span:last-child { font-size: .88em; color: #374151; line-height: 1.5; }
.aflp-welcome-btn {
    display: inline-block; padding: 11px 28px; border-radius: 5px;
    font-weight: 700; text-decoration: none; font-size: .9em; margin-bottom: 12px;
}
.aflp-welcome-dismiss {
    display: block; width: 100%; background: none; border: none;
    color: #9ca3af; font-size: .82em; cursor: pointer; padding: 4px 0;
}
.aflp-welcome-dismiss:hover { color: #6b7280; text-decoration: underline; }

/* ---- Resources page ------------------------------------------------------- */
.aflp-resource-main-tabs {
    display: flex; border-bottom: 2px solid #e5e7eb;
    padding: 0 24px; background: #fff;
}
.aflp-resource-main-tab {
    padding: 12px 20px; background: none; border: none;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
    font-size: .9em; font-weight: 700; color: #6b7280; cursor: pointer;
}
.aflp-resource-main-tab.active { color: var(--aflp-primary, #011F5F); border-bottom-color: var(--aflp-primary, #011F5F); }
.aflp-resource-category-panel { padding: 0 24px; }
.aflp-res-tabs {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 0 8px;
}
.aflp-res-tab {
    padding: 5px 14px; border-radius: 20px; border: 1px solid #d1d5db;
    background: #f9fafb; color: #374151; font-size: .8em; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.aflp-res-tab.active,
.aflp-res-tab:hover { background: var(--aflp-primary, #011F5F); color: #fff; border-color: var(--aflp-primary, #011F5F); }

.aflp-resource-group { margin-bottom: 16px; }
.aflp-resource-session-label { font-size: .85em; font-weight: 700; color: #6b7280; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .05em; }
.aflp-resource-item {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 14px 16px; margin-bottom: 8px;
    transition: box-shadow .15s;
}
.aflp-resource-item:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.aflp-resource-item--video { flex-direction: column; align-items: stretch; }
.aflp-resource-icon-col { font-size: 1.6em; flex-shrink: 0; }
.aflp-resource-info { flex: 1; }
.aflp-resource-title { display: block; font-weight: 700; font-size: .9em; color: #111; margin-bottom: 3px; }
.aflp-resource-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .78em; }
.aflp-resource-type { background: #e5e7eb; color: #374151; padding: 1px 6px; border-radius: 3px; font-weight: 700; }
.aflp-resource-date, .aflp-resource-note { color: #6b7280; }
.aflp-resource-video-wrap { width: 100%; }
.aflp-resource-video-header { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 12px; }
.aflp-resource-embed { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 4px; overflow: hidden; }
.aflp-resource-embed iframe,
.aflp-resource-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.aflp-empty-state { text-align: center; padding: 40px 20px; color: #9ca3af; }
.aflp-empty-state-icon { font-size: 3em; margin-bottom: 10px; }
.aflp-empty-state h3 { color: #6b7280; margin: 0 0 8px; }
.aflp-empty-state p { margin: 4px 0; font-size: .9em; }
.aflp-filter-empty-state { padding: 24px 0; }

/* ---- Certificate page ----------------------------------------------------- */
.aflp-certificate-eligible { padding: 20px; }

/* ---- Handout page --------------------------------------------------------- */
.aflp-handout-inner { max-width: 900px; margin: 0 auto; padding: 24px 20px; }
.aflp-handout-notice {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
    padding: 12px 16px; font-size: .84em; color: #92400e; margin-bottom: 20px;
}
.aflp-handout-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.aflp-handout-iframe {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 6px;
    display: block; min-height: 600px;
}
.aflp-handout-viewer-wrap { }

/* ---- Schedule page -------------------------------------------------------- */
.aflp-schedule-content { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 28px 32px; }
.aflp-wysiwyg table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.aflp-wysiwyg th, .aflp-wysiwyg td { border: 1px solid #e5e7eb; padding: 8px 12px; text-align: left; font-size: .9em; }
.aflp-wysiwyg th { background: #f3f4f6; font-weight: 700; }

/* ---- Facilitator portal upgrades ----------------------------------------- */
.aflp-fac-section { }
.aflp-fac-status-pending { background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.aflp-fac-status-active { background: #d1fae5; color: #065f46; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.aflp-fac-status-suspended { background: #fee2e2; color: #991b1b; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }

/* ---- Buttons (additions) -------------------------------------------------- */
.aflp-btn-outline {
    background: #fff !important; color: var(--aflp-primary, #011F5F) !important;
    border: 1px solid var(--aflp-primary, #011F5F) !important;
}
.aflp-btn-outline:hover { background: var(--aflp-primary, #011F5F) !important; color: #fff !important; }
.aflp-btn-lg { padding: 12px 32px; font-size: 1em; }

/* ---- Admin portal (extra) ------------------------------------------------- */
.aflp-admin-portal { max-width: 100%; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 767px) {
	.aflp-support-grid { grid-template-columns: 1fr 1fr; }
	.aflp-lower-feature-card, .aflp-resource-handout { align-items: flex-start; flex-wrap: wrap; }
    .aflp-portal-hdr-row1 { padding: 0 14px; height: 60px; }
    .aflp-portal-hdr-row2 { padding: 0 14px; height: 48px; }
    .aflp-hdr2-mid { display: none; }
    .aflp-hero-card { padding: 20px 16px 18px; }
    .aflp-hero-chapter { font-size: 1.1em; }
    .aflp-section-grid { padding: 14px 14px; gap: 10px; }
    .aflp-dash-subsection { padding: 14px 14px 4px; }
    .aflp-resource-category-panel { padding: 0 14px; }
    .aflp-resource-main-tabs { padding: 0 14px; }
    .aflp-welcome-box { padding: 24px 18px 20px; }
    .aflp-admin-stats { gap: 8px; }
    .aflp-stat-card { min-width: 80px; padding: 12px 10px; }
    .aflp-stat-num { font-size: 22px; }
}

/* =============================================================================
   Auth card — login, register, facilitator register, admin register
   (PP-style: centred white card on #f0f4f8 background)
   ============================================================================= */

/* Override .aflp-portal-wrap when used as auth card wrapper */
.aflp-portal-wrap:has(.aflp-auth-card) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 16px 60px;
    /* Client Entry Form Presentation Architecture correction: --aflp-form-bg,
       when set from header_bg_colour, overrides this page-canvas tone for
       this one form only. Fallback is the exact pre-existing literal. */
    background: var(--aflp-form-bg, #f0f4f8);
    box-sizing: border-box;
}

.aflp-auth-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.10);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}

/* Client Entry — the one .aflp-auth-card user that carries a real schema
   form (questions + privacy + password setup), not a short login/register
   panel — gets the same wide "form surface" width as the standalone
   participant form (§4 of the Visual Design Pass), on the same tinted
   .aflp-portal-wrap background this card already sits on. A modifier
   class, not a change to the base rule, so every other .aflp-auth-card
   consumer (sign-in, register, facilitator/admin register) is untouched —
   see AFLP_Portal_Client_Entry::render()/render_submitted_state(). */
.aflp-auth-card--form {
    max-width: 960px;
}

/* Visual Hierarchy Redesign correction §1: when this modifier is showing the
   real multi-step form (identifiable, with no markup change, purely by the
   presence of at least one .aflp-form-section — every real Client Entry
   form has one, even a gate form with no schema questions, because the
   "Set up your portal access" section always renders), it stops being a
   large enclosing white card and becomes a plain tinted canvas instead —
   the same tone as .aflp-section-body below, so the whole form reads as
   one flat surface with the intro card / section header / question cards
   floating on it, not a card nested inside a card. render_submitted_state()
   (the Thank-You screen) and every other .aflp-auth-card consumer
   (sign-in, register, facilitator/admin register, and any error state)
   carry no .aflp-form-section and are completely unaffected — they keep
   the original white card treatment from the base .aflp-auth-card rule
   above untouched. */
.aflp-auth-card--form:has(.aflp-form-section) {
    background: #eef2f6;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.aflp-auth-card--form .aflp-auth-wrap {
    padding: 44px 48px 48px;
}

@media (max-width: 768px) {
    .aflp-auth-card--form .aflp-auth-wrap {
        padding: 32px 28px 36px;
    }
}

@media (max-width: 480px) {
    .aflp-auth-card--form .aflp-auth-wrap {
        padding: 22px 18px 28px;
    }
}

/* --- Card header — white, no coloured band --- */
.aflp-auth-card-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.aflp-auth-card-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #f3f4f6;
    min-height: 40px;
}

.aflp-auth-card-topbar-left,
.aflp-auth-card-topbar-right {
    font-size: .82em;
}

.aflp-auth-nav-link {
    color: var(--aflp-primary, #011F5F);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.aflp-auth-nav-link:hover { text-decoration: underline; }

.aflp-auth-card-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px 20px;
    gap: 10px;
}

.aflp-auth-card-logo {
    height: 64px;
    width: auto;
    object-fit: contain;
}

.aflp-auth-card-logo-placeholder {
    height: 64px;
    width: 64px;
    border-radius: 50%;
    background: #e5e7eb;
}

.aflp-auth-card-progname {
    color: var(--aflp-primary, #011F5F);
    font-size: 1.05em;
    font-weight: 700;
    margin: 0;
    text-align: center;
    letter-spacing: .01em;
}

/* --- Card body / form area --- */
.aflp-auth-wrap {
    padding: 28px 28px 32px;
}

.aflp-auth-subtitle {
    font-size: 1.1em;
    font-weight: 700;
    color: #1a2340;
    margin: 0 0 20px;
    text-align: center;
}

/* Client Entry: authorisation confirmation line — short, status-only, never
   the internal payment/scholarship/sponsorship/free terms themselves (see
   AFLP_Portal_Client_Entry::render()). Sits above the form's own title. */
.aflp-auth-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 6px;
    color: #1a7e3e;
    font-weight: 600;
    font-size: .92em;
    text-align: center;
}

.aflp-auth-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d7f0e2;
    font-size: .75em;
    flex-shrink: 0;
}

/* The universal form header/intro pieces read centred inside the narrow
   auth-card (Client Entry), unlike their left-aligned default inside the
   wider full-width participant form — scoped to this container only. */
.aflp-auth-wrap .aflp-section-title,
.aflp-auth-wrap .aflp-form-header-subtitle,
.aflp-auth-wrap .aflp-form-header-intro,
.aflp-auth-wrap .aflp-form-time-estimate {
    text-align: center;
}

.aflp-auth-wrap .aflp-form-time-estimate {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.aflp-auth-wrap .aflp-form-header-logos {
    justify-content: center;
}

.aflp-auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aflp-auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* .aflp-auth-form (login/register/admin-register — see class-aflp-portal-
   login.php and siblings) already spaces its fields via its own flex gap.
   The Client Entry password block ("Set up your portal access") has no
   such wrapper — it sits directly in .aflp-section-body — so scope this
   treatment to that context only, rather than changing the unrelated
   login/register screens that reuse .aflp-auth-field. Restructure Form
   Visual Hierarchy correction: .aflp-section-body is now a tinted canvas,
   not a white card, so these two fields need the same white question-card
   treatment .aflp-field gets, or they would render as unstyled rows
   floating on the tint instead of question cards. */
.aflp-section-body .aflp-auth-field {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.aflp-section-body .aflp-auth-field:last-child {
    margin-bottom: 0;
}

.aflp-auth-field label {
    font-size: .88em;
    font-weight: 600;
    color: #374151;
}

.aflp-auth-hint {
    font-weight: 400;
    color: #6b7280;
    font-size: .82em;
}

.aflp-auth-field input[type="text"],
.aflp-auth-field input[type="email"],
.aflp-auth-field input[type="password"],
.aflp-auth-field input[type="tel"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: .95em;
    color: #111827;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

.aflp-auth-field input:focus {
    border-color: var(--aflp-primary, #011F5F);
    box-shadow: 0 0 0 3px rgba(1,31,95,.12);
}

/* Client Entry password fields (§7): the same field-level error treatment
   as the schema questions above, so "Create Password"/"Confirm Password"
   failures read consistently with every other field on the form — the
   whole question card, not just the input inside it (mirrors
   .aflp-field.aflp-field-has-error). */
.aflp-section-body .aflp-auth-field.aflp-field-has-error {
    border-color: #d63638;
    background: #fff9f9;
}

.aflp-auth-field.aflp-field-has-error label {
    color: #b32424;
}

.aflp-auth-field.aflp-field-has-error input {
    border-color: #d63638;
    background: #fff9f9;
}

.aflp-auth-btn {
    width: 100%;
    padding: 12px;
    background: var(--aflp-btn, var(--aflp-primary, #011F5F));
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: opacity .15s;
}
.aflp-auth-btn:hover:not(:disabled) { opacity: .88; }
.aflp-auth-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Messages */
.aflp-auth-msg {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .9em;
    font-weight: 500;
    margin-bottom: 14px;
}
.aflp-auth-msg-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
.aflp-auth-msg-info {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #1e40af;
}
.aflp-auth-msg-info a { color: #1d4ed8; }

/* Footer links */
.aflp-auth-footer {
    text-align: center;
    font-size: .88em;
    color: #6b7280;
    margin: 18px 0 0;
}
.aflp-auth-footer a { color: var(--aflp-primary, #011F5F); font-weight: 600; text-decoration: none; }
.aflp-auth-footer a:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 520px) {
    .aflp-portal-wrap:has(.aflp-auth-card) { padding: 0; align-items: stretch; }
    .aflp-auth-card { border-radius: 0; box-shadow: none; max-width: 100%; min-height: 100vh; }
    .aflp-auth-wrap { padding: 22px 18px 28px; }
}

/* ==========================================================================
   UX-1 Dashboard redesign — participant portal
   ========================================================================== */

/* ---- Hero card upgrades ---- */
.aflp-hero-card {
    background: linear-gradient(135deg, var(--aflp-hero, #011F5F) 0%, color-mix(in srgb, var(--aflp-hero, #011F5F) 80%, #000) 100%);
    border-radius: 12px;
    padding: 28px 28px 24px;
    margin-bottom: 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.aflp-hero-meta {
    font-size: .82em;
    opacity: .75;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.aflp-hero-meta-sep { opacity: .5; }
.aflp-hero-cohort,
.aflp-hero-tagline-inline { opacity: 1; }

.aflp-hero-eyebrow {
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 4px;
}

.aflp-hero-chapter {
    font-size: 1.5em;
    font-weight: 800;
    margin: 0 0 10px;
    line-height: 1.25;
    color: #fff;
}

.aflp-hero-complete-msg {
    font-size: .93em;
    opacity: .85;
    margin: 0 0 14px;
}

.aflp-hero-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.aflp-hero-bar-wrap {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,.25);
    border-radius: 3px;
    overflow: hidden;
}
.aflp-hero-bar {
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transition: width .4s ease;
}
.aflp-hero-counts {
    font-size: .8em;
    opacity: .8;
    white-space: nowrap;
}

.aflp-hero-last-edited {
    font-size: .78em;
    opacity: .6;
    margin-bottom: 10px;
}

.aflp-hero-overall {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 16px;
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 10px;
}
.aflp-hero-overall-bar-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
    overflow: hidden;
}
.aflp-hero-overall-bar {
    height: 100%;
    background: rgba(255,255,255,.65);
    border-radius: 2px;
    transition: width .4s ease;
}
.aflp-hero-overall-label {
    font-size: .76em;
    opacity: .7;
    white-space: nowrap;
}

.aflp-hero-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: .95em;
    text-decoration: none;
    transition: opacity .15s;
}
.aflp-hero-btn:hover { opacity: .88; text-decoration: none; }

/* ---- What Needs Your Attention ---- */
.aflp-attention-section {
    background: #fffbeb;
    border: 1.5px solid #f59e0b;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.aflp-attention-header {
    font-weight: 700;
    font-size: 1em;
    color: #92400e;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.aflp-attention-icon { font-size: 1.1em; }

.aflp-attention-list { display: flex; flex-direction: column; gap: 10px; }

.aflp-attention-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border-radius: 7px;
    padding: 12px 14px;
    border-left: 4px solid #f59e0b;
}
.aflp-attention-returned { border-left-color: #ef4444; }
.aflp-attention-overdue  { border-left-color: #f59e0b; }

.aflp-attention-item-info { flex: 1; }
.aflp-attention-item-name {
    font-weight: 700;
    font-size: .95em;
    color: #1a2340;
    display: block;
    margin-bottom: 3px;
}
.aflp-attention-item-note {
    font-size: .84em;
    color: #6b7280;
}
.aflp-attention-btn {
    white-space: nowrap;
    padding: 6px 14px;
    background: var(--aflp-btn, var(--aflp-primary, #011F5F));
    color: #fff;
    border-radius: 5px;
    font-size: .84em;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    align-self: center;
}
.aflp-attention-btn:hover { opacity: .88; text-decoration: none; color: #fff; }

/* ---- Learning progress summary strip ---- */
.aflp-progress-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.aflp-progress-stat {
    flex: 1;
    min-width: 100px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.aflp-progress-stat-num {
    font-size: 1.5em;
    font-weight: 800;
    color: var(--aflp-primary, #011F5F);
    line-height: 1;
}
.aflp-progress-stat-lbl {
    font-size: .78em;
    color: #6b7280;
    font-weight: 500;
}
.aflp-progress-stat-pct .aflp-progress-stat-num { color: #059669; }

/* ---- Programme Materials ---- */
.aflp-materials-section { }
.aflp-materials-video { margin-bottom: 16px; }
.aflp-materials-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.aflp-material-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: #1a2340;
    font-weight: 600;
    font-size: .9em;
    transition: border-color .15s, box-shadow .15s;
}
.aflp-material-link:hover {
    border-color: var(--aflp-primary, #011F5F);
    box-shadow: 0 0 0 2px rgba(1,31,95,.08);
    text-decoration: none;
    color: var(--aflp-primary, #011F5F);
}
.aflp-material-icon { font-size: 1.1em; }
.aflp-material-name { }

/* ---- Form badge: returned ---- */
.aflp-form-badge-returned {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.aflp-form-badge-feedback {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* ---- Overdue date ---- */
.aflp-overdue-date { color: #dc2626; font-weight: 600; }

/* ---- Recent Feedback section ---- */
.aflp-feedback-section { }
.aflp-feedback-list { display: flex; flex-direction: column; gap: 12px; }
.aflp-feedback-item {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
}
.aflp-feedback-form-name {
    font-weight: 700;
    font-size: .9em;
    color: #1a2340;
    margin-bottom: 6px;
}
.aflp-feedback-text {
    font-size: .9em;
    color: #374151;
    line-height: 1.55;
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}
.aflp-feedback-read-more {
    font-size: .83em;
    color: var(--aflp-primary, #011F5F);
    font-weight: 600;
    text-decoration: none;
}
.aflp-feedback-read-more:hover { text-decoration: underline; }

/* ---- Certificate / completion section badges ---- */
.aflp-section-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: .8em;
    font-weight: 600;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
.aflp-badge-success {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}

/* ---- Data notice bar ---- */
.aflp-data-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 7px;
    padding: 9px 14px;
    font-size: .83em;
    color: #1e40af;
    margin-bottom: 16px;
}
.aflp-data-notice-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: #93c5fd;
    font-size: 1em;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.aflp-data-notice-dismiss:hover { color: #1e40af; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .aflp-hero-card { padding: 20px 16px 18px; }
    .aflp-hero-chapter { font-size: 1.2em; }
    .aflp-progress-summary { gap: 8px; }
    .aflp-progress-stat { padding: 10px 10px; }
    .aflp-materials-links { flex-direction: column; }
    .aflp-attention-item { flex-direction: column; gap: 10px; }
    .aflp-attention-btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   UX-2 Dashboard responsive polish
   ========================================================================== */

/* ---- 1. Header row2: switch from absolute-centre to CSS grid ----
 *
 * The previous approach used position:absolute on .aflp-hdr2-mid which caused
 * the cohort name and the participant name / logout button to visually collide
 * at narrower viewports.  A three-column grid gives each slot its own space.
 */
.aflp-portal-hdr-row2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    position: static;   /* was: position: relative */
    height: auto;       /* was: height: 52px — let content set the height */
    min-height: 44px;
    gap: 8px;
    align-items: center;
}
.aflp-hdr2-left  { justify-self: start; min-width: 0; }
.aflp-hdr2-mid   {
    /* was: position:absolute; left:50%; transform:translateX(-50%); */
    position: static;
    left: auto;
    transform: none;
    justify-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.aflp-hdr2-right { justify-self: end; flex-shrink: 0; }
.aflp-portal-welcome { white-space: nowrap; }

/* Tablet / narrow desktop: shrink text in right slot */
@media (max-width: 700px) {
    .aflp-portal-welcome { font-size: .78em; }
    .aflp-logout-btn     { padding: 6px 10px; font-size: .78em; }
}

/* Mobile: hide cohort name in the header bar — it is already shown in
 * the hero card meta line, so no information is lost. */
@media (max-width: 540px) {
    .aflp-portal-hdr-row2 {
        grid-template-columns: 1fr auto;
        height: auto;
        min-height: 44px;
        padding: 6px 12px;
    }
    .aflp-hdr2-mid { display: none; }
}

/* ---- 2. Learning progress summary: robust mobile wrapping ----
 *
 * flex-wrap:wrap + min-width are already set in UX-1.  These rules tighten
 * the flex-basis on narrow screens so three cards fit or wrap to 2+1 cleanly
 * rather than overflowing or becoming too narrow to read.
 */
@media (max-width: 480px) {
    .aflp-progress-stat {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
}
@media (max-width: 340px) {
    .aflp-progress-stat {
        flex: 1 1 100%;
    }
}

/* ---- 3. Worksheet / form list items: overflow guard ----
 *
 * .aflp-ws-info has flex:1 but without min-width:0 it can overflow the flex
 * container when text is long (e.g. the "Complete X to unlock — N of M done"
 * locked-status string).  word-break ensures long labels wrap instead of
 * pushing the button off-screen.
 */
.aflp-ws-info        { min-width: 0; }
.aflp-ws-name        { word-break: break-word; }
.aflp-ws-status-label { word-break: break-word; }
.aflp-ws-counts      { word-break: break-word; }

/* On very small phones wrap the action button to its own line */
@media (max-width: 400px) {
    .aflp-ws-item       { flex-wrap: wrap; }
    .aflp-ws-open-btn   {
        flex-basis: 100%;
        text-align: center;
        margin-top: 6px;
    }
}

/* =============================================================================
   UX-3 Dashboard redesign — card-based layout
   ============================================================================= */

/* ---- Hero card: chapter row (bar + count + button in one line) ---- */
.aflp-hero-chapter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 6px;
    flex-wrap: wrap;
}
.aflp-hero-chapter-row .aflp-hero-bar-wrap {
    flex: 1 1 0;
    min-width: 80px;
    height: 8px;
    background: rgba(255,255,255,.25);
    border-radius: 4px;
    overflow: hidden;
}
.aflp-hero-chapter-row .aflp-hero-counts {
    white-space: nowrap;
    font-size: .82em;
    color: rgba(255,255,255,.85);
}
.aflp-hero-chapter-row .aflp-hero-btn {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: .9em;
    text-decoration: none;
    white-space: nowrap;
}
.aflp-hero-btn-only {
    justify-content: flex-start;
}
.aflp-hero-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.2);
    margin: 14px 0;
}
.aflp-hero-overall {
    display: flex;
    align-items: center;
    gap: 10px;
}
.aflp-hero-overall-bar-wrap {
    flex: 1 1 0;
    min-width: 60px;
    height: 6px;
    background: rgba(255,255,255,.25);
    border-radius: 3px;
    overflow: hidden;
}
.aflp-hero-overall-bar {
    height: 100%;
    background: rgba(255,255,255,.75);
    border-radius: 3px;
    transition: width .3s;
}
.aflp-hero-overall-label {
    font-size: .78em;
    color: rgba(255,255,255,.8);
    white-space: nowrap;
}

/* ---- Dashboard card grid ---- */
.aflp-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}
@media (max-width: 680px) {
    .aflp-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .aflp-dashboard-grid { grid-template-columns: 1fr; }
}

/* ---- Individual card ---- */
.aflp-dash-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e7eb;
    border-radius: 10px;
    padding: 18px 16px 14px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s;
    position: relative;
}
.aflp-dash-card:hover,
.aflp-dash-card:focus {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    border-color: var(--aflp-primary, #2563eb);
    outline: none;
}
.aflp-dash-card-urgent {
    border-color: #dc2626;
}
.aflp-dash-card-inactive {
    opacity: .6;
    cursor: default;
    pointer-events: none;
}
.aflp-dash-card-icon {
    font-size: 1.6em;
    line-height: 1;
    margin-bottom: 8px;
}
.aflp-dash-card-title {
    font-weight: 700;
    font-size: 1em;
    color: #111827;
    margin-bottom: 4px;
}
.aflp-dash-card-desc {
    font-size: .8em;
    color: #6b7280;
    line-height: 1.4;
    flex: 1;
    margin-bottom: 10px;
}
.aflp-dash-card-arrow {
    font-size: .8em;
    font-weight: 600;
    color: var(--aflp-primary, #2563eb);
    margin-top: auto;
}

/* ---- Badges ---- */
.aflp-dash-badge {
    display: inline-block;
    font-size: .72em;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 8px;
    width: fit-content;
}
.aflp-dash-badge-success  { background: #d1fae5; color: #065f46; }
.aflp-dash-badge-warning  { background: #fef3c7; color: #92400e; }
.aflp-dash-badge-danger   { background: #fee2e2; color: #991b1b; }
.aflp-dash-badge-neutral  { background: #f3f4f6; color: #374151; }

/* ---- Feedback slim card ---- */
.aflp-feedback-slim-card {
    display: flex;
    gap: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 4px 0 20px;
}
.aflp-feedback-slim-icon {
    font-size: 1.4em;
    flex-shrink: 0;
    line-height: 1.2;
}
.aflp-feedback-slim-body  { flex: 1; min-width: 0; }
.aflp-feedback-slim-title {
    font-weight: 700;
    font-size: .9em;
    color: #92400e;
    margin-bottom: 8px;
}
.aflp-feedback-slim-item  { margin-bottom: 12px; }
.aflp-feedback-slim-item:last-child { margin-bottom: 0; }
.aflp-feedback-slim-form  { font-weight: 600; font-size: .85em; color: #374151; margin-bottom: 3px; }
.aflp-feedback-slim-text  { font-size: .82em; color: #4b5563; line-height: 1.5; }
.aflp-feedback-slim-link  {
    display: inline-block;
    margin-top: 4px;
    font-size: .8em;
    font-weight: 600;
    color: #92400e;
    text-decoration: underline;
}

/* ---- Copyright footer bar ---- */
.aflp-copyright-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 8px 8px;
    font-size: .78em;
    color: #6b7280;
    margin-top: 8px;
}
.aflp-copyright-link {
    color: var(--aflp-primary, #2563eb);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.aflp-copyright-link:hover { text-decoration: underline; }