/*
 * The Preferences section of the account — ticket 15.
 * design/DESIGN-SYSTEM.md §4.13 (form controls), §4.22 (left accent),
 * §3.4 (auto-fit grids), §1 (radius 0, no @media, Barlow italic uppercase).
 *
 * ---------------------------------------------------------------------------
 * ALMOST NOTHING IS NEW HERE, AND THAT IS THE POINT
 * ---------------------------------------------------------------------------
 *
 * The form is `.sp-form__grid` / `.sp-field` / `.sp-input` / `.sp-form__actions`
 * exactly as the contact form and the sign-in panels use them. The site has one
 * field recipe and a second one would be the mistake -- the same note
 * `components/account.css` opens with. What this file adds is only what a
 * `<select>` needs that an `<input>` does not, plus the helper text under a
 * control, plus the small recap panel.
 *
 * ---------------------------------------------------------------------------
 * NO @MEDIA, NO RADIUS
 * ---------------------------------------------------------------------------
 *
 * Not one breakpoint: the grid is the system's `repeat(auto-fit, minmax(...))`
 * and every size is a token or a clamp() already in tokens.css. Every corner is
 * `--sp-radius`, which is 0. No value in this file is a colour, a size or a
 * duration written out by hand -- if a token were missing the answer would be
 * to add it to tokens.css, and none was.
 */

/* ================================================================= layout */

.sp-prefs__form {
	margin-top: var(--sp-9);
	max-width: 720px;
}

/* ================================================================= select */

/*
 * The one control the design system had not needed yet.
 *
 * It carries `.sp-input` for its chrome -- #111 ground, the 0.16 hairline,
 * 14px padding, 15px text, radius 0 -- and this class adds the two things a
 * native dropdown needs on top:
 *
 *   `color-scheme: dark` is what makes the browser draw the popup list, its
 *   scrollbar and the disclosure arrow in dark UI colours. Without it a dark
 *   field opens a white menu, which is the one place a page like this always
 *   gives itself away.
 *
 *   The native arrow is kept (no `appearance: none`). Replacing it would mean
 *   an inline SVG with a colour literal baked into a data URI, which is a
 *   hard-coded colour by another name; and the native control is the one that
 *   a phone turns into a full-height wheel with the <optgroup> names as its
 *   section headers. That wheel is precisely why the car picker is grouped, so
 *   it would be perverse to throw it away for a chevron.
 *
 * Scoped to this section rather than named `.sp-select`: a shared select
 * modifier belongs in components/form.css beside `.sp-input`, and that file
 * belongs to nobody in this wave. The day a second section needs one, these
 * three declarations move there and this rule becomes an alias.
 */
.sp-prefs__select {
	color-scheme: dark;
	/* Room for the arrow the browser draws inside the box. */
	padding-right: var(--sp-11);
}

/*
 * Only some browsers let the popup's items be styled at all; the ones that do
 * otherwise inherit the OS list background, which `color-scheme` alone does not
 * always settle for an <optgroup> label.
 */
.sp-prefs__select option,
.sp-prefs__select optgroup {
	background: var(--sp-bg-deep);
	color: var(--sp-text);
}

/* The racing-class heading inside the list: the brand treatment, at the size
   every other micro-heading in the design takes. */
.sp-prefs__select optgroup {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
}

/* =================================================================== hints */

/*
 * Helper text under a control -- §1.2's 13px helper size, at the alpha every
 * other hint on the site uses.
 *
 * It sits inside `.sp-field`, which is a column flex with a var(--sp-2) gap, so
 * it needs no margin of its own.
 *
 * One of these is load bearing: the line under the gamertag says that nobody
 * verifies it. Nothing in this section may look like a checked or claimed
 * identity, so that sentence is ordinary body text in the ordinary muted
 * colour -- not a badge, not a tick, nothing that reads as a credential.
 */
.sp-prefs__hint {
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-45);
}

/* ================================================================= notice */

/*
 * The verdict of the save that just happened, next to the form it happened to
 * rather than in a banner at the top of the page.
 *
 * One line with the left red accent (§4.22), not the full `.sp-form__notice`
 * panel with its 46px circle: that panel is for the end of a journey -- a
 * message sent, a booking made -- and "saved" is a much smaller event than
 * that. The error variant is the same line; only the colour of the rule and of
 * the text change, because a failed save is still not a catastrophe.
 */
.sp-prefs__notice {
	margin: var(--sp-7) 0 0;
	padding-left: var(--sp-5);
	max-width: 620px;
	border-left: 2px solid var(--sp-green);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-78);
}

.sp-prefs__notice--error {
	border-left-color: var(--sp-red);
	color: var(--sp-red);
}

/* ================================================================== recap */

/*
 * "What the desk will see."
 *
 * The card recipe the account already uses for a Booking and a Voucher --
 * #232323 on the page ground, the 1px hairline, radius 0, a left accent -- so
 * the three things the section can show a customer are visibly the same kind of
 * object.
 *
 * EVERY ROW IN HERE IS CONDITIONAL IN THE TEMPLATE and the whole block is
 * skipped when nothing is set. There is no rule below for an empty value,
 * because no empty value is ever printed: an unfilled preference produces no
 * row at all, not a row with a dash in it.
 */
.sp-prefs__recap {
	margin-top: clamp(26px, 3.5vw, 44px);
	padding: clamp(20px, 2.4vw, 26px);
	max-width: 720px;
	background: var(--sp-surface);
	border: var(--sp-border);
	border-left: 2px solid var(--sp-line-strong);
}

.sp-prefs__recap-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-prefs__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--sp-7);
	margin: var(--sp-7) 0 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--sp-line-faint);
}

.sp-prefs__fact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.sp-prefs__fact dd {
	margin: 0;
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text);
}

/* The racing class after the car's name: a fact about it, not part of it. */
.sp-prefs__group {
	display: inline-block;
	margin-left: var(--sp-2);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-tiny);
	letter-spacing: var(--sp-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sp-text-55);
}

/* ================================================================ privacy */

/*
 * Preferences are private and the customer is told so in plain words. It is a
 * footnote to the section, so it takes the footnote size and colour that
 * `.sp-account__policy` takes for the cancellation rule.
 */
.sp-prefs__privacy {
	margin: var(--sp-9) 0 0;
	max-width: 620px;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-45);
}