/* =========================================================================
   Neda Commerce Bridge - Creators' Corner
   Follows Neda_Design_Rules.md. Only the 8 brand colours plus the two
   sanctioned tints; every soft edge is a transparent Black, White or Cyan.
   ========================================================================= */

/* -------------------------------------------------- undo the theme's card ---
 * The page template wraps post content in a white card with a 1px lime border
 * (the theme's `border` preset, #C4C40E), a 16px radius and a 720px cap. That
 * outline is not the house style and the cap is half the width the front page
 * gives its own sections, so the card's chrome is removed and the column is
 * opened to the theme's own wide-size.
 */
.neda-bridge-page main .wp-block-group:has(> .wp-block-post-content) {
	max-width: none;
	border: 0;
	background: transparent;
	/*
	 * The block editor writes padding and border-radius as INLINE styles on
	 * this element, so a stylesheet rule loses to them on specificity alone.
	 * These two need !important; the border and width above do not, because
	 * those come from classes.
	 */
	padding-inline: 0 !important;
	border-radius: 0 !important;
}

/*
 * ...and its SHADOW, which is the part that survived the first attempt.
 * Zeroing the border left `0 2px 8px rgba(0,0,0,0.08)` behind, and stretched
 * down 3300px of page that 8px blur reads as two faint vertical shade lines
 * at the far left and right of the screen - the last visible trace of a card
 * that is supposed to be gone.
 *
 * It is not the theme that paints it: `neda-header.css` gives EVERY white
 * bordered group an elevation, from
 *   main .wp-block-group.has-border-color.has-white-background-color:not(.is-nowrap)
 * which is (0,4,1). The rule above is only (0,3,1) - `:has()` contributes the
 * specificity of its argument, not of a class - so it loses on specificity and
 * `box-shadow: none` there did nothing. Out-specify it rather than reach for
 * !important, which is reserved for the block editor's inline styles.
 *
 * Two selectors because the wrapper's background class differs by page: the
 * corner page carries `has-white-background-color`, others just `has-background`.
 */
body.neda-bridge-page main .wp-block-group.has-border-color.has-white-background-color:has(> .wp-block-post-content),
body.neda-bridge-page main .wp-block-group.has-border-color.has-background:has(> .wp-block-post-content) {
	box-shadow: none;
}

.neda-bridge-page main .wp-block-post-content {
	max-width: none;
}

/*
 * Drop the wrapper's own vertical padding too. Each band already carries its
 * spacing, and 90px of inherited white space made the first band float away
 * from the hero instead of butting against it the way the front page's
 * sections do. The horizontal padding stays -- that is the page gutter.
 */
.neda-bridge-page main > .wp-block-group:has(> .wp-block-group > .wp-block-post-content),
.neda-bridge-page main .wp-block-group:has(> .wp-block-post-content) {
	padding-block: 0 !important;
}

/* Bands bleed to the edge of the content area; clip so that can never turn
   into a horizontal scrollbar. */
.neda-bridge-page main {
	overflow-x: clip;
}

.neda-cc {
	/* Brand palette, and the theme's own presets where the front page uses
	   them -- so a palette change in the Site Editor carries through here. */
	--ne-lime:   #C4C40E;
	--ne-cyan:   #0EC4C5;
	--ne-cherry: #D7263D;
	--ne-gold:   #F2B705;
	--ne-purple: #6A4C93;
	/* The brand blue, one step deeper, for the one place it carries a WHITE
	   label: #FFFFFF on #2F80ED is 3.9:1 and fails small text; on this it is
	   5.4:1 (user asked for white on the info pill, 2026-09-03). */
	--ne-blue-deep: #2469C4;
	--ne-blue:   #2F80ED;
	--ne-black:  #000000;
	--ne-white:  #FFFFFF;

	--ne-tint-cyan: var(--wp--preset--color--custom-color-1, #ECF9F8);
	--ne-tint-lime: var(--wp--preset--color--custom-color-4, #F1F3D6);
	/* The pale band the front page alternates with white. */
	--ne-band-tint: var(--wp--preset--color--custom-color-3, #F8F9EA);

	/* One radius for everything that reads as a control or a card. */
	--ne-radius-control: 10px;
	--ne-radius-card:    10px;
	--ne-radius-nested:  10px;

	/* Matches the gutter measured off the theme's own blocks. */
	--ne-gutter: clamp(30px, 5vw, 50px);
	--ne-wide:   var(--wp--style--global--wide-size, 1200px);

	--ne-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--ne-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
	/* `--ne-focus` was a cyan glow and is deliberately NOT redefined here.
	   Removed 2026-09-02 with its last two callers so nothing can reach for
	   it again: focus on this sheet is cherry, and a field's ring is built
	   from `--ne-field-surface` plus `--ne-cherry` further down. */
	--ne-hairline:  transparent; /* cards carry no outline; see the house rule */

	--ne-ease: 0.15s ease;

	font-family: Candara, "Segoe UI", Calibri, Arial, sans-serif;
	color: var(--ne-black);
	max-width: var(--ne-wide);
	margin-inline: auto;
}

/* ------------------------------------------------------------------ bands ---
 * Full-bleed colour behind a width-constrained block, exactly as the front
 * page alternates its sections. The background is painted by an absolutely
 * positioned pseudo-element rather than by widening the block itself, so the
 * text column keeps the theme's wide-size and nothing shifts in the flow.
 */
.neda-cc__hero,
.neda-cc__space {
	position: relative;
	z-index: 0;
}

.neda-cc__hero::before,
.neda-cc__space::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: calc(50% - 50vw);
	z-index: -1;
	background: var(--ne-band, transparent);
}

/* Alternating bands, the front page's two section colours. */
.neda-cc__space:nth-of-type(odd)  { --ne-band: var(--ne-band-tint); }
.neda-cc__space:nth-of-type(even) { --ne-band: var(--ne-white); }

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

/* ------------------------------------------------------------------ hero */

.neda-cc__hero {
	--ne-band: var(--ne-tint-cyan);
	padding-block: clamp(32px, 4vw, 56px);
	margin-block-end: 0;
}

.neda-cc__title {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ne-black);
}

.neda-cc__lede {
	margin: 0;
	font-size: 15px;
	color: var(--ne-black);
}

.neda-cc__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
}

.neda-cc__stat {
	background: var(--ne-white);
	border-radius: var(--ne-radius-card);
	box-shadow: var(--ne-shadow-sm);
	padding: 14px 20px;
	min-width: 120px;
}

.neda-cc__stat dt {
	margin: 0;
	font-size: 0.85rem;
	/* Never a cyan or lime label on a light surface. */
	color: rgba(0, 0, 0, 0.72);
}

.neda-cc__stat dd {
	margin: 4px 0 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
}

/* ----------------------------------------------------------------- space */

/*
 * Sections are bands, not cards: no outline, no radius, no accent stripe. The
 * front page separates its sections by background colour alone and so does
 * this. The course-type colour still identifies things, but on the chips
 * inside, where it is a fill carrying black text.
 */
.neda-cc__space,
.neda-cc__learning {
	padding-block: clamp(28px, 3.5vw, 48px);
	margin-block-end: 0;
}

.neda-cc__space-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-block-end: 8px;
}

.neda-cc__space-title {
	margin: 0;
	font-size: 1.25rem;
	flex: 1 1 auto;
}

.neda-cc__seats {
	margin: 0 0 16px;
	color: rgba(0, 0, 0, 0.72);
}

/*
 * Black on every brand fill - EXCEPT the two dark ones. Cherry #D7263D and
 * Royal Purple #6A4C93 are dark enough that a black label fails (3.1:1 on
 * purple); white passes on both. The ink is decided in PHP alongside the fill
 * (CourseTypes::ink) so the two can never disagree, and the fallback here is
 * black because every other brand colour is a light fill.
 */
.neda-chip {
	display: inline-block;
	background: var(--neda-type-colour, var(--ne-cyan));
	color: var(--neda-type-ink, var(--ne-black));
	border-radius: var(--ne-radius-control);
	padding: 4px 12px;
	font-size: 0.85rem;
	font-weight: 700;
}

/* --------------------------------------------------------------- statuses */

/*
 * A status is a STATEMENT, and it must never look like something to press.
 * Until 2026-09-03 "Ready" was lime on black -- the exact fill of every
 * button beside it -- and the two read as one row of controls. So every
 * status, whatever it says, is now Neda Purple with a white label: #FFFFFF on
 * #6A4C93 is 6.9:1, clear of the 4.5:1 that this small text needs, and purple
 * is the one brand colour no control on the site uses.
 *
 * The severity fills that used to distinguish them (lime for good, gold for
 * waiting, cherry for failed) are gone on purpose, the same way the notices
 * lost theirs: the WORD does that work. "Failed" says failed. What the pill
 * gained is the one thing colour alone can give -- being unmistakably not a
 * button.
 *
 * The tier and function variants below are the same kind of thing: a label
 * saying what is the case. They take the same fill.
 */
.neda-status,
.neda-status--active,
.neda-status--pending,
.neda-status--manual_pending,
.neda-status--failed,
.neda-status--suspended,
.neda-status--expired,
.neda-status--revoked,
.neda-status--tier-audit,
.neda-status--tier-certified {
	display: inline-block;
	border-radius: var(--ne-radius-control);
	padding: 4px 12px;
	font-size: 0.8rem;
	font-weight: 700;
	background: var(--ne-purple);
	color: var(--ne-white);
}

/* "Ready" is the exception (owner, 2026-09-07): Royal Purple's light
   companion with black ink, 14.7:1, where every other status keeps the solid
   purple with white, 6.8:1.
 *
 * It is a knowing exception to the rule stated just above, so it is worth
 * saying why it does not reopen what that rule closed. That rule removed
 * SEVERITY encoding -- lime for good, gold for waiting, cherry for failed --
 * because colour was being asked to say what the word already says, and
 * because a colour-only signal is not a signal for everyone. This does not
 * put severity back: the quiet state is the one that recedes, every state
 * that wants a reader's attention still carries the strong fill, and the
 * word on each pill is unchanged and still doing the work.
 *
 * White ink would be 1.4:1 on this ground, so the ink flips with the fill.
 */
.neda-status--active {
	background: #DCD5E7;
	color: var(--ne-black);
}

/* --------------------------------------------------------------- courses */

.neda-cc__courses {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.neda-cc__course {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	background: var(--ne-white);
	border: 1px solid var(--ne-hairline);
	border-radius: var(--ne-radius-nested);
	padding: 12px 16px;
}

.neda-cc__course-title {
	flex: 1 1 220px;
	font-weight: 600;
}

/* ---- course lifecycle: archive, delete, and the cancel window -------------
 * The forms sit inline so a row reads as one line of controls rather than a
 * stack. Each is its own form on purpose -- one button per action means a
 * mis-click changes one course, and there is no "apply to everything" control
 * that could act on rows nobody looked at.
 */
.neda-cc__inline-form {
	display: inline;
	margin: 0;
}

/* A scheduled action is the most important thing on the row, so it gets the
 * warning tint and full width -- it wraps below the buttons rather than
 * competing with them for space. */
.neda-cc__pending {
	flex: 1 1 100%;
	order: 10;
	background: var(--ne-textbox-3, #F8F9EA);
	border-radius: var(--ne-radius-nested);
	padding: 8px 12px;
	font-weight: 700;
	color: #000000;
}

/* The reason a control is disabled. Quieter than the row itself, but not so
 * quiet that it reads as decoration -- it is the answer to "why can't I?". */
.neda-cc__note {
	flex: 1 1 100%;
	order: 11;
	font-size: 0.9em;
	color: #000000;
	opacity: 0.75;
	line-height: 1.45;
}

/* A disabled button still has to look like a button, or it reads as a
 * rendering fault rather than a deliberate refusal. */
.neda-cc__course .neda-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

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

/*
 * Scoped with the block class on purpose. The theme colours links through
 * `.wp-elements-<hash> a:where(:not(.wp-element-button))`, which is one class
 * plus one type -- more specific than a bare `.neda-btn`, so an unscoped rule
 * loses and the labels come out cyan on lime. Cyan text on a lime fill is
 * unreadable, so this has to win.
 */
/*
 * THE STANDARD NEDA BUTTON (user, 2026-09-06): the same box as the site
 * header's Log In -- an inline-flex box at the standard control height,
 * 11px/20px padding, 14px bold, 10px corners, no border. Every button on
 * the bridge's pages takes it; the ones here had been 12px/22px at the
 * 17px body size and read as oversized beside the header.
 *
 * 42px, down from 46px (owner, 2026-09-07). Fields dropped to 39px in the
 * same pass, and at 46px a button stood 7px proud of the field it submits.
 * A button should still be the taller of the two -- it is the thing you
 * press -- but by a little, not by a step. NOTE: the site header's Log In,
 * which this box was copied from, is in neda-ecampus-ui and is still 46px.
 */
.neda-cc .neda-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	background: var(--ne-lime);
	color: var(--ne-black);
	border: 0;
	border-radius: var(--ne-radius-control);
	padding: 11px 20px;
	font: inherit;
	font-size: 14px;
	line-height: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ne-ease), color var(--ne-ease);
}

.neda-cc .neda-btn:hover,
.neda-cc .neda-btn:active {
	background: var(--ne-cherry);
	color: var(--ne-white);
}

/* Hover darkens the button, but Tab does not -- so the focus ring has to be
   legible against the RESTING lime, not against the cherry hover.

   The cyan glow that used to sit under this ring is gone (2026-09-02). It was
   `--ne-focus`, an 18%-opacity cyan, and it drew a second, softer indicator
   around every focused button on the Corner -- including the grant form's
   submit. Cyan is not a focus colour; cherry at full strength is the only
   one. */
.neda-cc .neda-btn:focus-visible {
	outline: 3px solid var(--ne-cherry);
	outline-offset: 2px;
}

/* "Small" is the standard height too now; only the sides are tighter. */
.neda-cc .neda-btn--small {
	padding: 11px 16px;
	font-size: 14px;
}

/* ------------------------------------------------------------------ form */

.neda-cc__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	background: var(--ne-tint-lime);
	border-radius: var(--ne-radius-card);
	padding: 18px;
}

.neda-cc__label {
	flex: 1 0 100%;
	font-weight: 700;
}

.neda-cc__input {
	flex: 1 1 280px;
	font: inherit;
	color: var(--ne-black);
	background: var(--ne-white);
	border: 1px solid var(--ne-hairline);
	border-radius: var(--ne-radius-control);
	/* 8px, not 12px: the standard field height across every Neda page
	   (owner, 2026-09-07). At 12px a field stood 47px tall, level with a
	   46px button, and a form of six of them read as a stack of buttons.
	   A field is not a button and should not carry a button's weight. */
	padding: 8px 14px;
	transition: border-color var(--ne-ease), box-shadow var(--ne-ease);
}

.neda-cc__input:focus {
	outline: none;
	/* No cyan here. The focus ring on this page is the universal cherry
	   one from neda-ecampus-ui/assets/neda-focus.css, which outranks the
	   `outline: none` above at (0,2,1). A cyan border plus a cyan glow drew
	   a SECOND ring inside the cherry one, which is what a field looked
	   like on click until 2026-09-02. The resting border stays as it is. */
}

.neda-cc__hint {
	flex: 1 0 100%;
	font-size: 0.9rem;
	color: rgba(0, 0, 0, 0.72);
}

/* --------------------------------------------------------------- notices */

.neda-note {
	display: grid;
	gap: 4px;
	border-radius: var(--ne-radius-card);
	padding: 16px 20px;
	margin-block-end: 16px;
	border-inline-start: 6px solid transparent;
	background: rgba(0, 0, 0, 0.04);
}

.neda-note__title { font-size: 1rem; }
.neda-note__body { color: rgba(0, 0, 0, 0.78); }

/* Severity keeps its meaning: info Blue, success Lime, warning Gold,
   error Cherry. Blue carries a black label, never white. */
.neda-note--info    { border-inline-start-color: var(--ne-blue);   background: rgba(47, 128, 237, 0.08); }
.neda-note--success { border-inline-start-color: var(--ne-lime);   background: rgba(196, 196, 14, 0.12); }
.neda-note--warning { border-inline-start-color: var(--ne-gold);   background: rgba(242, 183, 5, 0.14); }
.neda-note--error   { border-inline-start-color: var(--ne-cherry); background: rgba(215, 38, 61, 0.08); }

/* ----------------------------------------------------------------- links */

/*
 * House rule: a link is Professional Blue and BOLD, cherry on hover, and is
 * never underlined in any state.
 *
 * Two exclusions, both load-bearing. `.neda-btn` and `.wp-block-button__link`
 * are anchors too, and a button is not a link: without them the lime buttons
 * inherit blue labels and an underline. `:not()` also buys the specificity
 * (0,3,1) needed to beat the theme's own
 * `.wp-elements-<hash> a:where(:not(.wp-element-button))`.
 *
 * Bold is not decoration. #2F80ED on white is 3.9:1 -- under the 4.5:1 body
 * floor, but body copy here is 15pt, so bolding it makes it large text, where
 * 3:1 applies and it passes. A non-bold blue link would fail.
 */
.neda-cc a:not(.neda-btn):not(.wp-block-button__link) {
	color: var(--ne-blue);
	font-weight: 700;
	text-decoration: none;
}

.neda-cc a:not(.neda-btn):not(.wp-block-button__link):hover,
.neda-cc a:not(.neda-btn):not(.wp-block-button__link):focus-visible {
	color: var(--ne-cherry);
	text-decoration: none;
}

/* ----------------------------------------------------- public page: the hero */

/*
 * The theme's title band is hidden here and the hero renders its own h1, so
 * the heading and the opening line sit together ON the photograph instead of
 * the line dropping into a separate band below it. Still exactly one h1.
 */
.neda-corner-page main > .wp-block-group:has(> .wp-block-post-title) {
	display: none;
}

.neda-cc__hero--photo {
	/* Taller than a text band, and the photo needs room to read as an image. */
	min-block-size: clamp(320px, 34vw, 460px);
	display: grid;
	align-content: center;
	padding-block: clamp(48px, 6vw, 88px);
	text-align: center;
}

/*
 * The photograph lives ONLY on the full-bleed pseudo-element. Painting it on
 * the element as well would scale the same image across two different widths
 * and leave a visible seam where the bleed meets the content column.
 *
 * The veil is folded in as a flat gradient: no extra stacking context, and it
 * covers whatever sits underneath in one declaration.
 */
.neda-cc__hero--photo::before {
	background-image:
		linear-gradient(
			rgba(0, 0, 0, var(--neda-corner-veil, 0.45)),
			rgba(0, 0, 0, var(--neda-corner-veil, 0.45))
		),
		var(--neda-corner-hero, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.neda-cc__hero-inner {
	max-width: 820px;
	margin-inline: auto;
}

.neda-cc__hero--photo .neda-cc__title {
	color: var(--ne-white);
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 800;
	margin-block-end: 16px;
}

.neda-cc__hero--photo .neda-cc__lede {
	color: var(--ne-white);
	font-size: 15px;
	line-height: 1.55;
}

/* ------------------------------------------------- public page: how it works */

.neda-corner__steps {
	list-style: none;
	counter-reset: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.neda-corner__step {
	display: grid;
	gap: 6px;
	align-content: start;
	background: var(--ne-white);
	border: 1px solid var(--ne-hairline);
	border-radius: var(--ne-radius-nested);
	padding: 18px 20px;
	/* transform is composited, so the lift stays smooth on a long page. */
	transition:
		transform var(--ne-ease),
		box-shadow var(--ne-ease),
		background-color var(--ne-ease),
		border-color var(--ne-ease);
}

.neda-corner__step:hover,
.neda-corner__step:focus-within {
	transform: scale(1.03);
	background: var(--ne-tint-cyan);
	border-color: var(--ne-cyan);
	box-shadow: var(--ne-shadow-md);
}

/* Black on cyan is 9:1, so the numeral flips to a white disc to stay
   distinguishable once the card itself turns cyan. */
.neda-corner__step:hover .neda-corner__step-n,
.neda-corner__step:focus-within .neda-corner__step-n {
	background: var(--ne-white);
	color: var(--ne-black);
}

/* Black on cyan is 9:1; the numeral is decorative and the step title carries
   the meaning, so it is hidden from assistive tech. */
.neda-corner__step-n {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--ne-radius-control);
	background: var(--ne-cyan);
	color: var(--ne-black);
	font-weight: 700;
}

.neda-corner__step-title { font-size: 1.05rem; }
.neda-corner__step-body { color: rgba(0, 0, 0, 0.78); }

.neda-corner__tagline { font-weight: 600; }

/* ------------------------------------------------------ public page: packages */

.neda-corner__packages {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.neda-corner__package {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--ne-white);
	border: 1px solid var(--ne-hairline);
	border-radius: var(--ne-radius-card);
	box-shadow: var(--ne-shadow-sm);
	padding: 22px;
	transition:
		transform var(--ne-ease),
		box-shadow var(--ne-ease),
		border-color var(--ne-ease);
}

.neda-corner__package:hover,
.neda-corner__package:focus-within {
	transform: scale(1.03);
	border-color: var(--ne-cyan);
	box-shadow: var(--ne-shadow-md);
}

/* The largest package is marked with a cyan edge, not a coloured label. */
.neda-corner__package--featured {
	border-color: var(--ne-cyan);
	box-shadow: var(--ne-shadow-md);
}

.neda-corner__package-name { margin: 0; font-size: 1.15rem; }

.neda-corner__package-seats {
	margin: 0;
	font-size: 15px;
	color: rgba(0, 0, 0, 0.72);
}

.neda-corner__package-seats strong { font-size: 1.8rem; color: var(--ne-black); }

.neda-corner__package-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	flex: 1 1 auto;
}

.neda-corner__package-list li {
	padding-inline-start: 26px;
	position: relative;
	color: rgba(0, 0, 0, 0.82);
}

.neda-corner__package-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.45em;
	inline-size: 12px;
	block-size: 12px;
	border-radius: 3px;
	background: var(--ne-lime);
}

.neda-corner__package-price {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.neda-corner__package-price--soon {
	font-size: 1rem;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------------------------- public page: faq */

.neda-corner__faq {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: start;
}

.neda-corner__faq-item {
	background: var(--ne-white);
	border: 1px solid var(--ne-hairline);
	border-radius: var(--ne-radius-card);
	padding: 4px 20px;
	transition: border-color var(--ne-ease), box-shadow var(--ne-ease);
}

.neda-corner__faq-item:hover,
.neda-corner__faq-item[open] {
	border-color: var(--ne-cyan);
	box-shadow: var(--ne-shadow-sm);
}

.neda-corner__faq-q {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

/* Safari still draws its own disclosure triangle without this. */
.neda-corner__faq-q::-webkit-details-marker { display: none; }

.neda-corner__faq-q:focus-visible {
	outline: 3px solid var(--ne-cherry);
	outline-offset: 2px;
	border-radius: var(--ne-radius-control);
}

/* Cyan fill, black numeral -- 9:1, and the question text sits right beside it. */
.neda-corner__faq-mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: var(--ne-radius-control);
	background: var(--ne-cyan);
	color: var(--ne-black);
	font-size: 0.9rem;
	font-weight: 700;
}

.neda-corner__faq-text { flex: 1 1 auto; }

.neda-corner__faq-chevron {
	flex: 0 0 auto;
	inline-size: 10px;
	block-size: 10px;
	border-inline-end: 2px solid var(--ne-black);
	border-block-end: 2px solid var(--ne-black);
	transform: rotate(45deg);
	transition: transform var(--ne-ease);
}

.neda-corner__faq-item[open] .neda-corner__faq-chevron {
	transform: rotate(-135deg);
}

.neda-corner__faq-a {
	padding-block: 0 18px;
	padding-inline-start: 42px;
	color: rgba(0, 0, 0, 0.78);
}

/* ------------------------------------------- public page: course type names */

/*
 * The type name is plain black text with a small colour swatch beside it --
 * not a coloured pill. The swatch is decorative and carries no meaning on its
 * own, so it is hidden from assistive tech; the name is right next to it.
 */
.neda-type-name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--ne-black);
	white-space: nowrap;
}

.neda-type-name__swatch {
	flex: 0 0 auto;
	inline-size: 14px;
	block-size: 14px;
	border-radius: 4px;
	background: var(--neda-type-colour, var(--ne-cyan));
}

/* ------------------------------------------------------- plain white notice */

.neda-cc__space--plain { --ne-band: var(--ne-white); }

.neda-note--plain {
	background: var(--ne-white);
	border: 1px solid var(--ne-hairline);
	border-inline-start-width: 1px;
	border-inline-start-color: var(--ne-hairline);
}

/* --------------------------------------------------------------- quiet button */

.neda-cc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 16px;
}

/*
 * The secondary action is CYAN with a black label (user, 2026-08-05), not an
 * outlined transparent button - that read as a white button, and there are no
 * white buttons. Cyan is a fill and carries black text at 9:1; it stays
 * clearly second to the lime primary without borrowing its colour.
 *
 * `box-shadow: none` is doing real work: the old rule drew the outline as an
 * inset shadow, and leaving it would put a 2px black ring around a filled
 * button - a border by another name.
 */
.neda-cc .neda-btn--quiet {
	background: var(--ne-cyan);
	color: var(--ne-black);
	box-shadow: none;
}

.neda-cc .neda-btn--quiet:hover,
.neda-cc .neda-btn--quiet:active {
	background: var(--ne-cherry);
	color: var(--ne-white);
	box-shadow: none;
}

/* The ring has to read against the RESTING cyan, not the cherry hover. */
.neda-cc .neda-btn--quiet:focus-visible {
	outline: 3px solid var(--ne-cherry);
	outline-offset: 2px;
	box-shadow: none;
}

/* =========================================================================
   THE COURSE INFORMATION FORM - 2026-08-05
   One column, one question per row. A creator fills this in once per course
   and comes back to it rarely, so it is written to be read, not to be dense.
   ========================================================================= */

.neda-course-form {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.neda-form {
	display: grid;
	gap: 30px;
	background: var(--ne-white);
	border: 0;
	border-radius: var(--ne-radius-card);
	box-shadow: var(--ne-shadow-sm);
	padding: clamp(22px, 2.4vw, 32px);
	margin-block-start: 18px;
}

/*
 * Each question is a section, separated by a line.
 *
 * Without it the form is one unbroken column of label-field-hint-label-field
 * and every row reads as part of the one above it. The rule is a transparent
 * black, never a new hue, and the last row does not draw one - a line under
 * the final question would point at nothing.
 */
.neda-form__row {
	display: grid;
	gap: 8px;
	border: 0;
	border-block-end: 1px solid rgba(0, 0, 0, 0.10);
	margin: 0;
	padding: 0 0 26px;
	min-inline-size: 0; /* a fieldset will not shrink inside a grid without it */
}

.neda-form__row:last-of-type {
	border-block-end: 0;
	padding-block-end: 0;
}

/*
 * ---- FIELDS ARE BORDERED. CARDS ARE NOT. ----------------------------
 * `--ne-hairline` is transparent because cards carry no outline, and these
 * inputs were declared `1px solid var(--ne-hairline)` - so the moment that
 * rule landed, every field on the site became an invisible box. A control has
 * to show where it starts and ends; the no-border rule was never about
 * controls. Same value the site header uses on its search field.
 */
.neda-cc__input,
.neda-form input[type="text"],
.neda-form input[type="number"],
.neda-form input[type="email"],
.neda-form input[type="file"],
.neda-form textarea,
.neda-form select {
	border: 1px solid rgba(0, 0, 0, 0.24);
	background: var(--ne-white);
	color: var(--ne-black);
}

.neda-cc__input:focus,
.neda-form input:focus,
.neda-form textarea:focus,
.neda-form select:focus {
	outline: none;
	/* No cyan here. The focus ring on this page is the universal cherry
	   one from neda-ecampus-ui/assets/neda-focus.css, which outranks the
	   `outline: none` above at (0,2,1). A cyan border plus a cyan glow drew
	   a SECOND ring inside the cherry one, which is what a field looked
	   like on click until 2026-09-02. The resting border stays as it is. */
}

/* A file input is a control too, and browsers give it no padding of its own. */
.neda-form input[type="file"] {
	padding: 10px 12px;
	border-radius: var(--ne-radius-control);
}

.neda-form__label {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0;
	color: var(--ne-black);
}

/* "required" is a word, not a red asterisk: an asterisk means nothing to
   somebody meeting the form for the first time. */
.neda-form__req {
	font-size: 0.75em;
	font-weight: 700;
	background: var(--ne-tint-cyan);
	color: var(--ne-black);
	border-radius: var(--ne-radius-control);
	padding: 2px 8px;
	margin-inline-start: 8px;
	white-space: nowrap;
}

.neda-form__hint {
	margin: 0;
	font-size: 15px;
	color: rgba(0, 0, 0, 0.72);
}

.neda-form__count { font-variant-numeric: tabular-nums; }

.neda-form textarea.neda-cc__input { resize: vertical; min-block-size: 5em; }

/* Radio rows are choices, so each label is the whole hit area, not just the
   words - a 13px circle is not a target. */
.neda-form__choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--ne-white);
	border-radius: var(--ne-radius-control);
	padding: 10px 12px;
	cursor: pointer;
	transition: background var(--ne-ease);
}

.neda-form__choice:hover,
.neda-form__choice:focus-within {
	background: var(--ne-tint-lime);
}

.neda-form__choice input { margin-block-start: 0.28em; }

.neda-form__pair {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.neda-form__pair .neda-cc__input { flex: 1 1 160px; }
.neda-form__pair select.neda-cc__input { flex: 0 0 auto; }

.neda-form__preview {
	max-inline-size: 240px;
	block-size: auto;
	border-radius: var(--ne-radius-nested);
	box-shadow: var(--ne-shadow-sm);
}

/* ---- the price breakdown ------------------------------------------------
 * Not an afterthought under the field: the creator has to see the markup and
 * the learner's real total while they are still deciding the number.
 */
.neda-price-breakdown {
	background: var(--ne-tint-cyan);
	border-radius: var(--ne-radius-card);
	padding: 16px 18px;
}

.neda-price-breakdown__list {
	display: grid;
	gap: 6px;
	margin: 0 0 10px;
}

.neda-price-breakdown__list > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
}

.neda-price-breakdown__list dt { margin: 0; color: rgba(0, 0, 0, 0.78); }

.neda-price-breakdown__list dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* The last line is what the learner actually pays - the number that matters. */
.neda-price-breakdown__list > div:last-child dt,
.neda-price-breakdown__list > div:last-child dd {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--ne-black);
}

/* ------------------------------------------------------- admin area tables */

/* Wide tables scroll inside their own box so the page body never does. */
.neda-admin__scroll {
	overflow-x: auto;
	border: 1px solid var(--ne-hairline);
	border-radius: var(--ne-radius-nested);
}

.neda-admin__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	background: var(--ne-white);
}

.neda-admin__table th,
.neda-admin__table td {
	padding: 12px 16px;
	text-align: start;
	border-block-end: 1px solid var(--ne-hairline);
	vertical-align: middle;
}

.neda-admin__table thead th {
	background: var(--ne-cyan);   /* Primary Cyan, black label: 11:1 (user, 2026-09-03) */
	color: var(--ne-black);
	font-weight: 700;
	white-space: nowrap;
}

.neda-admin__table tbody tr:last-child th,
.neda-admin__table tbody tr:last-child td {
	border-block-end: 0;
}

.neda-admin__table code {
	font-size: 0.85em;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	padding: 2px 6px;
	word-break: break-all;
}

.neda-admin__why {
	max-width: 340px;
	font-size: 0.85rem;
	color: rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------------------------------- RTL */

/* Logical properties throughout mean RTL inherits and can never drift. */

@media (max-width: 600px) {
	.neda-cc__stats { gap: 8px; }
	.neda-cc__stat { flex: 1 1 calc(50% - 8px); min-width: 0; }
	.neda-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.neda-cc * { transition: none !important; }

	/* Killing the transition alone still leaves the card jumping to its
	   scaled size, which is exactly the motion being opted out of. The colour
	   and shadow changes stay, so hover is still clearly signalled. */
	.neda-corner__step:hover,
	.neda-corner__step:focus-within,
	.neda-corner__package:hover,
	.neda-corner__package:focus-within {
		transform: none !important;
	}
}

/* =========================================================================
   HOUSE RULES applied to this component set - 2026-08-04
   ========================================================================= */

/* ---- Cards have no outline, they have elevation --------------------
   --ne-hairline is transparent now, so every card that used to be
   defined by a 1px border needs a shadow instead or it dissolves into
   the band behind it. */
.neda-cc__course,
.neda-corner__step,
.neda-corner__faq-item,
.neda-admin__scroll,
.neda-note--plain {
    box-shadow: var(--ne-shadow-sm);
}

.neda-corner__faq-item:hover,
.neda-corner__faq-item[open] {
    box-shadow: var(--ne-shadow-md);
}

/* Hover already lifts the step and package cards; with the outline gone
   the border-colour change has nothing to act on, so the surface does
   the work instead. */
.neda-corner__step:hover,
.neda-corner__step:focus-within,
.neda-corner__package:hover,
.neda-corner__package:focus-within,
.neda-corner__faq-item:hover,
.neda-corner__faq-item[open] {
    border-color: transparent;
}

/* ---- One typeface --------------------------------------------------
   An inherited font-family loses to ANY rule that sets font-family on
   the element itself, whatever its specificity - and the theme sets one
   on headings. So the headings are told explicitly. */
.neda-cc h1,
.neda-cc h2,
.neda-cc h3,
.neda-cc h4,
.neda-cc summary,
.neda-cc button,
.neda-cc input,
.neda-cc select,
.neda-cc textarea,
.neda-cc .neda-btn {
    font-family: Candara, "Segoe UI", Calibri, Arial, sans-serif;
}

/* =========================================================================
   CREATORS' CORNER AS REAL BLOCKS - 2026-08-05, revised
   The page is ordinary editor content now, so the .neda-corner__* selectors
   above do not reach it. Rules follow NEDA_PROJECT_INSTRUCTIONS.md 6.1.

   TWO THINGS THAT WENT WRONG THE FIRST TIME, both fixed here:
   1. Backgrounds must reach the SCREEN edge. A group's background only spans
      the group, and an alignfull block cannot escape the theme's content card
      on its own - that escape needs root padding variables the post-content
      block never sets. So each band paints itself with an absolutely
      positioned ::before at inset-inline: calc(50% - 50vw) - exactly the
      distance from a centred container's edge to the viewport's - while the
      text stays on the measure.
   2. NO !important on typography. The editor has to be able to override font
      size, colour and spacing from the Site Editor; forcing them here takes
      that away.
   ========================================================================= */

body.neda-bridge-page main { overflow-x: clip; }

.neda-cc-section {
    --cc-lime:      #C4C40E;
    --cc-cherry:    #D7263D;
    --cc-tint-1:    var(--wp--preset--color--custom-color-1, #ECF9F8);
    --cc-tint-3:    var(--wp--preset--color--custom-color-3, #F8F9EA);
    --cc-tint-4:    var(--wp--preset--color--custom-color-4, #F1F3D6);
    --cc-radius:    10px;
    --cc-shadow:    0 2px 8px rgba(0, 0, 0, 0.08);
    --cc-shadow-up: 0 14px 34px rgba(0, 0, 0, 0.16);
    --cc-ease:      0.2s ease;

    position: relative;
    isolation: isolate;
    padding-block: clamp(44px, 5vw, 72px);
}

/* The full-bleed band. */
.neda-cc-section::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: calc(50% - 50vw);
    background: #FFFFFF;
    z-index: -1;
}

/* The tinted band is TEXT-BOX 1 (user, 2026-08-05), not text-box 3. */
.neda-cc-section--tint::before { background: var(--cc-tint-1); }

/* Words break mid-syllable in a narrow column unless this is said out loud. */
.neda-cc-section,
.neda-cc-section p,
.neda-cc-section li,
.neda-cc-section h2,
.neda-cc-section h3 {
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

/*
 * ---- ONE MEASURE FOR EVERY BLOCK ------------------------------------
 * The theme constrains a group's children to content-size (720px), while the
 * signpost and the full-bleed bands run to wide-size (1200px). The result was
 * a page that looked like two different layouts stacked: a full-width card,
 * then a narrow column of sections inset by 220px on each side.
 *
 * House rule now: every block sits on the SAME measure as that card.
 *
 * The theme writes this as `.wp-container-<id> > :where(:not(.alignleft)...)`,
 * which is (0,1,0) because `:where()` contributes nothing - a tie with a bare
 * `.neda-cc-section > *`, decided by load order. `body` + the page class puts
 * it at (0,2,1) so it wins outright rather than by luck.
 */
body.neda-bridge-page .neda-cc-section > * {
    max-width: var(--wp--style--global--wide-size, 1200px);
}

/*
 * And once more for the stacks nested inside a section. Each is a constrained
 * group of its own, so the theme re-applies content-size (720px) AND
 * `margin-inline: auto !important` to its children - and because the stack is
 * a grid, that auto margin makes every card shrink to fit its own text and
 * centre itself. That is why the five type cards came out 689px, 706px and
 * 720px wide, each on a slightly different axis.
 */
body.neda-bridge-page .neda-cc-types > *,
body.neda-bridge-page .neda-cc-how__steps > * {
    max-width: none;
    width: 100%;
}

.neda-cc-section > h2.wp-block-heading {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}

.neda-cc-section p,
.neda-cc-section li { font-size: 15px; line-height: 1.55; }

/* No 70ch reading measure here any more - one measure for every block. */
.neda-cc-section > p { margin: 0 0 32px; color: rgba(0, 0, 0, 0.72); }

.neda-cc-grid { gap: 24px; margin-top: 4px; }
.neda-cc-grid > .wp-block-column { min-width: 210px; }

/* ---- Four packages, so the row stops being a flex row ----------------
 * Three columns fitted across; four do not. Core pins `.wp-block-columns`
 * to `flex-wrap: nowrap !important` from 782px up, and four columns at the
 * 210px floor above with 24px gaps need 912px - so between 782px and 912px
 * a fourth card would push the row past the viewport instead of wrapping.
 *
 * Grid ignores flex-wrap, which is the point: four across when there is
 * room, two by two through the tablet range, one below that. Two classes
 * (0,2,0) beat core's single-class `display: flex`.
 */
.neda-cc-grid.neda-cc-packs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

/* The 210px floor is a flex measure. Left in place it becomes a minimum
   track contribution and overflows the grid on narrow viewports. */
.neda-cc-grid.neda-cc-packs > .wp-block-column {
    min-width: 0;
    flex-basis: auto;
}

@media (max-width: 1023px) {
    .neda-cc-grid.neda-cc-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .neda-cc-grid.neda-cc-packs { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Cards: no border, elevation, and a tint shift while zooming ----- */

.neda-cc-card {
    height: 100%;
    background: #FFFFFF;
    border: 0;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    padding: clamp(22px, 2.2vw, 30px);
    transition: transform var(--cc-ease), box-shadow var(--cc-ease), background var(--cc-ease);
}

/* White at rest, TEXT-BOX 4 while lifted (user, 2026-08-05). The accordion
   keeps text-box 1, which is its own documented rule - cards and questions
   are deliberately no longer the same shade on hover. */
.neda-cc-card:hover,
.neda-cc-card:focus-within {
    background: var(--cc-tint-4);
    transform: scale(1.03);
    box-shadow: var(--cc-shadow-up);
}

.neda-cc-card h3.wp-block-heading { margin: 0 0 10px; font-size: 19.2px; line-height: 1.3; font-weight: 700; }
.neda-cc-card p { margin: 0 0 12px; }
.neda-cc-card p:last-child { margin-bottom: 0; }
.neda-cc-card ul { margin: 0 0 16px; padding-inline-start: 1.15em; }
.neda-cc-card li { margin-bottom: 6px; }

/* ---- How it works: the illustration beside the three steps ----------
 * Image on the left, the steps stacked on the right. The picture gets the
 * same surface treatment as a card, because next to three cards anything
 * else reads as a hole in the row.
 */

.neda-cc-how { align-items: stretch; }

/* Each step is its own card, so the stack needs the card gap, not the
   theme's paragraph rhythm. */
.neda-cc-how__steps {
    display: grid;
    gap: 16px;
    height: 100%;
    align-content: start;
}

/*
 * The theme puts `--wp--style--block-gap` on every child of a constrained
 * group as a top margin. Inside a grid that ADDS to the gap above, so the
 * 16px asked for came out at 46px.
 */
.neda-cc-how__steps > * { margin-block: 0; }

/*
 * `.neda-cc-card` is `height: 100%` so cards in a ROW match each other.
 * Stacked inside one column that would make every card the full column
 * height, and three of them would overflow it - so the stack opts out.
 */
.neda-cc-how__steps > .neda-cc-card { height: auto; }

/*
 * Numeral beside the text rather than above it. These cards are wide and
 * short, and a numeral on its own line wastes the width it was given.
 * Explicit areas, because auto-placement would drop the paragraph under
 * the numeral instead of under the title.
 */
.neda-cc-step {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-areas:
        "num title"
        "num body";
    column-gap: 16px;
    align-items: start;
}

.neda-cc-step .neda-cc-num { grid-area: num; margin: 0; }
.neda-cc-step h3.wp-block-heading { grid-area: title; margin: 0 0 6px; }
.neda-cc-step p:not(.neda-cc-num) { grid-area: body; margin: 0; }

/*
 * Title and body share one left edge. The heading was arriving centred, so
 * the two sat on different axes inside the same card. `start` rather than
 * `left` so RTL flips with the rest of the page. The numeral is unaffected -
 * it centres its digit with `place-items`, not text-align.
 */
body.neda-bridge-page .neda-cc-step h3.wp-block-heading,
body.neda-bridge-page .neda-cc-step p:not(.neda-cc-num) {
    text-align: start;
    /*
     * `width: 100%` is doing the real work. The card is a constrained group,
     * so the theme puts `margin-inline: auto !important` on its children - and
     * an auto margin on a GRID ITEM overrides `justify-self: stretch`: the item
     * shrinks to fit-content and the margins centre it. That is why the title
     * sat centred over left-aligned body copy. Filling the column leaves the
     * auto margins nothing to distribute, so the !important never has to be
     * fought with another !important.
     */
    width: 100%;
}

/*
 * The illustration's surface. It keeps the white panel and the elevation so
 * it reads as part of the row, but it does NOT take the hover treatment:
 * hover means "this responds to you", and the picture does nothing. Only the
 * cards tint and lift.
 */
.neda-cc-how__figure {
    height: 100%;
    margin: 0;
    display: grid;
    place-items: center;
    padding: clamp(18px, 2vw, 30px);
    background: #FFFFFF;
    border: 0;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
}

.neda-cc-how__figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Step numerals sit on a TEXT-BOX TINT, never a solid cyan fill. */
.neda-cc-num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 0 14px;
    border-radius: var(--cc-radius);
    background: var(--cc-tint-1);
    color: #000000;
    font-weight: 700;
}

.neda-cc-card:hover .neda-cc-num { background: #FFFFFF; }

/* ---- The kinds of course: one row card per type ----------------------
 * Icon, then the name and its line, then the button - the same three-part
 * row for all five, Quest Lab included. It is a card like the others: a
 * type that is announced in a footnote instead of a card reads as an
 * afterthought.
 *
 * The colour identification now comes from the ICON, which is drawn in that
 * type's brand colour, so the old 12px swatch before the heading is gone -
 * two colour marks for one fact.
 */

.neda-cc-types { display: grid; gap: 16px; }
.neda-cc-types > * { margin-block: 0; }   /* theme block-gap would add to the grid gap */

.neda-cc-type {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    grid-template-areas:
        "icon title  action"
        "icon body   action";
    column-gap: 24px;
    row-gap: 2px;
    align-items: center;
}

/*
 * Same auto-margin trap as the step cards: the card is a constrained group,
 * so the theme puts `margin-inline: auto !important` on these children and an
 * auto margin makes a grid item shrink-to-fit and centre. Filling the track
 * leaves nothing to distribute.
 */
.neda-cc-type > * { width: 100%; max-width: none; justify-self: stretch; }

.neda-cc-type__icon { grid-area: icon; margin: 0; }
.neda-cc-type__icon img { display: block; width: 84px; height: auto; }

.neda-cc-type h3.wp-block-heading { grid-area: title; margin: 0; text-align: start; }
.neda-cc-type p { grid-area: body; margin: 0; text-align: start; }

.neda-cc-type .wp-block-buttons {
    grid-area: action;
    width: auto;              /* the button column is sized by the button */
    margin: 0;
    justify-self: end;
    justify-content: flex-end;
}

/* Colour still belongs to the type - it is just carried by the icon now. */
.neda-cc-type--audio { --cc-type: #D7263D; }
.neda-cc-type--live  { --cc-type: #6A4C93; }
.neda-cc-type--flex  { --cc-type: #0EC4C5; }
.neda-cc-type--skill { --cc-type: #2F80ED; }
.neda-cc-type--quest { --cc-type: #F2B705; }

/* Under 700px the button cannot share a line with the text. */
@media (max-width: 700px) {
    .neda-cc-type {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "icon title"
            "icon body"
            "action action";
        row-gap: 6px;
    }

    .neda-cc-type__icon img { width: 64px; }
    .neda-cc-type .wp-block-buttons { justify-content: flex-start; margin-block-start: 6px; }
}

/* Scoped to the section: a bare .neda-cc-price is (0,1,0) and LOSES to
   .neda-cc-section p at (0,2,0), so the price has always rendered at body
   size rather than the size intended for it. Pre-existing; corrected here. */
.neda-cc-section .neda-cc-price, .neda-cc-price { font-size: 26px; font-weight: 700; margin: 0 0 14px; line-height: 1.1; }
.neda-cc-section .neda-cc-price span, .neda-cc-price span { font-size: 15px; font-weight: 400; color: rgba(0, 0, 0, 0.72); }

.neda-cc-soon { font-weight: 700; color: rgba(0, 0, 0, 0.72); margin: 0 0 14px; }
.neda-cc-hint { margin-top: 22px; color: rgba(0, 0, 0, 0.72); }

/* One fact that is true of all four cards, so it is said once above them
   rather than repeated as a fourth bullet in each. The lime rule ties it to
   the buttons without introducing a second tinted banner under the first. */
.neda-cc-section .neda-cc-included {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-inline-start: 4px solid var(--cc-lime);
    border-radius: var(--cc-radius);
    background: #FFFFFF;
    box-shadow: var(--cc-shadow);
    color: rgba(0, 0, 0, 0.82);
}

.neda-cc-section .neda-cc-included strong { color: #000000; }

/* ---- Buttons: lime -> cherry, and NO border in any state -------------- */

.neda-cc-section .wp-block-button__link {
    background: var(--cc-lime);
    color: #000000;
    border: 0;
    border-radius: var(--cc-radius);
    padding: 12px 24px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--cc-ease), color var(--cc-ease);
}

.neda-cc-section .wp-block-button__link:hover,
.neda-cc-section .wp-block-button__link:active {
    background: var(--cc-cherry);
    color: #FFFFFF;
    border: 0;
}

/* The ring is an outline, never a border, and reads on the RESTING fill. */
.neda-cc-section .wp-block-button__link:focus-visible {
    outline: 3px solid var(--cc-cherry);
    outline-offset: 2px;
    border: 0;
}

/* ---- FAQ accordion: white at rest, textbox-1 on hover, zoom ---------- */

.neda-cc-faq {
    background: #FFFFFF;
    border: 0;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    padding: 2px 24px;
    transition: transform var(--cc-ease), box-shadow var(--cc-ease), background var(--cc-ease);
}

/*
 * Text-box 4, not text-box 1. The FAQ band is text-box 1 now, and an
 * accordion that turns the colour of the band it sits on disappears at the
 * exact moment it is being pointed at.
 */
.neda-cc-faq:hover,
.neda-cc-faq[open] {
    background: var(--cc-tint-4);
    transform: scale(1.01);
    box-shadow: var(--cc-shadow-up);
}

.neda-cc-faq + .neda-cc-faq { margin-top: 12px; }

.neda-cc-faq summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: 18px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.neda-cc-faq summary::-webkit-details-marker { display: none; }
.neda-cc-faq summary::marker { content: ""; }

.neda-cc-faq summary::after {
    content: "";
    flex: 0 0 auto;
    margin-inline-start: auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    transform: rotate(45deg);
    transition: transform var(--cc-ease);
}

.neda-cc-faq[open] summary::after { transform: rotate(-135deg); }

.neda-cc-faq summary:focus-visible {
    outline: 3px solid var(--cc-cherry);
    outline-offset: 2px;
    border-radius: var(--cc-radius);
}

.neda-cc-faq p { padding-bottom: 20px; margin: 0; color: rgba(0, 0, 0, 0.82); }

/* ---- Hero: edge to edge, white text on the photograph ----------------- */

.neda-cc-hero {
    margin-inline: calc(50% - 50vw) !important;
    width: 100vw;
    max-width: 100vw;
}

/* Colour is set on the blocks themselves so it stays editable; this only
   guarantees a readable default if that attribute is ever cleared. */
.neda-cc-hero .wp-block-cover__inner-container { color: #FFFFFF; text-align: center; }
.neda-cc-hero .neda-cc-hero__title { font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; line-height: 1.1; margin: 0 0 12px; letter-spacing: 0; }

/* The lede keeps its 58ch measure - a full-width line is unreadable - but the
   measure itself is now centred under the title rather than left-aligned in
   the middle of the band. */
.neda-cc-hero .neda-cc-hero__lede { font-size: 15px; max-width: 58ch; margin-inline: auto; letter-spacing: 0; }

/* ---- The signed-in signpost ------------------------------------------ */

.neda-cc-signpost {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin: 28px auto;
    padding: 26px 28px;
    /*
     * Text-box 1 at rest, text-box 4 on hover -- not white, so the card is
     * legible as a surface against the white page behind it. (House rule: a
     * card must never sit on a band its own colour.)
     */
    background: var(--wp--preset--color--custom-color-1, #ECF9F8);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    /*
     * Centred, because this card is the first thing under the hero and reads
     * as part of that header block. text-align carries the button too: the
     * link is inline-block, so it centres on this line alone -- no auto
     * margins and no flex wrapper needed.
     */
    text-align: center;
}

.neda-cc-signpost:hover {
    background: var(--wp--preset--color--custom-color-4, #F1F3D6);
    transform: scale(1.01);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

/*
 * BLACK, said explicitly. This card is not inside a `.neda-cc` wrapper, so it
 * was picking up the theme's own accent colour and rendering the title cyan --
 * which is a fill colour, never text. House rule: titles are black.
 */
.neda-cc-signpost strong { display: block; font-size: 19.2px; margin-bottom: 6px; color: #000000; }
.neda-cc-signpost p { font-size: 15px; margin: 0 0 16px; color: rgba(0, 0, 0, 0.72); }

/* Lime fill, black label, no border in any state. */
.neda-cc-signpost a {
    display: inline-block;
    background: #C4C40E;
    color: #000000;
    border: 0;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.neda-cc-signpost a:hover,
.neda-cc-signpost a:active { background: #D7263D; color: #FFFFFF; border: 0; }
.neda-cc-signpost a:focus-visible { outline: 3px solid #D7263D; outline-offset: 2px; border: 0; }

@media (max-width: 781px) {
    .neda-cc-grid > .wp-block-column { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .neda-cc-card, .neda-cc-faq, .neda-cc-signpost { transition: none; }
    .neda-cc-card:hover, .neda-cc-faq:hover, .neda-cc-signpost:hover { transform: none; }
}

/* ---- Headings carry no tracking -------------------------------------
   NEDA_PROJECT_INSTRUCTIONS.md 6.1: heading letter-spacing is 0 on every
   property. The block theme puts a small tracking on headings, which is
   inherited rather than set on our elements, so it has to be said out
   loud here or these headlines sit differently from the rest of the site.

   No !important: typography stays overridable from the Site Editor.
*/
.neda-cc h1,
.neda-cc h2,
.neda-cc h3,
.neda-cc h4,
.neda-cc__title,
.neda-cc-hero .neda-cc-hero__title,
.neda-cc-section h2.wp-block-heading,
.neda-cc-section h3.wp-block-heading,
.neda-cc-faq summary,
.neda-cc-signpost strong,
.neda-corner__step-title,
.neda-corner__package-name,
.neda-corner__faq-q,
.neda-note__title {
    letter-spacing: 0;
}

/* ---- Titles are black -----------------------------------------------
   NEDA_PROJECT_INSTRUCTIONS.md 6.1: titles and text are black. Cyan and
   lime are fills and fail as text on a light surface, so a title must
   never inherit one from the theme.

   `:not(.has-text-color)` steps aside the moment someone sets a colour on
   the block in the Site Editor -- which is how the hero title stays white
   on its photograph. That is the only sanctioned exception, along with the
   white label on the cherry hover fill.
*/
.neda-cc-section h2.wp-block-heading:not(.has-text-color),
.neda-cc-section h3.wp-block-heading:not(.has-text-color),
.neda-cc-card h3.wp-block-heading:not(.has-text-color),
.neda-cc-faq summary {
    color: #000000;
}

/* =========================================================================
   THE ADMIN AREA, REBUILT ON THE HOUSE RULES - 2026-08-05
   The workshop had drifted: text-box 3 bands, hairline-separated rows, 1rem
   body copy and h3 section headings. It is the same design language as the
   Creators' Corner now - one measure, bands of white and text-box 1, cards
   with no border that tint to text-box 4 and lift, 15pt body, black text.
   ========================================================================= */

/* One measure. `.neda-cc` already caps at the wide size; this stops anything
   inside a section from being narrower for no reason. */
.neda-admin .neda-cc__space,
.neda-admin .neda-cc__hero {
    max-width: none;
}

/* Bands alternate white and TEXT-BOX 1 (not text-box 3, which the front page
   uses for something else). */
.neda-admin .neda-cc__space:nth-of-type(odd)  { --ne-band: var(--ne-tint-cyan); }
.neda-admin .neda-cc__space:nth-of-type(even) { --ne-band: var(--ne-white); }

.neda-admin .neda-cc__space-title,
.neda-admin .neda-cc__title {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ne-black);
}

.neda-admin p,
.neda-admin li,
.neda-admin td,
.neda-admin th {
    font-size: 17px;
    line-height: 1.55;
}

/*
 * Black, said out loud. The theme's `text-gray` preset resolves to CYAN on
 * this site, and anything that inherits its colour rather than being told one
 * comes out cyan on white - 2.6:1, and the exact thing the palette rule
 * forbids. Inheriting from `.neda-cc` is not enough: a rule that sets colour
 * on the element itself beats an inherited value whatever its specificity.
 */
.neda-admin p,
.neda-admin li,
.neda-admin dd,
.neda-admin td,
.neda-admin th,
.neda-admin label,
.neda-admin legend,
.neda-admin strong,
.neda-admin code {
    color: var(--ne-black);
}

/* The deliberately quiet lines stay quiet - still black, just softened. */
.neda-admin .neda-cc__seats,
.neda-admin .neda-cc__hint,
.neda-admin .neda-cc__stat dt,
.neda-admin .neda-admin__why,
.neda-admin .neda-note__body {
    color: rgba(0, 0, 0, 0.72);
}

/* ---- notices ----------------------------------------------------------
 * LIGHT Golden Yellow with a Golden Yellow border (owner, 2026-09-07),
 * where this was solid #F2B705 with no border from 2026-08-05. Scoped to
 * `.neda-cc` rather than `.neda-admin` so the signed-out screen - which
 * renders the note without the admin wrapper - matches.
 *
 * Black on #FDF0D6 is 18.6:1, up from 11:1 on the solid gold, so the change
 * costs nothing in legibility and gains a good deal.
 *
 * The border is not decoration. #FDF0D6 against the white behind it is about
 * 1.1:1 -- the fill alone barely draws the box - so the gold outline is what
 * says where the notice begins and ends. That is why it is a full border and
 * not the inline-start accent the base `.neda-note--warning` uses.
 *
 * WHAT DOES NOT CHANGE, and must not: every tone still takes the same
 * treatment. The severity tints went in 2026-08-05 so that a note no longer
 * says what KIND of note it is by colour, its title doing that work instead
 * ("Something went wrong", "Nothing waiting"). Going lighter keeps all six
 * selectors identical and so keeps that intact.
 */
.neda-cc .neda-note,
.neda-cc .neda-note--info,
.neda-cc .neda-note--success,
.neda-cc .neda-note--warning,
.neda-cc .neda-note--error,
.neda-cc .neda-note--plain {
    background: #FDF0D6;
    color: var(--ne-black);
    border: 1px solid var(--ne-gold);
    border-radius: var(--ne-radius-card);
    box-shadow: none;
}

.neda-cc .neda-note__title,
.neda-cc .neda-note__body {
    color: var(--ne-black);
}

/* ---- the counters at the top are cards -------------------------------
 * White band, text-box 3 boxes, text-box 1 on hover (user, 2026-08-05).
 * The band and the boxes have to differ - a text-box-3 counter on a
 * text-box-3 band is the "card on a band its own colour" mistake, which is
 * why the band goes white rather than the boxes going white on the tint.
 */

.neda-admin .neda-cc__hero {
    --ne-band: var(--ne-white);
}

.neda-admin .neda-cc__stats {
    gap: 22px;   /* was 12px - the boxes were reading as one strip */
}

.neda-admin .neda-cc__stat {
    background: var(--ne-band-tint);
    border: 0;
    border-radius: var(--ne-radius-card);
    box-shadow: var(--ne-shadow-sm);
    padding: 18px 24px;
    transition: transform var(--ne-ease), box-shadow var(--ne-ease), background var(--ne-ease);
}

.neda-admin .neda-cc__stat:hover {
    background: var(--ne-tint-cyan);
    transform: scale(1.03);
    box-shadow: var(--ne-shadow-md);
}

.neda-admin .neda-cc__stat dt { font-size: 1rem; color: rgba(0, 0, 0, 0.72); }
.neda-admin .neda-cc__stat dd { font-size: 1.8rem; color: var(--ne-black); }

/* ---- a course is a card, not a table row ----------------------------- */

.neda-admin .neda-cc__course {
    border: 0;
    border-radius: var(--ne-radius-card);
    box-shadow: var(--ne-shadow-sm);
    padding: 16px 20px;
    transition: transform var(--ne-ease), box-shadow var(--ne-ease), background var(--ne-ease);
}

.neda-admin .neda-cc__course:hover,
.neda-admin .neda-cc__course:focus-within {
    background: var(--wp--preset--color--custom-color-4, #F1F3D6);
    transform: scale(1.01);
    box-shadow: var(--ne-shadow-md);
}

.neda-admin .neda-cc__course-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
}

/* ---- tables -----------------------------------------------------------
 * The card rule zeroed --ne-hairline, which left these tables as a wall of
 * text with invisible separators. A table is not a card: its rows need a
 * line, and it is a transparent black, never a new hue.
 */
.neda-admin .neda-admin__scroll {
    border: 0;
    border-radius: var(--ne-radius-card);
    box-shadow: var(--ne-shadow-sm);
    background: var(--ne-white);
}

.neda-admin .neda-admin__table th,
.neda-admin .neda-admin__table td {
    border-block-end: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 1rem;   /* a dense grid, deliberately below the 17px body size */
}

.neda-admin .neda-admin__table thead th {
    background: var(--ne-cyan);
    letter-spacing: 0;
}

.neda-admin .neda-admin__table tbody tr:hover { background: var(--wp--preset--color--custom-color-4, #F1F3D6); }

/* ---- the "add a course" row ------------------------------------------ */

.neda-admin .neda-cc__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    background: var(--ne-white);
    border-radius: var(--ne-radius-card);
    box-shadow: var(--ne-shadow-sm);
    padding: 18px 20px;
}

.neda-admin .neda-cc__form .neda-cc__hint { flex: 0 1 auto; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .neda-admin .neda-cc__stat,
    .neda-admin .neda-cc__course { transition: none; }
    .neda-admin .neda-cc__stat:hover,
    .neda-admin .neda-cc__course:hover { transform: none; }
}

/* =========================================================================
   THE CALENDAR - 2026-08-10
   A list, not a grid. A month grid is mostly empty squares for somebody with
   four dates in a year, and it reads badly on a phone; a list answers the
   only question being asked, which is "what is next".
   ========================================================================= */

.neda-calendar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.neda-calendar__month {
    margin-block-start: 14px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ne-black);
}

.neda-calendar__month:first-child { margin-block-start: 0; }

.neda-calendar__item {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--ne-white);
    border: 0;
    border-radius: var(--ne-radius-card);
    box-shadow: var(--ne-shadow-sm);
    padding: 14px 20px;
    transition: transform var(--ne-ease), box-shadow var(--ne-ease), background var(--ne-ease);
}

.neda-calendar__item:hover,
.neda-calendar__item:focus-within {
    background: var(--wp--preset--color--custom-color-4, #F1F3D6);
    transform: scale(1.01);
    box-shadow: var(--ne-shadow-md);
}

/* The date block. Fixed width so every row's text starts on one axis. */
.neda-calendar__when {
    flex: 0 0 auto;
    inline-size: 58px;
    display: grid;
    justify-items: center;
    gap: 2px;
    background: var(--ne-tint-cyan);
    border-radius: var(--ne-radius-control);
    padding: 8px 0;
}

.neda-calendar__day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.neda-calendar__weekday {
    font-size: 0.78rem;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.72);
}

.neda-calendar__body {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
}

.neda-calendar__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ne-black);
}

/*
 * A calendar entry that links somewhere is still a link, and the link rule
 * says blue and bold - but a whole list of blue titles reads as a link farm.
 * These stay black and take the cherry on hover, which is the same signal the
 * card titles on the front page use.
 */
a.neda-calendar__title { text-decoration: none; }

a.neda-calendar__title:hover,
a.neda-calendar__title:focus-visible { color: var(--ne-cherry); }

.neda-calendar__meta {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.72);
}

/* Severity, on the date block only - the row itself stays a white card. */
.neda-calendar__item--warning .neda-calendar__when { background: var(--ne-tint-lime); }
.neda-calendar__item--error .neda-calendar__when   { background: var(--ne-gold); }

@media (max-width: 600px) {
    .neda-calendar__item { gap: 12px; padding: 12px 14px; }
    .neda-calendar__when { inline-size: 50px; }
}

/* ---- the bar: paging on the left, period, views on the right ---------- */

.neda-calendar__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-block-end: 20px;
}

.neda-calendar__period {
    flex: 1 1 auto;
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ne-black);
    text-align: center;
}

.neda-calendar__nav,
.neda-calendar__views {
    display: flex;
    gap: 8px;
}

/* Paging controls are the SECONDARY action: cyan with a black glyph, cherry
   with white on hover - the same pair as `.neda-btn--quiet`. */
.neda-calendar__nav-btn {
    display: grid;
    place-items: center;
    min-inline-size: 44px;   /* a real touch target, not a 20px arrow */
    min-block-size: 44px;
    background: var(--ne-cyan);
    color: var(--ne-black);
    border: 0;
    border-radius: var(--ne-radius-control);
    padding: 0 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ne-ease), color var(--ne-ease);
}

.neda-calendar__nav-btn:hover,
.neda-calendar__nav-btn:active {
    background: var(--ne-cherry);
    color: var(--ne-white);
}

.neda-calendar__nav-btn:focus-visible {
    outline: 3px solid var(--ne-cherry);
    outline-offset: 2px;
}

/* The arrows are drawn, not typed: a glyph would depend on a font that may
   not be there, and the accessible name is on the button already. */
.neda-calendar__chevron {
    inline-size: 10px;
    block-size: 10px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(135deg);
    margin-inline-start: 3px;
}

.neda-calendar__nav-btn--next .neda-calendar__chevron {
    transform: rotate(-45deg);
    margin-inline: -3px 0;
}

/* Day / Week / Month. The chosen one is lime; the others are cyan. Two fills
   from the palette rather than an outline, because there are no white
   buttons - and both carry a black label. */
.neda-calendar__view-btn {
    background: var(--ne-cyan);
    color: var(--ne-black);
    border: 0;
    border-radius: var(--ne-radius-control);
    padding: 8px 18px;
    /* A labelled button, so it takes the standard 40px (owner, 2026-09-07).
       Its neighbour `.neda-calendar__nav-btn` stays 44px: that one is an
       icon-only arrow and 44px is its pointer target. */
    min-block-size: 40px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ne-ease), color var(--ne-ease);
}

.neda-calendar__view-btn[aria-pressed="true"] {
    background: var(--ne-lime);
    color: var(--ne-black);
}

.neda-calendar__view-btn:hover,
.neda-calendar__view-btn:active {
    background: var(--ne-cherry);
    color: var(--ne-white);
}

.neda-calendar__view-btn:focus-visible {
    outline: 3px solid var(--ne-cherry);
    outline-offset: 2px;
}

/* ---- the grid --------------------------------------------------------
 * A card has no outline; a TABLE is not a card and its cells need a line or
 * the month is a wall of numbers. The line is a transparent black, never a
 * new hue. The whole grid sits on one white card.
 */
.neda-calendar__grid {
    inline-size: 100%;
    border-collapse: collapse;
    background: var(--ne-white);
    border-radius: var(--ne-radius-card);
    box-shadow: var(--ne-shadow-sm);
    overflow: hidden;
    table-layout: fixed;   /* seven equal columns, whatever is inside them */
}

.neda-calendar__grid th {
    background: var(--ne-tint-cyan);
    color: var(--ne-black);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    padding: 10px 4px;
}

.neda-calendar__grid th abbr {
    text-decoration: none;   /* the browser's dotted underline is not our style */
    border: 0;
}

.neda-calendar__cell {
    vertical-align: top;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 6px;
    transition: background var(--ne-ease);
}

.neda-calendar__grid--month .neda-calendar__cell { block-size: 104px; }
.neda-calendar__grid--week .neda-calendar__cell { block-size: 260px; }

.neda-calendar__cell:hover { background: var(--wp--preset--color--custom-color-4, #F1F3D6); }

/* Today is text-box 1; a day outside the month being viewed is dimmed rather
   than hidden, so the week it belongs to still reads as a week. */
.neda-calendar__cell.is-today { background: var(--ne-tint-cyan); }
.neda-calendar__cell.is-outside .neda-calendar__daynum { opacity: 0.45; }

.neda-calendar__daynum {
    display: block;
    inline-size: 100%;
    background: transparent;
    border: 0;
    padding: 2px 4px;
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ne-black);
    text-align: start;
    cursor: pointer;
    border-radius: var(--ne-radius-control);
}

.neda-calendar__daynum:focus-visible {
    outline: 3px solid var(--ne-cherry);
    outline-offset: 1px;
}

/*
 * `min-inline-size: 0` on both, and it is load-bearing. A grid or flex item
 * defaults to a minimum size of its CONTENT, so a chip holding an untruncated
 * title pushed its cell wider than the column - which is how a 194px title
 * ended up 72px past the right edge of a 375px phone. The ellipsis cannot
 * engage until the box is allowed to be narrower than its text.
 */
.neda-calendar__cell-events {
    display: grid;
    gap: 4px;
    margin-block-start: 4px;
    min-inline-size: 0;
}

.neda-calendar__chip-text {
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: inherit;
}

/* An event inside a cell. Black text on a tint - never coloured text, and
   never a fill so strong the title stops being readable at 12px. */
.neda-calendar__chip {
    display: block;
    background: var(--ne-tint-cyan);
    color: var(--ne-black);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.neda-calendar__chip:hover,
a.neda-calendar__chip:focus-visible {
    background: var(--ne-cherry);
    color: var(--ne-white);
}

.neda-calendar__chip--warning { background: var(--ne-tint-lime); }
.neda-calendar__chip--error { background: var(--ne-gold); }

/*
 * A chip and a day-view title are links, so the site's link rule paints them
 * Professional Blue - which on a pale cyan chip is coloured text on a tint,
 * exactly what the palette forbids, and it fails contrast besides.
 *
 * Beating that rule takes real specificity. It is
 *   .neda-cc a:not(.neda-btn):not(.wp-block-button__link)
 * and each `:not()` contributes its argument's class, so it scores (0,3,1) -
 * a plain `.neda-cc a.neda-calendar__chip` at (0,2,1) loses silently. Adding
 * `body` and the page class brings this to (0,3,2): the classes tie at three
 * and the extra element decides it.
 */
body.neda-bridge-page .neda-cc a.neda-calendar__chip,
body.neda-bridge-page .neda-cc a.neda-calendar__title {
    color: var(--ne-black);
    text-decoration: none;
}

body.neda-bridge-page .neda-cc a.neda-calendar__chip:hover,
body.neda-bridge-page .neda-cc a.neda-calendar__chip:focus-visible {
    color: var(--ne-white);
}

body.neda-bridge-page .neda-cc a.neda-calendar__title:hover,
body.neda-bridge-page .neda-cc a.neda-calendar__title:focus-visible {
    color: var(--ne-cherry);
}

.neda-calendar__grid--week .neda-calendar__chip { white-space: normal; }

.neda-calendar__none {
    margin: 0;
    padding: 22px;
    background: var(--ne-white);
    border-radius: var(--ne-radius-card);
    box-shadow: var(--ne-shadow-sm);
    color: rgba(0, 0, 0, 0.72);
}

/* ---- responsive ------------------------------------------------------
 * Under 720px seven columns cannot hold a word, so the month grid becomes a
 * strip of day cells that wraps: same cells, same behaviour, no horizontal
 * scroll. The week view stacks for the same reason.
 */
@media (max-width: 720px) {
    .neda-calendar__bar { gap: 10px; }
    .neda-calendar__period { order: -1; flex: 1 0 100%; text-align: start; }
    .neda-calendar__views { flex: 1 1 auto; }
    .neda-calendar__view-btn { flex: 1 1 auto; padding: 11px 10px; }

    .neda-calendar__grid,
    .neda-calendar__grid tbody,
    .neda-calendar__grid tr { display: block; }

    .neda-calendar__grid thead { display: none; }

    .neda-calendar__grid tr {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }

    .neda-calendar__grid--month .neda-calendar__cell,
    .neda-calendar__grid--week .neda-calendar__cell {
        display: block;
        block-size: auto;
        min-block-size: 78px;
        min-inline-size: 0;   /* let the track shrink below its content */
    }

    /* An empty day out of the month being viewed is noise on a phone. */
    .neda-calendar__grid--month .neda-calendar__cell.is-outside.is-empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .neda-calendar__item,
    .neda-calendar__cell,
    .neda-calendar__nav-btn,
    .neda-calendar__view-btn { transition: none; }
    .neda-calendar__item:hover { transform: none; }
}

/* =========================================================================
   MY COURSES - 2026-08-10
   The catalogue card's anatomy, with one thing changed: somebody who already
   holds the course wants to continue it, not buy it again.
   ========================================================================= */

.neda-mycourses__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.neda-mycourses__card {
    display: flex;
    flex-direction: column;
    background: var(--ne-white);
    border: 0;
    border-radius: var(--ne-radius-card);
    box-shadow: var(--ne-shadow-sm);
    overflow: hidden;
    transition: transform var(--ne-ease), box-shadow var(--ne-ease), background var(--ne-ease);
}

.neda-mycourses__card:hover,
.neda-mycourses__card:focus-within {
    background: var(--wp--preset--color--custom-color-4, #F1F3D6);
    transform: scale(1.03);
    box-shadow: var(--ne-shadow-md);
}

/* The badge is positioned against this, so it has to be the containing block.
   4:3, strictly - the same ratio as every other course card. */
.neda-mycourses__media {
    position: relative;
    line-height: 0;
}

.neda-mycourses__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* The type chip sits on the photo, bottom right, on a white plate - the
   colour identifies the type, it is never asked to be the text. */
.neda-mycourses__media .neda-chip {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 12px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    box-shadow: var(--ne-shadow-sm);
}

.neda-mycourses__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px 20px;
    /* Pins the button to the bottom, so cards with a long and a short title
       still line their actions up. */
    flex: 1 1 auto;
}

.neda-mycourses__title {
    margin: 0;
    font-size: 19.2px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--ne-black);
}

/* The action row, pinned to the bottom so cards with a long and a short title
   still line their buttons up. The pin lives on the ROW, not on the buttons:
   `margin-block-start: auto` only does anything to a flex item, and once there
   are two actions the buttons are no longer the flex items - the row is. */
.neda-mycourses__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: auto 0 0;
}

.neda-mycourses__body > .neda-btn { margin-block-start: auto; }

.neda-mycourses__body .neda-cc__hint { margin: 0; }


@media (prefers-reduced-motion: reduce) {
    .neda-mycourses__card { transition: none; }
    .neda-mycourses__card:hover { transform: none; }
}

/* ---- Nothing on this page is underlined ------------------------------
   The link rule in the links section above already reaches the block
   sections (they carry `.neda-cc` too) and gives them blue + bold. This
   catches the rest: buttons, the signpost's own anchor, and anything the
   theme underlines by default. Colour is deliberately not touched here --
   only the underline.
*/
.neda-cc a,
.neda-cc-section a,
.neda-cc-signpost a,
.neda-cc-hero a,
.neda-cc a:hover,
.neda-cc-section a:hover,
.neda-cc-signpost a:hover,
.neda-cc-hero a:hover,
.neda-cc a:focus-visible,
.neda-cc-section a:focus-visible,
.neda-cc-signpost a:focus-visible,
.neda-cc-hero a:focus-visible {
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Achievement Vault
   ---------------------------------------------------------------------------
   Logical properties throughout, so RTL needs no second stylesheet: the sheet
   already works that way and the Vault does not become the one place that
   hard-codes left and right.

   Status is never colour alone. Each state carries its own word in the markup
   and the colour only reinforces it, which is the rule for anyone who cannot
   tell the two reds apart.
   --------------------------------------------------------------------------- */

.neda-vault__heading {
	margin: 0 0 8px;
}

.neda-vault__section {
	margin-block-start: 32px;
}

.neda-vault__section-title {
	margin: 0 0 16px;
	font-size: 1.25rem;
}

.neda-vault__none {
	margin: 0;
	color: var(--ne-muted, #5b6470);
}

.neda-vault__empty {
	text-align: center;
	padding-block: 40px;
}

.neda-vault__empty-title {
	margin: 0 0 8px;
	font-size: 1.35rem;
}

.neda-vault__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 22px;
	/* auto-fill + minmax reflows to one column well before 390px, so a narrow
	   phone never scrolls sideways. */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.neda-vault__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--ne-white);
	border-radius: var(--ne-radius-card);
	box-shadow: var(--ne-shadow-sm);
	padding: 20px;
}

.neda-vault__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
	/* Course titles run long and some are Arabic. Break anywhere rather than
	   push the card wider than the screen. */
	overflow-wrap: anywhere;
}

.neda-vault__course {
	margin: 0;
	color: var(--ne-muted, #5b6470);
	overflow-wrap: anywhere;
}

.neda-vault__meta {
	margin: 0;
	display: grid;
	gap: 4px;
}

.neda-vault__meta-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.92rem;
}

.neda-vault__meta-row dt {
	color: var(--ne-muted, #5b6470);
	margin: 0;
}

.neda-vault__meta-row dd {
	margin: 0;
	font-weight: 600;
}

.neda-vault__status {
	margin: 0;
	align-self: start;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	background: rgba(215, 38, 61, 0.08);
	color: var(--ne-cherry);
	border: 1px solid var(--ne-cherry);
}

.neda-vault__status--superseded,
.neda-vault__status--unavailable {
	background: rgba(0, 0, 0, 0.05);
	color: var(--ne-ink, #1d2733);
	border-color: currentColor;
}

.neda-vault__actions {
	margin: 4px 0 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* The actions stay reachable on a narrow phone by filling the row rather than
   being squeezed into unhittable slivers. */
@media (max-width: 420px) {
	.neda-vault__actions .neda-btn {
		flex: 1 1 100%;
		text-align: center;
	}
}
/* ==================================================================
   THE ADMIN AREA IN TWO COLUMNS - 2026-09-01
   Every block is laid out like a Moodle settings page: the title and its
   one-line explanation sit in a 25% column on the left, and the content
   fills the 75% column on the right. Every band is white now, so blocks are
   told apart by a hairline between them rather than by alternating tints.
   Titles come down to 16px so they read as labels for the content beside
   them rather than as headings above it.
   ========================================================================= */

.neda-admin .neda-cc__hero,
.neda-admin .neda-cc__space,
.neda-admin .neda-cc__space:nth-of-type(odd),
.neda-admin .neda-cc__space:nth-of-type(even) {
    --ne-band: var(--ne-white);
}

.neda-admin .neda-cc__hero,
.neda-admin .neda-cc__space {
    display: grid;
    grid-template-columns: 25% 75%;
    align-items: start;
    padding-block: clamp(24px, 3vw, 36px);
}

/* Blocks no longer differ in colour, so a line says where one ends. */
.neda-admin .neda-cc__space {
    border-block-start: 1px solid rgba(0, 0, 0, 0.1);
}

.neda-admin .neda-cc__space-aside {
    grid-column: 1;
    min-width: 0;
    padding-inline-end: clamp(16px, 2.5vw, 32px);
}

.neda-admin .neda-cc__space-body {
    grid-column: 2;
    min-width: 0;
}

.neda-admin .neda-cc__space-body > :first-child { margin-block-start: 0; }
.neda-admin .neda-cc__space-body > :last-child  { margin-block-end: 0; }

.neda-admin .neda-cc__space-title {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.neda-admin .neda-cc__space-aside .neda-cc__seats,
.neda-admin .neda-cc__space-aside .neda-cc__lede {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
}

.neda-admin .neda-cc__space-aside .neda-cc__space-head { margin-block-end: 0; }

.neda-admin .neda-cc__hero .neda-cc__stats { margin: 0; }

/* One column on a phone: the label above what it labels. */
@media (max-width: 782px) {
    .neda-admin .neda-cc__hero,
    .neda-admin .neda-cc__space {
        grid-template-columns: minmax(0, 1fr);
    }

    .neda-admin .neda-cc__space-aside {
        padding-inline-end: 0;
        margin-block-end: 14px;
    }

    .neda-admin .neda-cc__space-body { grid-column: 1; }
}

/* ------------------------------------------------ people and their functions */

/* One small form per function held, so each Remove is its own POST. */
.neda-admin__inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline-end: 10px;
	margin-block: 2px;
}

.neda-status--function {
	background: var(--ne-purple);
	color: var(--ne-white);
}

.neda-cc__hint--inline {
	flex: initial;
	display: inline;
	margin-inline-start: 6px;
}

/* A checkbox and its label read as one control, on one line where they fit. */
.neda-cc__check {
	flex: 1 0 100%;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.neda-cc__check input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--ne-cherry);
}

/*
 * A checkbox does not fill cherry on hover, so it takes the cherry RING --
 * not the cyan glow this rule carried when it arrived. An outline is the
 * right geometry here: the 20px box has no 10px radius to square off, so
 * the text-box box-shadow treatment does not apply to it.
 */
.neda-cc__check input:focus-visible {
	outline: 3px solid var(--ne-cherry);
	outline-offset: 3px;
}


/* =========================================================================
   FORM CONTROLS - 2026-09-02
   The grant form was a wrapping flex row that ran the full width of the
   content column, and its selects were whatever the operating system draws.
   Both are fixed here: the form is a narrow column, and a select carries a
   Neda arrow in a rounded square.
   ========================================================================= */

/* ---- a dropdown wears a Neda arrow, not the operating system's ----------
 * `appearance: none` takes the native arrow away, so one has to be supplied
 * or the control loses the only thing that says it opens. It is drawn as a
 * background image rather than a pseudo-element because a <select> cannot
 * carry one: the element is replaced, and ::after never renders inside it.
 *
 * The square is 34px on a 10px radius, which is --ne-radius-control drawn at
 * the size the arrow sits in. Black on cyan is 9:1.
 */
select.neda-cc__input,
.neda-form select,
.neda-select__button {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='10' fill='%230EC4C5'/%3E%3Cpath d='M11 14.5l6 6 6-6' fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    /* Follows the field down from 47px to 40px: a 34px square in a 40px box
       leaves 2.5px of air and reads as a lid rather than a button. 30px
       keeps the 5px margin the 34px square had at the old height. The SVG
       is unchanged -- its viewBox scales, so the radius scales with it. */
    background-position: right 5px center;
    background-size: 30px 30px;
    padding-inline-end: 46px;
}

/*
 * `background-position` has no logical form, so this is the one place in the
 * sheet that has to name a side. RTL is told separately rather than left to
 * inherit a left-to-right answer.
 */
[dir="rtl"] select.neda-cc__input,
[dir="rtl"] .neda-form select,
[dir="rtl"] .neda-select__button {
    background-position: left 5px center;
}

/* ---- the grant form is a column, not a wrapping row --------------------
 * Scoped to `form.neda-cc__form` on purpose. The "Add a course" row carries
 * the same class on a <div> and is meant to stay a compact inline row; a
 * class-only selector here would stack its button and its hint.
 */
.neda-admin form.neda-cc__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-inline-size: 520px;
    padding: 22px 24px;
}

.neda-admin form.neda-cc__form .neda-cc__label {
    margin-block: 18px 6px;
}

.neda-admin form.neda-cc__form > .neda-cc__label:first-of-type {
    margin-block-start: 0;
}

.neda-admin form.neda-cc__form .neda-cc__input {
    inline-size: 100%;
}

.neda-admin form.neda-cc__form .neda-cc__hint {
    margin-block-start: 6px;
}

.neda-admin form.neda-cc__form .neda-btn {
    justify-self: start;
    margin-block-start: 22px;
}

/* ---- text boxes: one focus ring, and nothing else ----------------------
 * The canonical geometry, established 2026-09-02: a solid 3px cherry ring
 * drawn 3px OUTSIDE the control, following its corner radius. The resting
 * border does not change and nothing else is added -- no halo, no tint, no
 * inner ring. This replaces the former border-plus-halo treatment, under
 * which the cyan border was the indicator.
 *
 * Drawn as two box-shadow layers rather than an outline. An outline squares
 * off a 10px corner in some engines and every field here carries one. The
 * FIRST layer is the 3px gap, so it takes the colour actually behind the
 * field; hard-coding it white would draw a white seam across a tinted band.
 * `--ne-field-surface` carries that colour, per surface.
 *
 * The selector is (0,3,0) deliberately. The universal ring in
 * neda-ecampus-ui/assets/neda-focus.css is `:root body :focus-visible` at
 * (0,2,1), and a rounded field has to out-rank it to replace that squared
 * outline with this one -- which is exactly what that file's own header
 * asks rounded fields to do. Do not lower this specificity, and do not
 * reach for !important in neda-focus.css instead.
 *
 * `:focus-visible`, never `:focus`. Every current engine treats a click into
 * a text box as focus-visible, so the pointer still draws the ring here
 * while a button correctly shows none.
 */
.neda-cc { --ne-field-surface: var(--ne-white); }

.neda-cc__form { --ne-field-surface: var(--ne-tint-lime); }
.neda-admin .neda-cc__form { --ne-field-surface: var(--ne-white); }

.neda-cc .neda-cc__input:focus-visible,
.neda-cc .neda-form input:focus-visible,
.neda-cc .neda-form textarea:focus-visible,
.neda-cc .neda-form select:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--ne-field-surface, var(--ne-white)),
        0 0 0 6px var(--ne-cherry);
}

/*
 * Forced colours replace authored backgrounds, which erases a box-shadow ring
 * outright -- and the rule above ends in `outline: none`, so without this a
 * field would show no focus at all in High Contrast. The system Highlight
 * colour is the correct one to restore, not cherry.
 */
@media (forced-colors: active) {
    .neda-cc .neda-cc__input:focus-visible,
    .neda-cc .neda-form input:focus-visible,
    .neda-cc .neda-form textarea:focus-visible,
    .neda-cc .neda-form select:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 3px !important;
    }
}

/* =========================================================================
   ADMIN AREA -- THE PAGE HEADER                             (user, 2026-09-02)

   A cyan wedge across the top right, and the page title in BLACK on white
   underneath it. The theme already prints that title in a band of its own
   directly above the content, so that band IS the header -- nothing is
   hidden and nothing draws a second h1.

   The colour question is settled the way the rest of the system settles it:
   cyan is a FILL, never something a reader has to look through. Black on
   #FFFFFF is 21:1. The white-on-cyan first draft measured 2.3:1.
   ========================================================================= */

body.neda-admin-page main > .wp-block-group:has(> .wp-block-post-title) {
    /* The wedge is positioned against this box, which the theme already
       renders full-bleed (`alignfull`), so `inset-inline-end: 0` really is
       the right-hand edge of the screen. */
    position: relative;

    /* Text-box 3, the pale band the front page alternates with white. The
       theme preset first, so a palette change in the Site Editor carries
       through; the literal is the same value as a fallback. */
    background-color: var(--wp--preset--color--custom-color-3, #F8F9EA) !important;

    /* Closes the header the same way the site header closes itself: one
       lime hairline, edge to edge. Same colour and same 1px as the rule
       under the main navigation, so the two read as one device bracketing
       this block rather than as two different ideas. */
    border-block-end: 1px solid #C4C40E;

    /* The title clears the wedge by construction rather than by a number
       somebody has to keep in step with it. */
    padding-block:
        calc(var(--neda-ah-wedge) + clamp(40px, 5vw, 72px))
        clamp(24px, 2.8vw, 40px) !important;

    /* Height of the wedge, and the horizontal run of its slanted edge. Equal,
       so the edge is 45 degrees at every width. */
    --neda-ah-wedge: clamp(64px, 7.5vw, 108px);
}

/*
 * The wedge. Decorative, so it is a pseudo-element with no text: nothing for
 * a screen reader to announce, and nothing to translate. In forced-colours
 * mode it drops out, which is correct -- it carries no meaning.
 *
 * NOT at `z-index: -1`. That trick is used elsewhere in this file to put a
 * band BEHIND its own content, and it would fail here for the reason recorded
 * in neda-content-page.css: a negative z-index cannot reach behind an opaque
 * ancestor, and this group paints an opaque white. Left in the normal
 * positioned layer it sits on top of that white, which is what it needs.
 */
body.neda-admin-page main > .wp-block-group:has(> .wp-block-post-title)::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 61%;
    block-size: var(--neda-ah-wedge);
    background-color: #0EC4C5;
    /* Square along the top and right, slanting away on the left: the bottom
       edge starts one wedge-height further in than the top edge does. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--neda-ah-wedge) 100%);
}

/*
 * The title itself is ordinary text on the content column. Widening the
 * theme's 720px measure to the wide size, still centred, is what puts it on
 * the same left edge as everything below it.
 *
 * `!important` throughout because the block editor writes size, weight and
 * alignment as INLINE styles plus a class on the element, and nothing else
 * can outrank an inline declaration.
 *
 * 36pt is the size asked for, written as points rather than converted, so the
 * number in the stylesheet is the number in the decision. It computes to 48px
 * and does not scale: at 320px, the narrowest width this site supports,
 * "Admin Area" still sets on one line inside the gutters.
 */
body.neda-admin-page .wp-block-post-title {
    /* On the content column, not the outer gutter: the same 1200px measure
       `.neda-cc` centres itself on, so the title and the first block below
       it share a left edge (user, 2026-09-03). Measured: both at 113px. */
    max-width: var(--wp--style--global--wide-size, 1200px) !important;
    margin-block: 0 !important;
    margin-inline: auto !important;
    color: #000000 !important;
    text-align: start !important;
    font-size: 36pt !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/*
 * Breathing room after the lime rule. The bridge zeroes the padding on the
 * content group for every bridge page (top of this file), which is right for
 * pages whose first section brings its own band -- but this page's first
 * block is usually a notice or the counters, and both were sitting directly
 * on the line. The gap goes on the sibling rather than under the header so
 * the rule stays the header's last pixel.
 */
body.neda-admin-page main > .wp-block-group:has(> .wp-block-post-title) + * {
    margin-block-start: clamp(24px, 3vw, 40px) !important;
}

/* =========================================================================
   ADMIN AREA -- THE LOG                                      (user, 2026-09-03)

   The one place a status pill is NOT purple. A log entry's level is its
   whole point, and three levels in one colour would put the reader back to
   parsing words in a list of a hundred. So: red, yellow, blue -- the brand's
   cherry, gold and blue -- each with the label colour that clears 4.5:1 at
   this size. White on cherry is 5.0:1. Black on gold is 11:1. Info is white
   on the brand blue one step deeper (#2469C4, 5.4:1), because white on
   #2F80ED itself is 3.9:1 and fails -- the label colour was asked for, so
   the fill moved to meet it rather than the other way round.
   ========================================================================= */

.neda-level--error   { background: var(--ne-cherry); color: var(--ne-white); }
.neda-level--warning { background: var(--ne-gold);   color: var(--ne-black); }
.neda-level--info    { background: var(--ne-blue-deep); color: var(--ne-white); }

/*
 * The `:not()` pair on every chip rule is specificity, not meaning: the
 * sheet's general link rule is `.neda-cc a:not(.neda-btn):not(.wp-block-
 * button__link)` at (0,3,1), and a chip at (0,2,1) lost to it -- the label
 * came out blue on the pale tint, 3.7:1, and failed. Matching its shape puts
 * the chip at (0,4,1).
 */
/*
 * The filter bar: one link per view, its count inside it. Links, so they
 * style like the site's chips rather than like buttons -- text-box 1 at rest,
 * cherry on hover like every other link here, and the current view in black
 * with a white label, which no other control on the page uses. Cherry text on
 * the pale tint would fail, so hover is a fill, not a colour change.
 */
.neda-log__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 0 18px;
}

.neda-cc a.neda-log__filter:not(.neda-btn):not(.wp-block-button__link),
.neda-cc a.neda-tabs__tab:not(.neda-btn):not(.wp-block-button__link) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--ne-radius-control);
    background: var(--ne-tint-cyan);
    color: var(--ne-black);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--ne-ease), color var(--ne-ease);
}

.neda-cc a.neda-log__filter:not(.neda-btn):not(.wp-block-button__link):hover,
.neda-cc a.neda-tabs__tab:not(.neda-btn):not(.wp-block-button__link):hover,
.neda-cc a.neda-log__filter:not(.neda-btn):not(.wp-block-button__link):focus-visible,
.neda-cc a.neda-tabs__tab:not(.neda-btn):not(.wp-block-button__link):focus-visible {
    background: var(--ne-cherry);
    color: var(--ne-white);
}

/*
 * The current view is text-box 3 -- and text-box 3 beside text-box 1 is a
 * 1.02:1 difference, which nobody can be asked to see. So the fill is not
 * doing the work on its own: a lime bar along the bottom edge of the chip is
 * the shape that says "this one" (user, 2026-09-03; it was a black underline
 * under the label for a day), and `aria-current` says it to a screen reader.
 * Drawn as an inset shadow, not a border: controls here carry no border, and
 * a shadow adds no height, so the bar changes nothing in the row.
 *
 * Measured: lime on the pale fill is 1.7:1. That is under the 3:1 a lone
 * indicator wants, which is why the bar is 4px rather than a hairline and why
 * the fill and aria-current stay -- three cues, not one.
 */
.neda-cc a.neda-log__filter:not(.neda-btn):not(.wp-block-button__link).is-current,
.neda-cc a.neda-tabs__tab:not(.neda-btn):not(.wp-block-button__link).is-current {
    background: var(--wp--preset--color--custom-color-3, #F8F9EA);
    color: var(--ne-black);
    text-decoration: none;
    box-shadow: inset 0 -4px 0 var(--ne-lime);
}

.neda-log__count {
    display: inline-block;
    min-inline-size: 1.6em;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--ne-black);
    font-size: 0.85em;
    text-align: center;
}

/* Focus sits outside the chip, on the band, where it is legible on any fill. */
.neda-cc a.neda-log__filter:not(.neda-btn):not(.wp-block-button__link):focus-visible,
.neda-cc a.neda-tabs__tab:not(.neda-btn):not(.wp-block-button__link):focus-visible {
    outline: 3px solid var(--ne-cherry);
    outline-offset: 3px;
}

/*
 * The fold. Three entries stay in view; the rest live inside a <details>
 * whose <summary> is the toggle. `column-reverse` puts that toggle UNDER the
 * entries it reveals, so "Show fewer" is where the reader is when they have
 * finished -- at the bottom -- rather than back at the top. A browser that
 * will not flex a <details> leaves the toggle above the entries, which still
 * works; it is only less convenient.
 */
.neda-log__more {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
    margin-block-start: 16px;
}

/* Dressed as the house button: lime, black label, 10px corners, no border,
   cherry on hover. The disclosure triangle goes -- the label says what the
   control does, and a marker beside a button reads as two controls. */
.neda-cc .neda-log__toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 40px;   /* follows .neda-btn down (owner, 2026-09-07) */
    list-style: none;
    background: var(--ne-lime);
    color: var(--ne-black);
    border: 0;
    border-radius: var(--ne-radius-control);
    padding: 11px 20px;   /* the standard button, as .neda-btn */
    font: inherit;
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ne-ease), color var(--ne-ease);
}

.neda-cc .neda-log__toggle::-webkit-details-marker { display: none; }
.neda-cc .neda-log__toggle::marker { content: ""; }

.neda-cc .neda-log__toggle:hover,
.neda-cc .neda-log__toggle:active {
    background: var(--ne-cherry);
    color: var(--ne-white);
}

.neda-cc .neda-log__toggle:focus-visible {
    outline: 3px solid var(--ne-cherry);
    outline-offset: 2px;
}

/* One label at a time: "Show N more" while closed, "Show fewer" while open. */
.neda-log__more:not([open]) .neda-log__when-open,
.neda-log__more[open] .neda-log__when-closed {
    display: none;
}

/* =========================================================================
   ADMIN AREA -- TABS, AND THE PEOPLE FILTER                  (user, 2026-09-03)

   The tab bar sits directly under the page title and shares every rule with
   the log's filter chips above (they are listed together there): text-box 1
   at rest, cherry on hover, and the current one on text-box 3 with a thick
   black underline, because the two tints are a 1.02:1 difference and the
   underline is the shape that says "this one". The link OUT to Neda Creator
   is the same shape with an arrow, so it reads as leaving.
   ========================================================================= */

.neda-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 0 clamp(20px, 2.5vw, 32px);
}

.neda-cc a.neda-tabs__tab:not(.neda-btn):not(.wp-block-button__link) {
    padding: 10px 18px;
    font-size: 16px;   /* 16, bold (user, 2026-09-03): 17 read as too big */
}

.neda-cc a.neda-tabs__tab--out:not(.neda-btn):not(.wp-block-button__link)::after {
    content: " \2197";   /* north-east arrow: a link that leaves the page */
}

/* The people filter: three fields and a button on one row where they fit,
   stacking where they do not. The lime form surface is the site's. */
.neda-people__filters {
    align-items: flex-end;
    margin-block-end: 18px;
}

.neda-people__field {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.neda-people__field .neda-cc__label {
    flex: initial;
}

.neda-people__field .neda-cc__input {
    flex: initial;
    inline-size: 100%;
}

.neda-people__pages {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-start: 16px;
}

/* Finances: each door is a card whose title is the link. */
#neda-finances a.neda-cc__course-title:not(.neda-btn):not(.wp-block-button__link) {
    color: var(--ne-black);
}

#neda-finances a.neda-cc__course-title:not(.neda-btn):not(.wp-block-button__link):hover,
#neda-finances a.neda-cc__course-title:not(.neda-btn):not(.wp-block-button__link):focus-visible {
    color: var(--ne-cherry);
}

/* The mark before a tab's label: 18px, on the label's baseline, in the
   label's colour (currentColor in the SVG), so nothing here has to know
   about hover or the current fill. `flex: none` so a long label wraps the
   words and never squeezes the mark. */
.neda-tabs__icon {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
}

/* =========================================================================
   USER MANAGEMENT -- FUNCTION PILLS, AND THE SELECT       (user, 2026-09-03)

   A person's functions were a purple pill beside a full-size cyan button,
   once per function, stacked -- three controls' worth of colour for one
   fact. Now each function is one pill: the label, and inside it a small
   round × that removes it. The pill is a status (purple, white label, like
   every status on the page); the × is a control (cherry on hover, like
   every control). The two are one object, so the row reads as "these are
   their functions", not as a row of buttons.
   ========================================================================= */

.neda-people__function {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: 8px;
    margin-block: 3px;
    padding: 4px 4px 4px 12px;
    border-radius: var(--ne-radius-control);
    /* One light tint per function (user, 2026-09-06), each with a BLACK
       label -- every tint is pale enough that black clears 15:1 and white
       would clear nothing. Learner is the default tint; the others follow
       by role slug. */
    background: #F1F3D6;   /* light lime -- Learner */
    color: var(--ne-black);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.neda-people__function-label {
    white-space: nowrap;
}

.neda-people__function--neda_course_cocreator { background: #FCEFC6; }   /* light golden yellow */
.neda-people__function--neda_course_creator   { background: #D9E8FC; }   /* light professional blue */
.neda-people__function--neda_admin            { background: #E5DEF0; }   /* light royal purple */
.neda-people__function--administrator         { background: #F9D9DE; }   /* light cherry red -- Super Admin */

/* The ×: a 24px round target -- WCAG's minimum -- white on the purple so it
   is plainly part of the pill, cherry on hover so it is plainly a control.
   Disabled, it fades rather than vanishes: the function is still there, it
   just cannot be removed from here, and the title says why. */
.neda-cc .neda-people__remove {
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);   /* on a light pill: a faint dark disc, black × */
    color: var(--ne-black);
    cursor: pointer;
    transition: background var(--ne-ease), color var(--ne-ease);
}

.neda-cc .neda-people__remove:hover,
.neda-cc .neda-people__remove:active {
    background: var(--ne-cherry);
    color: var(--ne-white);
}

.neda-cc .neda-people__remove:focus-visible {
    outline: 3px solid var(--ne-cherry);
    outline-offset: 2px;
}

.neda-cc .neda-people__remove:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.08);
}

/* ---- the select ---------------------------------------------------------
 * 10px corners, said explicitly, and the arrow square turns cherry with a
 * white chevron on hover -- the same answer every control on the page gives
 * to a pointer. The list that opens underneath is the operating system's
 * and cannot be styled from here; only a rebuilt control could do that.
 */
.neda-cc select.neda-cc__input,
.neda-cc .neda-form select,
.neda-cc .neda-select__button {
    border-radius: var(--ne-radius-control);
    cursor: pointer;
    transition: border-color var(--ne-ease), background-image var(--ne-ease);
}

.neda-cc select.neda-cc__input:hover,
.neda-cc .neda-form select:hover,
.neda-cc .neda-select__button:hover,
.neda-cc .neda-select__button[aria-expanded="true"] {
    border-color: var(--ne-cherry);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='10' fill='%23D7263D'/%3E%3Cpath d='M11 14.5l6 6 6-6' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The confirmation checkbox sat hard against the select above it. Room
   above it, and a little below before the button, so the three things the
   form asks -- who, what, and are you sure -- read as three things. */
.neda-cc .neda-cc__form .neda-cc__check {
    margin-block: 14px 6px;
}

/* The Neda Creator tab carries the product's own favicon file, not a drawn
   mark (user, 2026-09-03): the angular N on its black square, as the browser
   tab shows it. A 4px radius takes the hard corners off the square so it sits
   in the chip like the line icons beside it. */
.neda-tabs__icon--image {
    border-radius: 4px;
    object-fit: contain;
}

/* A tab's label is one flex item, whatever a translator does to the words
   inside it, so the row's 8px gap can only fall between icon, label and
   arrow -- never between two words of the label. */
.neda-tabs__label {
    white-space: nowrap;
}

/* =========================================================================
   THE NEDA SELECT                                          (user, 2026-09-03)

   The browser draws a <select>'s open list itself -- blue highlight, square
   corners, the system font -- and no stylesheet reaches it. neda-select.js
   keeps the native control in the form, unseen, and draws the one the reader
   uses: a button showing the choice (styled by the select rules above, arrow
   and all), and a list whose hovered or keyboard-focused row is cherry with
   a white label on 10px corners. The same answer every control here gives.
   The chosen row, when not the active one, sits on text-box 4 with a bold
   label -- the canonical "selected" of the design governance skill.
   ========================================================================= */

.neda-select {
    position: relative;
    flex: 1 1 280px;      /* the slot a .neda-cc__input took */
    inline-size: 100%;
}

.neda-people__field .neda-select { flex: initial; }

.neda-cc .neda-select__button {
    display: block;
    inline-size: 100%;
    text-align: start;
    cursor: pointer;
    font-weight: 400;
    line-height: 1.4;
}

.neda-cc .neda-select__button.is-placeholder {
    color: rgba(0, 0, 0, 0.72);
}

/* The native element: present for the form and for validation, invisible,
   and never in the way of a pointer. Not display:none -- a browser will not
   report a hidden control's validity, and the message would be lost. */
/* `.neda-select` first for specificity: the `.neda-cc__input` rules that
   size a select would otherwise keep this one at full width. */
.neda-select .neda-select__native {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    /* !important against the field rules, which size a select to its
       slot; a hidden element must never take the slot's width. */
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;   /* its own padding set a 68px floor under the width */
    opacity: 0;
    pointer-events: none;
}

.neda-select__list {
    position: absolute;
    z-index: 60;
    inset-inline: 0;
    inset-block-start: calc(100% + 6px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--ne-white);
    border-radius: var(--ne-radius-control);
    box-shadow: var(--ne-shadow-md);
    max-block-size: 320px;
    overflow: auto;
}

/* No ring on the list: when it holds focus, the cherry active row IS the
   focus indicator, as in an open native select. `.neda-cc` first so this
   outranks the universal focus rule in neda-focus.css (0,2,1). */
.neda-cc .neda-select__list:focus-visible {
    outline: none;
}

.neda-select__option {
    padding: 7px 14px;   /* was 10px: a little shorter (user, 2026-09-06) */
    border-radius: var(--ne-radius-control);
    color: var(--ne-black);
    cursor: pointer;
    transition: background var(--ne-ease), color var(--ne-ease);
}

.neda-select__option.is-selected {
    background: var(--wp--preset--color--custom-color-4, #F1F3D6);
    font-weight: 700;
}

.neda-select__option.is-active,
.neda-select__option.is-active.is-selected {
    background: var(--ne-cherry);
    color: var(--ne-white);
}

.neda-select__option[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Forced colours drop shadows and fills, so the panel and the states are
   said with borders and system colours instead. */
@media (forced-colors: active) {
    .neda-select__list { border: 1px solid CanvasText; }
    .neda-select__option[aria-selected="true"] { border: 1px solid CanvasText; }
    .neda-select__option[aria-disabled="true"] { color: GrayText; opacity: 1; }
    .neda-select__option.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* In the price-and-currency pair the currency keeps its natural width, as
   the native select did, so the two stay on one line at 320px. */
.neda-form__pair .neda-select {
    flex: 0 0 auto;
    inline-size: auto;
}

/* =========================================================================
   A SPACE'S OWN FACE                                        (user, 2026-09-06)
   The name, sentence, cover and icon a Studio or an Academy shows on the
   front page, edited from Categories and Courses. Folded shut: a creator
   with three spaces sees three spaces, not three open forms.
   ========================================================================= */

.neda-space-profile { margin-block-start: 16px; }

.neda-cc .neda-space-profile > summary {
    display: inline-flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
}
.neda-cc .neda-space-profile > summary::-webkit-details-marker { display: none; }
.neda-cc .neda-space-profile > summary::marker { content: ""; }
.neda-cc .neda-space-profile > summary:hover,
.neda-cc .neda-space-profile > summary:active {
    background: var(--ne-cherry);
    color: var(--ne-white);
}
.neda-cc .neda-space-profile > summary:focus-visible {
    outline: 3px solid var(--ne-cherry);
    outline-offset: 2px;
}

.neda-space-profile__form { margin-block-start: 14px; }

/* The picture in use, beside the field that would replace it. */
.neda-space-profile__current {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}
.neda-space-profile__current img {
    inline-size: 72px;
    block-size: 72px;
    object-fit: cover;
    border-radius: var(--ne-radius-control);
}

.neda-space-profile__form textarea.neda-cc__input {
    flex: 1 0 100%;
    resize: vertical;
    min-block-size: 84px;
    line-height: 1.5;
}

.neda-space-profile__form .neda-cc__hint { flex: 1 0 100%; margin-block: -4px 4px; }

/* One row per space in the staff list: its name, and its editor beneath. */
.neda-space-profile__row {
    padding-block: 14px;
    border-block-end: 1px solid rgba(0, 0, 0, 0.12);
}
.neda-space-profile__row:last-child { border-block-end: 0; }
.neda-space-profile__name { margin: 0; font-size: 17px; font-weight: 700; }
.neda-space-profile__row .neda-space-profile { margin-block-start: 8px; }

/* ---- form rhythm: labels sit on their fields ---------------------------
 * Owner, 2026-09-07: "too much space between boxes and titles."
 *
 * The people filter measured 12px from a label to its own field and 18px to
 * the next one -- close enough that the label read as floating between two
 * fields rather than belonging to the one under it. The 12px was an
 * accident: `.neda-people__field` is a flex column with `gap: 6px` AND its
 * label carried the admin form's `margin-block-end: 6px`, so the two added
 * up. A label should sit nearer its own control than the control above it,
 * which is the whole of what makes a stacked form readable without lines.
 */
.neda-admin form.neda-cc__form .neda-people__field { gap: 4px; }

.neda-admin form.neda-cc__form .neda-people__field .neda-cc__label {
    margin-block: 14px 0;
}

/* The first label has no field above it to be separated from; the form's own
   padding is already doing that job. The `:first-of-type` rule further up
   cannot reach this one -- there the label is a direct child of the form,
   here it is wrapped in the field. */
.neda-admin form.neda-cc__form .neda-people__field:first-of-type .neda-cc__label {
    margin-block-start: 0;
}

/* ---- the assign form is a separate card ---------------------------------
 * Owner, 2026-09-07: "these two boxes are too attached to each other."
 * The people list and the form that adds to it are two different things and
 * were sharing an edge -- the list's card bottom and the form's card top met
 * at 0px, so they read as one panel with a rule through it.
 */
.neda-people__assign { margin-block-start: 22px; }

/* ---- what each function is: a list, not a paragraph ---------------------
 * Owner, 2026-09-07: 14px, and one bullet per function. The marker sits in
 * the padding so the wrapped second line of the Co-creator entry lines up
 * under its own first line rather than under the bullet.
 */
.neda-cc__hint--functions {
    margin-block: 8px 0;
    padding-inline-start: 20px;
    list-style: disc;
}

.neda-cc__hint--functions li { margin-block: 4px; }

/* 14px flat, not a rem fraction: the root size differs between the pages
   this sheet is loaded on, and the owner asked for a size, not a ratio. */
.neda-admin .neda-cc__hint,
.neda-cc__hint--functions,
.neda-cc__hint--functions li {
    font-size: 14px;
    line-height: 1.55;
}

/* ---- an open list reads at the size of the account menu -----------------
 * Owner, 2026-09-07: the dropdown text is too big; match the user menu.
 * That menu's rows are `.neda-user-item` in neda-ecampus-ui's header sheet,
 * at 15px, so 15px is what this is -- a measured reference, not a taste.
 *
 * `.neda-admin` is on the front of the selector because it has to be. The
 * options are <li>, and `.neda-admin li` sets 17px at (0,1,1); a bare
 * `.neda-select__option` is (0,1,0) and loses to it, so the list was
 * rendering LARGER than the field that opened it. That is the whole defect.
 */
.neda-admin .neda-select__option {
    font-size: 15px;
    line-height: 1.5;
}

/* Same reason: `.neda-admin li` would otherwise carry the function list back
   up to 17px on any sheet order but this one. */
.neda-admin .neda-cc__hint--functions,
.neda-admin .neda-cc__hint--functions li {
    font-size: 14px;
    line-height: 1.55;
}

/* ---- one field height, declared rather than emergent --------------------
 * A text field and the select beside it were coming out 37px and 40px: the
 * select's `line-height: 1.4` is taller than the line box a bare <input>
 * makes, and with the height left to fall out of padding + line-height the
 * two drifted apart. Three pixels is small and perfectly visible when the
 * controls are stacked one above the other in the same form.
 *
 * So the standard height is stated once, and both controls take it. The
 * textarea rules further up are more specific and keep their own heights.
 */
.neda-admin .neda-cc__input,
.neda-admin .neda-select__button {
    min-block-size: 40px;
    line-height: 1.4;
}

/* =========================================================================
   CREATORS' CORNER, 2026-09-07 REDESIGN
   Built from the owner's mock, through the design-governance and
   accessibility reviews run before a line of this was written. Where the
   two disagreed with the mock, the review won and the reason is recorded
   at the rule. Scoped to `.neda-cc-section` and to new selectors only: the
   Admin Area shares this sheet and must not move.

   GROUNDS. The mock carried four (pale blue, lavender, pale cyan and a
   gradient) plus five accent hues, which is at least nine colours on one
   page; the front page is already at its ceiling with seven and separates
   cards by elevation on white rather than by hue. Three grounds here,
   alternating, with the one lavender spent on the band that earns it.
   No gradient: no gradient token exists anywhere in the estate.
   ========================================================================= */

/* ON `::before`, NOT ON THE ELEMENT. `.neda-cc-section` paints its band with
   a full-bleed `::before` at `z-index: -1` -- that is how a band reaches the
   window edge from inside a constrained column. A negative-z-index child
   paints ABOVE its parent's own background and below its content, so a
   colour set on the element itself is covered by that white pseudo-element
   and never seen. Every band on this page rendered white from 1.77.0 until
   this was found; the computed style on the element said otherwise, which is
   exactly why it survived a measurement pass. */
.neda-cc-section.neda-cc-band--white::before    { background: var(--ne-white); }
.neda-cc-section.neda-cc-band--tint1::before    { background: #ECF9F8; }   /* black 19.5:1 */
.neda-cc-section.neda-cc-band--lavender::before { background: #DCD5E7; }   /* black 14.7:1 */
/* Professional Blue's light companion (owner, 2026-09-07). Black on it is
   16.3:1 and the 72% grey lede 8.1:1. The eyebrow's cherry DASH clears the
   3:1 a graphical object needs; cherry as INK would be 3.8:1 here and does
   not appear -- which is the whole reason that eyebrow is a mark and not
   coloured words. */
.neda-cc-section.neda-cc-band--blue::before     { background: #D2E4FE; }

/* Visually hidden, still read. `.screen-reader-text` is NOT defined plugin-wide
   -- the only definition is in course-card.css, scoped to one component -- so
   hidden labels here need their own utility rather than a borrowed one. */
.neda-vh {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* ---- the eyebrow: a cherry MARK, never cherry ink ----------------------
 * The mock set the eyebrows in cherry. Titles and text are always black --
 * a brand-coloured lead-in is out -- and cherry is the focus and error
 * colour besides. Worse, cherry ink fails on two of this page's grounds:
 * 4.38:1 on tint 4 and 3.48:1 on the lavender, against a 4.5:1 need. So
 * the colour becomes a 28x3px dash and the words stay black at 21:1.
 * Capitals come from `text-transform`, never from the source string: a
 * literal all-caps string is spelled out letter by letter by some screen
 * readers and cannot be translated properly.
 */
.neda-cc-section .neda-cc-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;   /* tracking on an eyebrow is not heading tracking */
    text-transform: uppercase;
    color: var(--ne-black);
}
.neda-cc-section .neda-cc-eyebrow::before {
    content: "";
    flex: none;
    inline-size: 28px;
    block-size: 3px;
    border-radius: 2px;
    background: var(--ne-cherry);
}

.neda-cc-section .neda-cc-h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--ne-black);
}

.neda-cc-section .neda-cc-lede {
    margin: 0 0 clamp(20px, 2.4vw, 28px);
    font-size: 16px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.72);   /* >= 6.4:1 on every ground here */
    max-inline-size: 76ch;
}

/* A quiet link, because the house blue cannot carry one here.
   `#2F80ED` bold at 15px is 3.87:1 and needs 4.5:1 -- the sheet's own
   justification for unlinked blue reads "15pt", but the declared size is
   15px, and 15px bold is normal text, not large. Black with a cherry
   hover instead: 21:1 at rest, and cherry on these grounds clears 4.5:1
   only on white and tint 1, which is where these two links live. */
/* `!important` on the colour, and it is not laziness. Anchors on this page
   come out blue whatever this rule says: the theme colours links from its own
   sheet and wins, which is why the course-type titles were blue for as long
   as they were anchors and turned black the moment they stopped being one.
   Specificity was already (0,2,1) here and still lost, so weight is what is
   left. Black at 21:1, cherry on hover. */
.neda-cc-section a.neda-cc-quiet-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--ne-black) !important;
    text-decoration: none;
    transition: color var(--ne-ease);
}
.neda-cc-section a.neda-cc-quiet-link::after {
    content: "";
    inline-size: 8px; block-size: 8px;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
}
[dir="rtl"] .neda-cc-section a.neda-cc-quiet-link::after { transform: rotate(225deg); }
.neda-cc-section a.neda-cc-quiet-link:hover,
.neda-cc-section a.neda-cc-quiet-link:focus-visible { color: var(--ne-cherry) !important; }

/* ---- 1. the hero ------------------------------------------------------- */

.neda-cc-top__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

.neda-cc-top__title {
    margin: 0 0 12px;
    font-size: clamp(30px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--ne-black);
}

.neda-cc-top__lede {
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.72);
    max-inline-size: 48ch;
}

.neda-cc-top__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 0 0 14px;
}

/* "See how it works" is a CYAN BUTTON (owner, 2026-09-07), not a text link
   with a plate beside it. Cyan is the estate's secondary action and it
   already has a defined pair -- `.neda-btn--quiet`: cyan fill, black label
   at 9:1, cherry with a white label on hover. So this reuses that rather
   than inventing a second cyan button, and the markup carries both classes.

   It still points at the steps section, NOT at a video. A play button that
   opens nothing is worse than none, and a real video would bring captions,
   an audio description and focus management with it. One link with the
   glyph inside it: one tab stop, and the visible words are the name. */
.neda-cc-section a.neda-cc-top__how {
    gap: 10px;
    text-decoration: none;
}

/* Inside a filled button the glyph needs no plate of its own -- the button
   IS the plate. It takes the label's colour, so it turns white with the
   label when the button goes cherry, rather than staying black on cherry. */
.neda-cc-top__play {
    flex: none;
    inline-size: 0; block-size: 0;
    border-block-start: 6px solid transparent;
    border-block-end: 6px solid transparent;
    border-inline-start: 10px solid currentColor;
}
[dir="rtl"] .neda-cc-top__play { transform: scaleX(-1); }

.neda-cc-top__note {
    margin: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.72);
}

.neda-cc-top__art { position: relative; }

/* THE ARTWORK IS A CARD THAT STANDS OFF THE BAND (owner, 2026-09-07,
 * reversing the sink of 1.81.0: light professional blue behind it, and the
 * card lifted in 3D).
 *
 * Two shadow layers, not one, and that is the whole of why it reads as
 * height rather than as blur: the tight 3px layer is the contact shadow
 * where the card meets the band, and the wide layer with a negative spread
 * is the light falling away from it. A single large soft shadow makes an
 * object look out of focus; a contact shadow plus a cast shadow makes it
 * look lifted.
 *
 * The edge mask from 1.81.0 is gone with the sink it served -- a card has an
 * edge, and a faded one would undo the lift. The corner radius comes back
 * for the same reason.
 */
.neda-cc-top__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--ne-radius-card);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.10),
        0 22px 44px -14px rgba(0, 0, 0, 0.28);
}

/* Shadows are not painted in forced colours, so the card would lose its
   edge entirely. A real border stands in for the lift. */
@media (forced-colors: active) {
    .neda-cc-top__img { border: 1px solid CanvasText; }
}

/* The markup's own "Neda Creator included" badge is GONE (owner supplied the
   hero artwork, 2026-09-07). The artwork carries that badge inside it, and
   two of them stacked in the same corner. The words are not lost: they are
   the closing sentence of the picture's alt text, which is where every other
   word baked into that artwork is carried too. */

/* ---- 2. the feature strip --------------------------------------------- */

/* THE STRIP RIDES UP INTO THE BAND ABOVE (owner, 2026-09-07), on light lime,
 * lifted in 3D like the hero card.
 *
 * The lift is one number in one place because it cannot be computed: a
 * percentage margin resolves against WIDTH, not height, and a transform
 * would move the picture without moving the space it occupies. 56px is half
 * the strip's measured height at desktop, and it lands inside the hero's own
 * 64px bottom padding -- so the strip overlaps the band's colour and never
 * the artwork. Change this one value to change the overlap.
 *
 * It only applies where the strip is a single row. Below 1024px the strip
 * wraps to two rows and then four; half of THAT is taller than the padding
 * it would rise into, and it would sit on top of the picture. So the lift
 * is switched off there and the strip simply follows the band.
 */
/* The strip is a bar, not a section, so it does not need a section's padding
   underneath it. Measured 158px between the bar and the next eyebrow: 64px of
   the strip band's own bottom padding, 30px of the theme's gap between two
   groups, and 64px of the next band's top padding -- three spacings stacked
   for one gap. The strip band's is the redundant one and it goes; the next
   band keeps its own, which is the rhythm every other band on the page uses.
   158px becomes 94px.

   Zero and not a token amount: both bands are white here, so the bar's cast
   shadow spills across the join with nothing to give it away. */
.neda-cc-stripband {
    padding-block-start: 0 !important;
    /* 32px, not 0, now that this band is blue (owner, 2026-09-07). The bar's
       cast shadow reaches about 30px below it -- 22px of offset plus half of
       a 44px blur, less 14px of negative spread -- and the whole point of
       the blue is that the shadow falls on it rather than on white. Zero
       here would have moved the complaint down a band rather than fixing it. */
    padding-block-end: 32px !important;
}

/* Blue has to meet blue. The theme puts a 30px gap between two sibling
   groups, and between the hero and this band that gap shows the page's own
   white -- a white stripe across the middle of what is meant to read as one
   blue field. It goes, on both sides: above so the two blues join, below so
   removing it keeps the gap to the next section at the 96px the owner asked
   for rather than adding to it. */
body.neda-bridge-page .neda-cc-stripband,
body.neda-bridge-page .neda-cc-stripband + .neda-cc-section {
    margin-block-start: 0;
}

.neda-cc-strip {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 20px 8px;
    background: #F1F3D6;   /* light lime; black 18.5:1, the 72% grey 8.7:1 */
    border-radius: var(--ne-radius-card);
    /* Two layers, as on the hero card: the tight one is contact, the wide
       one with negative spread is the cast. One shadow reads as blur. */
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.10),
        0 22px 44px -14px rgba(0, 0, 0, 0.28);
}

/* NO OVERLAP. The strip was lifted 56px into the hero in 1.84.0-1.86.0 and
   the owner has taken it back out (2026-09-07): the bar sits below the band
   above it, and the hero keeps its full depth.

   Nothing replaces the rule -- the band returns to the theme's own 30px gap
   between two sibling groups, which is what it had before the lift. The
   strip keeps everything else it gained on the way: the light lime, the
   two-layer shadow, the drawn icons and the new copy. */

/* On the lime card the plates go white. They were tint 1, which is a
   neighbouring pale and turns to mud on this ground. Nothing is read from
   the plate -- the glyph on it is black at 18.5:1 either way -- so it is
   free to be quiet. */
.neda-cc-strip .neda-cc-plate { background: var(--ne-white); }

/* A hairline between the items, not a border round each: a card carries no
   border, and these are one card's four compartments. */
.neda-cc-strip__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 18px;
    border-inline-start: 1px solid rgba(0, 0, 0, 0.10);
}
.neda-cc-strip__item:first-child { border-inline-start: 0; }

.neda-cc-strip__words { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.neda-cc-strip__title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.neda-cc-strip__sub   { font-size: 14px; line-height: 1.4; color: rgba(0, 0, 0, 0.72); }

/* One plate treatment four times, on the tint. The mock filled four discs
   solid lime, cyan, purple and cherry: chips and step markers take their
   background from the text-box tints rather than a solid brand fill, and
   nothing is cherry at rest. The glyph is black, so it is the glyph that
   is read and not the colour. */
.neda-cc-plate {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--ne-radius-control);
    background: #ECF9F8;
}
/* Real drawn icons, not clip-path silhouettes (owner, 2026-09-07: nicer
   icons). The four shapes here were polygons cut out of a solid square, and
   at 18px a house came out as a bracket and two people as a pair of blobs --
   a clip-path can only subtract, so it cannot draw a line.

   Inline SVG strokes instead, in `currentColor`. That also survives forced
   colours, where a masked or background-drawn glyph is simply erased. */
.neda-cc-plate svg {
    inline-size: 21px;
    block-size: 21px;
    color: var(--ne-black);   /* 18.5:1 on the light-lime card */
}

/* ---- 3. three steps ---------------------------------------------------- */

.neda-cc-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    margin: 0;
    padding: 0;
    counter-reset: none;
}

/* The card, on a WHITE band (owner, 2026-09-08: white background only). The
 * mock put this row on a pale grey-blue ground with a decorative circle
 * behind it; none of that is here. What separates a card from the band is
 * elevation, the same as everywhere else on the estate -- so the shadow is
 * doing real work rather than decorating, and it is the two-layer kind:
 * a tight contact layer and a wide cast layer.
 *
 * NO COLOURED STRIP ACROSS THE TOP. The mock draws a lime, purple and cyan
 * bar over each card's top edge with the number chip straddling it. The
 * owner asked for that left out, so the card starts at its own corner and
 * the number sits inside it.
 */
.neda-cc-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: var(--ne-white);
    border-radius: var(--ne-radius-card);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 14px 30px -12px rgba(0, 0, 0, 0.18);
    transition: transform var(--ne-ease), box-shadow var(--ne-ease);
}

/* Zoom on hover (owner). The card holds no link, so this is presentation
   only -- it promises nothing clickable. */
.neda-cc-step:hover {
    transform: scale(1.03);
    /* Above its neighbours while it is up. Cards paint in DOM order, so
       without this the card to the right covers the hovered card's own
       shadow and half its grown edge. */
    z-index: 1;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.10),
        0 22px 44px -14px rgba(0, 0, 0, 0.24);
}

/* The dotted connector the mock drew between the cards. Decorative -- the
   numbers and the reading order already carry the sequence -- so it is a
   pseudo-element with no accessibility-tree entry at all, and it is drawn
   with a border rather than a masked background so it survives forced
   colours. It disappears the moment the row stops being a row: an arrow
   pointing at nothing is worse than no arrow. */
.neda-cc-step + .neda-cc-step::before {
    content: "";
    position: absolute;
    inset-block-start: 46px;
    inset-inline-start: calc(clamp(18px, 2.4vw, 28px) * -1);
    inline-size: clamp(18px, 2.4vw, 28px);
    border-block-start: 2px dotted rgba(0, 0, 0, 0.24);
}

.neda-cc-num {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--ne-radius-control);
    background: #ECF9F8;
    font-size: 14px;
    font-weight: 700;
    color: var(--ne-black);
}

/* The illustration sits in a framed panel, as in the mock: a hairline and a
   very light ground, so the artwork's own white does not bleed into the
   card's white and leave the picture floating with no edge. `aspect-ratio`
   with `object-fit` rather than `height: auto`, so three illustrations of
   slightly different sizes cannot give three different card heights -- the
   published files are 1280x800, and 8:5 is that ratio stated rather than
   assumed. */
.neda-cc-step__img {
    display: block;
    inline-size: 100%;
    /* `block-size: auto` is REQUIRED alongside the ratio, not tidy-up. The
       markup carries `height="800"`, which is a presentational hint and acts
       as a used height; `aspect-ratio` only takes over when a dimension is
       auto. Without this line the pictures rendered 292x800 -- the width from
       the column, the height from the attribute, and the ratio ignored. */
    block-size: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    background: #FBFCFE;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--ne-radius-control);
}

.neda-cc-step__title { margin: 4px 0 0; font-size: 19px; font-weight: 700; letter-spacing: 0; }
.neda-cc-step__body  { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, 0.72); }

/* ---- 4. the five course experiences ----------------------------------- */

.neda-cc-types {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
}

/* THE CARD IS NOT A LINK ANY MORE (owner, 2026-09-08: a "Learn more" button).
 *
 * It was a whole-card link with the title inside it and an arrow drawn as a
 * pseudo-element. That pattern is exactly the one the accessibility review
 * said must NOT be used on a card carrying its own button: the overlay is
 * absolutely positioned across the whole card and swallows every other
 * target in it, so the button would have been unclickable. Title is plain
 * text now, and the single way in is the button -- the same rule the front
 * page's course cards already follow.
 *
 * That also settles the blue titles. They were blue because they were links;
 * nothing on this page ever asked for a coloured heading.
 *
 * Same card treatment as the three steps above, as asked: white, two shadow
 * layers, and a 1.03 zoom on hover. No tint on hover and no cherry text --
 * hover belongs to the button, which fills cherry with a white label.
 */
.neda-cc-type {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 20px;
    background: var(--ne-white);
    border-radius: var(--ne-radius-card);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 14px 30px -12px rgba(0, 0, 0, 0.18);
    transition: transform var(--ne-ease), box-shadow var(--ne-ease);
}

.neda-cc-type:hover {
    transform: scale(1.03);
    z-index: 1;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.10),
        0 22px 44px -14px rgba(0, 0, 0, 0.24);
}

/* Two thirds of the card, centred. The files are square, so the ratio is
   stated and `block-size: auto` goes with it -- the markup carries
   `height="1254"`, which acts as a used height and would otherwise win, the
   same trap the step illustrations fell into. `inline-size` also has to beat
   the older `.neda-cc-type > *` rule further up, which sets width: 100% on
   every child of a card with this class. */
.neda-cc-type__art {
    /* Two thirds of the CARD, which is not the same as `66%`. A percentage
       resolves against the containing block -- the card's content box, 40px
       narrower than the card itself because of its 20px inline padding -- so
       a plain 66% measured 53% of the card. The padding is a constant, so
       adding two thirds of it back is exact at every card width:
       0.66 x (content + 40) = 66% + 26.4px. */
    inline-size: calc(66% + 26px);
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
    align-self: center;
    margin: 2px 0 4px;
    background: #FBFCFE;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--ne-radius-control);
}

.neda-cc-type__name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ne-black);
}

.neda-cc-type__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.72);
}

/* Pinned to the foot so five buttons line up across a row whose descriptions
   run to different lengths. */
.neda-cc-type .neda-cc-type__btn {
    margin-block-start: auto;
    align-self: flex-start;
}

/* The "Coming soon" chip is gone (owner, 2026-09-08) and its rule with it,
   rather than being left behind styling nothing. The hidden "— coming soon"
   that rode inside the Quest Lab link went at the same time and for the same
   reason: it existed so that somebody tabbing card to card learned what the
   chip told everyone else. With the chip gone it would have been the only
   place that claim was made, telling screen-reader users something no other
   reader is told about a state the page no longer shows. */

/* ---- 5. the packages --------------------------------------------------- */

/* One column now, not a headline with a note pushed to the far end. The
   section leads with a promise and then explains it, so the four lines stack
   and read in order. */
.neda-cc-packhead { margin-block-end: 22px; }
.neda-cc-packhead .neda-cc-h2 { margin-block-end: 6px; }
.neda-cc-packhead__sub {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ne-black);
}
.neda-cc-packhead .neda-cc-lede { margin-block-end: 0; }

/* The mock's pale-yellow bar. Gold is the warning colour and nothing is
   wrong here, so this is the house "nothing is wrong" notice instead:
   white, a lime spine, black ink. */
.neda-cc-section .neda-cc-included {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 22px;
    padding: 14px 18px;
    background: var(--ne-white);
    border-inline-start: 4px solid var(--ne-lime);
    border-radius: var(--ne-radius-control);
    box-shadow: var(--ne-shadow-sm);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ne-black);
}
.neda-cc-included__mark {
    flex: none;
    margin-block-start: 3px;
    inline-size: 16px; block-size: 16px;
    background: var(--ne-black);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.neda-cc-packs {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.neda-cc-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 20px 20px;
    background: var(--ne-white);
    border-radius: var(--ne-radius-card);
    box-shadow: var(--ne-shadow-sm);
}

/* ONE LIGHT SECONDARY PER CARD (owner, 2026-09-08). Neda's two primaries are
   Lime and Cyan -- the logo's own colours -- so the four secondaries are
   Professional Blue, Royal Purple, Golden Yellow and Cherry Red, and each
   card takes that colour's light companion. Black on all four is well clear:
   16.3:1 on the blue, 14.7 on the purple, 18.6 on the gold, 15.5 on the
   cherry, and the 72% grey body text stays above 6:1 on every one.

   Cherry's light companion is used here as a CARD ground and not as a
   warning. That works only because nothing on this page uses solid cherry as
   a fill -- cherry is the focus ring and the error colour, and those are both
   the strong tone, not this one. */
.neda-cc-pack--blue   { background: #D2E4FE; }
.neda-cc-pack--purple { background: #DCD5E7; }
.neda-cc-pack--gold   { background: #FDF0D6; }
.neda-cc-pack--cherry { background: #FDD4D2; }

/* The mock marked the recommended card with a cyan BORDER. A card carries
   no border -- not on hover, not when featured, not to mark a recommended
   option -- so the distinction is elevation and scale, which is what the
   estate uses everywhere else, plus the tab. The tab is not the only
   signal either: a hidden "Most popular" text node sits beside it, so the
   meaning does not travel on colour and position alone. */
.neda-cc-pack--featured {
    box-shadow: var(--ne-shadow-md);
    transform: scale(1.02);
    z-index: 1;
}

/* On the inline START (owner, 2026-09-08), opposite the artwork, which moved
   to the end in the same change -- the two were stacking in the same corner.
   The radii swap sides with it: the outer corner follows the card's, the
   inner one is the control radius. */
.neda-cc-tab {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 5px 12px;
    border-start-start-radius: var(--ne-radius-card);
    border-end-end-radius: var(--ne-radius-control);
    background: var(--ne-cyan);
    font-size: 13px;
    font-weight: 700;
    color: var(--ne-black);   /* black on cyan is 9:1; white on cyan is 2.3:1 */
}

/* A QUARTER OF THE CARD, and the white ground taken out of it.
 *
 * The published files are JPEG, which has no alpha channel -- "transparent
 * background" is not something the asset can carry, so it has to be done at
 * paint time. `mix-blend-mode: multiply` does it exactly: white multiplied by
 * the card is the card, so the surround disappears, while the line art (all
 * of it darker than the tint) stays. The artwork picks up a little of the
 * card's hue as a result, which on these pale grounds reads as belonging
 * rather than as a tint.
 *
 * Same padding correction as the type cards: a percentage resolves against
 * the content box, 40px narrower than the card, so a quarter of the CARD is
 * 25% + a quarter of the padding.
 */
.neda-cc-pack__art {
    inline-size: calc(25% + 10px);
    block-size: auto;
    /* 4:3, not the file's square (owner, 2026-09-08: less space between the
       picture and the title). Most of that gap was never CSS -- the building
       sits in the middle of a square canvas with its own whitespace above and
       below, so trimming margins alone would barely have moved it. A centre
       crop at 4:3 takes that whitespace off and leaves all four buildings
       whole; checked against each of the four before shipping, since the
       tallest of them is the one at risk. Width is untouched, so it is still
       a quarter of the card. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Facing right, because the buildings face left: the artwork now looks
       into the card rather than off its edge. `flex-end` and not `right`, so
       it mirrors with the text direction. */
    align-self: flex-end;
    margin-block-end: 0;
    mix-blend-mode: multiply;
}

/* Multiply is a paint effect and forced colours does not run it, which would
   put a white square on a system-coloured card. The picture is decorative,
   so it goes rather than being left wrong. */
@media (forced-colors: active) {
    .neda-cc-pack__art { display: none; }
}

.neda-cc-pack__name  { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0; color: rgba(0, 0, 0, 0.72); }
/* The sentence under the name: who the package is for. */
.neda-cc-pack__for   { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: rgba(0, 0, 0, 0.72); }
/* The mock set this line in the card's accent colour. Black: a title is
   never brand-coloured, and the colour is already carried by the icon. */
.neda-cc-pack__seats { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--ne-black); }
/* Black and bold, because it is a price now rather than a promise of one
   (owner published the prices 2026-09-07). Grey at 72% was right while the
   line read "Pricing to be announced" and is wrong for a figure someone is
   meant to compare across four cards. */
.neda-cc-pack__price { margin: 2px 0 12px; font-size: 15px; color: rgba(0, 0, 0, 0.72); }
.neda-cc-pack__price strong { font-size: 19px; color: var(--ne-black); }

.neda-cc-pack__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }

/* "Included in your package": a label over the second list, not a heading.
   It is not an <h4> because these cards already carry an <h3> and the four
   included lines are the same four on every card -- four more headings in
   the outline would say there are four more sections here, and there are
   not. A hairline above it does the separating instead. */
.neda-cc-pack__incl {
    margin: 2px 0 8px;
    padding-block-start: 12px;
    border-block-start: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.72);
}
.neda-cc-pack__list li {
    position: relative;
    padding-inline-start: 26px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ne-black);
}
/* A black tick, not a green one: green is not in the palette, and a lime
   tick is 1.87:1 on white -- a graphical object that has to be seen needs
   3:1. Border-drawn, so it survives forced colours.
 *
 * PHYSICAL borders, not logical, and that is the whole point (owner,
 * 2026-09-09: the ticks look wrong in Arabic). A tick is a SYMBOL, not a
 * directional glyph -- it means the same thing and looks the same in every
 * language, exactly like a full stop. Built from `border-inline-end` it was
 * half-mirrored in RTL: the inline border swapped to the left while the
 * block border stayed at the bottom, so the corner rotated into a chevron
 * instead of staying a tick. `border-right` and `border-bottom` cannot flip,
 * so one tick serves every language.
 *
 * The position still uses `inset-inline-start`, which SHOULD mirror -- the
 * mark belongs at the start of its line in both directions. Only the shape
 * is frozen, never the placement. */
.neda-cc-pack__list li::before {
    content: "";
    position: absolute;
    inset-block-start: 4px;
    inset-inline-start: 4px;
    inline-size: 6px; block-size: 11px;
    border-right: 2px solid var(--ne-black);
    border-bottom: 2px solid var(--ne-black);
    transform: rotate(45deg);
}

/* `margin-block-start: auto` was on the "Not yet on sale" line, which the
   published prices removed. Without it the button rides up under whichever
   checklist happens to be shortest, and the four buttons stop lining up --
   the owner asked for a card button to hold one position, so the auto margin
   moves onto the button that was relying on it. */
.neda-cc-pack .neda-cc-pack__btn {
    align-self: stretch;
    justify-content: center;
    margin-block-start: auto;
}

/* The closing call, designed rather than trailing off the bottom of the row
   as a sentence with a link in it (owner, 2026-09-08). A centred panel on
   tint 1, the words above and a real button under them -- which also takes
   this line out of the anchor-colour problem the rest of the page has, since
   a button is styled with enough weight to beat the theme and a bare link is
   not. */
.neda-cc-compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 28px 0 0;
    padding: 24px 20px;
    background: #ECF9F8;
    border-radius: var(--ne-radius-card);
    text-align: center;
}
.neda-cc-compare__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.72);
}
.neda-cc-compare__text strong { color: var(--ne-black); }

/* ---- 6. the expertise band -------------------------------------------- */

.neda-cc-expert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 52px);
}
/* A FRAMED PRINT, not a rectangle dropped on the band (owner, 2026-09-08:
 * make it a little outstanding and artistic).
 *
 * Three things, and no new colour between them -- the page is already at its
 * colour ceiling and the answer to "artistic" here is composition, not hue.
 *
 * The white mat is `padding` on the image itself with `box-sizing:
 * border-box`, so the picture shrinks inside its own box and the background
 * shows as a border around it. That is what makes it read as a print rather
 * than as a crop: on a lavender ground a white surround is a frame, and it
 * costs nothing but white, which the soft-edge rule allows anywhere.
 *
 * The lift is the estate's two-layer shadow -- tight contact, wide cast --
 * which is what reads as height. It also settles the inconsistency flagged in
 * 1.101.0: the hero's artwork on this same page was a lifted card while this
 * photograph sat flat.
 *
 * The radius steps up from the control radius to the card radius, because it
 * is now a card.
 */
.neda-cc-expert__img {
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    block-size: auto;
    padding: 14px;
    background: var(--ne-white);
    border-radius: var(--ne-radius-card);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.10),
        0 24px 48px -16px rgba(0, 0, 0, 0.30);
}

/* The mat and the lift are both paint. Forced colours drops the shadow and
   replaces the background, so the frame is restated as a real border there
   rather than left as an unexplained band of system colour around a photo. */
@media (forced-colors: active) {
    .neda-cc-expert__img { padding: 0; border: 1px solid CanvasText; }
}

/* One heading, two lines. The mock set the second clause in cyan; cyan on
   any of these grounds is about 2.2:1 and the threshold for a heading this
   size is 3:1, so it fails even as large text. The two-tone rhythm comes
   from weight and the line break instead, and it is still ONE heading --
   two headings here would invent a section that does not exist. */
.neda-cc-h2--two { display: block; }
.neda-cc-h2__a,
.neda-cc-h2__b { display: block; }
.neda-cc-h2__a { font-weight: 800; }
.neda-cc-h2__b { font-weight: 400; }

/* ---- 7. the FAQ -------------------------------------------------------- */

/* Two columns: the words and the illustration on the inline start, the
   questions on the end. Below 900px they stack and the aside leads. */
.neda-cc-faqwrap {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
}

.neda-cc-faqaside .neda-cc-h2 { margin-block-end: 8px; }
.neda-cc-faqaside .neda-cc-lede { margin-block-end: 20px; max-inline-size: 34ch; }

/* THE STANDARD NEDA BUTTON, not a variant of one (owner, 2026-09-09).
 *
 * This was an outlined white pill, which is a third button the system does
 * not have: Neda defines the lime primary and the cyan secondary, and an
 * outline is neither. So it carries `.neda-btn` and inherits the real thing
 * -- lime, black label, 40px, 10px corners, cherry with a white label on
 * hover -- and this rule adds only the chevron and the gap that holds it.
 *
 * That also disposes of the blue: `.neda-btn` renders black on this page for
 * every other button, so nothing here has to fight the theme for its colour.
 */
.neda-cc-section a.neda-cc-faqlink { gap: 10px; }
.neda-cc-section a.neda-cc-faqlink::after {
    content: "";
    inline-size: 8px; block-size: 8px;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
}
[dir="rtl"] .neda-cc-section a.neda-cc-faqlink::after { transform: rotate(225deg); }

/* The two speech bubbles. A background on an empty span rather than an <img>
   in the page content, so the URL stays relative to this stylesheet and the
   page never names the plugin's path -- and so it is decorative by
   construction, which it is: the words beside it say everything.
   Cut out of a JPEG that had the transparency checkerboard PAINTED into it;
   ops/tools/make-faq-bubbles.php is how, and is committed with it. */
.neda-cc-faqart {
    display: block;
    inline-size: min(200px, 55%);
    aspect-ratio: 600 / 489;
    /* Centred in the column and smaller (owner, 2026-09-09): it is
       decoration under the words, not a second column of its own. */
    margin-block-start: clamp(16px, 3vw, 32px);
    margin-inline: auto;
    background: url("faq-bubbles.png") center / contain no-repeat;
}

/* `.neda-cc-faqlist`, NOT `.neda-cc-faq`. That name was already taken in this
   sheet by an older component where `.neda-cc-faq` IS the <details> -- so
   using it for the container that WRAPS the rows made three of its
   descendant rules fire on my markup at once: its white panel painted behind
   the whole list, its `summary::after` drew a second chevron under every
   question, and its `summary` rules restyled my rows underneath mine. All
   three were visible on the page and none of them were mine.

   The old component is left exactly as it is rather than deleted: nothing on
   this page uses it now, but it is 60 lines of another component's styling
   and removing it is a separate decision from getting out of its way. */
.neda-cc-section .neda-cc-faqlist {
    display: grid;
    align-content: start;
    gap: 12px;
}

/* Native <details>. Keyboard operation, find-in-page, the open/closed state
   and no-JS operation all come free, and the browser exposes the state --
   so no role="button" and no aria-expanded, both of which override it. */
.neda-cc-section .neda-cc-faq__item {
    background: var(--ne-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--ne-radius-control);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 18px -10px rgba(0, 0, 0, 0.12);
    transition: border-color var(--ne-ease), box-shadow var(--ne-ease);
}
.neda-cc-section .neda-cc-faq__item:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07), 0 12px 26px -10px rgba(0, 0, 0, 0.18); }
.neda-cc-section .neda-cc-faq__item[open] { border-color: var(--ne-cyan); }

.neda-cc-section .neda-cc-faq__item > summary {
    display: grid;
    grid-template-columns: auto 1px 1fr auto;
    align-items: center;
    gap: 18px;
    min-block-size: 40px;
    padding: 16px 18px;
    list-style: none;
    cursor: pointer;
}
.neda-cc-section .neda-cc-faq__item > summary::-webkit-details-marker { display: none; }
.neda-cc-section .neda-cc-faq__item > summary::marker { content: ""; }

/* The numeral is BLACK at 72%, not the cyan the mock draws. Cyan on white is
   2.16:1 -- it is visible text whether or not it is aria-hidden, and it would
   fail on any reading. The quiet grey gives the same recessive weight at
   8.1:1. Cyan does appear in this block, as a FILL behind a black glyph and
   as the open row's edge, which is where the palette allows it. */
.neda-cc-faq__n {
    font-size: 15px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.72);
    font-variant-numeric: tabular-nums;
}

/* The hairline between the number and the question, as a real grid track. */
.neda-cc-section .neda-cc-faq__item > summary::before {
    content: "";
    inline-size: 1px;
    block-size: 22px;
    background: rgba(0, 0, 0, 0.12);
}

.neda-cc-faq__q { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ne-black); }

/* A 10px plate, not the mock's circle: every control and indicator on the
   estate carries that radius, and the rule turned a circle down once already.
   Open, the plate fills cyan with the glyph still black -- 9:1 -- which is
   the strong signal; the cyan border on the row is reinforcement, never the
   only cue, since the answer itself appears.
 *
 * A real span rather than a pseudo-element, which is the exception to the
 * house preference. A plate with a chevron rotating inside it is two boxes,
 * and this summary's `::before` is already the hairline between the numeral
 * and the question. One `aria-hidden` to keep right, on the pattern the
 * older `.neda-corner__faq-chevron` already uses. The chevron itself is the
 * span's own border, so forced colours keeps it. */
.neda-cc-faq__go {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--ne-radius-control);
    background: #ECF9F8;
    transition: background var(--ne-ease);
}
/* Physical borders, same reason as the tick: a chevron pointing DOWN is not
   a directional glyph either -- down is down in every language. With one
   logical border it half-mirrored in RTL and came out as a corner pointing
   the wrong way. */
.neda-cc-faq__go::before {
    content: "";
    inline-size: 9px; block-size: 9px;
    border-bottom: 2px solid var(--ne-black);
    border-right: 2px solid var(--ne-black);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--ne-ease);
}
.neda-cc-section .neda-cc-faq__item[open] .neda-cc-faq__go { background: var(--ne-cyan); }
.neda-cc-section .neda-cc-faq__item[open] .neda-cc-faq__go::before { transform: rotate(225deg) translate(-2px, -2px); }

.neda-cc-section .neda-cc-faq__item > summary:focus-visible {
    outline: 3px solid var(--ne-cherry);
    outline-offset: 2px;
}

/* The answer lines up under the question, past the numeral and its rule. */
.neda-cc-faq__a { padding: 0 18px 16px 73px; }
.neda-cc-faq__a p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(0, 0, 0, 0.78); }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 1023px) {
    .neda-cc-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .neda-cc-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .neda-cc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 0; }
    .neda-cc-strip__item:nth-child(odd) { border-inline-start: 0; }
}

@media (max-width: 900px) {
    .neda-cc-top__grid,
    .neda-cc-expert,
    .neda-cc-faqwrap { grid-template-columns: minmax(0, 1fr); }
    /* The picture follows the words on a narrow screen, in both. */
    .neda-cc-top__art,
    .neda-cc-expert__img { order: 2; }
    /* The bubbles are decoration, and on a narrow screen they would push the
       questions a screenful down before anyone reached one. */
    .neda-cc-faqart { display: none; }
}

@media (max-width: 860px) {
    .neda-cc-steps { grid-template-columns: minmax(0, 1fr); }
    /* The row is no longer a row, so the connectors go. */
    .neda-cc-step + .neda-cc-step::before { display: none; }
}

@media (max-width: 782px) {
    /* The featured card must stop being scaled before it can overlap its
       neighbour in a two-up or one-up grid. */
    .neda-cc-pack--featured { transform: none; }
}

@media (max-width: 700px) {
    .neda-cc-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* the FAQ list was already one column */
}

@media (max-width: 560px) {
    .neda-cc-types,
    .neda-cc-packs,
    .neda-cc-strip { grid-template-columns: minmax(0, 1fr); }
    .neda-cc-strip__item { border-inline-start: 0; border-block-start: 1px solid rgba(0, 0, 0, 0.10); }
    .neda-cc-strip__item:first-child { border-block-start: 0; }
    .neda-cc-packhead,
    .neda-cc-packhead { flex-direction: column; align-items: flex-start; }
}

/* ---- reduced motion ---------------------------------------------------- */

/* Killing the transition alone still leaves a card JUMPING to its scaled
   size on hover, so the transform has to go with it. The featured card's
   resting scale is a layout decision rather than motion, so it stays. */
@media (prefers-reduced-motion: reduce) {
    .neda-cc-type,
    .neda-cc-step,
    .neda-cc-top__play,
    .neda-cc-section .neda-cc-faq__item > summary::after,
    .neda-cc-section a.neda-cc-quiet-link,
    .neda-cc-section a.neda-cc-top__how { transition: none; }
    /* The transform has to go too, not just the transition: without this the
       card still JUMPS to its zoomed size on hover, which is the thing
       reduced motion is asking not to happen. */
    .neda-cc-type:hover,
    .neda-cc-step:hover { transform: none; }
}

/* ---- forced colours ---------------------------------------------------- */

/* Every card here separates from its band by a shadow, and shadows are not
   painted in forced colours -- so without this the strip, the step cards,
   the type cards, the package cards and the FAQ rows all lose their edges
   at once. The focus rings are outlines already and survive; the ones that
   are not are restored here. */
@media (forced-colors: active) {
    .neda-cc-strip,
    .neda-cc-step,
    .neda-cc-type,
    .neda-cc-pack,
    .neda-cc-section .neda-cc-faq__item,
    .neda-cc-section .neda-cc-included,
    .neda-cc-plate { border: 1px solid CanvasText; }

    /* `.neda-cc-top__play` is off this list on purpose: since 1.81.0 it is a
       bare border-drawn triangle inside a button, not a plate, and a box
       around a triangle is worse than no box. Being border-drawn, it already
       survives forced colours on its own. */

    /* Masked glyphs are erased where the UA replaces authored backgrounds. */
    .neda-cc-included__mark { background: CanvasText; }

    /* Nothing repaints the type card's artwork: it is a photograph-shaped
       <img>, and forced colours leaves images alone. The card's own border
       above gives it the edge its shadow cannot. */

    .neda-cc-section .neda-cc-faq__item > summary:focus-visible { outline: 3px solid Highlight !important; }
}