/*
 * Vernosť — the loyalty standing on the account's Prehľad. Ticket 21.
 *
 * Scoped entirely under `.sp-loyalty`. Nothing here restyles `.sp-account__*`
 * or any shared component: four agents are editing this theme at once, and a
 * panel that reaches into `components/account.css` to nudge a shared rule is a
 * merge conflict with somebody's Friday.
 *
 * Built from values the system already has -- design/DESIGN-SYSTEM.md §1.8
 * (tokens), §4.22 (the left red accent on a statement of a rule), §3.4 (grids),
 * §4.19 (micro-labels). No new token: every colour, size and duration below is
 * one that `assets/css/tokens.css` already names.
 *
 * Two constraints the whole file is shaped by:
 *
 *   - **Zero `@media`.** The stats row is `repeat(auto-fit, minmax(…, 1fr))`
 *     and the type is `clamp()`, exactly as everything else in the theme.
 *   - **Zero radius**, except nothing here is round at all.
 *
 * THE PROGRESS STRIP
 *
 * Ten segments in a `grid-template-columns: repeat(10, 1fr)`, lit by a class
 * the server decided. No inline width, no custom property set from PHP, no
 * script. That is why it is ten spans rather than a bar: a proportion made of
 * whole elements needs nothing computed in the browser, holds at any viewport
 * without a breakpoint, and if this stylesheet never loads it collapses to
 * nothing visible instead of to a bar stuck at the wrong length. The sentence
 * above it carries the meaning on its own; the strip is decoration, and the
 * markup says so with `aria-hidden`.
 */

/* ================================================================== panel */

/*
 * The same card recipe as a Booking and a Voucher -- #232323 on the page
 * ground, 1px hairline, radius 0 -- with the red left accent, because the Tier
 * a customer is standing on is a statement about them and not a list item.
 */
.sp-loyalty__panel {
	display: flex;
	flex-direction: column;
	gap: var(--sp-7);
	padding: clamp(20px, 2.4vw, 30px);
	max-width: 720px;
	background: var(--sp-surface);
	border: var(--sp-border);
	border-left: 2px solid var(--sp-red);
}

/* =================================================================== tier */

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

/*
 * The headline of the panel, and deliberately the biggest thing in it: the Tier
 * is the answer to "what am I", and the points are the answer to "how am I
 * doing". Same display face, weight and size as the account's other headline
 * figures (the voucher balance, the visit count), so the account reads as one
 * page rather than as five panels by five people.
 */
.sp-loyalty__tier-name {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-3xl);
	line-height: var(--sp-lh-display);
	text-transform: uppercase;
	color: var(--sp-text);
}

/* ================================================================== stats */

.sp-loyalty__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--sp-5) var(--sp-9);
	margin: 0;
	padding-top: var(--sp-7);
	border-top: 1px solid var(--sp-line-faint);
}

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

.sp-loyalty__stat-value {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-2xl);
	line-height: var(--sp-lh-display);
	color: var(--sp-text);
	font-variant-numeric: tabular-nums;
}

/*
 * The one figure on this page the till also uses. Red, because it is the only
 * thing in the panel that is worth money at the counter today -- and because
 * the customer who came to check "do I still get my five per cent" should find
 * it without reading.
 */
.sp-loyalty__stat--discount .sp-loyalty__stat-value {
	color: var(--sp-red);
}

/* ============================================================ starting line */

/*
 * What somebody sees before their first ride. It takes the lede colour rather
 * than the muted helper colour: this is the panel's whole content for that
 * customer, not a footnote under something else.
 */
.sp-loyalty__intro {
	margin: 0;
	padding-top: var(--sp-7);
	border-top: 1px solid var(--sp-line-faint);
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-78);
}

/* ============================================================== next tier */

.sp-loyalty__next {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0;
}

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

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

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

/* ================================================================== strip */

.sp-loyalty__track {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: var(--sp-1);
	margin: var(--sp-1) 0;
}

.sp-loyalty__seg {
	display: block;
	height: 6px;
	background: var(--sp-tint-white-8);
}

.sp-loyalty__seg--on {
	background: var(--sp-red);
}

/* ============================================================ the window */

/*
 * The twelve months and the date the oldest points fall out of them, ruled off
 * from the rest: it is a footnote about the scheme rather than a fact about
 * this customer's standing, and it is absent entirely for anybody who has not
 * earned anything yet.
 */
.sp-loyalty__window {
	margin: 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--sp-line-faint);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-55);
}