/*
 * The registration panel on the signed-out account page — ticket 11.
 * design/DESIGN-SYSTEM.md §4.13 (form controls), §3.4 (grid), §4.22 (left
 * accent), §4.10 (helper text).
 *
 * Nothing here restyles a form control. The two fields are .sp-field /
 * .sp-input exactly as the contact form and the sign-in panels use them, and
 * the two-up row is .sp-form__grid, which is already `repeat(auto-fit,
 * minmax(240px, 1fr))` — so the pair sits side by side where there is room and
 * stacks where there is not, with no media query anywhere in the file. That is
 * the house rule and it is also simply the better behaviour: the panel reflows
 * to the space it is given rather than to a guess about the device.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS IS QUIETER THAN THE TWO PANELS ABOVE IT
 * ---------------------------------------------------------------------------
 *
 * Signing in and registering are not equal choices on this page. Almost
 * everybody arriving here already has bookings and wants the panels above;
 * registration is for the minority who have not ridden yet. So it is drawn as
 * a band under them rather than as a third box competing for the same
 * attention: the page ground, no card fill, and one red hairline on the left —
 * the accent this design gives to a statement rather than to a destination.
 *
 * Radius stays 0, as everywhere. Type is Barlow italic uppercase for the
 * heading, the display face this site sets every heading in.
 */

.sp-register {
	max-width: 720px;
	padding: clamp(22px, 3vw, 34px);
	background: var(--sp-bg-deep);
	border: var(--sp-border);
	border-left: 2px solid var(--sp-red);
}

.sp-register__title {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-20);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-register__intro {
	margin: var(--sp-3) 0 0;
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

/*
 * The panel answers its own form, in the panel, because the form is a long way
 * down the page — see the note in register.php. Same notice component as
 * everywhere else; only the spacing is this file's business.
 */
/*
 * Scoped under the section wrapper on purpose.
 *
 * `assets.php` enqueues components in filename order, so this file loads BEFORE
 * `booking-form.css` and `form.css`. An override written at the same
 * specificity as the base component it is overriding therefore LOSES — the base
 * comes later and wins the tie. Every rule below carries an element that also
 * holds the base class, so each one is raised to (0,2,0) by the wrapper and the
 * order stops mattering. `account-leaderboard.css` solves the same trap the
 * same way.
 */
.sp-register .sp-register__notice {
	margin-top: var(--sp-7);
}

.sp-register__form {
	margin-top: var(--sp-7);
}

/*
 * Name and e-mail are one row of two, which is the shape of the thing being
 * asked: a single short introduction, not a questionnaire. `.sp-form__grid`
 * already carries the auto-fit, so the floor is the only value worth naming
 * here — 240px is the token grid's own and there is no reason for this panel
 * to disagree with it.
 */
.sp-register__fields {
	gap: var(--sp-5);
}

/*
 * The sentence that explains the missing password field. Helper text: the
 * small size, the muted colour, and no accent of its own — the panel already
 * has one and a second would make a footnote look like a warning.
 */
.sp-register__hint {
	margin: var(--sp-5) 0 0;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-55);
}

.sp-register .sp-register__actions {
	margin-top: var(--sp-7);
	gap: var(--sp-7);
}