/*
 * Help centre, Contact, search and 404 (master plan §11.12.2). Loaded after journal.css, whose
 * prose rules (short answer, tables, questions, images) these pages share. Tokens only; radius 0.
 */

/* ================================================================ Centred header */
.v-help__head {
	display: grid;
	justify-items: center;
	gap: var(--v-space-5);
	max-width: calc(46rem + 2 * var(--v-gutter));
	padding-block: var(--v-space-9) var(--v-space-8);
	text-align: center;
}
.v-help__title {
	font-size: var(--v-text-h1);
	line-height: var(--v-lh-h1);
	letter-spacing: var(--v-track-h1);
	text-wrap: balance;
}
.v-help__intro {
	max-width: 44ch;
	color: var(--v-text-muted);
	font-size: var(--v-text-body-lg);
	text-wrap: pretty;
}
.v-help__updated {
	margin-top: var(--v-space-3);
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
}
@media (max-width: 767px) {
	.v-help__head { padding-block: var(--v-space-7) var(--v-space-6); }
}

/* Site search form (help index, search results, 404) */
.v-sitesearch {
	display: grid;
	gap: var(--v-space-2);
	width: min(100%, 32rem);
	text-align: left;
}
.v-sitesearch__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--v-space-2);
}

/* ================================================================ Help index: the directory */
.v-help__directory { padding-bottom: var(--v-section-y); }
.v-helpdir {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--v-hairline) solid var(--v-border);
}
.v-helpdir li { border-bottom: var(--v-hairline) solid var(--v-border); }
.v-helpdir__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "title arrow" "line arrow";
	align-items: center;
	gap: var(--v-space-1) var(--v-space-5);
	min-height: var(--v-hit-min);
	padding-block: var(--v-space-5);
	color: inherit;
	text-decoration: none;
}
.v-helpdir__title {
	grid-area: title;
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-h3);
}
.v-helpdir__line {
	grid-area: line;
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
}
.v-helpdir__arrow {
	grid-area: arrow;
	width: var(--v-accordion-icon);
	height: var(--v-accordion-icon);
	color: var(--v-text-muted);
	transition: transform var(--v-dur-hover) var(--v-ease-out), color var(--v-dur-hover) var(--v-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.v-helpdir__row:hover .v-helpdir__arrow { transform: translateX(var(--v-space-1)); color: var(--v-link); }
	.v-helpdir__row:hover .v-helpdir__title { text-decoration: underline; text-decoration-thickness: var(--v-hairline); text-underline-offset: 0.15em; }
}
@media (min-width: 1024px) {
	.v-helpdir {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--v-space-9);
		border-top: 0;
	}
	.v-helpdir li:nth-child(-n + 2) { border-top: var(--v-hairline) solid var(--v-border); }
}
.v-help__more { margin: var(--v-space-9) auto 0; }

/* ================================================================ Help page: directory · page · help */
.v-help__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* A wide table scrolls inside its figure, never widens the page. */
	gap: var(--v-space-8);
	padding-bottom: var(--v-section-y);
}
.v-help__body { justify-self: center; width: 100%; max-width: var(--v-measure); }
.v-help__body > h2 { scroll-margin-top: calc(var(--v-header-h) + var(--v-space-6)); }
.v-help__body > :first-child { margin-top: 0; }
@media (min-width: 1024px) {
	.v-help__layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--v-gap);
		align-items: start;
	}
	.v-helpnav { grid-column: 1 / 4; padding-right: var(--v-space-5); }
	.v-help__body { grid-column: 4 / 10; }
	.v-help__aside { grid-column: 10 / 13; padding-left: var(--v-space-5); }
	.v-helpnav,
	.v-help__aside {
		position: sticky;
		top: calc(var(--v-header-h) + var(--v-space-6));
	}
}
.v-helpnav__list {
	display: grid;
	gap: var(--v-space-1);
	margin: 0;
	padding: 0 0 var(--v-space-5);
	list-style: none;
}
.v-helpnav__link {
	display: flex;
	align-items: center;
	min-height: var(--v-hit-min);
	color: var(--v-text-muted);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	text-decoration: none;
	transition: color var(--v-dur-hover) var(--v-ease-out);
}
.v-helpnav__link:hover { color: var(--v-text); }
.v-helpnav__link[aria-current="page"] { color: var(--v-link); }
.v-helpnav__sections { padding: 0 0 var(--v-space-3) var(--v-space-4); }

/* "Still need help?" */
.v-helpcard {
	display: grid;
	gap: var(--v-space-4);
	justify-items: start;
	padding: var(--v-space-6);
	background: var(--v-surface-alt);
}
.v-helpcard__title {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-h3);
}
.v-helpcard__text {
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
	line-height: var(--v-lh-body);
}
.v-helpcard__line { font-size: var(--v-text-small); overflow-wrap: anywhere; }
.v-helpcard .v-btn { width: 100%; justify-content: center; }

/* Today's dates table (Delivery and returns) */
.v-prose .v-dates table { min-width: 0; }
.v-prose .v-dates th[scope="row"] { width: 50%; color: var(--v-text-muted); font-weight: var(--v-weight-regular); }
.v-prose .v-dates td { font-weight: var(--v-weight-semibold); font-variant-numeric: tabular-nums; }

/* ================================================================ Forms (contact, start a return) */
.v-form {
	display: grid;
	gap: var(--v-space-5);
}
.v-prose .v-form > * + * { margin-top: 0; }
.v-form .v-btn { justify-self: start; }
.v-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.v-form__notice {
	padding: var(--v-space-4) var(--v-space-5);
	border: var(--v-hairline) solid var(--v-negative);
	color: var(--v-negative);
	font-size: var(--v-text-small);
}
.v-form--sent {
	padding: var(--v-space-6);
	background: var(--v-surface-alt);
}
.v-form__done {
	color: var(--v-positive);
	font-weight: var(--v-weight-bold);
}

/* ================================================================ Contact: 1 : 1 */
.v-contact__split {
	display: grid;
	gap: var(--v-space-9);
	padding-bottom: var(--v-section-y);
}
@media (min-width: 1024px) {
	.v-contact__split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--v-space-10);
		align-items: start;
	}
}
.v-contact__subtitle {
	margin-bottom: var(--v-space-6);
	font-size: var(--v-text-h3);
	line-height: var(--v-lh-h3);
}
.v-contact__list {
	display: grid;
	margin: 0;
	border-top: var(--v-hairline) solid var(--v-border);
}
.v-contact__list > div {
	display: grid;
	gap: var(--v-space-1);
	padding-block: var(--v-space-5);
	border-bottom: var(--v-hairline) solid var(--v-border);
}
.v-contact__list dt {
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-bold);
}
.v-contact__list dd {
	margin: 0;
	color: var(--v-text-muted);
	overflow-wrap: anywhere;
}
@media (min-width: 768px) {
	.v-contact__list > div { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--v-space-5); }
}
.v-contact__content { max-width: none; }

/* ================================================================ Search results, 404 */
.v-search-page__jackets { padding-bottom: var(--v-section-y); }
.v-search-page__other { max-width: calc(52rem + 2 * var(--v-gutter)); padding-bottom: var(--v-section-y); }
.v-search-page__other .v-helpdir { grid-template-columns: minmax(0, 1fr); }
.v-search-page__other .v-helpdir li:nth-child(2) { border-top: 0; }
.v-lost {
	display: grid;
	justify-items: center;
	gap: var(--v-space-6);
	max-width: calc(46rem + 2 * var(--v-gutter));
	padding-block: var(--v-space-10) var(--v-section-y);
	text-align: center;
}
.v-lost__title {
	font-size: var(--v-text-h1);
	line-height: var(--v-lh-h1);
	letter-spacing: var(--v-track-h1);
	text-wrap: balance;
}
.v-lost__text {
	max-width: 44ch;
	color: var(--v-text-muted);
	font-size: var(--v-text-body-lg);
}
.v-lost__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--v-space-3);
}

@media (prefers-reduced-motion: reduce) {
	.v-helpdir__arrow { transition: none; }
	.v-helpdir__row:hover .v-helpdir__arrow { transform: none; }
}