/**
 * Public application form and applicant portal.
 *
 * Every colour, radius and font is a custom property on the outermost blocks,
 * so a theme overrides the look by restating a token rather than by out-
 * specifying a rule.
 *
 * These pages stay light whatever the visitor's OS is set to. A form that
 * flips to dark inside a light theme reads as broken, and the surrounding page
 * is not ours to match.
 */

.resala-form,
.resala-apply,
.resala-portal,
.resala-notice,
.resala-errors,
.resala-received,
.resala-transfer {
	--resala-ink: var(--text);
	--resala-muted: var(--muted);
	--resala-border: var(--border);
	--resala-border-strong: var(--border-strong);
	--resala-danger: var(--error);
	--resala-danger-line: var(--error-line);
	--resala-danger-surface: var(--error-soft);
	--resala-accent: var(--accent);
	--resala-accent-ink: var(--accent-ink);
	--resala-accent-soft: var(--accent-soft);
	--resala-accent-ring: var(--accent-ring);
	--resala-surface: var(--surface);
	--resala-surface-alt: var(--surface-alt);
	--resala-success: var(--success);
	--resala-success-line: var(--success-line);
	--resala-success-surface: var(--success-soft);
	--resala-shadow: var(--shadow-sm);
	--resala-shadow-lg: var(--shadow-lg);
	--resala-radius: var(--radius);
	--resala-radius-sm: var(--radius-sm);
	--resala-gap: 1.35rem;
	--resala-font: var(--sans);

	color: var(--resala-ink);
	font-family: var(--resala-font);
	-webkit-font-smoothing: antialiased;
}

.resala-programmes {
	--resala-columns: 3;
	color: var(--text);
	container: resala-list / inline-size;
	display: grid;
	font-family: var(--sans);
	gap: 20px;
	margin: 0 auto;
	max-width: 76rem;
}

.resala-programmes__head { align-items: baseline; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; }
.resala-programmes__head h2 { font-family: inherit; font-size: clamp(1.7rem, 3cqi, 2.4rem); letter-spacing: -.02em; margin: 0; }
.resala-programmes__head p { color: var(--muted); font-size: .9rem; margin: 0; }
.resala-programmes__grid { display: grid; gap: 20px; grid-template-columns: repeat(var(--resala-columns), minmax(0, 1fr)); }
.resala-programmes .resala-empty { color: var(--muted); margin: 0; }

.resala-card {
	background: var(--resala-listing-card-background, var(--surface));
	border: 1px solid var(--border);
	border-radius: 14px;
	container: resala-card / inline-size;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}

.resala-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.resala-card__media { aspect-ratio: 16 / 10; display: block; overflow: hidden; }
.resala-card__media img { height: 100%; object-fit: cover; width: 100%; }
.resala-card__body { display: grid; gap: 9px; padding: 20px; }
.resala-card__eyebrow { align-items: center; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; }
.resala-card__type { color: var(--accent-ink); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.resala-card__state { align-items: center; color: var(--success); display: inline-flex; font-size: .72rem; font-weight: 700; gap: .35rem; letter-spacing: .07em; text-transform: uppercase; }
.resala-card__state::before { background: var(--success-line); border-radius: 50%; content: ''; height: .45rem; width: .45rem; }
.resala-card__title { font-family: inherit; font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.3; margin: 0; }
.resala-card__title a { color: var(--text); text-decoration: none; }
.resala-card__title a:hover { color: var(--accent-ink); }
.resala-card__excerpt { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }

.resala-card__side { border-top: 1px solid var(--rule); display: grid; gap: 12px; margin-top: auto; padding: 16px 20px; }
.resala-card__facts { display: grid; gap: 12px; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.resala-card__fact { align-items: center; display: flex; gap: .6rem; min-width: 0; }
.resala-card__fact + .resala-card__fact { border-left: 1px solid var(--rule); padding-left: 12px; }

.resala-card__fact-icon {
	border-radius: 9px;
	flex: 0 0 2rem;
	font-size: 17px;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	width: 2rem;
}

.resala-card__fact-icon--accent { background: var(--accent-soft); color: var(--accent-ink); }
.resala-card__fact-icon--ok { background: var(--success-soft); color: var(--success); }
.resala-card__fact-icon--warn { background: var(--warning-soft); color: var(--warning); }
.resala-card__fact-icon--info { background: var(--info-soft); color: var(--info); }
.resala-card__fact-text { display: grid; min-width: 0; }
.resala-card__fact-text strong { font-size: .93rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resala-card__fact-text small { color: var(--muted); font-size: .74rem; line-height: 1.3; }
.resala-card__more { font-size: .92rem; justify-content: center; justify-self: stretch; }
.resala-card__more:hover { gap: .65rem; }

/* At one per row a card reads as a row: image, then the text, then the facts
   in their own panel with the link under them. */
@container resala-list (min-width: 48em) {
.resala-programmes--list .resala-card,
.resala-programmes[style*="--resala-columns:1"] .resala-card { flex-direction: row; }
.resala-programmes--list .resala-card__media,
.resala-programmes[style*="--resala-columns:1"] .resala-card__media { aspect-ratio: 1 / 1; flex: 0 0 12rem; }
.resala-programmes--list .resala-card__body,
.resala-programmes[style*="--resala-columns:1"] .resala-card__body { align-content: center; flex: 1; }
.resala-programmes--list .resala-card__side,
.resala-programmes[style*="--resala-columns:1"] .resala-card__side { align-content: center; border-left: 1px solid var(--rule); border-top: 0; flex: 0 0 30rem; margin: 18px 0; }
}

/* A card too narrow to sit facts side by side stacks them instead of
   squeezing three figures into an ellipsis each. */
@container resala-card (max-width: 24em) {
	.resala-card__facts { grid-auto-flow: row; }
	.resala-card__fact + .resala-card__fact { border-left: 0; padding-left: 0; }
}

@container resala-list (max-width: 62em) { .resala-programmes__grid { grid-template-columns: repeat(min(2, var(--resala-columns)), minmax(0, 1fr)); } }
@container resala-list (max-width: 40em) { .resala-programmes__grid { grid-template-columns: 1fr; } }


.resala-form,
.resala-apply,
.resala-portal {
	background: var(--resala-surface);
	border: 1px solid var(--resala-border);
	border-radius: var(--resala-radius);
	box-shadow: var(--resala-shadow-lg);
	box-sizing: border-box;
	container-type: inline-size;
	margin-inline: auto;
	max-width: 46rem;
	padding: clamp(1.25rem, 4vw, 2.25rem);
}

/* A theme heading rule beats an inherited font, so the stack is restated on
   anything the theme is likely to style directly. */
.resala-form :is(h2, h3, h4, label, input, select, textarea, button),
.resala-apply :is(h2, h3, h4, label, input, select, textarea, button),
.resala-portal :is(h2, h3, h4, label, input, select, textarea, button),
.resala-notice :is(h2, h3, h4, button),
.resala-received :is(h2, h3, h4, a),
.resala-transfer :is(h2, h3, h4) {
	font-family: var(--resala-font);
}

.resala-form *,
.resala-apply *,
.resala-portal *,
.resala-notice *,
.resala-received *,
.resala-transfer * {
	box-sizing: border-box;
}

.resala-form {
	display: grid;
	gap: var(--resala-gap);
}

.resala-portal {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: minmax(0, 1fr);
}

/* Whenever one of these blocks nests inside another, the outer one keeps the
   card and the inner one becomes plain content. Without this the portal draws
   a bordered box inside a bordered box. */
.resala-portal .resala-form,
.resala-portal .resala-portal,
.resala-apply .resala-form {
	background: none;
	border: 0;
	box-shadow: none;
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.resala-apply {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
}

.resala-field {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

/* Two half-width fields share a row. Pushing the control down means an input
   whose label carries a hint still lines up with the one next to it. */
.resala-field > input,
.resala-field > select,
.resala-field > textarea,
.resala-field > .resala-choices {
	margin-top: auto;
}

/* Two-up on wider viewports only. The grid is single-column by default so a
   narrow screen never gets a half-width input it has to pinch to read. */
@container (min-width: 34em) {
	.resala-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.resala-field {
		grid-column: span 2;
	}

	.resala-field--half {
		grid-column: span 1;
	}
}

.resala-field[hidden] {
	display: none;
}

.resala-field label,
.resala-label {
	color: var(--resala-ink);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
}

.resala-description {
	color: var(--resala-muted);
	font-size: .8125rem;
	line-height: 1.55;
}

.resala-upload-rules {
	color: var(--resala-muted);
	font-size: .8125rem;
	line-height: 1.55;
	margin: .35rem 0 0;
}

.resala-required {
	color: var(--resala-danger-line);
	margin-inline-start: .15rem;
}

.resala-field input[type="text"],
.resala-field input[type="email"],
.resala-field input[type="tel"],
.resala-field input[type="number"],
.resala-field input[type="date"],
.resala-field select,
.resala-field textarea {
	background: var(--resala-field-background, var(--resala-surface));
	border: 1px solid var(--resala-border-strong);
	border-radius: var(--resala-radius-sm);
	box-shadow: var(--resala-shadow);
	box-sizing: border-box;
	color: var(--resala-ink);
	font: inherit;
	font-size: .9375rem;
	line-height: 1.5;
	padding: .65rem .75rem;
	transition: border-color .12s ease, box-shadow .12s ease;
	width: 100%;
}

.resala-field input[type="text"]:hover:not([aria-invalid="true"]),
.resala-field input[type="email"]:hover:not([aria-invalid="true"]),
.resala-field input[type="tel"]:hover:not([aria-invalid="true"]),
.resala-field input[type="number"]:hover:not([aria-invalid="true"]),
.resala-field input[type="date"]:hover:not([aria-invalid="true"]),
.resala-field select:hover:not([aria-invalid="true"]),
.resala-field textarea:hover:not([aria-invalid="true"]) {
	border-color: var(--resala-accent);
}

/* An answer the applicant cannot change should not invite them to try. */
.resala-field input[readonly] {
	background: var(--resala-surface-alt);
	border-color: var(--resala-border);
	box-shadow: none;
	color: var(--resala-muted);
	cursor: default;
}

.resala-field input[readonly]:hover {
	border-color: var(--resala-border);
}

.resala-field input[type="file"] {
	background: var(--resala-surface-alt);
	border: 1px dashed var(--resala-border-strong);
	border-radius: var(--resala-radius-sm);
	box-sizing: border-box;
	color: var(--resala-muted);
	font-size: .875rem;
	padding: .75rem;
	width: 100%;
}

.resala-field input[type="file"]::file-selector-button {
	background: var(--resala-surface);
	border: 1px solid var(--resala-border-strong);
	border-radius: 6px;
	color: var(--resala-ink);
	cursor: pointer;
	font: inherit;
	font-size: .8125rem;
	font-weight: 600;
	margin-inline-end: .75rem;
	padding: .4rem .7rem;
}

.resala-field input[type="file"]::file-selector-button:hover {
	border-color: var(--resala-accent);
}

.resala-field textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.resala-field :focus-visible {
	border-color: var(--resala-accent);
	box-shadow: 0 0 0 3px var(--resala-accent-ring);
	outline: 0;
}

.resala-field input[aria-invalid="true"],
.resala-field select[aria-invalid="true"],
.resala-field textarea[aria-invalid="true"] {
	background: var(--resala-danger-surface);
	border-color: var(--resala-danger);
	box-shadow: inset 3px 0 0 var(--resala-danger);
}

/* Focus must not paint the error away: the ring turns red rather than accent. */
.resala-field input[aria-invalid="true"]:focus-visible,
.resala-field select[aria-invalid="true"]:focus-visible,
.resala-field textarea[aria-invalid="true"]:focus-visible {
	border-color: var(--resala-danger);
	box-shadow: inset 3px 0 0 var(--resala-danger), 0 0 0 3px var(--resala-danger-surface);
}

/* A group of radios marks its edge rather than filling: the background would
   swallow every choice in it. */
.resala-choices[aria-invalid="true"] {
	border-inline-start: 3px solid var(--resala-danger);
	padding-inline-start: .75rem;
}

.resala-field:has([aria-invalid="true"]) > label,
.resala-field:has([aria-invalid="true"]) > .resala-label {
	color: var(--resala-danger);
}

.resala-choices {
	display: grid;
	gap: .5rem;
}

.resala-choice,
.resala-consent {
	align-items: flex-start;
	background: var(--resala-surface);
	border: 1px solid var(--resala-border);
	border-radius: var(--resala-radius-sm);
	cursor: pointer;
	display: flex;
	font-size: .9375rem;
	font-weight: 400;
	gap: .6rem;
	line-height: 1.5;
	padding: .65rem .75rem;
	transition: border-color .12s ease, background .12s ease;
}

.resala-choice:hover,
.resala-consent:hover {
	background: var(--resala-surface-alt);
	border-color: var(--resala-accent);
}

.resala-choice input,
.resala-consent input {
	accent-color: var(--resala-accent);
	flex-shrink: 0;
	margin: .2rem 0 0;
}

.resala-choice:has(input:checked),
.resala-consent:has(input:checked) {
	background: var(--resala-accent-soft);
	border-color: var(--resala-accent);
}

.resala-choice:focus-within,
.resala-consent:focus-within {
	border-color: var(--resala-accent);
	box-shadow: 0 0 0 3px var(--resala-accent-ring);
}

.resala-scholarship {
	--resala-ink: var(--text);
	--resala-muted: var(--muted);
	--resala-border: var(--border);
	--resala-accent: var(--accent);
	--resala-accent-ink: var(--accent-ink);
	--resala-accent-soft: var(--accent-soft);
	--resala-surface-alt: var(--surface-alt);
	--resala-radius: var(--radius);
	--resala-shadow-lg: var(--shadow-lg);
	color: var(--resala-ink);
	container-type: inline-size;
	font-family: var(--resala-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	margin: 0 auto;
	max-width: 76rem;
}

.resala-programmes :is(h1, h2, h3, dt, dd, p, li, a, button),
.resala-scholarship :is(h1, h2, h3, dt, dd, p, li, a, button) { font-family: inherit; }
.resala-scholarship :is(h1, h2, h3) { line-height: 1.2; text-wrap: balance; }
.resala-scholarship h1 { font-size: clamp(1.9rem, 4cqi, 2.6rem); margin: .35rem 0 0; }
.resala-scholarship h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.resala-scholarship section + section { margin-top: 2.5rem; }
.resala-scholarship__hero { display: grid; gap: 1rem; }
.resala-scholarship__crumbs { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: .85rem; gap: .5rem; }
.resala-scholarship__crumbs a { color: var(--muted); text-decoration: none; }
.resala-scholarship__crumbs a:hover { color: var(--accent-ink); }
.resala-scholarship__crumbs span[aria-hidden] { color: var(--muted-2); }
.resala-scholarship__chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* The stat strip is the one place the page states its numbers, so it reads as
   a row of equal facts rather than as another definition list. */
.resala-scholarship__stats { border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: .5rem 0 0; overflow: hidden; }
.resala-scholarship__stats > div { border: 0; border-right: 1px solid var(--rule); display: grid; gap: .3rem; padding: 1rem 1.15rem; }
.resala-scholarship__stats > div:last-child { border-right: 0; }
.resala-scholarship__stats dt { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.resala-scholarship__stats dd { font-size: 1.05rem; font-weight: 600; margin: 0; }
.resala-scholarship__program-fee-note { color: var(--muted); font-size: .8125rem; line-height: 1.55; margin: -.25rem 0 0; }
.resala-scholarship .resala-programme__description { color: var(--text-2); font-size: 1.05rem; line-height: 1.7; }

.resala-scholarship__gallery { display: grid; gap: .45rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(8rem, 15rem)); margin: 1.5rem 0 2.5rem; overflow: hidden; position: relative; }
.resala-scholarship__gallery img { border-radius: 4px; height: 100%; object-fit: cover; width: 100%; }
.resala-scholarship__gallery-main { grid-column: span 2; grid-row: span 2; }
.resala-scholarship__gallery button { background: var(--resala-surface, #fff); border: 1px solid var(--resala-border); border-radius: 8px; bottom: 1rem; cursor: pointer; font: inherit; font-weight: 600; padding: .55rem .8rem; position: absolute; right: 1rem; }
.resala-scholarship__lightbox { background: var(--resala-surface, #fff); border: 0; border-radius: 12px; max-height: 90vh; max-width: min(70rem, 94vw); padding: 1rem; width: 100%; }
.resala-scholarship__lightbox::backdrop { background: rgba(16, 24, 40, .78); }
.resala-scholarship__lightbox form { display: flex; justify-content: flex-end; }
.resala-scholarship__lightbox button { background: var(--resala-surface-alt); border: 1px solid var(--resala-border); border-radius: 8px; cursor: pointer; font: inherit; padding: .45rem .9rem; }
.resala-scholarship__lightbox div { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: .75rem; overflow-y: auto; }
.resala-scholarship__lightbox img { border-radius: 6px; width: 100%; }
.resala-scholarship__gallery:has(img:only-of-type) { grid-template-columns: 1fr; grid-template-rows: minmax(12rem, 22rem); }

.resala-scholarship__layout { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; }
.resala-scholarship__main { display: grid; gap: 2.5rem; }
.resala-scholarship__main > section { display: grid; gap: .85rem; }
.resala-scholarship__main > section > h2 { margin: 0; }
.resala-scholarship__aside { display: grid; gap: 1.25rem; }
.resala-scholarship__apply { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); display: grid; gap: .6rem; padding: 1.35rem; }
.resala-scholarship__apply p { margin: 0; }
.resala-scholarship__apply-lead { font-size: 1.05rem; }
.resala-scholarship__apply-note { color: var(--muted); font-size: .85rem; text-align: center; }
.resala-scholarship__apply p:not(.resala-scholarship__apply-lead):not(.resala-scholarship__apply-note) { color: var(--muted); font-size: .9rem; }
.resala-scholarship__glance { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.35rem; }
.resala-scholarship__glance h2 { font-size: .78rem; letter-spacing: .06em; margin: 0 0 .35rem; text-transform: uppercase; }
.resala-scholarship__glance dl > div { align-items: baseline; border-top: 1px solid var(--border); display: grid; gap: .35rem 1rem; grid-template-columns: minmax(0, auto) minmax(0, 1fr); padding: .7rem 0; }
.resala-scholarship__glance dl > div:first-child { border-top: 0; padding-top: 0; }
.resala-scholarship__glance dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.resala-scholarship__glance dd { text-align: right; }
.resala-scholarship__requirements { color: var(--text-2); }

.resala-scholarship dl { display: grid; gap: 0; margin: 0; }
.resala-scholarship dt { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.resala-scholarship dd { line-height: 1.6; margin: 0; }

.resala-scholarship__benefits { column-gap: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; row-gap: 1.1rem; }
.resala-scholarship__benefit { align-items: flex-start; color: var(--text); display: flex; font-size: 1rem; gap: .9rem; line-height: 1.5; }
.resala-scholarship__benefit-icon { color: var(--text-2); flex: 0 0 1.5rem; }
.resala-scholarship__benefit-icon .dashicons { font-size: 1.5rem; height: 1.5rem; width: 1.5rem; }
.resala-scholarship__benefit-icon img { border-radius: 4px; height: 1.5rem; object-fit: cover; width: 1.5rem; }
.resala-scholarship__benefit-value { color: var(--muted); }
.resala-scholarship ul:not(.resala-scholarship__benefits) { color: var(--resala-muted); line-height: 1.8; margin: 0; padding-left: 1.15rem; }

@container (min-width: 44em) {
	.resala-scholarship__main dl > div { grid-template-columns: 14rem minmax(0, 1fr); }
	.resala-scholarship__main dt { padding-top: .1rem; }
}

@container (min-width: 54em) {
	.resala-scholarship__layout { grid-template-columns: minmax(0, 1fr) 21rem; }
	.resala-scholarship__aside { align-content: start; position: sticky; top: 2rem; }
}

@container (max-width: 36em) {
	.resala-scholarship__gallery { grid-template-columns: 1fr; grid-template-rows: 16rem; }
	.resala-scholarship__gallery img:not(:first-child) { display: none; }
	.resala-scholarship__gallery-main { grid-column: auto; grid-row: auto; }
	.resala-scholarship__benefits { grid-template-columns: 1fr; }
}

.resala-error {
	color: var(--resala-danger);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

.resala-errors {
	background: var(--resala-danger-surface);
	border: 1px solid var(--resala-danger-line);
	border-radius: var(--resala-radius);
	padding: 1rem 1.15rem;
}

/* Only the form is two-up, so only its own children may span both columns. A
   span-2 child of the single-column wrappers would invent a second column
   there and squeeze everything into the left half. */
@container (min-width: 34em) {
	.resala-form > .resala-errors,
	.resala-form > .resala-heading,
	.resala-form > .resala-content,
	.resala-form > .resala-actions {
		grid-column: span 2;
	}
}

.resala-errors p {
	color: var(--resala-danger);
	font-size: .9375rem;
	font-weight: 600;
	margin: 0 0 .5rem;
}

.resala-errors ul {
	color: var(--resala-danger);
	font-size: .875rem;
	line-height: 1.6;
	margin: 0;
	padding-inline-start: 1.25rem;
}

.resala-heading {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0;
}

/* The rule belongs between sections, not above the first one. Keying it to a
   preceding field means the hidden nonce inputs the form opens with cannot be
   mistaken for content that needs separating from. */
.resala-field ~ .resala-heading {
	border-top: 1px solid var(--resala-border);
	margin-top: .6rem;
	padding-top: 1.5rem;
}

.resala-content {
	color: var(--resala-muted);
	font-size: .9375rem;
	line-height: 1.65;
}

.resala-content p {
	margin: 0;
}

.resala-actions {
	border-top: 1px solid var(--resala-border);
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	margin-top: .5rem;
	padding-top: 1.35rem;
}

.resala-actions button[type="submit"] {
	background: var(--resala-button-background, var(--accent));
	border: 1px solid var(--resala-button-background, var(--accent));
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	color: var(--resala-button-text, var(--on-accent));
	cursor: pointer;
	font: 600 .9375rem/1.2 var(--sans);
	padding: .7rem 1.4rem;
	transition: background .12s ease, border-color .12s ease;
}

.resala-actions button[type="submit"]:hover { background: var(--accent-2); border-color: var(--accent-2); }
.resala-actions button[type="submit"]:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); outline: 0; }
.resala-actions button[type="submit"]:active { transform: translateY(1px); }
.resala-actions button[type="submit"]:disabled { cursor: not-allowed; opacity: .55; }
.resala-actions .resala-btn { font-size: .9375rem; padding: .7rem 1.4rem; }

.resala-btn--accent {
	background: var(--resala-button-background, var(--accent));
	color: var(--resala-button-text, var(--on-accent));
}

.resala-notice {
	background: var(--resala-surface-alt);
	border: 1px solid var(--resala-border);
	border-radius: var(--resala-radius);
	font-size: .9375rem;
	line-height: 1.6;
	margin-inline: auto;
	max-width: 46rem;
	padding: 1rem 1.15rem;
}

.resala-notice--success {
	background: var(--resala-success-surface);
	border-color: var(--resala-success-line);
	color: var(--resala-success);
}

.resala-notice--success a {
	color: inherit;
	font-weight: 600;
}

.resala-header {
	border-bottom: 1px solid var(--resala-border);
	display: grid;
	gap: .5rem;
	padding-bottom: 1.35rem;
}

.resala-header h2 {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
}

.resala-header p {
	color: var(--resala-muted);
	font-size: .9375rem;
	line-height: 1.65;
	margin: 0;
}

.resala-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .35rem;
}

.resala-header__meta span {
	background: var(--resala-accent-soft);
	border-radius: 999px;
	color: var(--resala-accent-ink);
	font-size: .75rem;
	font-weight: 600;
	padding: .3rem .7rem;
}

.resala-form .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* Portal */
.resala-portal h3 {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 .85rem;
}

.resala-summary,
.resala-answers dl {
	display: grid;
	gap: .1rem;
	margin: 0;
}

.resala-summary > div,
.resala-answers dl > div {
	border-bottom: 1px solid var(--resala-border);
	display: grid;
	gap: .2rem;
	padding: .7rem 0;
}

@container (min-width: 26em) {
	.resala-summary > div,
	.resala-answers dl > div {
		align-items: baseline;
		gap: 1rem;
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	}
}

.resala-summary > div:last-child,
.resala-answers dl > div:last-child {
	border-bottom: 0;
}

.resala-summary dt,
.resala-answers dt {
	color: var(--resala-muted);
	font-size: .8125rem;
	font-weight: 600;
}

.resala-summary dd,
.resala-answers dd {
	font-size: .9375rem;
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
}

.resala-summary {
	background: var(--resala-surface-alt);
	border: 1px solid var(--resala-border);
	border-radius: var(--resala-radius);
	padding: .35rem 1.1rem;
}

.resala-summary__status dd {
	font-weight: 700;
}

.resala-timeline ol,
.resala-index {
	display: grid;
	gap: .85rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.resala-timeline li {
	border-inline-start: 2px solid var(--resala-border);
	display: grid;
	gap: .15rem;
	font-size: .9375rem;
	line-height: 1.6;
	padding-inline-start: .85rem;
}

.resala-timeline time {
	color: var(--resala-muted);
	display: block;
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
}

.resala-index li {
	align-items: center;
	background: var(--resala-surface);
	border: 1px solid var(--resala-border);
	border-radius: var(--resala-radius-sm);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	padding: .85rem 1rem;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.resala-index li:hover,
.resala-index li:focus-within {
	border-color: var(--resala-accent);
	box-shadow: 0 0 0 3px var(--resala-accent-ring);
}

.resala-index a {
	color: var(--resala-accent-ink);
	font-weight: 700;
	text-decoration: none;
}

.resala-index a:hover {
	text-decoration: underline;
}

.resala-index span {
	color: var(--resala-muted);
	font-size: .875rem;
}

.resala-index span:last-child {
	background: var(--resala-accent-soft);
	border-radius: 999px;
	color: var(--resala-accent-ink);
	font-size: .75rem;
	font-weight: 600;
	margin-inline-start: auto;
	padding: .3rem .7rem;
}

/* Review before submitting */
.resala-review {
	background: var(--resala-surface-alt);
	border: 1px solid var(--resala-border);
	border-radius: var(--resala-radius);
	padding: 1.15rem 1.25rem;
}

.resala-review > h3 {
	margin-bottom: .35rem;
}

.resala-review > .resala-description {
	margin-bottom: 1rem;
}

.resala-review dl {
	display: grid;
	gap: 0;
	margin: 0;
}

.resala-review dl > div {
	border-bottom: 1px solid var(--resala-border);
	display: grid;
	gap: .2rem;
	padding: .7rem 0;
}

@container (min-width: 30em) {
	.resala-review dl > div {
		align-items: baseline;
		gap: 1rem;
		grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	}
}

.resala-review dl > div:last-child {
	border-bottom: 0;
}

.resala-review dt {
	color: var(--resala-muted);
	font-size: .8125rem;
	font-weight: 600;
}

.resala-review dd {
	font-size: .9375rem;
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.resala-review__empty dd {
	color: var(--resala-muted);
	font-style: italic;
}

.resala-total {
	background: var(--resala-accent-soft);
	border: 1px solid var(--resala-accent);
	border-radius: var(--resala-radius);
	margin: 1.35rem 0 .85rem;
	padding: .9rem 1.15rem;
}

.resala-total > div {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.resala-total dt {
	color: var(--resala-accent-ink);
	font-size: .875rem;
	font-weight: 600;
}

.resala-total dd {
	color: var(--resala-accent-ink);
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	margin: 0;
}

.resala-payment-choices {
	border: 0;
	display: grid;
	gap: .7rem;
	margin: .25rem 0 0;
	padding: 0;
}

.resala-payment-choices legend {
	font-size: .875rem;
	font-weight: 700;
	margin-bottom: .15rem;
}

.resala-payment-choice {
	align-items: center;
	background: var(--resala-surface);
	border: 1px solid var(--resala-border-strong);
	border-radius: var(--resala-radius-sm);
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: .75rem;
	min-height: 3.25rem;
	padding: .8rem 1rem;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.resala-payment-choice:hover {
	border-color: var(--resala-accent);
}

.resala-payment-choice:has(input:checked) {
	background: var(--resala-accent-soft);
	border-color: var(--resala-accent);
	box-shadow: 0 0 0 3px var(--resala-accent-ring);
}

.resala-payment-choice input {
	accent-color: var(--resala-accent);
	flex: 0 0 auto;
	margin: 0;
}

.resala-actions--split {
	align-items: center;
	display: flex;
	flex-direction: column-reverse;
	gap: .65rem;
}

.resala-actions--split > * {
	width: 100%;
	text-align: center;
}

@container (min-width: 30em) {
	.resala-actions--split {
		flex-direction: row;
		justify-content: space-between;
	}

	.resala-actions--split > * {
		width: auto;
	}
}

/* Applicant dashboard */
/* The portal is a page in its own right, not an article, so it asks for more
   than the content column a shortcode normally lands in.

   Two mechanisms, because one is not enough on its own. A block theme puts the
   shortcode straight into .is-layout-constrained, which sets the content width
   with `margin: auto !important`, so no margin of ours can escape it. The
   `alignwide` class is that layout's own opt-out and is what actually lifts the
   ceiling there. The negative margin below is for classic themes, which have no
   such class and no !important to fight. */
.resala-apply:not(.resala-apply--contained),
.resala-dashboard:not(.resala-dashboard--contained),
.resala-detail:not(.resala-detail--contained),
.resala-programmes:not(.resala-programmes--contained),
.resala-scholarship:not(.resala-scholarship--contained) {
	margin-inline: calc(50% - min(34rem, 50vw - 1rem));
	max-width: none;
	width: min(68rem, 100vw - 2rem);
}

.resala-apply--contained,
.resala-dashboard--contained,
.resala-detail--contained,
.resala-programmes--contained,
.resala-scholarship--contained {
	margin-inline: auto;
	max-width: 46rem;
	width: auto;
}

/* Long references and addresses are unbreakable words. Without this they force
   a column wider than its track and the text wraps a letter at a time. */
.resala-summary dd,
.resala-answers dd,
.resala-review dd,
.resala-application__title,
.resala-application__reference {
	min-width: 0;
	overflow-wrap: anywhere;
}

.resala-greeting h2 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 .35rem;
}

.resala-greeting p {
	color: var(--resala-muted);
	font-size: .9375rem;
	margin: 0;
}

.resala-stats {
	display: grid;
	gap: .85rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.resala-stat {
	background: var(--resala-surface);
	border: 1px solid var(--resala-border);
	border-radius: var(--resala-radius);
	padding: 1rem 1.15rem;
}

.resala-stat__label {
	color: var(--resala-muted);
	font-size: .8125rem;
	font-weight: 600;
	margin: 0;
}

.resala-stat strong {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -.03em;
	margin: .2rem 0 .1rem;
}

.resala-stat__note {
	color: var(--resala-muted);
	font-size: .75rem;
	margin: 0;
}

.resala-stat--approved strong { color: var(--resala-success); }
.resala-stat--rejected strong { color: var(--resala-danger); }

.resala-applications h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 .85rem;
}

.resala-application {
	background: var(--resala-surface);
	border: 1px solid var(--resala-border);
	border-inline-start: 4px solid var(--resala-border);
	border-radius: var(--resala-radius);
	margin-bottom: .85rem;
}

.resala-application[open] { border-inline-start-color: var(--resala-accent); }
.resala-application--approved[open] { border-inline-start-color: var(--resala-success-line); }
.resala-application--rejected[open],
.resala-application--payment_failed[open] { border-inline-start-color: var(--resala-danger-line); }

.resala-application summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	list-style: none;
	padding: 1rem 1.15rem;
}

.resala-application summary::-webkit-details-marker { display: none; }

.resala-application__reference {
	color: var(--resala-accent-ink);
	font-weight: 700;
}

.resala-application__title {
	color: var(--resala-ink);
	flex: 1;
	font-size: .9375rem;
}

/* The pill itself is the design system's. These are the application states it
   does not know about. */
.resala-pill--approved { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.resala-pill--rejected,
.resala-pill--payment_failed { background: var(--error-soft); border-color: var(--error-line); color: var(--error); }
.resala-pill--pending_payment { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

.resala-application__body {
	border-top: 1px solid var(--resala-border);
	display: grid;
	gap: 1.5rem;
	padding: 1.15rem;
}

.resala-application__body > section {
	container-type: inline-size;
	min-width: 0;
}

@container (min-width: 40em) {
	.resala-application__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
	}
}

.resala-application__body h4 {
	font-size: .875rem;
	font-weight: 700;
	margin: 0 0 .6rem;
}

.resala-application__body .resala-summary {
	background: none;
	border: 0;
	padding: 0;
}

.resala-application__body .resala-actions {
	border-top: 0;
	margin-top: 1rem;
	padding-top: 0;
}

.resala-progress {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.resala-step {
	border-inline-start: 2px solid var(--resala-border);
	margin-inline-start: .45rem;
	padding: 0 0 1.1rem 1.35rem;
	position: relative;
}

.resala-step:last-child { border-inline-start-color: transparent; padding-bottom: 0; }

.resala-step::before {
	background: var(--resala-surface);
	border: 2px solid var(--resala-border);
	border-radius: 50%;
	content: '';
	height: .85rem;
	inset-inline-start: -.5rem;
	position: absolute;
	top: 0;
	width: .85rem;
}

.resala-step--done::before { background: var(--resala-accent); border-color: var(--resala-accent); }
.resala-step--current::before { background: var(--resala-surface); border-color: var(--resala-accent); box-shadow: 0 0 0 3px var(--resala-accent-ring); }
.resala-step--failed::before { background: var(--resala-danger-line); border-color: var(--resala-danger-line); }

.resala-step strong {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
}

.resala-step span {
	color: var(--resala-muted);
	font-size: .75rem;
}

.resala-step--failed span { color: var(--resala-danger); font-weight: 600; }

.resala-empty {
	background: var(--resala-surface-alt);
	border: 1px dashed var(--resala-border);
	border-radius: var(--resala-radius);
	color: var(--resala-muted);
	margin: 0;
	padding: 2rem;
	text-align: center;
}

/* One application */
.resala-back a {
	align-items: center;
	color: var(--resala-accent-ink);
	display: inline-flex;
	font-size: .875rem;
	font-weight: 600;
	gap: .4rem;
	text-decoration: none;
}

.resala-back a::before {
	content: '\2190';
	font-size: 1rem;
	line-height: 1;
}

.resala-back a:hover {
	text-decoration: underline;
}

.resala-detail__header {
	align-items: flex-start;
	border-bottom: 1px solid var(--resala-border);
	display: flex;
	flex-wrap: wrap;
	gap: .65rem 1rem;
	justify-content: space-between;
	padding-bottom: 1.35rem;
}

.resala-detail__header h2 {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: .25rem 0 0;
}

.resala-detail__body {
	display: grid;
	gap: 1.75rem;
}

/* The main column is its own container so the answer and summary rows break to
   two columns on the width they actually have, not the width of the page. */
.resala-detail__main {
	container-type: inline-size;
	display: grid;
	gap: 1.6rem;
	min-width: 0;
}

/* Stacked, the panel sits under the history with nothing to separate them, so
   it carries a rule instead of the background it gets beside the answers. */
.resala-detail__side {
	border-top: 1px solid var(--resala-border);
	min-width: 0;
	padding-top: 1.35rem;
}

.resala-detail__side h4 {
	font-size: .875rem;
	font-weight: 700;
	margin: 0 0 .6rem;
}

.resala-updated {
	border-top: 1px solid var(--resala-border);
	color: var(--resala-muted);
	font-size: .75rem;
	margin: 1.1rem 0 0;
	padding-top: .85rem;
}

.resala-detail__side .resala-actions {
	border-top: 0;
	margin-top: 1.1rem;
	padding-top: 0;
}

@container (min-width: 46em) {
	.resala-detail__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
	}

	/* align-self keeps the box its own height. A stretched grid item is already
	   as tall as the row, so sticky would have nothing to scroll within. */
	.resala-detail__side {
		align-self: start;
		background: var(--resala-surface-alt);
		border: 1px solid var(--resala-border);
		border-radius: var(--resala-radius);
		padding: 1.15rem;
		position: sticky;
		top: 1.5rem;
	}
}

.resala-received { background: var(--resala-surface); border: 1px solid var(--resala-border); border-radius: var(--resala-radius); padding: 24px; }
.resala-received h2 { font: 700 22px/1.25 var(--resala-font); letter-spacing: -.01em; margin: 0 0 12px; }
.resala-received p { font: 15px/1.65 var(--resala-font); margin: 0 0 10px; }
.resala-received__action { margin: 18px 0 6px; }
.resala-received__note { color: var(--resala-muted); font-size: 13px; margin: 0; }

.resala-transfer {
	background: var(--resala-surface);
	border: 1px solid var(--resala-border);
	border-radius: var(--resala-radius);
	box-shadow: var(--resala-shadow);
	color: var(--resala-ink);
	margin: 24px 0 0;
	max-width: 46rem;
	padding: clamp(20px, 4vw, 28px);
}
.resala-transfer h3 { font: 700 20px/1.3 var(--resala-font); letter-spacing: -.01em; margin: 0 0 6px; }
.resala-transfer__lede { color: var(--resala-muted); font: 14px/1.6 var(--resala-font); margin: 0 0 20px; }
.resala-transfer__facts { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 14px; }
.resala-transfer__fact { background: var(--resala-surface-alt); border: 1px solid var(--resala-border); border-radius: var(--resala-radius-sm); min-width: 0; padding: 14px 16px; }
.resala-transfer__fact dt { color: var(--resala-muted); font: 600 12px/1.4 var(--resala-font); margin: 0; }
.resala-transfer__fact dd { color: var(--resala-ink); font: 700 17px/1.45 var(--resala-font); margin: 4px 0 0; overflow-wrap: anywhere; }
.resala-transfer__fact dd strong { color: var(--resala-accent-ink); font-weight: 700; }
.resala-transfer__note { background: var(--resala-accent-soft); border-inline-start: 3px solid var(--resala-accent); border-radius: var(--resala-radius-sm); color: var(--resala-ink); font: 14px/1.6 var(--resala-font); margin: 0 0 22px; padding: 11px 13px; }
.resala-transfer__account h4 { font: 700 14px/1.3 var(--resala-font); margin: 0 0 8px; }
.resala-transfer__account pre { background: var(--resala-surface-alt); border: 1px solid var(--resala-border); border-radius: var(--resala-radius-sm); color: var(--resala-ink); font: 14px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0; overflow-x: auto; padding: 16px; white-space: pre-wrap; word-break: break-word; }
.resala-transfer__instructions { border-top: 1px solid var(--resala-border); color: var(--resala-muted); font: 14px/1.7 var(--resala-font); margin-top: 20px; padding-top: 16px; }
.resala-transfer__instructions p { margin: 0 0 10px; }
.resala-transfer__instructions p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
	.resala-transfer__facts { grid-template-columns: 1fr; }
}