/*
 * Account panels and Booking cards. design/DESIGN-SYSTEM.md §4.13 (form
 * controls), §4.19 (badge inventory), §4.22 (left accent), §3.4 (grids).
 *
 * Nothing here restyles a form control: the sign-in panels use .sp-field /
 * .sp-input exactly as the contact form does, and this file only positions
 * them. Adding a second input style to a design whose whole field chrome is one
 * recipe would be the mistake.
 *
 * The Booking card is built from values the system already has -- #232323 card
 * on the page ground, 1px hairline, radius 0, the same 8px/.14em uppercase
 * micro-label as everywhere else. The one new idea is the status chip, and it
 * is deliberately quiet: Booking Status and Payment Status are two independent
 * facts and a confirmed cash Booking is an ordinary state, so the palette must
 * not shout at it. Only "cancelled" and "no_show" are drawn as something to
 * notice, and even then by fading the card rather than by turning it red.
 */

/* ================================================================ panels */

.sp-account__lede {
	max-width: 620px;
}

.sp-account__notice {
	margin-top: var(--sp-9);
}

.sp-account__panels {
	align-items: start;
}

.sp-account__panel {
	padding: clamp(22px, 3vw, 34px);
	background: var(--sp-surface);
	border: var(--sp-border);
}

/* The second way in sits on the deep ground, so the two are told apart at a
   glance without either looking like the "wrong" one. */
.sp-account__panel--alt {
	background: var(--sp-bg-deep);
}

.sp-account__panel-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-account__panel-intro {
	margin: var(--sp-3) 0 0;
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

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

.sp-account__form .sp-field + .sp-field {
	margin-top: var(--sp-5);
}

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

.sp-account__link {
	font-size: var(--sp-fs-sm);
}

/* ================================================================= lists */

.sp-account__group + .sp-account__group {
	margin-top: clamp(34px, 4.5vw, 62px);
	padding-top: clamp(26px, 3.5vw, 44px);
	border-top: 1px solid var(--sp-line-card);
}

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

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

.sp-account__empty-cta {
	margin: var(--sp-7) 0 0;
}

.sp-account__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--sp-grid-gap);
}

/* ========================================================= booking card */

.sp-booking {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	padding: clamp(20px, 2.4vw, 26px);
	background: var(--sp-surface);
	border: var(--sp-border);
	border-left: 2px solid var(--sp-line-strong);
	transition: border-color var(--sp-dur-fast) var(--sp-ease);
}

/* §4.22 left accent: the next ride is the one the page was opened for. */
.sp-booking--upcoming {
	border-left-color: var(--sp-red);
}

.sp-booking--void {
	opacity: 0.6;
}

.sp-booking__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin: 0;
}

.sp-booking__when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-3);
	margin: 0;
}

.sp-booking__date {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-xl);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-booking__time {
	font-size: var(--sp-fs-md);
	color: var(--sp-text-78);
}

.sp-booking__code {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	text-align: right;
}

.sp-booking__code-value {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-sm);
	letter-spacing: var(--sp-ls-pill);
	color: var(--sp-text-82);
}

.sp-booking__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-7);
	margin: 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--sp-line-faint);
}

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

.sp-booking__fact dd {
	margin: 0;
	font-size: var(--sp-fs-md);
	color: var(--sp-text);
}

/* ---------------------------------------------------------------- chips */

.sp-booking__statuses {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
}

.sp-booking__chip {
	display: inline-flex;
	align-items: center;
	padding: 6px var(--sp-3);
	border: 1px solid var(--sp-line-field);
	background: var(--sp-chip-fill);
	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-82);
	white-space: nowrap;
}

.sp-booking__chip--confirmed,
.sp-booking__chip--completed {
	border-color: var(--sp-line-strong);
	color: var(--sp-text);
}

/* Paid is the only genuinely finished thing on either axis, so it is the only
   one that gets the green. Unpaid is left neutral on purpose: cash on arrival
   is normal, not a warning. */
.sp-booking__chip--paid {
	border-color: var(--sp-green);
	color: var(--sp-green);
}

.sp-booking__chip--cancelled,
.sp-booking__chip--no_show {
	border-color: var(--sp-line-hover-sub);
	color: var(--sp-red);
}

.sp-booking__due {
	margin: 0;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--sp-line-faint);
	font-size: var(--sp-fs-sm);
	color: var(--sp-text-60);
}

/* ------------------------------------------------------------- actions */

/*
 * Tickets 32 and 33, in the place ticket 24 left for them. Cancelling is the
 * outline chip and moving is a plain link, on purpose: they are not equal
 * choices, and the design has no second button weight that would let them look
 * like they are. `margin-top:auto` pins the pair to the bottom of the card so a
 * row of cards of different heights still lines its controls up.
 */
.sp-booking__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
	margin: auto 0 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--sp-line-faint);
}

.sp-booking__action-move {
	font-size: var(--sp-fs-sm);
}

/* ===================================================== policy / account */

/*
 * The cancellation policy, under the upcoming rides. A single line rather than
 * a panel: the cards above already carry the two buttons, and the only thing
 * left to say is the deadline they stop working at. It reads as a footnote to
 * the list, so it takes the helper-text size and the muted colour and gets the
 * left accent every other statement of a rule on this site gets.
 */
.sp-account__policy {
	margin: var(--sp-7) 0 0;
	padding-left: var(--sp-5);
	max-width: 620px;
	border-left: 2px solid var(--sp-line-strong);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

.sp-account__identity {
	margin: 0;
	font-size: var(--sp-fs-md);
	color: var(--sp-text-78);
}

.sp-account__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-11);
	margin-top: var(--sp-7);
}

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

.sp-account__stat-value {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-3xl);
	line-height: 1;
	color: var(--sp-text);
}

.sp-account__account-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-7);
	margin-top: var(--sp-9);
}

.sp-account__logout {
	margin: 0;
}

/* ============================================================ section nav */

/*
 * The account's five sections, drawn as what they are: five links. Ticket 12.
 *
 * Not a tab strip. There is no `role="tablist"` and no `aria-selected` here on
 * purpose -- those words promise a widget that switches panels in the browser,
 * and this switches documents on the server so that the page works with
 * JavaScript switched off. The link to the section you are already on carries
 * `aria-current="page"`, and the red rule under it is drawn from that
 * attribute, so the announced state and the visible state are one thing.
 *
 * The row wraps rather than scrolls: five short labels fit two lines on the
 * narrowest phone, and a horizontally scrolling strip hides its last item from
 * exactly the visitor least able to discover it.
 */

.sp-account-nav {
	margin-top: var(--sp-9);
	border-bottom: 1px solid var(--sp-line-card);
}

.sp-account-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--sp-11);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-account-nav__item {
	margin: 0;
}

.sp-account-nav__link {
	display: inline-block;
	padding: var(--sp-3) 0;
	border-bottom: 2px solid transparent;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-nav);
	line-height: var(--sp-lh-tight);
	letter-spacing: var(--sp-ls-nav);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sp-text-55);
	transition:
		color var(--sp-dur-fast) var(--sp-ease),
		border-color var(--sp-dur-fast) var(--sp-ease);
}

.sp-account-nav__link:hover,
.sp-account-nav__link:focus-visible {
	color: var(--sp-text);
	border-bottom-color: var(--sp-line-ghost);
}

/* Selected by the attribute the assistive technology reads, never by a class
   that could be applied without it. */
.sp-account-nav__link[aria-current='page'] {
	color: var(--sp-text);
	border-bottom-color: var(--sp-red);
}

/* ================================================================ overview */

.sp-account__intro {
	margin: 0 0 var(--sp-9);
	max-width: 620px;
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

/*
 * One card, not a grid of one. `auto-fit` would stretch a single Booking across
 * the full measure, which reads as a banner rather than as the next ride;
 * capping it at the width the same card takes inside a three-up row keeps the
 * two sections drawing the identical object.
 */
.sp-account__cards--single {
	grid-template-columns: minmax(0, 420px);
}

.sp-account__more {
	margin: var(--sp-7) 0 0;
	font-size: var(--sp-fs-sm);
}

/* ========================================================== verify prompt */

/*
 * Ticket 03. The unverified Customer's explanation and their one button.
 *
 * It takes the left red accent (DESIGN-SYSTEM §4.22) rather than a red fill or
 * a warning colour, because nothing has gone wrong: the account exists, the
 * bookings exist, and one step is outstanding. A red panel would tell somebody
 * their money is in trouble when it is not.
 */
.sp-account-verify {
	padding: clamp(22px, 3vw, 34px);
	max-width: 720px;
	background: var(--sp-surface);
	border: var(--sp-border);
	border-left: 2px solid var(--sp-red);
}

.sp-account-verify__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-account-verify__intro {
	margin: var(--sp-5) 0 0;
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-78);
}

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

.sp-account-verify__form {
	margin: var(--sp-9) 0 0;
}

/* =========================================================== voucher card */

/*
 * Prepaid credit, on the same card recipe as a Booking: #232323 on the page
 * ground, 1px hairline, radius 0, left accent. The accent is red while there is
 * money on the code and neutral once there is not, which is the one distinction
 * that matters in a list of them.
 *
 * The balance is the headline and the face value is a fact underneath it. A
 * Voucher is spendable in parts, so "how much is on it now" is the question,
 * and printing the amount it was sold for in the big type would answer a
 * different one.
 */
.sp-account-voucher {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	padding: clamp(20px, 2.4vw, 26px);
	background: var(--sp-surface);
	border: var(--sp-border);
	border-left: 2px solid var(--sp-line-strong);
}

.sp-account-voucher--live {
	border-left-color: var(--sp-red);
}

.sp-account-voucher--spent {
	opacity: 0.6;
}

.sp-account-voucher__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin: 0;
}

.sp-account-voucher__code {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
}

/* Monospace and letter-spaced, because this is a string somebody has to read
   off a screen and type into a field without a single character wrong. */
.sp-account-voucher__code-value {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-md);
	letter-spacing: var(--sp-ls-pill);
	color: var(--sp-text);
}

.sp-account-voucher__state {
	display: inline-flex;
	align-items: center;
	padding: 6px var(--sp-3);
	border: 1px solid var(--sp-line-field);
	background: var(--sp-chip-fill);
	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-82);
	white-space: nowrap;
}

.sp-account-voucher--live .sp-account-voucher__state {
	border-color: var(--sp-green);
	color: var(--sp-green);
}

.sp-account-voucher__balance {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--sp-line-faint);
}

.sp-account-voucher__amount {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-3xl);
	line-height: 1;
	color: var(--sp-text);
}

.sp-account-voucher__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-7);
	margin: 0;
}

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

.sp-account-voucher__fact dd {
	margin: 0;
	font-size: var(--sp-fs-md);
	color: var(--sp-text);
}

.sp-account-voucher__origin {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-3);
	margin: auto 0 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--sp-line-faint);
	font-size: var(--sp-fs-sm);
	color: var(--sp-text-55);
}