/* Kelpie front-end styles. Layout defers to the theme; colour does not. See CODE-NOTES.md for why. */

/* The palette. ONE block, and every neutral is a percentage of --kelpie-ink so there is exactly one knob. */

.kelpie {
	/* The anchor. Deliberately not inherited - the theme's own #777777 is 4.48:1 on white. */
	--kelpie-ink: #1f2933;

	/* Fallbacks for browsers without color-mix(). These are the exact composites the ramp produces over white. */
	--kelpie-muted: #626970;
	--kelpie-line: #e4e5e7;
	--kelpie-tint: #f6f6f7;
	--kelpie-field-line: #c9ccce;

	/* Kelpie's blue, and NOT the theme's accent. 5.54:1, which settles all four button states at once. */
	--kelpie-blue: #0d6f9f;

	/* For text links Kelpie renders as <button>. Darker than the button blue, at 6.77:1, and deliberately not merged. */
	--kelpie-link: #0b6285;

	--kelpie-radius: 8px;
}

@supports ( color: color-mix( in srgb, #000 50%, transparent ) ) {
	.kelpie {
		--kelpie-muted: color-mix( in srgb, var( --kelpie-ink ) 70%, transparent );
		--kelpie-line: color-mix( in srgb, var( --kelpie-ink ) 12%, transparent );
		--kelpie-tint: color-mix( in srgb, var( --kelpie-ink ) 4%, transparent );
		--kelpie-field-line: color-mix( in srgb, var( --kelpie-ink ) 24%, transparent );
	}
}

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

/* `hidden` must actually hide: the browser's display:none loses to any author rule, and the whole form showed at once. */
.kelpie [hidden] {
	display: none !important;
}

/* Focus must stay visible — these are the controls a keyboard user lives in. */
.kelpie :focus-visible {
	outline: 2px solid var( --kelpie-link );
	outline-offset: 2px;
}

/* Text links rendered as <button>. Everything else is a real <a>, themed. */
.kelpie .kelpie-link,
.kelpie .kelpie-details-link {
	padding: 0;
	border: 0;
	background: none;
	color: var( --kelpie-link );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Mid-sentence in the reader's eye, so it takes the weight of the text around it rather than of a control. */
.kelpie .kelpie-details-link {
	font-weight: 400;
}

/* On its own line and underlined, or it reads as the last few words of the sentence rather than something to click. */
.kelpie-row-main .kelpie-details-link {
	display: block;
	margin-top: 10px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kelpie .kelpie-link:hover,
.kelpie .kelpie-details-link:hover {
	text-decoration: underline;
}

/* Already underlined, so hover thickens rather than adds. */
.kelpie-row-main .kelpie-details-link:hover {
	text-decoration-thickness: 2px;
}

/* --- Gate ---------------------------------------------------------------- */

.kelpie h1 + p,
.kelpie-quote > p:not( [class] ):first-of-type,
.kelpie-gate-handoff > p:not( [class] ) {
	margin: 0 0 26px;
	color: var( --kelpie-muted );
}

/* The gate emits no h1 of its own — the host page title is the h1. Rule kept for any page that does place one. */
.kelpie.kelpie-gate > h1 {
	margin-top: 24px;
	margin-bottom: 14px;
	font-size: 32px;
	text-align: center;
}

/* Body copy, not a caption: doubled class beats the muted `.kelpie h1 + p` default without !important. */
/* Left aligned with a capped measure, and the block sits left rather than centred so its edge lines up with the cards below. */
.kelpie-gate-intro.kelpie-gate-intro {
	margin: 24px 0 44px;
	color: var( --kelpie-ink );
	text-align: left;
	font-size: 17px;
	line-height: 1.65;
}

/* Prominence comes from the asymmetric margin, not size alone: a big gap above separates it from the intro, a small one below binds it to the cards it introduces. */
.kelpie.kelpie-gate > .kelpie-gate-question {
	margin: 8px 0 18px;
	font-size: 24px;
	text-align: left;
	padding-bottom: 18px;
}

.kelpie-gate-choices {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

.kelpie-gate-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border: 1px solid var( --kelpie-line );
	border-radius: var( --kelpie-radius );
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.kelpie-gate-card:hover,
.kelpie-gate-card:focus {
	box-shadow: 0 2px 14px rgba( 31, 41, 51, .08 );
}

.kelpie-gate-card-primary {
	background: var( --kelpie-tint );
}

.kelpie-gate-card-title {
	font-size: 20px;
	font-weight: 700;
}

.kelpie-gate-card-body {
	color: var( --kelpie-muted );
	line-height: 1.5;
}

.kelpie-gate-card-cta {
	margin-top: auto;
	padding-top: 8px;
	color: var( --kelpie-link );
	font-weight: 600;
}

/* --- Filters ------------------------------------------------------------- */

.kelpie-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	padding: 16px 0 18px;
	border-bottom: 1px solid var( --kelpie-line );
}

.kelpie-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kelpie-label {
	color: var( --kelpie-muted );
	font-size: 15px;
	font-weight: 600;
}

/* Width only. The theme styles the control itself. */
.kelpie-filters select {
	min-width: 190px;
}

/* Tie each filter label to its own control: the flex gap is the only spacing, so there is one number to change. */
.kelpie-filters .kelpie-field {
	gap: 6px;
}

.kelpie-filters .kelpie-label {
	margin-bottom: 0;
}

.kelpie-filters select {
	margin-top: 0;
}

/* The reset sits with the selects it clears, lifted off the row's flex-end edge to line up with the controls. */
.kelpie-filters .kelpie-link {
	padding-bottom: 9px;
	font-size: 14px;
	white-space: nowrap;
}

/* The live course count. Same padding-bottom as the reset beside it, so the two sit on one baseline. */
.kelpie-filters p {
	margin: 0 0 0 auto;
	padding-bottom: 9px;
	color: var( --kelpie-muted );
	font-size: 14px;
}

/* --- Catalogue rows ------------------------------------------------------ */

/* The category heading. Two classes deep so it beats `.kelpie h2` in the mockup block below. */
.kelpie .kelpie-group > h2 {
	margin: 30px 0 10px;
	color: var( --kelpie-muted );
	font-size: 28px;


}

.kelpie-row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 18px 0;
	border-bottom: 1px solid var( --kelpie-line );
}

.kelpie-row-main {
	flex: 1;
	min-width: 0;
}

/* The course title, 19px. Two classes deep for the same reason as the category heading above. */
.kelpie .kelpie-row h3 {
	/* 12px, up from 8 - at 19px the title needed the extra room. */
	margin: 0 0 12px;
	font-size: 19px;
}

/* The short description. Looser leading, because these run three or four lines at full width. */
.kelpie-row-main > p:not( [class] ) {
	/* Last thing in the row now — a bottom margin here just pads the row. */
	margin: 0;
	color: var( --kelpie-muted );
	line-height: 1.65;
}

/* The pills sit above the description, so they carry the gap down to it. */
.kelpie-row-main .kelpie-pills {
	margin-bottom: 12px;
}

.kelpie-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.kelpie-pill {
	padding: 3px 10px;
	border-radius: 999px;
	background: var( --kelpie-tint );
	color: var( --kelpie-muted );
	font-size: 13px;
}

/* Pastel pills, coloured by what the pill IS, never by value. Measured 7.04 / 7.33 / 6.94:1 - re-measure if touched. */
/* Three classes deep: the mockup block at the foot of this file sets a flat grey at two and would win on source order. */
.kelpie .kelpie-pill.kelpie-pill-level {
	background-color: #e6f0f8;
	color: #1a5478;
}

.kelpie .kelpie-pill.kelpie-pill-duration {
	background-color: #e6f1e9;
	color: #1f5734;
}

.kelpie .kelpie-pill.kelpie-pill-format {
	background-color: #f6ecdc;
	color: #6f4715;
}

/* The instructor reads as a person, so it is outlined rather than filled - nothing keys off it. */
.kelpie-pill-person {
	background: transparent;
	box-shadow: inset 0 0 0 1px var( --kelpie-line );
}

.kelpie-row-action {
	flex-shrink: 0;
}

/* The catalogue's only two direct-child paragraphs, and they are mutually exclusive. */
.kelpie-catalogue > p {
	padding: 30px 0;
	color: var( --kelpie-muted );
}

/* Rows stack on mobile — no second layout to build or maintain. */
@media ( max-width: 620px ) {
	.kelpie-row {
		flex-direction: column;
		gap: 12px;
	}

	.kelpie-row-action .btn {
		display: block;
		width: 100%;
	}

	.kelpie-filters select,
	.kelpie-field {
		width: 100%;
		min-width: 0;
	}
}

/* --- Modal --------------------------------------------------------------- */
/* No theme equivalent we can drive from our own JS, so this one is ours. */

.kelpie-modal-back {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 15, 28, 38, .55 );
}

.kelpie-modal-back[hidden] {
	display: none;
}

body.kelpie-modal-open {
	overflow: hidden;
}

.kelpie-modal {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 680px;
	max-height: 100%;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 60px rgba( 15, 28, 38, .3 );
}

.kelpie-modal-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 24px;
	border-bottom: 1px solid var( --kelpie-line );
}

.kelpie-modal-head h2 {
	flex: 1;
	margin: 0;
	font-size: 19px;
}

.kelpie-modal-close {
	padding: 0 4px;
	border: 0;
	background: none;
	color: var( --kelpie-muted );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.kelpie-modal-body {
	padding: 20px 24px;
	overflow-y: auto;
	line-height: 1.6;
}

.kelpie-modal-body > :first-child {
	margin-top: 0;
}

.kelpie-modal-body .kelpie-pills {
	margin-bottom: 16px;
}

.kelpie-modal-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	padding: 15px 24px;
	border-top: 1px solid var( --kelpie-line );
	background: #fafbfc;
}

/* Same reason as the result actions — size to content, not to the flex line. */
.kelpie-modal-foot .btn {
	flex: 0 0 auto;
	width: auto;
}

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

/* A section heading on the form. A direct child of the <form>, which separates it from the two in their own boxes. */
.kelpie-quote form > h2 {
	margin: 32px 0 12px;
	color: var( --kelpie-muted );
	font-size: 24px;
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: none;
}

.kelpie-block {
	margin: 22px 0;
	border: 1px solid var( --kelpie-line );
	border-radius: var( --kelpie-radius );
}

.kelpie-block-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var( --kelpie-line );
	background: var( --kelpie-tint );
}

.kelpie-block-head h2 {
	margin: 0;
	font-size: 17px;
}

.kelpie-fields {
	display: grid;
	gap: 16px 18px;
	grid-template-columns: repeat( 3, 1fr );
	padding: 18px;
}

.kelpie-fields-two {
	grid-template-columns: repeat( 2, 1fr );
	padding: 0;
}

/* The four course questions on one line. Widths are proportional to the labels, so none of them wraps. */
.kelpie-fields-four {
	grid-template-columns: 0.8fr 1fr 0.9fr 1.3fr;
}

/* Flex, not grid: the overseas city field is overseas-only, and a fixed three-column grid would leave its track empty. */
.kelpie-fields-row {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin-bottom: 16px;
}

.kelpie-fields-row > .kelpie-field {
	flex: 1 1 200px;
}

.kelpie-field-full {
	grid-column: 1 / -1;
}

/* A short code in a full-width box invites a sentence. */
.kelpie-field-code {
	max-width: 280px;
	margin-top: 22px;
}

/* `form >`, not `.kelpie-quote >` - these fields are children of the form, so the old selector matched nothing. */
.kelpie-quote form > .kelpie-field-full {
	margin-top: 22px;
}

.kelpie-field label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

/* Width only. The theme owns padding, border, radius and background; textareas get a resize handle it doesn't set. */
.kelpie-field input,
.kelpie-field select,
.kelpie-field textarea {
	width: 100%;
}

.kelpie-field textarea {
	resize: vertical;
}

/* A fact standing where a control would be. It mirrors the control's own box rather than hard-coding an offset. */
.kelpie-field > p:not( [class] ) {
	margin: 9px 0 0;
	padding: 7px 0;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.kelpie-hint {
	margin: 5px 0 0;
	color: var( --kelpie-muted );
	font-size: 13px;
	line-height: 1.45;
}

.kelpie-req {
	color: var( --kelpie-muted );
	font-weight: 400;
}

/* Field errors. Two classes deep and font-weight stated, because Uncode styles `form p` as a near-black heading. */
.kelpie .kelpie-error {
	margin: 5px 0 0;
	color: #c92a2a;
	font-size: 13.5px;
	font-weight: 400;
}

.kelpie-errors {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-left: 4px solid #c92a2a;
	background: #fff5f5;
}

.kelpie-errors p {
	margin: 0 0 8px;
}

.kelpie-errors ul {
	margin: 0;
	padding-left: 20px;
}

/* The honeypot must be unreachable to people but present to a bot. */
.kelpie-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kelpie-tcs {
	margin: 26px 0 20px;
	padding: 14px 18px;
	border-left: 4px solid #f0a020;
	background: #fff8ec;
}

/* Checkboxes must not inherit the full-width rule above. */
.kelpie-tcs input[type="checkbox"] {
	width: auto;
}

/* --- Quote result -------------------------------------------------------- */

/* Letterhead, matching the PDF. Height-capped so a large upload can't dominate. */
.kelpie-result-logo {
	display: block;
	max-height: 60px;
	max-width: 100%;
	width: auto;
	margin-bottom: 20px;
}

.kelpie-result-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid currentColor;
}

/* Name, organisation, email. `.kelpie-result-meta` is the fourth line. */
.kelpie-result-head p:not( [class] ) {
	margin: 0;
}

.kelpie-result-meta {
	margin: 3px 0 0;
	color: var( --kelpie-muted );
	font-size: 14px;
}

.kelpie-result-ref {
	color: var( --kelpie-muted );
	font-size: 13px;
	text-align: right;
}

.kelpie-result-ref strong {
	display: block;
	color: inherit;
	font-size: 19px;
}

.kelpie-debug-banner {
	margin: 18px 0;
	padding: 12px 16px;
	border: 1px dashed var( --kelpie-line );
	background: var( --kelpie-tint );
	color: var( --kelpie-muted );
	font-size: 13px;
	line-height: 1.5;
}

/* The breakdown. `border: 0` because the grid is Uncode's, not Kelpie's - specificity is enough, no !important. */
.kelpie-result table {
	width: 100%;
	margin: 22px 0 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14.5px;
}

/* No rules between the rows: a full grid made this read as a statement of account. */
.kelpie-result td {
	padding: 10px 0;
	border: 0;
	vertical-align: top;
}

/* The money column. `td + td`, not `:last-child`, because the GST note spans both columns. */
.kelpie-result td + td {
	width: 140px;
	text-align: right;
	white-space: nowrap;

	/* Figures line up digit under digit down the column. */
	font-variant-numeric: tabular-nums;

	/* Matches .kelpie-total-line/.kelpie-gst-note's 20px inset, so the whole money column lines up on one edge. */
	padding-right: 20px;
}

.kelpie-bd-desc {
	display: block;
	margin-top: 3px;
	color: var( --kelpie-muted );
	font-size: 13.5px;
}

.kelpie-debug {
	display: block;
	margin-top: 6px;
	color: #7a8b99;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	line-height: 1.6;
}

.kelpie-tba {
	color: #b45309;
	font-weight: 600;
}

/* The total. The label lives in the box, since removing the duplicate row would have left the figure unlabelled. */
.kelpie-total-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 0 0;
	padding: 16px 20px;
	border-radius: var( --kelpie-radius );
	background: #fff8ec;
	font-size: 20px;
	font-weight: 700;
}

/* The label is the quieter half, so it drops to the body size while the figure keeps the box's 20px. */
.kelpie-total-label {
	font-size: 16px;
}

.kelpie-total-figure {
	text-align: right;
}

/* GST as a footnote, not a table line. Grey on the page background, where --kelpie-muted measures 5.56:1. */
.kelpie-gst-note {
	margin: 6px 0 0;
	padding: 0 20px;
	color: var( --kelpie-muted );
	font-size: 11px;
	text-align: right;
}

.kelpie-excl,
.kelpie-notice {
	margin: 14px 0 0;
	padding: 12px 16px;
	border-radius: var( --kelpie-radius );
	background: var( --kelpie-tint );
	color: var( --kelpie-muted );
	font-size: 14px;
	line-height: 1.55;
}

.kelpie-summary-card {
	margin: 18px 0;
	padding: 16px 20px;
	border: 1px solid var( --kelpie-line );
	border-radius: var( --kelpie-radius );
}

.kelpie-summary-card p {
	margin: 0;
}

.kelpie-placeholder {
	color: #b45309;
	font-weight: 600;
}

/* The ask, set off from the quote above it so the two buttons read as a question rather than as page furniture. */
.kelpie-response {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var( --kelpie-line );
}

.kelpie-response-ask {
	margin: 0;
	color: var( --kelpie-ink );
	font-size: 17px;
	font-weight: 600;
}

/* .kelpie-response-done used to clamp to a 34em prose measure here — narrower than the form/result screens right
   before it in the same flow, which read as the page shrinking at the last step. Removed; it now matches them. */

/* More room than a form's inline note gets, since this box is most of what's left on an otherwise short page. */
.kelpie-response-done .kelpie-excl {
	margin-top: 22px;
	padding: 16px 20px;
}

.kelpie-result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	margin-top: 22px;
}

/* The ask supplies its own spacing above, so the buttons sit closer to the question than to the quote. */
.kelpie-response .kelpie-result-actions {
	margin-top: 14px;
}

/* The theme renders `.btn` as display:block. Box model only here, never colour or type. */
.kelpie-result-actions .btn {
	flex: 0 0 auto;
	width: auto;
}

/* Four across needs the room; two-by-two before it goes to a single column. */
@media ( max-width: 900px ) {
	.kelpie-fields-four {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 620px ) {
	.kelpie-fields,
	.kelpie-fields-two,
	.kelpie-fields-four {
		grid-template-columns: 1fr;
	}

	.kelpie-result-head {
		flex-direction: column;
	}

	.kelpie-result-ref {
		text-align: left;
	}
}

/* --- Gate hand-off -------------------------------------------------------- */

/* Prose, not choices, so it reads at a measure - 36em, which is what the heading needs to sit on one line. */
.kelpie-gate-handoff {
	max-width: 36em;
	margin-inline: auto;
	text-align: center;
}

/* Size the button to its label: a flex parent is what actually holds it, since the theme stretches `.btn` regardless. */
.kelpie-gate-actions {
	display: flex;
	justify-content: center;
	margin: 24px 0 0;
}

.kelpie-gate-actions .btn {
	flex: 0 0 auto;
	width: fit-content !important;
}

.kelpie-gate-back {
	margin: 20px 0 0;
	color: var( --kelpie-muted );
	font-size: 14px;
}

/* The four variables once declared here are in the palette block at the top - two independent sets is how they drifted. */
.kelpie {
	color: var( --kelpie-ink );
	font-size: 16px;
	line-height: 1.55;
}

.kelpie h1 {
	margin: 0 0 8px;
	font-size: 27px;
	letter-spacing: -.01em;
}

.kelpie h2 {
	font-size: 20px;
}

/* Uncode uppercases button text. The mockups are sentence case. */
.kelpie .btn {
	text-transform: none;
	letter-spacing: 0;
}

.kelpie h3 {
	font-size: 16px;
}

/* Form controls. background-color, never the `background` shorthand - see note 1 above. */

.kelpie input[type="text"],
.kelpie input[type="email"],
.kelpie input[type="number"],
.kelpie input[type="date"],
.kelpie input[type="tel"],
.kelpie select,
.kelpie textarea {
	padding: 7px 10px;
	border: 1px solid var( --kelpie-field-line );
	border-radius: 6px;
	background-color: #fff;
	color: var( --kelpie-ink );
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
}

/* The arrow needs somewhere to sit; the theme still draws it. */
.kelpie select {
	padding-right: 30px;
}

.kelpie textarea {
	min-height: 60px;
	resize: vertical;
}

.kelpie .kelpie-field input,
.kelpie .kelpie-field select,
.kelpie .kelpie-field textarea {
	width: 100%;
}

.kelpie .kelpie-field label,
.kelpie .kelpie-label {
	display: block;
	margin-bottom: 4px;
	color: var( --kelpie-ink );
	font-size: 15px;
	font-weight: 600;
}

.kelpie .kelpie-hint {
	margin-top: 3px;
	font-size: 11.5px;
}

/* Buttons. Every rule pairs --kelpie-blue with white, which is why all four states are one number. A fifth colour needs measuring. */

.kelpie .btn {
	/* `white-space` is pre-wrap on these, so a label on its own line in a template renders a blank line above it. */
	white-space: normal;
	padding: 8px 15px;
	border: 1.5px solid var( --kelpie-blue ) !important;
	border-radius: 6px;
	background-color: #fff !important;
	color: var( --kelpie-blue ) !important;
	font: inherit;
	font-size: 14px !important;
	font-weight: 600;

	/* One value for every button. Uncode tracks `.btn` at 0.1em, which is relative, so no two buttons matched. */
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none;
	cursor: pointer;
}

/* Hover and focus invert: a secondary button rests outlined, so inverting fills it - the mirror of the primary below. */
.kelpie .btn:hover,
.kelpie .btn:focus {
	background-color: var( --kelpie-blue ) !important;
	border-color: var( --kelpie-blue ) !important;
	color: #fff !important;
}

.kelpie .btn-default {
	background-color: var( --kelpie-blue ) !important;
	border-color: var( --kelpie-blue ) !important;
	color: #fff !important;
}

/* The primary rests filled, so inverting empties it: white, with the blue moving to the border and the label. */
.kelpie .btn-default:hover,
.kelpie .btn-default:focus {
	background-color: #fff !important;
	border-color: var( --kelpie-blue ) !important;
	color: var( --kelpie-blue ) !important;
}

/* The large button. Uncode wins on padding and line-height here where it doesn't on a plain `.btn`. */
.kelpie .kelpie-btn-lg {
	padding: 12px 26px !important;
	line-height: 1.4 !important;
}

/* Headings. Uncode uppercases and enlarges section headings; the mockups don't. */

.kelpie h1,
.kelpie h2,
.kelpie h3 {
	text-transform: none;
}

/* The form and catalogue headings set their own size two classes deep, so they already outrank the selectors above. */

/* --- Components, to the mockup's measurements ---------------------------- */

.kelpie .kelpie-row {
	gap: 18px;

	/* Room between the rule above and the course title it belongs to. */
	padding: 20px 0;
	border-top: 1px solid var( --kelpie-line );
	border-bottom: 0;
}

/* `align-self` on the action, not `align-items` on the row, so the tall text column keeps its own top alignment. */
.kelpie .kelpie-row-action {
	align-self: center;
}

/* Compact by padding alone. The type size is set once on `.kelpie .btn` - 'smaller' meaning smaller text made three sizes. */
.kelpie .kelpie-row-action .btn {
	padding: 9px 20px !important;
}

/* The course title's size is set once, above. Two rules with the same selector 940 lines apart: the later one silently won. */

.kelpie .kelpie-pills {
	gap: 7px;
}

.kelpie .kelpie-pill {
	padding: 3px 10px;
	border-radius: 20px;
	background-color: #eef2f5;
	font-size: 12px;
	white-space: nowrap;
}

.kelpie .kelpie-pill-person {
	background-color: transparent;
}

/* The breakdown table's rules were duplicated here and every property was dead. Declared once, above. */