/**
 * Cost & pace calculator — W1 / P-22. Plugin v0.3.1.
 *
 * Tokens only: every colour here is a var(--esls-*) from esls-tokens.css. No hex, no
 * external URL, no font family beyond the three already loaded.
 *
 * Section background is cream by convention (C-3). This widget must never sit on
 * blue-800/900: plugin CSS survives deactivation while the widget's markup does not,
 * and a dark section with a vanished widget is a navy void.
 *
 * 320px floor, not 360.
 */

.esls-cost-pace {
	--esls-cp-gap: 24px;
	display: block;
	max-width: var(--esls-container-inner, 1080px);
	margin-inline: auto;
	color: var(--esls-text-primary);
	font-family: "Source Sans 3", system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   Screen-reader-only. Local to this widget; .esls-hidden in the shared token
   sheet is a different job (F-B fallback visibility), not this one.
   ------------------------------------------------------------------------- */

.esls-cost-pace .esls-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   Heading and intro
   ------------------------------------------------------------------------- */

.esls-cost-pace__heading {
	font-family: Fraunces, Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
	line-height: 1.2;
	margin: 0 0 12px;
	color: var(--esls-blue-900);
}

.esls-cost-pace__intro {
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0 0 var(--esls-cp-gap);
	max-width: 60ch;
	color: var(--esls-text-secondary);
}

/* -------------------------------------------------------------------------
   Controls — hidden until the script reveals them (§2.6)
   ------------------------------------------------------------------------- */

.esls-cost-pace__controls[hidden] {
	display: none;
}

.esls-cost-pace__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: var(--esls-cp-gap);
}

.esls-cost-pace__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 240px;
	min-width: 0;
}

.esls-cost-pace__field label {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--esls-text-secondary);
}

.esls-cost-pace__select {
	/* 16px suppresses iOS zoom-on-focus. Do not reduce. */
	font-size: 16px;
	font-family: inherit;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--esls-border-warm);
	border-radius: 6px;
	background-color: var(--esls-cream-primary);
	color: var(--esls-text-primary);
	width: 100%;
}

.esls-cost-pace__select:disabled,
.esls-cost-pace__select option:disabled {
	color: var(--esls-text-tertiary);
}

/* -------------------------------------------------------------------------
   Result
   ------------------------------------------------------------------------- */

.esls-cost-pace__result {
	display: block;
	padding: 24px;
	border: 1px solid var(--esls-border-warm);
	border-radius: 10px;
	background-color: var(--esls-cream-alt);
	margin-bottom: var(--esls-cp-gap);
}

.esls-cost-pace__figure {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-bottom: 1px solid var(--esls-border-warm);
}

.esls-cost-pace__figure-label {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--esls-text-tertiary);
}

.esls-cost-pace__value {
	font-family: Fraunces, Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	line-height: 1.1;
	color: var(--esls-blue-900);
}

.esls-cost-pace__unit {
	font-size: 0.9375rem;
	color: var(--esls-text-secondary);
}

/* Three figures side by side at 320px are unreadable and their labels wrap to three
   lines each, so the row only appears once there is room for it (§2.8). */
@media (min-width: 640px) {
	.esls-cost-pace__result {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 8px 24px;
	}

	.esls-cost-pace__figure {
		border-bottom: 0;
		padding: 0;
	}

	.esls-cost-pace__milestones,
	.esls-cost-pace__note {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
   Milestones
   ------------------------------------------------------------------------- */

.esls-cost-pace__milestones {
	list-style: none;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--esls-border-warm);
	counter-reset: esls-cp-milestone;
}

.esls-cost-pace__milestone {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 16px;
	padding: 8px 0;
	counter-increment: esls-cp-milestone;
}

.esls-cost-pace__milestone-label {
	font-size: 0.9375rem;
	line-height: 1.4;
	flex: 1 1 60%;
	min-width: 0;
}

.esls-cost-pace__milestone-label::before {
	content: counter(esls-cp-milestone) ". ";
	color: var(--esls-orange-600);
	font-weight: 600;
}

.esls-cost-pace__milestone-time {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--esls-blue-600);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Note
   ------------------------------------------------------------------------- */

.esls-cost-pace__note {
	margin: 16px 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--esls-text-secondary);
}

.esls-cost-pace__note:empty {
	display: none;
}

.esls-cost-pace[data-provisional="yes"] .esls-cost-pace__note,
.esls-cost-pace[data-priced="no"] .esls-cost-pace__note {
	padding-left: 12px;
	border-left: 3px solid var(--esls-orange-400);
}

/* -------------------------------------------------------------------------
   All start points — disclosure + scroll region
   ------------------------------------------------------------------------- */

.esls-cost-pace__all {
	margin-bottom: var(--esls-cp-gap);
}

.esls-cost-pace__all > summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 12px 0;
	min-height: 44px;
	color: var(--esls-blue-600);
}

.esls-cost-pace__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--esls-border-warm);
	border-radius: 8px;
}

.esls-cost-pace__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	background-color: var(--esls-cream-primary);
}

.esls-cost-pace__table caption {
	caption-side: top;
	text-align: left;
	padding: 12px 16px;
	font-size: 0.875rem;
	color: var(--esls-text-secondary);
}

.esls-cost-pace__table th,
.esls-cost-pace__table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--esls-border-warm);
	vertical-align: top;
}

.esls-cost-pace__table thead th {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--esls-text-tertiary);
	white-space: nowrap;
}

.esls-cost-pace__table tbody th {
	font-weight: 600;
	color: var(--esls-blue-900);
	min-width: 200px;
}

.esls-cost-pace__table tbody tr:last-child th,
.esls-cost-pace__table tbody tr:last-child td {
	border-bottom: 0;
}

/* -------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------- */

.esls-cost-pace__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border-radius: 6px;
	background-color: var(--esls-orange-400);
	color: var(--esls-text-on-dark);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
}

.esls-cost-pace__cta:hover,
.esls-cost-pace__cta:focus {
	background-color: var(--esls-orange-600);
	color: var(--esls-text-on-dark);
}

/* -------------------------------------------------------------------------
   Focus. blue-800 clears 3:1 on both cream and white; orange-400 does not (V-14).
   ------------------------------------------------------------------------- */

.esls-cost-pace :focus-visible {
	outline: 3px solid var(--esls-blue-800);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Unavailable — heading, intro and note only. Nothing here has a numeric slot.
   ------------------------------------------------------------------------- */

.esls-cost-pace[data-state="unavailable"] .esls-cost-pace__result,
.esls-cost-pace[data-state="unavailable"] .esls-cost-pace__all,
.esls-cost-pace[data-state="unavailable"] .esls-cost-pace__controls {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.esls-cost-pace * {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
   Compact variant (v0.3.5)

   A skin, not a content decision. Every node the full variant renders is still
   in the document here — the F-A fallback table included — so `compact` cannot
   be used to quietly break §2.6 or F-A. Nothing below is `display: none`, and
   nothing below is `!important`: the compound selector already outranks the
   single-class base rules it overrides.

   Two-class root selector so the root-level overrides beat `.esls-cost-pace`
   on specificity rather than on source order alone.
   ------------------------------------------------------------------------- */

.esls-cost-pace.esls-cost-pace--compact {
	--esls-cp-gap: 16px;
	max-width: 760px;
}

.esls-cost-pace--compact .esls-cost-pace__heading {
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
	margin-bottom: 8px;
}

.esls-cost-pace--compact .esls-cost-pace__intro {
	font-size: 1rem;
	max-width: 52ch;
}

.esls-cost-pace--compact .esls-cost-pace__controls {
	gap: 12px;
}

.esls-cost-pace--compact .esls-cost-pace__field {
	flex: 1 1 200px;
}

/* The select keeps its 16px font-size and its 44px target. Compact is a type
   scale, not a licence to shrink a touch target below the minimum (§2.8). */

.esls-cost-pace--compact .esls-cost-pace__result {
	padding: 16px;
}

.esls-cost-pace--compact .esls-cost-pace__figure-label {
	font-size: 0.75rem;
}

.esls-cost-pace--compact .esls-cost-pace__value {
	font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
}

.esls-cost-pace--compact .esls-cost-pace__unit {
	font-size: 0.875rem;
}

@media (min-width: 640px) {
	.esls-cost-pace--compact .esls-cost-pace__result {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 8px 16px;
	}
}

.esls-cost-pace--compact .esls-cost-pace__milestones {
	margin-top: 16px;
	padding-top: 16px;
}

.esls-cost-pace--compact .esls-cost-pace__milestone {
	padding: 6px 0;
}

.esls-cost-pace--compact .esls-cost-pace__milestone-label,
.esls-cost-pace--compact .esls-cost-pace__milestone-time {
	font-size: 0.875rem;
}

.esls-cost-pace--compact .esls-cost-pace__note {
	font-size: 0.8125rem;
}

.esls-cost-pace--compact .esls-cost-pace__all > summary {
	font-size: 0.875rem;
	padding: 10px 0;
}

.esls-cost-pace--compact .esls-cost-pace__cta {
	font-size: 0.9375rem;
}

/* ═════════════════════════════════════════════════════════════════════
   §12. Dark-section counter-rules (v0.3.6 — D-1).

   Amends the v0.3.1 header note above. That note forbade this widget on
   blue-800/900 because a dedicated W1 section, with the plugin off, leaves a
   navy void. That reasoning holds for `variant: full` and does not hold for
   `variant: compact`, which by definition sits inside a wider section that
   carries its own non-plugin content — BBA tuition keeps its cost list,
   headings and CTA whether or not the plugin is active. Compact on dark is
   permitted; full on dark is still forbidden.

   Only the elements that sit DIRECTLY on the section background are flipped.
   `__result` (cream-alt) and `__table` (cream-primary) paint their own
   backgrounds, so everything inside them — figures, values, units, milestones,
   the qualifying note, table head and body cells — must keep its dark ink.
   Hence the child combinator on `__note`: the same class is used both outside
   and inside `__result`, and flipping it globally would turn the inner note
   white on cream.

   `<caption>` is outside the table box, so the table's background does not
   paint behind it. It flips.

   Specificity, not `!important`: 0,2,0 over the base rules' 0,1,0.
   ═════════════════════════════════════════════════════════════════════ */

.esls-section-dark .esls-cost-pace {
	color: var(--esls-text-on-dark);
}

.esls-section-dark .esls-cost-pace__heading {
	color: var(--esls-text-on-dark);
}

.esls-section-dark .esls-cost-pace__intro,
.esls-section-dark .esls-cost-pace__field label,
.esls-section-dark .esls-cost-pace > .esls-cost-pace__note,
.esls-section-dark .esls-cost-pace__table caption {
	color: rgba(250, 248, 243, 0.82);
}

.esls-section-dark .esls-cost-pace__all > summary {
	color: var(--esls-blue-200);
}

.esls-section-dark .esls-cost-pace__all > summary:hover,
.esls-section-dark .esls-cost-pace__all > summary:focus-visible {
	color: var(--esls-text-on-dark);
}

/* §12.1 (v0.3.7) — light panels re-establish dark ink.

   §12 flips the root `color` so anything sitting directly on the dark section is
   legible. That flip is INHERITED, and `__result` / `__table` paint their own light
   backgrounds — so any descendant without an explicit colour of its own arrived at
   cream-on-cream. `__milestone-label` is the case that shipped broken in v0.3.6:
   it colours only its `::before` marker, so the label text inherited the root.

   Resetting colour on the two panels is the general fix. It restores the base
   `--esls-text-primary` for every inheriting descendant, and the explicit colours
   inside (`__value`, `__unit`, `__figure-label`, `__milestone-time`, table cells)
   are unaffected because they never inherited in the first place.

   This supersedes the child combinator on `__note` in §12 — that rule is now
   redundant but harmless, and is kept so the two blocks read independently. */

.esls-section-dark .esls-cost-pace__result,
.esls-section-dark .esls-cost-pace__table {
	color: var(--esls-text-primary);
}