/**
 * RESET Booking - front end.
 *
 * Built to the brand guidelines: two sands carry almost everything, sage is
 * the only frequent accent, clay is reserved for deadlines, sold out and
 * errors so it keeps its meaning. No gradients, no gloss, no pure white or
 * pure black. Pills and 3px cards, nothing in between. Fades only, 0.25-0.4s.
 *
 * Everything is driven by the custom properties below, declared once, so the
 * studio's designer can retheme without touching this file.
 */

.reset {
	/* --- The palette (page four of the guidelines) --- */
	--reset-paper: #EFE9DF;   /* Sand: the default background */
	--reset-sand: #E4DCCE;    /* Deep sand: cards, panels, footers */
	--reset-stone: #DDD5C6;   /* Warm stone: emphasis blocks */
	--reset-ink: #4A4438;     /* All body text, headings, primary buttons */
	--reset-sage: #8A9280;    /* Accent: links, hover, available, confirmed */
	--reset-clay: #A8846B;    /* Warnings only */

	--reset-muted: #6B6455;
	--reset-quiet: #7C7360;
	--reset-faint: #A79E8A;
	--reset-line: rgba(74, 68, 56, 0.14);
	--reset-line-strong: rgba(74, 68, 56, 0.28);

	/* --- Type --- */
	--reset-font: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--reset-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--reset-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* --- Shape and rhythm --- */
	--reset-radius: 3px;
	--reset-pill: 999px;
	--reset-gap: 8px;
	--reset-max: 1240px;
	--reset-tap: 44px;
	--reset-ease: 0.3s ease;

	font-family: var(--reset-font);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.75;
	color: var(--reset-ink);
	max-width: var(--reset-max);
	margin-inline: auto;
	-webkit-font-smoothing: antialiased;
}

.reset *,
.reset *::before,
.reset *::after {
	box-sizing: border-box;
}

.reset a {
	color: var(--reset-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--reset-line-strong);
	transition: color var(--reset-ease), border-color var(--reset-ease);
}

.reset a:hover,
.reset a:focus {
	color: var(--reset-sage);
	border-color: var(--reset-sage);
}

.reset :focus-visible {
	outline: 2px solid var(--reset-sage);
	outline-offset: 3px;
}

.reset p {
	margin: 0 0 calc(var(--reset-gap) * 1.5);
	text-wrap: pretty;
}

.reset ul,
.reset ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Headings --------------------------------------------------------- */

.reset-h2 {
	font-family: var(--reset-serif);
	font-weight: 300;
	font-size: clamp(28px, 5vw, 42px);
	line-height: 1.1;
	margin: 0 0 calc(var(--reset-gap) * 2);
	color: var(--reset-ink);
}

.reset-h3 {
	font-family: var(--reset-serif);
	font-weight: 400;
	font-size: clamp(20px, 3vw, 25px);
	line-height: 1.15;
	margin: calc(var(--reset-gap) * 4) 0 calc(var(--reset-gap) * 1.5);
}

.reset-h3:first-child {
	margin-top: 0;
}

.reset-eyebrow {
	font-family: var(--reset-mono);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--reset-sage);
	margin: 0 0 var(--reset-gap);
}

.reset-help {
	font-size: 13px;
	color: var(--reset-muted);
	margin: 0 0 var(--reset-gap);
}

.reset-help--tiny {
	font-size: 12px;
	color: var(--reset-quiet);
}

.reset-empty {
	font-size: 14px;
	color: var(--reset-muted);
	padding: calc(var(--reset-gap) * 3);
	background: var(--reset-sand);
	border-radius: var(--reset-radius);
	margin: 0 0 calc(var(--reset-gap) * 2);
}

/* --- Buttons ---------------------------------------------------------- */

.reset-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--reset-gap);
	min-height: var(--reset-tap);
	padding: 12px 22px;
	border: 1px solid var(--reset-ink);
	border-radius: var(--reset-pill);
	background: var(--reset-ink);
	color: var(--reset-paper);
	font-family: var(--reset-font);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background var(--reset-ease), border-color var(--reset-ease), color var(--reset-ease), opacity var(--reset-ease);
}

.reset a.reset-btn {
	border-bottom: 1px solid var(--reset-ink);
}

.reset-btn:hover,
.reset-btn:focus {
	background: var(--reset-sage);
	border-color: var(--reset-sage);
	color: var(--reset-paper);
}

.reset-btn--quiet {
	background: transparent;
	border-color: var(--reset-line-strong);
	color: var(--reset-ink);
}

.reset a.reset-btn--quiet {
	border-bottom-color: var(--reset-line-strong);
}

.reset-btn--quiet:hover,
.reset-btn--quiet:focus {
	background: transparent;
	border-color: var(--reset-sage);
	color: var(--reset-sage);
}

.reset-btn--danger {
	background: transparent;
	border-color: var(--reset-clay);
	color: var(--reset-clay);
}

.reset-btn--danger:hover,
.reset-btn--danger:focus {
	background: var(--reset-clay);
	border-color: var(--reset-clay);
	color: var(--reset-paper);
}

.reset-btn.is-disabled,
.reset-btn[aria-disabled="true"],
.reset-btn:disabled {
	background: transparent;
	border-color: var(--reset-line);
	color: var(--reset-faint);
	cursor: not-allowed;
	pointer-events: none;
}

.reset-btn.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.reset-btn__note {
	display: block;
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--reset-quiet);
	margin-top: var(--reset-gap);
}

/* --- Chips ------------------------------------------------------------ */

.reset-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--reset-gap);
	margin-bottom: calc(var(--reset-gap) * 3);
}

.reset-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 16px;
	border: 1px solid var(--reset-line-strong);
	border-radius: var(--reset-pill);
	background: transparent;
	color: var(--reset-ink);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--reset-ease), border-color var(--reset-ease), color var(--reset-ease);
}

.reset a.reset-chip {
	border-bottom: 1px solid var(--reset-line-strong);
}

.reset-chip:hover,
.reset-chip:focus {
	border-color: var(--reset-sage);
	color: var(--reset-sage);
}

.reset-chip.is-active,
.reset-chip[aria-current="true"] {
	background: var(--reset-ink);
	border-color: var(--reset-ink);
	color: var(--reset-paper);
}

.reset-chip.is-static {
	cursor: default;
	background: var(--reset-stone);
	border-color: transparent;
	color: var(--reset-muted);
	letter-spacing: 0.1em;
	text-transform: none;
	font-size: 12px;
}

.reset-chip--toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.reset-chip--toggle:has(input:checked) {
	background: var(--reset-ink);
	border-color: var(--reset-ink);
	color: var(--reset-paper);
}

.reset-chip--toggle:has(input:focus-visible) {
	outline: 2px solid var(--reset-sage);
	outline-offset: 3px;
}

.reset-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--reset-gap);
	margin-bottom: calc(var(--reset-gap) * 2);
}

/* --- Status: words as well as colour ---------------------------------- */

.reset-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--reset-sage);
}

.reset-status::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.reset-status--available {
	color: var(--reset-sage);
}

.reset-status--low,
.reset-status--full,
.reset-status--warn {
	color: var(--reset-clay);
}

.reset-status--cancelled,
.reset-status--past,
.reset-status--neutral {
	color: var(--reset-quiet);
}

.reset-status--ok {
	color: var(--reset-sage);
}

/* --- Timetable -------------------------------------------------------- */

.reset-weeknav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--reset-gap);
	padding-bottom: calc(var(--reset-gap) * 2);
	margin-bottom: calc(var(--reset-gap) * 2);
	border-bottom: 1px solid var(--reset-line);
}

.reset-weeknav__btn {
	min-height: var(--reset-tap);
	display: inline-flex;
	align-items: center;
	padding: 8px 4px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-bottom: none;
}

.reset .reset-weeknav__btn {
	border-bottom: none;
}

.reset-weeknav__btn.is-disabled {
	color: var(--reset-faint);
}

.reset-weeknav__label {
	font-family: var(--reset-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--reset-quiet);
	text-align: center;
}

.reset-week {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--reset-gap) * 3);
}

.reset-day__head {
	display: flex;
	align-items: baseline;
	gap: var(--reset-gap);
	padding-bottom: var(--reset-gap);
	margin-bottom: var(--reset-gap);
	border-bottom: 1px solid var(--reset-line);
}

.reset-day__name {
	font-family: var(--reset-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--reset-ink);
}

.reset-day__date {
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--reset-quiet);
}

.reset-day__today {
	font-family: var(--reset-mono);
	font-size: 8.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--reset-sage);
	margin-left: auto;
}

.reset-day.is-today .reset-day__head {
	border-bottom-color: var(--reset-sage);
}

.reset-day__empty {
	font-size: 12px;
	color: var(--reset-faint);
	margin: 0;
}

.reset-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"time name"
		"time meta"
		"time status";
	column-gap: calc(var(--reset-gap) * 2);
	row-gap: 2px;
	align-items: baseline;
	padding: calc(var(--reset-gap) * 2);
	margin-bottom: var(--reset-gap);
	min-height: var(--reset-tap);
	background: var(--reset-sand);
	border: 1px solid transparent;
	border-radius: var(--reset-radius);
	transition: background var(--reset-ease), border-color var(--reset-ease), opacity var(--reset-ease);
}

.reset a.reset-card {
	border-bottom: 1px solid transparent;
	color: var(--reset-ink);
}

.reset-card:hover,
.reset-card:focus {
	background: var(--reset-stone);
	border-color: var(--reset-line);
	color: var(--reset-ink);
}

.reset-card.is-full,
.reset-card.is-past,
.reset-card.is-cancelled {
	opacity: 0.72;
}

.reset-card.is-cancelled .reset-card__name {
	text-decoration: line-through;
}

.reset-card__time {
	grid-area: time;
	align-self: center;
	font-family: var(--reset-mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--reset-ink);
}

.reset-card__name {
	grid-area: name;
	font-family: var(--reset-serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
}

.reset-card__meta {
	grid-area: meta;
	font-size: 12px;
	color: var(--reset-muted);
}

.reset-card .reset-status {
	grid-area: status;
	margin-top: 2px;
}

/* List view */

.reset-list__day {
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--reset-sage);
	margin: calc(var(--reset-gap) * 3) 0 var(--reset-gap);
	padding-bottom: var(--reset-gap);
	border-bottom: 1px solid var(--reset-line);
}

.reset-list__day:first-child {
	margin-top: 0;
}

/* The compact "this week" strip */

.reset-strip {
	display: grid;
	gap: var(--reset-gap);
	grid-template-columns: 1fr;
}

.reset-strip__more {
	margin-top: calc(var(--reset-gap) * 2);
	font-size: 12px;
}

/* --- The slide-over panel -------------------------------------------- */

.reset-panel-wrap {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}

.reset-panel-wrap.is-open {
	display: block;
}

.reset-panel__scrim {
	position: absolute;
	inset: 0;
	background: rgba(74, 68, 56, 0.32);
	border: 0;
	animation: reset-fade var(--reset-ease) both;
}

.reset-panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(460px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--reset-paper);
	/* The one shadow the guidelines allow. */
	box-shadow: -12px 0 40px rgba(74, 68, 56, 0.18);
	animation: reset-fade var(--reset-ease) both;
}

@keyframes reset-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.reset-panel,
	.reset-panel__scrim {
		animation: none;
	}
}

.reset-panel__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--reset-gap);
	padding: calc(var(--reset-gap) * 2) calc(var(--reset-gap) * 3);
	border-bottom: 1px solid var(--reset-line);
	background: var(--reset-sand);
}

.reset-panel__title {
	font-family: var(--reset-serif);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.15;
	margin: 0;
}

.reset-panel__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--reset-tap);
	height: var(--reset-tap);
	flex: none;
	font-size: 24px;
	line-height: 1;
	color: var(--reset-ink);
	border: 1px solid transparent;
	border-radius: var(--reset-pill);
	background: transparent;
	cursor: pointer;
}

.reset .reset-panel__close {
	border-bottom: 1px solid transparent;
}

.reset-panel__close:hover,
.reset-panel__close:focus {
	border-color: var(--reset-line-strong);
	color: var(--reset-sage);
}

.reset-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: calc(var(--reset-gap) * 3);
	-webkit-overflow-scrolling: touch;
}

.reset-panel.is-busy .reset-panel__body {
	opacity: 0.5;
}

/* --- Class detail ---------------------------------------------------- */

.reset-detail {
	padding-bottom: calc(var(--reset-gap) * 2);
	margin-bottom: calc(var(--reset-gap) * 3);
	border-bottom: 1px solid var(--reset-line);
}

.reset-detail__when {
	font-size: 15px;
	color: var(--reset-ink);
	margin-bottom: calc(var(--reset-gap) * 1.5);
}

.reset-detail__when time {
	font-family: var(--reset-mono);
	font-size: 15px;
}

.reset-detail__desc {
	font-size: 13.5px;
	color: var(--reset-muted);
}

.reset-detail__bio,
.reset-detail__note {
	font-size: 13px;
	color: var(--reset-muted);
	padding: calc(var(--reset-gap) * 2);
	background: var(--reset-sand);
	border-radius: var(--reset-radius);
}

/* --- Forms ----------------------------------------------------------- */

.reset-form {
	margin: 0 0 calc(var(--reset-gap) * 2);
}

.reset-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 calc(var(--reset-gap) * 3);
}

.reset-fieldset legend {
	padding: 0;
}

.reset-field {
	margin-bottom: calc(var(--reset-gap) * 2.5);
}

.reset-field label,
.reset-fieldset legend {
	display: block;
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--reset-sage);
	margin-bottom: var(--reset-gap);
}

.reset input[type="text"],
.reset input[type="email"],
.reset input[type="tel"],
.reset input[type="password"],
.reset input[type="number"],
.reset input[type="search"],
.reset textarea,
.reset select {
	width: 100%;
	min-height: var(--reset-tap);
	padding: 11px 14px;
	font-family: var(--reset-font);
	font-size: 15px; /* 16px-ish stops iOS zooming on focus */
	font-weight: 300;
	color: var(--reset-ink);
	background: var(--reset-paper);
	border: 1px solid var(--reset-line-strong);
	border-radius: var(--reset-radius);
	transition: border-color var(--reset-ease);
}

.reset input:focus,
.reset textarea:focus,
.reset select:focus {
	border-color: var(--reset-sage);
	outline: none;
}

.reset input:focus-visible,
.reset textarea:focus-visible {
	outline: 2px solid var(--reset-sage);
	outline-offset: 2px;
}

.reset textarea {
	line-height: 1.6;
	resize: vertical;
}

.reset-field input + input {
	margin-top: var(--reset-gap);
}

.reset-checkbox {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--reset-gap) * 1.5);
	min-height: var(--reset-tap);
	padding: 6px 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--reset-ink);
	text-transform: none;
	letter-spacing: normal;
	font-family: var(--reset-font);
	cursor: pointer;
}

.reset-checkbox input {
	width: 18px;
	height: 18px;
	margin-top: 4px;
	flex: none;
	accent-color: var(--reset-ink);
}

.reset-option {
	display: grid;
	grid-template-columns: 20px 1fr;
	grid-template-areas:
		"radio label"
		"radio note";
	column-gap: calc(var(--reset-gap) * 1.5);
	align-items: center;
	min-height: var(--reset-tap);
	padding: calc(var(--reset-gap) * 1.5) calc(var(--reset-gap) * 2);
	margin-bottom: var(--reset-gap);
	background: var(--reset-sand);
	border: 1px solid transparent;
	border-radius: var(--reset-radius);
	cursor: pointer;
	transition: border-color var(--reset-ease), background var(--reset-ease);
	text-transform: none;
	letter-spacing: normal;
}

.reset-option:hover {
	border-color: var(--reset-line-strong);
}

.reset-option:has(input:checked) {
	background: var(--reset-stone);
	border-color: var(--reset-ink);
}

.reset-option:has(input:focus-visible) {
	outline: 2px solid var(--reset-sage);
	outline-offset: 3px;
}

.reset-option input {
	grid-area: radio;
	width: 18px;
	height: 18px;
	accent-color: var(--reset-ink);
}

.reset-option__label {
	grid-area: label;
	font-size: 14px;
	color: var(--reset-ink);
}

.reset-option__note {
	grid-area: note;
	font-family: var(--reset-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--reset-quiet);
}

.reset-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--reset-gap);
	padding: calc(var(--reset-gap) * 2) 0;
	margin-bottom: var(--reset-gap);
	border-top: 1px solid var(--reset-line);
	border-bottom: 1px solid var(--reset-line);
}

.reset-total span {
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--reset-quiet);
}

.reset-total strong {
	font-family: var(--reset-font);
	font-size: 22px;
	font-weight: 300;
}

/* The deadline, which the brief wants visible everywhere. */
.reset-deadline {
	font-family: var(--reset-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--reset-sage);
	margin: 0 0 calc(var(--reset-gap) * 2);
}

.reset-form .reset-btn {
	width: 100%;
}

.reset-form--inline {
	display: grid;
	gap: var(--reset-gap);
}

.reset-form--tiny {
	padding-top: calc(var(--reset-gap) * 2);
	margin-top: calc(var(--reset-gap) * 2);
	border-top: 1px solid var(--reset-line);
}

.reset-form--tiny .reset-btn {
	width: auto;
}

.reset-form--danger {
	padding: calc(var(--reset-gap) * 2);
	background: var(--reset-sand);
	border-radius: var(--reset-radius);
}

.reset-form--danger .reset-btn {
	width: auto;
}

.reset-inline-form {
	display: inline-flex;
	align-items: center;
	gap: var(--reset-gap);
	margin: 0;
}

.reset-inline-form--guest {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: var(--reset-gap);
}

.reset-inline-form--guest input {
	flex: 1 1 180px;
	font-size: 13px;
}

.reset-form__message:not(:empty) {
	margin-top: calc(var(--reset-gap) * 2);
	padding: calc(var(--reset-gap) * 1.5) calc(var(--reset-gap) * 2);
	font-size: 13px;
	border-radius: var(--reset-radius);
	background: var(--reset-sand);
	border-left: 2px solid var(--reset-sage);
}

.reset-form__message.is-error:not(:empty) {
	border-left-color: var(--reset-clay);
	color: var(--reset-ink);
}

.reset-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.reset-or {
	position: relative;
	text-align: center;
	margin: calc(var(--reset-gap) * 3) 0;
	border-top: 1px solid var(--reset-line);
}

.reset-or span {
	position: relative;
	top: -12px;
	padding: 0 calc(var(--reset-gap) * 1.5);
	background: var(--reset-paper);
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--reset-quiet);
}

/* --- Notices --------------------------------------------------------- */

.reset-notice {
	padding: calc(var(--reset-gap) * 2);
	margin: 0 0 calc(var(--reset-gap) * 2);
	font-size: 13.5px;
	background: var(--reset-sand);
	border-left: 2px solid var(--reset-sage);
	border-radius: var(--reset-radius);
}

.reset-notice--warn {
	border-left-color: var(--reset-clay);
}

.reset-notice--neutral {
	border-left-color: var(--reset-line-strong);
	color: var(--reset-muted);
}

/* --- Receipt --------------------------------------------------------- */

.reset-receipt__big {
	font-family: var(--reset-serif);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 var(--reset-gap);
}

.reset-receipt__lines {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--reset-gap) calc(var(--reset-gap) * 2);
	margin: calc(var(--reset-gap) * 3) 0;
	padding: calc(var(--reset-gap) * 2) 0;
	border-top: 1px solid var(--reset-line);
	border-bottom: 1px solid var(--reset-line);
}

.reset-receipt__lines dt {
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--reset-quiet);
	margin: 0;
}

.reset-receipt__lines dd {
	margin: 0;
	font-size: 13.5px;
}

.reset-receipt__deadline {
	font-family: var(--reset-mono);
	font-size: 13px;
	color: var(--reset-sage);
}

.reset-receipt__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--reset-gap);
	margin-top: calc(var(--reset-gap) * 2);
}

/* --- Payment --------------------------------------------------------- */

.reset-stripe {
	padding: calc(var(--reset-gap) * 2);
	margin: calc(var(--reset-gap) * 2) 0;
	background: var(--reset-paper);
	border: 1px solid var(--reset-line-strong);
	border-radius: var(--reset-radius);
	min-height: 120px;
}

/* --- Bookings list --------------------------------------------------- */

.reset-bookings {
	display: grid;
	gap: var(--reset-gap);
	margin-bottom: calc(var(--reset-gap) * 3);
}

.reset-booking {
	display: grid;
	gap: calc(var(--reset-gap) * 1.5);
	padding: calc(var(--reset-gap) * 2.5);
	background: var(--reset-sand);
	border-radius: var(--reset-radius);
}

.reset-booking.is-compact {
	padding: calc(var(--reset-gap) * 2);
	background: transparent;
	border-bottom: 1px solid var(--reset-line);
	border-radius: 0;
}

.reset-booking__when {
	font-family: var(--reset-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--reset-quiet);
	margin: 0;
}

.reset-booking__name {
	font-family: var(--reset-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 var(--reset-gap);
}

.reset-booking__with {
	font-family: var(--reset-font);
	font-size: 13px;
	color: var(--reset-muted);
}

.reset-booking__state {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--reset-gap);
	margin: 0;
}

.reset-booking__note {
	font-size: 12.5px;
	color: var(--reset-muted);
}

.reset-booking__why {
	flex-basis: 100%;
	font-size: 12.5px;
	color: var(--reset-clay);
	margin: var(--reset-gap) 0 0;
}

.reset-booking__guest {
	font-size: 12.5px;
	color: var(--reset-muted);
	margin: 0;
}

.reset-booking__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--reset-gap);
	padding-top: calc(var(--reset-gap) * 1.5);
	border-top: 1px solid var(--reset-line);
}

.reset-booking__slot {
	flex-basis: 100%;
}

.reset-booking__slot:not(:empty) {
	margin-top: calc(var(--reset-gap) * 2);
	padding-top: calc(var(--reset-gap) * 2);
	border-top: 1px solid var(--reset-line);
}

/* --- Move options ---------------------------------------------------- */

.reset-move__list {
	display: grid;
	gap: var(--reset-gap);
}

.reset-move__btn {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"when status"
		"name status";
	gap: 2px calc(var(--reset-gap) * 2);
	align-items: center;
	width: 100%;
	min-height: var(--reset-tap);
	padding: calc(var(--reset-gap) * 1.5) calc(var(--reset-gap) * 2);
	text-align: left;
	background: var(--reset-paper);
	border: 1px solid var(--reset-line);
	border-radius: var(--reset-radius);
	cursor: pointer;
	transition: border-color var(--reset-ease), background var(--reset-ease);
}

.reset-move__btn:hover,
.reset-move__btn:focus {
	background: var(--reset-stone);
	border-color: var(--reset-ink);
}

.reset-move__when {
	grid-area: when;
	font-family: var(--reset-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--reset-quiet);
}

.reset-move__name {
	grid-area: name;
	font-family: var(--reset-serif);
	font-size: 18px;
	color: var(--reset-ink);
}

.reset-move__btn .reset-status {
	grid-area: status;
}

/* --- Passes and prices ----------------------------------------------- */

.reset-passes {
	display: grid;
	gap: var(--reset-gap);
	margin-bottom: calc(var(--reset-gap) * 3);
}

.reset-pass {
	padding: calc(var(--reset-gap) * 2.5);
	background: var(--reset-sand);
	border-radius: var(--reset-radius);
}

.reset-pass__name {
	font-family: var(--reset-serif);
	font-size: 22px;
	font-weight: 400;
	margin: 0;
}

.reset-pass__balance {
	font-size: 14px;
	margin: 0 0 var(--reset-gap);
}

.reset-pass__note {
	font-family: var(--reset-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--reset-quiet);
	margin: 0 0 var(--reset-gap);
}

.reset-prices {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--reset-gap) * 2);
}

.reset-price {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--reset-gap);
	padding: calc(var(--reset-gap) * 3);
	background: var(--reset-sand);
	border: 1px solid transparent;
	border-radius: var(--reset-radius);
}

.reset-price.is-highlight {
	background: var(--reset-stone);
	border-color: var(--reset-ink);
}

.reset-price__badge {
	position: absolute;
	top: calc(var(--reset-gap) * -1.5);
	left: calc(var(--reset-gap) * 3);
	padding: 5px 12px;
	background: var(--reset-ink);
	color: var(--reset-paper);
	border-radius: var(--reset-pill);
	font-family: var(--reset-mono);
	font-size: 8.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.reset-price__name {
	font-family: var(--reset-serif);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
}

.reset-price__amount {
	font-size: 32px;
	font-weight: 200;
	line-height: 1;
	margin: 0;
}

.reset-price__per {
	font-size: 12px;
	color: var(--reset-quiet);
}

.reset-price__summary {
	font-family: var(--reset-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--reset-quiet);
	margin: 0;
}

.reset-price__desc {
	font-size: 13px;
	color: var(--reset-muted);
}

.reset-price__perks {
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: var(--reset-muted);
	margin: 0 0 var(--reset-gap);
}

.reset-price__perks li {
	padding-left: 16px;
	position: relative;
}

.reset-price__perks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 1px;
	background: var(--reset-sage);
}

.reset-price form,
.reset-price .reset-btn {
	margin-top: auto;
}

/* --- Tabs ------------------------------------------------------------ */

.reset-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--reset-gap) * 3);
	margin-bottom: calc(var(--reset-gap) * 3);
	border-bottom: 1px solid var(--reset-line);
}

.reset-tab {
	min-height: var(--reset-tap);
	padding: 0 0 var(--reset-gap);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: var(--reset-font);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--reset-quiet);
	cursor: pointer;
	transition: color var(--reset-ease), border-color var(--reset-ease);
}

.reset a.reset-tab {
	border-bottom: 2px solid transparent;
}

.reset-tab:hover,
.reset-tab:focus {
	color: var(--reset-sage);
}

.reset-tab.is-active,
.reset-tab[aria-selected="true"] {
	color: var(--reset-ink);
	border-bottom-color: var(--reset-ink);
}

/* --- Account --------------------------------------------------------- */

.reset-account__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--reset-gap);
	margin-bottom: calc(var(--reset-gap) * 3);
}

.reset-account__head .reset-h2 {
	margin: 0;
}

.reset-account__link {
	font-size: 12px;
}

.reset-auth.is-compact {
	padding-top: calc(var(--reset-gap) * 3);
	margin-top: calc(var(--reset-gap) * 3);
	border-top: 1px solid var(--reset-line);
}

.reset-gate {
	margin-top: calc(var(--reset-gap) * 2);
}

/* --- Account link chip ----------------------------------------------- */

.reset-accountlink {
	display: inline-flex;
	align-items: center;
	gap: var(--reset-gap);
	min-height: 36px;
	padding: 6px 16px 6px 8px;
	border: 1px solid var(--reset-line-strong);
	border-radius: var(--reset-pill);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--reset-ink);
}

.reset .reset-accountlink {
	border-bottom: 1px solid var(--reset-line-strong);
}

.reset-accountlink--text {
	border: 0;
	padding: 6px 0;
}

.reset .reset-accountlink--text {
	border-bottom: 1px solid var(--reset-line-strong);
}

.reset-accountlink:not(.is-signed-in) {
	padding-inline: 16px;
}

.reset-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	background: var(--reset-ink);
	color: var(--reset-paper);
	border-radius: 50%;
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.06em;
}

/* --- The cancellation policy panel ----------------------------------- */

.reset-policy {
	padding: calc(var(--reset-gap) * 4) 0;
}

.reset-policy__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--reset-line);
	border: 1px solid var(--reset-line);
	border-radius: var(--reset-radius);
	overflow: hidden;
}

.reset-policy__col {
	padding: calc(var(--reset-gap) * 3);
	background: var(--reset-stone);
}

.reset-policy__col--ok .reset-eyebrow {
	color: var(--reset-sage);
}

.reset-policy__col--warn .reset-eyebrow {
	color: var(--reset-clay);
}

.reset-policy__title {
	font-family: var(--reset-serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 var(--reset-gap);
}

.reset-policy__body {
	font-size: 13px;
	color: var(--reset-muted);
	margin: 0;
}

.reset-policy__link {
	margin: calc(var(--reset-gap) * 2) 0 0;
	font-family: var(--reset-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* --- Terms ----------------------------------------------------------- */

.reset-terms__clause {
	padding: calc(var(--reset-gap) * 3) 0;
	border-bottom: 1px solid var(--reset-line);
}

.reset-terms__title {
	display: flex;
	gap: calc(var(--reset-gap) * 2);
	align-items: baseline;
	font-family: var(--reset-serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 var(--reset-gap);
}

.reset-terms__number {
	font-family: var(--reset-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--reset-sage);
}

.reset-terms p {
	font-size: 13.5px;
	color: var(--reset-muted);
	margin: 0;
}

/* --- Opening hours, menus, waitlist --------------------------------- */

.reset-hours {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.reset-hours th,
.reset-hours td {
	padding: calc(var(--reset-gap) * 1.5) 0;
	text-align: left;
	border-bottom: 1px solid var(--reset-line);
	font-weight: 300;
}

.reset-hours th {
	color: var(--reset-ink);
}

.reset-hours td {
	color: var(--reset-muted);
	text-align: right;
	font-family: var(--reset-mono);
	font-size: 12px;
}

.reset-hours--inline {
	font-family: var(--reset-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--reset-quiet);
}

.reset-menus {
	display: grid;
	gap: calc(var(--reset-gap) * 4);
}

.reset-menu__name {
	font-family: var(--reset-serif);
	font-size: 25px;
	font-weight: 400;
	margin: 0 0 var(--reset-gap);
}

.reset-menu__viewer {
	width: 100%;
	height: 70vh;
	min-height: 380px;
	background: var(--reset-sand);
	border: 1px solid var(--reset-line);
	border-radius: var(--reset-radius);
}

.reset-menu__download {
	margin-top: calc(var(--reset-gap) * 2);
}

.reset-waitlist p {
	font-size: 13.5px;
	color: var(--reset-muted);
}

.reset-vouchers {
	padding: calc(var(--reset-gap) * 3);
	background: var(--reset-sand);
	border-radius: var(--reset-radius);
}

/* --- Wider screens --------------------------------------------------- */

@media (min-width: 640px) {

	.reset {
		font-size: 14px;
	}

	.reset-form .reset-btn,
	.reset-form--danger .reset-btn {
		width: auto;
		min-width: 220px;
	}

	.reset-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.reset-prices {
		grid-template-columns: repeat(2, 1fr);
	}

	.reset-policy__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.reset-policy--stacked .reset-policy__grid {
		grid-template-columns: 1fr;
	}

	.reset-booking {
		grid-template-columns: 1fr auto;
		align-items: start;
	}

	.reset-booking__actions {
		border-top: 0;
		padding-top: 0;
		justify-content: flex-end;
	}
}

@media (min-width: 900px) {

	.reset-week {
		grid-template-columns: repeat(7, 1fr);
		gap: var(--reset-gap);
	}

	.reset-card {
		grid-template-columns: 1fr;
		grid-template-areas:
			"time"
			"name"
			"meta"
			"status";
		row-gap: 4px;
	}

	.reset-card__name {
		font-size: 17px;
	}

	.reset-strip--row {
		grid-template-columns: repeat(4, 1fr);
	}

	.reset-prices {
		grid-template-columns: repeat(var(--reset-cols, 4), 1fr);
	}

	.reset-panel {
		width: min(480px, 100%);
	}
}

/* --- Print: a register the teacher can carry ------------------------- */

@media print {

	.reset-panel-wrap,
	.reset-filters,
	.reset-weeknav,
	.reset-btn {
		display: none !important;
	}

	.reset {
		font-size: 12px;
	}
}