/*
 * The boundary row and the line under it. design/DESIGN-SYSTEM.md §4.18,
 * grid §3.4 (minmax(92px,1fr)).
 *
 * In the booking modal this is no longer a list of start chips but one row of
 * boundaries from opening to closing inclusive, and the customer draws a Ride
 * Length on it with two clicks. That row is `--range`, and it closes the 8px
 * gap: the span between the two clicks has to read as one contiguous band, and
 * a band with 8px of background showing through every joint does not. Cells
 * butt together on their own 1px borders instead, at the same zero radius as
 * everything else in the system. The plain `.sp-times` is untouched, because
 * the reschedule page still picks one start out of a list of chips.
 *
 * Five states, and the band is three of them: the start, the boundaries between,
 * and the end. `is-preview` is a fourth that a pointer gets for free and nothing
 * reads back -- a touch screen never hovers, so the band itself is painted from
 * the two clicks and never from `:hover`. Unavailable is the fifth: struck
 * through and unclickable, because the endpoint returns every start of the grid,
 * offered or refused, precisely so the refused ones can be shown crossed out
 * instead of silently missing.
 *
 * That fifth state is a verdict on the click currently on offer, not on the
 * payload. Before the first click the row is offering starts, so a boundary the
 * venue will not begin a ride on is crossed out. After it the row is offering
 * ends, and the same boundary can be the only end the longest ride has -- so
 * while it is that, it is neither crossed out nor disabled. The class is
 * therefore toggled on every repaint, never set once when the row is built.
 *
 * Adopted RECOMMEND from §8 item 6: the selected fill is rgba(236,28,36,0.16),
 * shared with the option card, not the prototype's one-off 0.18.
 *
 * TODO token: rgba(255,255,255,0.52) -- the trailing note's colour -- sits
 * between --sp-text-50 and --sp-text-55 and has no token.
 */

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

.sp-time {
	padding: 13px var(--sp-2);
	background: var(--sp-bg-deep);
	border: 1px solid var(--sp-line-14);
	border-radius: var(--sp-radius);
	color: var(--sp-text);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-btn);
	line-height: var(--sp-lh-display);
	text-align: center;
	cursor: pointer;
	transition:
		border-color var(--sp-dur-fast) var(--sp-ease),
		background var(--sp-dur-fast) var(--sp-ease);
}

.sp-time:hover:not(:disabled),
.sp-time:focus-visible {
	border-color: var(--sp-line-hover);
}

/* One start out of a list -- the reschedule page's picker, and only its. */
.sp-time.is-selected {
	background: var(--sp-tint-red-16);
	border-color: var(--sp-red);
	color: var(--sp-text);
}

/* The band: what the pointer would buy, and then what the two clicks did. */
.sp-time.is-preview,
.sp-time.is-in-range {
	background: var(--sp-tint-red-10);
	border-color: var(--sp-line-hover-sub);
}

.sp-time.is-start,
.sp-time.is-end {
	position: relative;
	background: var(--sp-tint-red-16);
	border-color: var(--sp-red);
	color: var(--sp-text);
}

/*
 * Refused by the venue AND inert in the current selection, with the reason on
 * its aria-label. Never on a boundary a click would act on.
 */
.sp-time.is-taken {
	color: var(--sp-text-disabled);
	text-decoration: line-through;
	cursor: not-allowed;
}

/*
 * Not refused, just not a move: a boundary too near the start for the shortest
 * ride, or past what that start has free. It stays legible -- it is still a
 * time of day, and a different first click makes it clickable again.
 */
.sp-time:disabled {
	color: var(--sp-text-40);
	cursor: not-allowed;
}

.sp-time.is-taken:disabled {
	color: var(--sp-text-disabled);
}

/*
 * The live line: the range, its length and its price per Rider once both
 * clicks are in, and before that the reason the customer cannot move on yet.
 */
/*
 * `.sp-range` lived here: the line under the range picker that said what two
 * clicks came to. The picker is gone — the checkout asks for a start and a
 * length in two selects now — and the line it fed is `.sp-when__summary` in
 * `assets/css/pages/rezervacia.css`. Removed rather than kept: a rule with no
 * consumer is a rule the next person has to prove is dead.
 */

/* The ladder legend: where the figure on the line above comes from. */
.sp-times__note {
	margin: var(--sp-5) 0 0;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: rgba(255, 255, 255, .52); /* TODO token */
}

/* Loading / failed, in place of the row. */
.sp-times__status {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--sp-fs-xs);
	color: var(--sp-text-55);
}

.sp-times__status--error {
	color: var(--sp-red);
}