@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-display: block;
	src: url("../fonts/archivo-variable-latin.woff2") format("woff2");
}

@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/archivo-narrow-400.ttf") format("truetype"); }
@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 500; font-display: block; src: url("../fonts/archivo-narrow-500.ttf") format("truetype"); }
@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 600; font-display: block; src: url("../fonts/archivo-narrow-600.ttf") format("truetype"); }
@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 700 800; font-display: block; src: url("../fonts/archivo-narrow-700.ttf") format("truetype"); }

/* Georgian letters, cut from FiraGO. The range keeps them out of the way
   of a page written in English, which never asks for the file. */
@font-face { font-family: "FiraGO"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/firago-georgian-400.woff2") format("woff2"); unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
@font-face { font-family: "FiraGO"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/firago-georgian-500.woff2") format("woff2"); unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
@font-face { font-family: "FiraGO"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/firago-georgian-600.woff2") format("woff2"); unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
@font-face { font-family: "FiraGO"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/firago-georgian-700.woff2") format("woff2"); unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }

:root {
	--csh-bg: #f3f2f2;
	--csh-surface: #e8e7e6;
	--csh-text: #201e1d;
	--csh-muted: #6f6b68;
	--csh-dark: #2d2b2b;
	--csh-line: #c9c6c3;
	--csh-accent: #f40009;
	--csh-accent-dark: #d10008;
	--csh-white: #fff;
	--csh-neutral-300: #d7d3d3;
	--csh-neutral-400: #bab6b6;
	--csh-neutral-600: #7d7979;
	--csh-neutral-700: #605d5d;
	--csh-neutral-800: #444141;
	--csh-neutral-900: #2d2b2b;
	--csh-accent-100: #fff2ef;
	--csh-accent-400: #ff9783;
	--csh-header-color: #201e1d;
	--csh-report-header-color: #201e1d;
	--csh-divider: color-mix(in srgb, #201e1d 40%, transparent);
	--csh-font: "Archivo", "FiraGO", system-ui, sans-serif;
	--csh-font-narrow: "Archivo Narrow", "Archivo", "FiraGO", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* The room for the scrollbar is kept whether the page needs one or not,
   so the header does not shift when a list grows past the screen. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; background: var(--csh-bg); }

body.csh-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--csh-bg);
	color: var(--csh-text);
	font-family: var(--csh-font);
	font-size: 16px;
	line-height: 1.45;
}

.csh-shell h1,
.csh-shell h2,
.csh-shell h3,
.csh-shell h4,
.csh-shell h5,
.csh-shell h6,
.csh-shell button,
.csh-shell [type="submit"],
.csh-brand,
.csh-main-nav,
.csh-guest-nav,
.csh-topbar__logout { font-family: var(--csh-font-narrow); }

.csh-shell a { color: inherit; }

.csh-shell .csh-vin,
.csh-shell input[name="vin"],
.csh-shell input[name="csh_vin"] {
	font-family: ui-monospace, monospace !important;
}

.csh-skip-link {
	position: fixed;
	top: -80px;
	left: 18px;
	z-index: 1000;
	background: var(--csh-white);
	padding: 10px 14px;
}

.csh-skip-link:focus { top: 12px; }

.csh-topbar {
	display: flex;
	align-items: center;
	min-height: 76px;
	padding: 0 42px;
	border-bottom: 1px solid #201e1d;
	background: var(--csh-header-color);
	color: var(--csh-white);
}

.csh-topbar a,
.csh-topbar strong,
.csh-topbar small,
.csh-main-nav a,
.csh-guest-nav a,
.csh-topbar__logout { color: var(--csh-white); }

.csh-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	white-space: nowrap;
}

.csh-brand__mark {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	background: var(--csh-accent);
	color: var(--csh-white);
	font-size: 25px;
	font-weight: 800;
	line-height: 1;
}

/* A logo with nothing behind it shows the header itself, the way the shop
   drew it; no white square is painted under it. */
.csh-brand__logo {
	display: block;
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.csh-brand__text { display: grid; line-height: 1.05; }
.csh-brand__text strong { font-size: 18px; letter-spacing: .04em; }
.csh-brand__text small { margin-top: 4px; color: var(--csh-white); font-size: 10px; letter-spacing: .12em; opacity: .72; text-transform: uppercase; }

.csh-main-nav,
.csh-guest-nav {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-left: auto;
}

.csh-main-nav a,
.csh-guest-nav a,
.csh-topbar__logout {
	display: flex;
	align-items: center;
	min-height: 76px;
	padding: 0 17px;
	border-bottom: 3px solid transparent;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
}

.csh-main-nav a:hover,
.csh-main-nav a.is-active,
.csh-guest-nav a:hover,
.csh-guest-nav a.is-active { border-bottom-color: var(--csh-accent); }

.csh-topbar__logout {
	margin-left: 12px;
	color: var(--csh-white);
}


.csh-main-nav .csh-nav-group { position: relative; display: flex; align-items: stretch; }

.csh-main-nav .csh-nav-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: none;
	min-width: 148px;
	padding: 6px 0;
	border-bottom: 1px solid #201e1d;
	background: var(--csh-header-color);
}

.csh-main-nav .csh-nav-group:hover .csh-nav-submenu,
.csh-main-nav .csh-nav-group:focus-within .csh-nav-submenu { display: block; }

.csh-main-nav .csh-nav-submenu a {
	min-height: 0;
	padding: 9px 17px;
	border-bottom: 0;
	white-space: nowrap;
}

.csh-main-nav .csh-nav-submenu a:hover,
.csh-main-nav .csh-nav-submenu a.is-active { border-bottom: 0; color: var(--csh-accent); }

/* The administrator is marked by a crown, sized to the words beside it. */
.csh-main-nav .csh-nav-crown { position: relative; top: -2px; display: block; height: 15px; width: auto; }
.csh-main-nav .csh-nav-badge { top: -1px; height: 15px; }

.csh-main-nav .csh-nav-account {
	display: flex;
	align-items: center;
	min-height: 76px;
	padding: 0 17px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--csh-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.csh-main-nav .csh-nav-group--account:hover .csh-nav-account,
.csh-main-nav .csh-nav-group--account:focus-within .csh-nav-account { border-bottom-color: var(--csh-accent); }

.csh-main-nav .csh-nav-submenu--right { left: auto; right: 0; }
/* The footer is pushed down by the layout rather than by arithmetic on the
   viewport height, which breaks as soon as the two do not add up exactly. */
.csh-main { flex: 1 0 auto; }

/* The white half of the split screens has to reach the footer, so every
   wrapper between main and the section grows with it. */
.csh-main,
.csh-main > .csh-public,
.csh-main > .csh-workspace { display: flex; flex-direction: column; }

.csh-main > .csh-public,
.csh-main > .csh-workspace,
.csh-public > .csh-reference-search,
.csh-public > .csh-report-missing,
.csh-workspace > .csh-login,
.csh-workspace > .csh-access-message { flex: 1 0 auto; }

/* The copyright in the middle of the footer, everything else in the right
   corner. Three columns, the outer two of equal width, keep the middle one
   truly centred however long the right side is. */
.csh-data-credit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 24px;
	min-height: 44px;
	padding: 13px 42px;
	color: var(--csh-white);
	background: var(--csh-header-color);
	font-size: 12px;
	line-height: 18px;
}

.csh-data-credit a {
	color: var(--csh-white);
	opacity: .72;
	text-decoration: underline;
}

.csh-data-credit a:hover,
.csh-data-credit a:focus-visible { opacity: 1; }

.csh-data-credit__copyright { grid-column: 2; text-align: center; }
.csh-data-credit__side { grid-column: 3; justify-self: end; text-align: right; }

.csh-data-credit__copyright,
.csh-data-credit__plugin { opacity: .72; }
.csh-data-credit__plugin::after { content: "·"; margin: 0 8px; opacity: .6; }
/* The author follows the data credit behind the same faint dot. */
.csh-data-credit__author::before { content: "·"; margin: 0 8px; opacity: .43; }

/* The sides keep the header's margins at every width. Where the screen is
   too narrow for three columns, the two parts stack in the middle. */
@media (max-width: 960px) {
	.csh-data-credit { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-inline: 22px; text-align: center; }
	.csh-data-credit__copyright,
	.csh-data-credit__side { grid-column: 1; justify-self: center; text-align: center; }
}

@media (max-width: 760px) {
	.csh-data-credit { padding-inline: 16px; }
}

button,
input,
select,
textarea { font: inherit; }

button,
[type="submit"] { cursor: pointer; }

:focus-visible { outline: 3px solid rgba(236, 48, 19, .35); outline-offset: 2px; }

/* Three lines that open the menu; they stay out of sight on a wide screen. */
.csh-nav-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0 9px;
	border: 0;
	background: none;
	cursor: pointer;
}

.csh-nav-burger span {
	display: block;
	height: 2px;
	background: var(--csh-white);
}

@media (max-width: 960px) {
	.csh-topbar { align-items: flex-start; flex-wrap: wrap; padding: 18px 22px 0; }
	.csh-main-nav { order: 3; width: 100%; margin-top: 12px; overflow-x: auto; }
	.csh-main-nav a { min-height: 50px; padding: 0 13px; }
	.csh-topbar__logout { min-height: 40px; margin-left: auto; }
	.csh-guest-nav a { min-height: 40px; }
}

/* On a telephone the whole menu folds away behind the three lines, and the
   guest keeps everything on one row. */
@media (max-width: 760px) {
	.csh-topbar { align-items: center; flex-wrap: nowrap; padding: 12px 16px; }
	/* The row holds itself together until the menu opens under it. */
	.csh-topbar.is-open { flex-wrap: wrap; }
	.csh-brand { min-width: 0; margin-right: auto; overflow: hidden; }
	.csh-brand__text strong { white-space: nowrap; }
	/* Only the mark and the three lines stay in the row; everything else,
	   the languages included, waits inside. */
	.csh-nav-burger { display: flex; order: 2; margin-left: auto; }

	.csh-topbar .csh-lang {
		order: 5;
		display: none;
		width: 100%;
		margin: 0 -16px;
		padding: 4px 20px 10px;
	}

	.csh-topbar.is-open .csh-lang { display: flex; }
	.csh-topbar .csh-lang::before { display: none; }

	.csh-main-nav,
	.csh-guest-nav {
		order: 4;
		display: none;
		width: 100%;
		margin: 12px -16px 0;
		padding: 6px 16px 10px;
		overflow: visible;
		flex-direction: column;
		align-items: stretch;
		border-top: 1px solid rgba(255, 255, 255, .18);
	}

	.csh-topbar.is-open .csh-main-nav,
	.csh-topbar.is-open .csh-guest-nav { display: flex; }

	.csh-main-nav .csh-nav-group,
	.csh-main-nav .csh-nav-group--account { flex-direction: column; align-items: stretch; }

	/* Every entry is a row of the same height, with a hairline under it and a
	   word beside whatever icon it carries. */
	.csh-topbar .csh-main-nav a,
	.csh-topbar .csh-guest-nav a,
	.csh-topbar .csh-main-nav .csh-nav-account {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		min-height: 52px;
		padding: 0 4px;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		font-size: 13px;
		text-align: left;
		white-space: nowrap;
	}

	.csh-topbar .csh-main-nav a.is-active,
	.csh-topbar .csh-guest-nav a.is-active { color: var(--csh-accent); }

	.csh-main-nav .csh-nav-crown { top: 0; height: 17px; }

	/* A finger cannot hover, so what hides under the crown is simply shown,
	   one step in from the rest. */
	.csh-main-nav .csh-nav-submenu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	.csh-topbar .csh-main-nav .csh-nav-submenu a { padding-left: 30px; }

	/* The languages close the list, side by side. */
	.csh-topbar .csh-lang__choice { gap: 18px; }
	.csh-topbar .csh-lang a { min-height: 44px; padding: 0 4px; }
}

@media (max-width: 520px) {
	.csh-topbar { padding-inline: 16px; }
	.csh-brand__text small { display: none; }
}

@media print {
	.csh-topbar,
	.csh-skip-link,
	.csh-data-credit { display: none !important; }
	.csh-main { min-height: 0; }

	/* The paper is white already; nothing here should try to tint it. */
	html,
	body.csh-shell,
	.csh-main { background: #fff !important; color: #000 !important; }
}

.csh-copy-vin {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: inherit;
	opacity: .55;
	vertical-align: middle;
}

.csh-copy-vin:hover,
.csh-copy-vin:focus-visible { opacity: 1; }
.csh-copy-vin svg { width: 13px; height: 13px; }

.csh-vin-copy {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	vertical-align: middle;
	top: -1px;
	white-space: nowrap;
}

.csh-vin-copy [data-csh-copied] {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	z-index: 5;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--csh-accent, #f40009);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateX(-50%);
}

/* Under the heading of a card or report the space above the VIN is taken, so drop the badge below. */
.csh-reference-vehicle .csh-vin-copy [data-csh-copied],
.csh-report .csh-vin-copy [data-csh-copied] {
	top: calc(100% + 4px);
	bottom: auto;
}

.csh-login__link { margin: 14px 0 0; font-size: 13px; text-align: center; }
.csh-login__link a { color: var(--csh-accent, #f40009); text-decoration: underline; }

/* Two languages, side by side at the end of the top bar. */
.csh-lang {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	margin-left: 18px;
	padding-left: 18px;
}

.csh-topbar .csh-lang::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 30px;
	background: rgba(255, 255, 255, .22);
	transform: translateY(-50%);
}

.csh-topbar .csh-lang__choice {
	display: flex;
	align-items: center;
	min-height: 76px;
	padding: 0 12px;
	border-bottom: 3px solid transparent;
	color: var(--csh-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	opacity: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.csh-topbar .csh-lang__choice:hover { border-bottom-color: var(--csh-accent); opacity: 1; }

/* The question mark sits after the two languages and leads to the help page.
   It carries the same underline the menu items carry. */
.csh-topbar .csh-help-link {
	display: flex;
	align-items: center;
	min-height: 76px;
	padding: 0 17px;
	border-bottom: 3px solid transparent;
	color: var(--csh-white);
	text-decoration: none;
}

.csh-topbar .csh-help-link svg { position: relative; top: -1px; display: block; height: 15px; width: auto; }
.csh-topbar .csh-help-link:hover,
.csh-topbar .csh-help-link.is-active { border-bottom-color: var(--csh-accent); }

.csh-topbar .csh-lang__choice.is-active {
	border-bottom-color: var(--csh-accent);
	opacity: 1;
}