.csh-workspace { min-height: 0; }

.csh-login {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, .7fr);
	gap: clamp(60px, 9vw, 150px);
	align-items: center;

	padding: clamp(50px, 8vw, 120px) max(24px, calc((100vw - 1280px) / 2));
}

.csh-login__intro { max-width: 680px; }
.csh-login__intro h1 { max-width: 640px; margin: 14px 0 28px; font-size: clamp(54px, 7vw, 108px); font-weight: 800; letter-spacing: -.065em; line-height: .88; }
.csh-login__intro > p:last-child { max-width: 500px; color: var(--csh-muted); font-size: 19px; }

.csh-login__form { padding: 36px; background: var(--csh-white); }


.csh-kicker { margin: 0; color: var(--csh-accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.csh-control { display: grid; gap: 8px; }
.csh-control > span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.csh-control input,
.csh-control select,
.csh-control textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #aaa6a3; border-radius: 0; background: var(--csh-white); color: var(--csh-text); }
.csh-control textarea { min-height: 100px; resize: vertical; }
.csh-control small { color: var(--csh-muted); }
.csh-login__form .csh-control + .csh-control { margin-top: 18px; }
.csh-check { display: flex; align-items: center; gap: 9px; margin: 20px 0; color: var(--csh-muted); font-size: 14px; }

.csh-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px; border: 1px solid var(--csh-text); border-radius: 0; background: transparent; color: var(--csh-text); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.csh-button:hover { background: var(--csh-dark); color: var(--csh-white); }
.csh-button--primary { border-color: var(--csh-accent); background: var(--csh-accent); color: var(--csh-white); }
.csh-button--primary:hover { border-color: var(--csh-accent-dark); background: var(--csh-accent-dark); }
.csh-button--wide { width: 100%; }
.csh-button--small { min-height: 34px; padding: 7px 11px; font-size: 10px; }
.csh-text-link { display: inline-flex; align-items: center; min-height: 42px; color: var(--csh-text); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-decoration-thickness: 1px; text-underline-offset: 4px; text-transform: uppercase; }

.csh-access-message { max-width: 760px; margin: 0 auto; padding: 12vh 24px; }
.csh-access-message h1 { margin: 18px 0; font-size: clamp(44px, 7vw, 84px); letter-spacing: -.05em; line-height: .95; }

.csh-workspace-page { width: min(1360px, calc(100% - 64px)); margin: 0 auto; padding: 60px 0 100px; }
.csh-page-heading { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; margin-bottom: 42px; padding-bottom: 30px; border-bottom: 2px solid var(--csh-text); }
.csh-page-heading h1 { margin: 12px 0 8px; font-size: clamp(42px, 5vw, 74px); letter-spacing: -.055em; line-height: .95; }
.csh-page-heading p:last-child { margin-bottom: 0; color: var(--csh-muted); font-size: 17px; }
.csh-page-heading__actions,
.csh-workspace-actions,
.csh-inline-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.csh-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--csh-line); border-left: 1px solid var(--csh-line); }
.csh-metric { display: grid; min-height: 190px; align-content: space-between; padding: 24px; border-right: 1px solid var(--csh-line); border-bottom: 1px solid var(--csh-line); }
.csh-metric span { color: var(--csh-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.csh-metric strong { font-size: 64px; line-height: 1; }
.csh-workspace-actions { margin-top: 28px; }

.csh-table-wrap { overflow-x: auto; background: var(--csh-white); }
.csh-table { width: 100%; border-collapse: collapse; }
.csh-table th { padding: 14px 17px; border-bottom: 2px solid var(--csh-text); color: var(--csh-muted); font-size: 10px; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.csh-table td { padding: 18px 17px; border-bottom: 1px solid var(--csh-line); vertical-align: middle; }
.csh-table tr:hover td { background: #f8f7f7; }
.csh-table a { text-underline-offset: 4px; }
.csh-table code { font-size: 12px; }

.csh-status { display: inline-flex; padding: 5px 8px; border: 1px solid currentColor; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.csh-status--published { color: #26734d; }
.csh-status--pending { color: #9a5b00; }
.csh-status--archived { color: var(--csh-muted); }

.csh-empty { padding: 34px; border: 1px solid var(--csh-line); color: var(--csh-muted); }
.csh-empty--large { padding: clamp(40px, 8vw, 100px); background: var(--csh-surface); text-align: center; }
.csh-empty--large h2 { margin: 14px auto; max-width: 720px; font-size: clamp(34px, 5vw, 58px); letter-spacing: -.04em; line-height: 1; }
.csh-empty--large p:last-child { max-width: 680px; margin-inline: auto; }

.csh-form { background: var(--csh-white); }
.csh-form__section { padding: 34px; border-bottom: 1px solid var(--csh-line); }
.csh-form__note { color: var(--csh-muted); }
.csh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.csh-form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.csh-form-grid--identity { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.csh-control--full { grid-column: 1 / -1; }
.csh-form__actions { display: flex; align-items: center; gap: 20px; padding: 25px 34px; }
.csh-form--compact { padding: 25px; }
.csh-form--compact > .csh-control { margin-top: 20px; }
.csh-form--compact > .csh-button { margin-top: 20px; }

.csh-detail-grid,
.csh-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.csh-panel { padding: 28px; border-top: 4px solid var(--csh-text); background: var(--csh-white); }
.csh-panel--link { display: block; text-decoration: none; }
.csh-panel--link:hover { border-top-color: var(--csh-accent); }
.csh-panel h2 { margin: 12px 0; font-size: 28px; }
.csh-facts { margin: 18px 0 0; }
.csh-facts div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--csh-line); }
.csh-facts dt { color: var(--csh-muted); }
.csh-facts dd { margin: 0; font-weight: 700; text-align: right; }

.csh-service-area { margin-top: 55px; }
.csh-section-title { display: flex; justify-content: space-between; align-items: end; padding-bottom: 18px; border-bottom: 2px solid var(--csh-text); }
.csh-section-title h2 { margin: 8px 0 0; font-size: 40px; letter-spacing: -.035em; }
.csh-section-title > strong { font-size: 40px; }
.csh-service-entry { margin: 20px 0; border: 1px solid var(--csh-line); background: var(--csh-white); }
.csh-service-entry summary { padding: 19px 24px; font-size: 13px; font-weight: 800; letter-spacing: .08em; cursor: pointer; text-transform: uppercase; }
.csh-service-entry[open] summary { border-bottom: 1px solid var(--csh-line); }

.csh-event-list { display: grid; }
.csh-event { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--csh-line); }
.csh-event__date { display: grid; align-content: start; gap: 6px; }
.csh-event__date strong { font-size: 20px; }
.csh-event__date span { color: var(--csh-muted); }
.csh-event__body > p:last-child { margin-bottom: 0; }
.csh-event__meta { display: flex; gap: 13px; align-items: center; margin-top: 0; color: var(--csh-muted); }

.csh-subheading { margin: 55px 0 16px; font-size: 32px; }
.csh-notice { width: min(1360px, calc(100% - 64px)); margin: 24px auto 0; padding: 14px 18px; border-left: 4px solid; background: var(--csh-white); }
.csh-notice--success { border-color: #26734d; }
/* A refusal has to read as a refusal, not as one more teal message. */
.csh-notice--error { border-color: #c62828; background: #fdeceb; color: #7f1d1d; }
.csh-notice--error b { color: #c62828; }
.csh-login__form .csh-notice { width: 100%; margin: 0 0 20px; }

@media (max-width: 900px) {
	.csh-login { grid-template-columns: 1fr; gap: 30px; }
	.csh-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.csh-detail-grid,
	.csh-settings-grid { grid-template-columns: 1fr; }
	.csh-event { grid-template-columns: 140px minmax(0, 1fr); }
	.csh-event > .csh-inline-actions { grid-column: 2; }
}

@media (max-width: 680px) {
	.csh-workspace-page { width: min(100% - 32px, 1360px); padding-top: 36px; }
	.csh-page-heading { display: block; }
	.csh-page-heading__actions { margin-top: 22px; }
	.csh-form-grid,
	.csh-form-grid--three,
	.csh-form-grid--identity { grid-template-columns: 1fr; }
	.csh-event { grid-template-columns: 1fr; gap: 12px; }
	.csh-event > .csh-inline-actions { grid-column: 1; }
	.csh-login { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
	.csh-login__form { padding: 24px; }
}

/* Reference density: the internal screens keep the same type scale and spacing rhythm. */
.csh-login {

	padding: 64px 48px;
}

.csh-login__intro h1 {
	max-width: 560px;
	margin: 16px 0 24px;
	font-size: 44px;
	letter-spacing: -.015em;
	line-height: 1.1;
}

.csh-login__intro > p:last-child { font-size: 15px; }
.csh-login__form { padding: 32px; border-top-width: 2px; border-radius: 8px; background: var(--csh-surface); }

.csh-workspace-page {
	width: auto;
	margin: 0;
	padding: 48px;
}

.csh-page-heading { align-items: flex-start; margin-bottom: 32px; padding-bottom: 20px; }
.csh-page-heading h1 { margin: 8px 0 4px; font-size: 42px; letter-spacing: -.015em; line-height: 1.12; }
.csh-page-heading p:last-child { font-size: 15px; }

.csh-metric-grid { gap: 2px; border: 0; background: var(--csh-divider); }
.csh-metric { min-height: 128px; padding: 16px; border: 0; background: var(--csh-bg); }
.csh-metric strong { font-size: 40px; font-weight: 600; }

.csh-form,
.csh-table-wrap,
.csh-panel,
.csh-service-entry { border-radius: 8px; background: var(--csh-surface); }

.csh-form__section { padding: 24px; }
.csh-form__actions { padding: 20px 24px; }
.csh-panel { padding: 24px; border-top-width: 2px; }
.csh-panel h2 { font-size: 25px; }
.csh-section-title h2,
.csh-subheading { font-size: 32px; }
.csh-section-title > strong { font-size: 32px; }
.csh-event { grid-template-columns: 140px minmax(0, 1fr) auto; padding: 20px 0; }

@media (max-width: 680px) {
	.csh-login,
	.csh-workspace-page { padding: 36px 20px; }
}

/* Literal component language from the supplied CSH reference. */
.csh-reference-admin {
	--color-bg: #f3f2f2;
	--color-surface: #eae9e9;
	--color-text: #201e1d;
	--color-accent: #f40009;
	--color-accent-100: #fde3e2;
	--color-accent-600: #d10008;
	--color-accent-700: #ac0007;
	--color-accent-800: #780005;
	--color-neutral-100: #f8f4f4;
	--color-neutral-200: #eae7e7;
	--color-neutral-300: #d7d3d3;
	--color-neutral-400: #bab6b6;
	--color-neutral-600: #7d7979;
	--color-neutral-700: #605d5d;
	--color-neutral-800: #444141;
	--color-divider: color-mix(in srgb, #201e1d 40%, transparent);
	width: auto;
	min-height: 70vh;
	margin: 0;
	padding: 32px 40px;
	border: 1px solid #c3c4c7;
	background: #fff;
	color: var(--color-text);
	font-family: var(--csh-font);
	font-size: 15px;
	line-height: 1.55;
}

.csh-reference-admin h1,
.csh-reference-admin h2,
.csh-reference-admin h3,
.csh-reference-admin .btn,
.csh-reference-admin .csh-vehicle-tabs { font-family: var(--csh-font-narrow); }

.csh-reference-admin .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14.4px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
}

.csh-reference-admin .btn-primary { background: var(--color-accent); color: var(--color-bg); }
.csh-reference-admin .btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.csh-reference-admin .btn-secondary { border-color: var(--color-divider); }
.csh-reference-admin .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.csh-reference-admin .btn-ghost { padding-inline: 4px; color: var(--color-accent); }

.csh-reference-admin .input {
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--color-divider);
	border-radius: 8px;
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: 14px;
}

.csh-garage-page-size {
	width: 72px !important;
	min-width: 72px;
	min-height: 32px !important;
	margin-left: auto;
	padding: 4px 8px !important;
	font-size: 12px !important;
}

.csh-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 16px;
}

.csh-pagination .page-numbers {
	display: inline-flex;
	min-width: 36px;
	min-height: 36px;
	padding: 6px 10px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-divider);
	border-radius: 8px;
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	text-decoration: none;
}

.csh-pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }
.csh-pagination .page-numbers.current { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }

.csh-reference-table-wrap { overflow-x: auto; }

@media (max-width: 900px) {
	.csh-reference-admin [data-csh-tab-panel] { overflow-x: auto; }
}

.csh-reference-admin .table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.csh-reference-admin .table th {
	padding: 8px;
	border-bottom: 2px solid var(--color-divider);
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.csh-reference-admin .table td { padding: 8px; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.csh-reference-admin .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
/* The five columns that carry the reading share the width evenly; the link
   at the end keeps to itself. */
.csh-reference-admin .table.csh-service-table { table-layout: fixed; }
.csh-reference-admin .table.csh-service-table th:last-child,
.csh-reference-admin .table.csh-service-table td:last-child { width: 128px; }
/* A column holding only a number takes the room a number needs, so the
   text beside it starts close by. */
.csh-reference-admin .table th.csh-cell-narrow,
.csh-reference-admin .table td.csh-cell-narrow { width: 84px; }
/* The warranty date and its month count sit fifty pixels further right,
   which the part name takes up and the date gives back. */
/* On the insurance list the number takes fifty pixels more and the year
   gives them back, so the model and the year start further right. */
.csh-reference-admin .table.csh-insurance-due-table th:nth-child(1),
.csh-reference-admin .table.csh-insurance-due-table td:nth-child(1),
.csh-reference-admin .table.csh-insurance-due-table th:nth-child(6),
.csh-reference-admin .table.csh-insurance-due-table td:nth-child(6) { width: 17.26%; }
.csh-reference-admin .table.csh-insurance-due-table th:nth-child(3),
.csh-reference-admin .table.csh-insurance-due-table td:nth-child(3),
.csh-reference-admin .table.csh-insurance-due-table th:nth-child(7),
.csh-reference-admin .table.csh-insurance-due-table td:nth-child(7) { width: 9.82%; }
.csh-reference-admin .table th.csh-cell-vin,
.csh-reference-admin .table td.csh-cell-vin,
.csh-reference-admin .table th.csh-cell-model,
.csh-reference-admin .table td.csh-cell-model { width: 16.82%; }
.csh-reference-admin .table th.csh-cell-year,
.csh-reference-admin .table td.csh-cell-year { width: 9.97%; }
.csh-reference-admin .table th.csh-cell-grow,
.csh-reference-admin .table td.csh-cell-grow { width: 31.70%; }
.csh-reference-admin .table th.csh-cell-shrink,
.csh-reference-admin .table td.csh-cell-shrink { width: 13.10%; }
.csh-reference-admin .table td .csh-row-sep { margin: 0 10px; color: var(--color-divider); }

.csh-reference-admin .csh-garage-table th:last-child,
.csh-reference-admin .csh-garage-table td:last-child { text-align: right; }

.csh-reference-admin .csh-garage-table th:nth-child(n+2):nth-child(-n+5),
.csh-reference-admin .csh-garage-table td:nth-child(n+2):nth-child(-n+5) { width: 14%; }
/* On the garage list the model takes the room the number does not need,
   and the year keeps only what a year needs. The widths are held exactly,
   so the columns do not drift as the text changes. */
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) { table-layout: fixed; }
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) th:nth-child(1),
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) td:nth-child(1) { width: 17.80%; }
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) th:nth-child(2),
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) td:nth-child(2) { width: 19.44%; }
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) th:nth-child(3),
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) td:nth-child(3) { width: 10.28%; }
/* In Georgian the two actions are long enough to fall onto two lines.
   The pair keeps the room it needs, taken from the date beside it, so
   the columns before them do not move. */
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) th:nth-child(6),
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) td:nth-child(6) { width: 10.19%; }
/* The two links at the end of a row keep to one line on a laptop as well as
   on a wide screen, so the column is given room in pixels, not in shares. */
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) th:last-child,
.csh-reference-admin .csh-garage-table:not(.csh-archive-table) td:last-child { width: 196px; white-space: nowrap; }

.csh-reference-admin .tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .02em;
}

.csh-reference-admin .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.csh-reference-admin .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.csh-reference-admin .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.csh-reference-admin .tag-active { background: #e8f5ee; color: #17613f; }
.csh-reference-admin .tag-expiring { background: #fff3d6; color: #7a4b00; }
.csh-reference-admin .tag-expired { background: #fde8e8; color: #9b2525; }

.csh-vehicle-tabs {
	justify-content: space-between;
	gap: 40px;
}

.csh-vehicle-tabs button {
	margin-right: 0;
	padding: 12px 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--color-neutral-700);
	font-size: 15px;
	cursor: pointer;
}

.csh-vehicle-tabs button:hover { color: var(--color-text); }
.csh-vehicle-tabs button.is-active { border-bottom-color: var(--color-accent); color: var(--color-text); font-weight: 600; }

.csh-reference-section-title {
	margin-bottom: 12px;
	padding-top: 12px;
	border-top: 2px solid var(--color-text);
}

.csh-reference-section-title h2 { margin: 0; font-size: 18px; font-weight: 800; }

.csh-reference-service-form { margin-top: 16px; text-align: right; }
.csh-reference-service-form summary { margin-left: auto; list-style: none; }
.csh-reference-service-form summary::-webkit-details-marker { display: none; }
.csh-reference-service-form[open] summary { margin-bottom: 16px; }
.csh-reference-service-form form { text-align: left; }
.csh-inspection-form-title { margin-top: 28px; }
.csh-inspection-form { padding-top: 16px; }
.csh-inspection-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.csh-service-fields--basics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.csh-service-work-date { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
.csh-reference-admin .csh-service-work-date .csh-works { gap: 8px; margin: 0; }
.csh-inspection-description { grid-column: 1 / -1; width: 50%; }
.csh-inspection-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.csh-reference-photos { display: flex; gap: 8px; overflow-x: auto; }
.csh-reference-photo-upload {
	display: grid;
	flex: 0 0 152px;
	aspect-ratio: 4 / 3;
	place-items: center;
	border: 2px dashed var(--color-neutral-400);
	background: transparent;
	color: var(--color-neutral-700);
	font-family: ui-monospace, monospace;
	font-size: 11px;
	cursor: pointer;
}
.csh-reference-photo-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.csh-photo-requirements { margin: 10px 0 0; color: var(--color-neutral-700); font-size: 13px; }
.csh-photo-error { margin: 8px 0 0; color: var(--color-accent-700); font-size: 13px; }
.csh-photo-preview { position: relative; flex: 0 0 152px; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-neutral-100); cursor: grab; }
.csh-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.csh-reference-photo-field .csh-photo-preview:first-of-type::after,
.csh-vehicle-photo:first-child::after { content: "Cover"; position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; background: var(--color-text); color: #fff; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.csh-reference-admin .btn-block { width: 100%; }
.csh-reference-admin .field { margin-bottom: 16px; }
.csh-reference-admin .field label,
.csh-reference-photo-field > label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
/* A reading the dates cannot allow is marked as it is typed; the save
   would refuse it anyway. */
.csh-reference-admin .input.is-out-of-range {
	border-color: #c62828;
	box-shadow: inset 0 0 0 1px #c62828;
}
.csh-reference-admin .input:disabled,
.csh-reference-admin .btn:disabled { opacity: .62; cursor: not-allowed; }

.csh-reference-section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	padding-top: 12px;
	border-top: 2px solid var(--color-text);
}
.csh-reference-section-heading--spaced { margin-top: 32px; }
.csh-reference-section-heading h2 { margin: 0; font-size: 18px; font-weight: 800; }
.csh-reference-section-heading > span { color: var(--color-neutral-700); font-size: 12px; }
.csh-source-toggle { display: flex; align-items: center; gap: 8px; color: var(--color-text); font-size: 15px; font-weight: 700; cursor: pointer; }
.csh-source-toggle input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); }
.csh-source-toggle input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .62; }
.csh-mileage-toggle { justify-content: flex-end; gap: 8px; margin-top: 18px; }
.csh-reference-admin .field label.csh-source-toggle {
	display: flex;
	margin-bottom: 0;
	font-size: 15px;
	letter-spacing: normal;
	text-transform: none;
}

/* The help page: two columns of questions that fold open. */
.csh-help-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; }
.csh-help-column > .csh-reference-section-heading { margin-top: 32px; }
.csh-help-column > .csh-reference-section-heading:first-child { margin-top: 0; }
.csh-help-list { margin: 0 0 4px; }
.csh-help-item { border-bottom: 1px solid color-mix(in srgb, #201e1d 13%, transparent); }
.csh-help-item > summary { position: relative; padding: 11px 28px 11px 0; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.csh-help-item > summary::-webkit-details-marker { display: none; }
.csh-help-item > summary::after { content: "+"; position: absolute; top: 8px; right: 4px; font-size: 18px; font-weight: 400; color: var(--color-neutral-700); }
.csh-help-item[open] > summary::after { content: "\2212"; }
.csh-help-item > p { margin: 0; padding: 0 28px 14px 0; color: var(--color-text); }
.csh-help-shot { display: block; width: 100%; height: auto; margin: 0 0 16px; border: 1px solid var(--color-neutral-300); cursor: zoom-in; }
/* A picture clicked open lies over the page until it is clicked away. */
.csh-help-zoom {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(32, 30, 29, .82);
	cursor: zoom-out;
}
.csh-help-zoom[hidden] { display: none; }
.csh-help-zoom img { max-width: 100%; max-height: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }

.csh-dashboard-metrics {
	display: grid;
	/* Five tiles or six, they fill the row and leave no grey gap behind. */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2px;
	margin-bottom: 40px;
	border: 2px solid var(--color-divider);
	background: var(--color-divider);
}
/* A tile that leads somewhere behaves like a link and says so on hover. */
.csh-dashboard-metrics > div,
.csh-dashboard-metrics > a { display: block; padding: 20px; background: var(--color-bg); }
.csh-dashboard-metrics > a { color: inherit; text-decoration: none; }
.csh-dashboard-metrics > a:hover,
.csh-dashboard-metrics > a:focus-visible { background: #e8f4ec; }
.csh-dashboard-metrics strong { display: block; font-size: 40px; font-weight: 800; line-height: 1; }
.csh-dashboard-metrics strong.is-accent { color: var(--color-accent); }
.csh-dashboard-metrics span { display: block; margin-top: 6px; color: var(--color-neutral-700); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.csh-dashboard-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; }
.csh-reference-activity > div { padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.csh-reference-activity small { display: block; color: var(--color-neutral-700); font-size: 12px; }

.csh-reference-form__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 40px; align-items: start; }
.csh-reference-service-entry__layout { grid-template-columns: minmax(0, 1fr) 300px; }
.csh-reference-service-basics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 20px; border-top: 2px solid var(--color-text); }
.csh-reference-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.csh-reference-vehicle-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.csh-reference-discount-fields { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 16px; }
.csh-owner-inline-select { display: inline-block; width: auto; min-width: 168px; margin-right: 8px; }
.csh-ownership-inline-input { width: 168px; }
/* A day corrected where it stands takes the room a day needs, not the whole
   column it sits in. */
.csh-reference-admin .csh-inspection-inline-input { width: 168px; }
/* A price corrected where it stands takes the room a price needs. */
.csh-reference-admin .csh-price-inline-input { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.csh-insurance-table .input { min-width: 168px; }
/* A stored policy is corrected where it stands, and that row carries the
   cross as well, so its fields give up what the sixth column takes. */
.csh-tab-table--6.csh-insurance-table .input { min-width: 150px; width: 150px; }
.csh-create-ownership-table .input { min-width: 168px; }
.csh-reference-admin .csh-insurance-status {
	min-width: 168px;
	min-height: 36px;
	padding: 6px 10px;
	align-items: center;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
}
.csh-insurance-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.csh-tab-table {
	display: grid;
	justify-content: space-between;
}
.csh-tab-table--5 { grid-template-columns: repeat(5, max-content); }
.csh-tab-table--4 { grid-template-columns: repeat(4, max-content); }
.csh-tab-table--6 { grid-template-columns: repeat(6, max-content); }
.csh-tab-table--7 { grid-template-columns: repeat(7, max-content); }

/* The part name carries the most text, so it takes the room; the rest
   only hold a date, a number and a price. */
/* A long note has to wrap inside its column instead of pushing the table
   off the page. */
.csh-services-table { grid-template-columns: max-content max-content minmax(0, 62ch) max-content max-content max-content max-content; }
.csh-installed-table { grid-template-columns: minmax(0, 48ch) max-content max-content max-content max-content max-content max-content; }
.csh-log-table { grid-template-columns: max-content max-content max-content minmax(0, 62ch); }
.csh-services-table td,
.csh-installed-table td,
.csh-log-table td:last-child { overflow-wrap: anywhere; }
.csh-parts-table { grid-template-columns: minmax(0, 3fr) minmax(0, 0.7fr) minmax(0, 1.95fr) minmax(0, 0.55fr) max-content; }
.csh-parts-table .input { width: 100%; }

/* The card and the new-card page carry a breadcrumb above the title, so
   the buttons would ride 15px higher than on every other screen. This puts
   them back on the title line. */
.csh-reference-vehicle__actions { margin-top: 15px; }
.csh-vehicle-history-summary { margin-top: 5px; color: var(--color-neutral-700); font-size: 13px; font-weight: 700; letter-spacing: .04em; }

/* Every page hangs its title at the same height. A page with crumbs keeps
   them in the space above the title; a page without them leaves it empty. */
.csh-workspace-page.csh-reference-admin { padding-top: 153px; }
.csh-workspace-page.csh-reference-admin:has(> .csh-crumbs) { padding-top: 128px; }
.csh-inspection-table {
	width: 100%;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
}
.csh-reference-admin .csh-inspection-table th,
.csh-reference-admin .csh-inspection-table td { min-width: 0; }
.csh-reference-admin .csh-inspection-table th:last-child,
.csh-reference-admin .csh-inspection-table td:last-child { text-align: right; }
.csh-tab-table thead,
.csh-tab-table tbody {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
}
.csh-tab-table tr {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	border-bottom: 1px solid var(--color-divider);
}
.csh-reference-admin .csh-tab-table th,
.csh-reference-admin .csh-tab-table td {
	width: auto;
	border-bottom: 0;
	text-align: left;
}
.csh-reference-admin .csh-tab-table td[colspan] { grid-column: 1 / -1; }
.csh-create-vehicle-tabs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0; margin: 28px 0 20px; border-bottom: 2px solid var(--color-divider); }

/* A question mark stands a little above the tab name and leads to that
   part of the help page. */
.csh-tab-with-help { display: flex; align-items: center; }
.csh-tab-help {
	position: relative;
	top: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	margin-left: 4px;
	border: 1px solid var(--color-neutral-400);
	border-radius: 50%;
	color: var(--color-neutral-600);
	font-family: var(--csh-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

.csh-tab-help:hover { border-color: var(--color-accent); color: var(--color-accent); }

.csh-ownership-table {
	display: grid;
	grid-template-columns: repeat(8, max-content);
	justify-content: space-between;
}
.csh-ownership-table thead,
.csh-ownership-table tbody {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
}
.csh-ownership-table tr {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	border-bottom: 1px solid var(--color-divider);
}
.csh-reference-admin .csh-ownership-table th,
.csh-reference-admin .csh-ownership-table td {
	width: auto;
	border-bottom: 0;
	text-align: left;
}

/* A removal is a plain red cross, the same control on every row that can go. */
.csh-row-remove {
	display: grid;
	width: 30px;
	height: 30px;
	padding: 0;
	place-items: center;
	border: 0;
	background: none;
	color: #c62828;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.csh-row-remove:hover,
.csh-row-remove:focus-visible { color: #8e1c1c; }
.csh-owner-remove-cell { justify-self: end; }
.csh-owner-fixed { display: inline-block; padding: 13px 0; font-size: 14px; }
.csh-owner-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Adding a row is not the same act as saving the visit, so it does not
   look like the button that does, and keeps its distance from it. */
.csh-part-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.csh-part-add { padding: 0; border: 0; background: none; color: var(--color-accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.csh-part-add:hover,
.csh-part-add:focus-visible { text-decoration: underline; }
.csh-part-actions ~ .csh-inspection-actions { margin-top: 40px; }

/* What a journal line says was touched, next to the action itself. */
.csh-log-detail { color: var(--color-neutral-700); }
.csh-review-log { margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--color-neutral-700); }
.csh-review-log li { padding: 4px 0; border-top: 1px solid var(--color-divider); }
.csh-review-log small { margin-left: 8px; opacity: .75; }

.csh-reference-photo-field { margin-top: 16px; }
.csh-vehicle-photos { margin-top: 24px; }
.csh-vehicle-photo-strip { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.csh-vehicle-photo { position: relative; flex: 0 0 152px; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-neutral-100); cursor: grab; }
.csh-vehicle-photo.is-dragging,
.csh-photo-preview:active { opacity: .55; cursor: grabbing; }
.csh-vehicle-photo img { width: 100%; height: 100%; object-fit: cover; }
.csh-photo-delete { position: absolute; top: 6px; right: 6px; display: grid; width: 26px; height: 26px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 0; line-height: 0; cursor: pointer; }
.csh-photo-delete::before,
.csh-photo-delete::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}
.csh-photo-delete::before { transform: translate(-50%, -50%) rotate(45deg); }
.csh-photo-delete::after { transform: translate(-50%, -50%) rotate(-45deg); }
.csh-settings-logo { display: block; width: auto; max-width: 240px; height: auto; max-height: 100px; margin: 0 0 12px; object-fit: contain; }
.csh-operator-permissions { margin: 8px 0 0 26px; padding: 0; }
.csh-operator-permissions small { color: var(--color-neutral-700); }
.csh-operator-permissions.is-disabled { opacity: .55; }
.csh-color-control { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
.csh-color-control input[type="color"] { width: 52px; min-height: 42px; padding: 3px; border: 1px solid var(--color-neutral-400); background: var(--color-bg); cursor: pointer; }
.csh-color-hex { font-family: ui-monospace, monospace !important; text-transform: uppercase; }
.csh-vin-input { font-family: ui-monospace, monospace !important; text-transform: uppercase; }
.csh-reference-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; }
.csh-reference-form__aside { padding: 20px; border: 2px solid var(--color-divider); }
.csh-reference-eyebrow { margin-bottom: 12px; color: var(--color-neutral-700); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.csh-reference-status { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.csh-reference-status > span:last-child,
.csh-reference-form__aside p { color: var(--color-neutral-700); font-size: 12px; }
.csh-reference-form__aside p { padding-top: 10px; border-top: 2px solid var(--color-divider); }
.csh-reference-validation { margin-top: 20px; padding-top: 12px; border-top: 2px solid var(--color-text); color: var(--color-accent-700); font-size: 13px; }
.csh-reference-form__buttons { display: grid; gap: 8px; margin-top: 20px; }

/* Three cards across, each one stacked: what waits, then what to do. */
/* Every card in a row runs to the same height, so the buttons line up. */
.csh-review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.csh-review-item { display: grid; grid-template-rows: minmax(0, 1fr) max-content; gap: 20px; padding: 20px; border: 2px solid var(--color-divider); background: var(--color-bg); }
/* How many changes one approval covers. A single change needs no count. */
.csh-change-count { position: absolute; top: 0; right: 24px; display: grid; width: 42px; height: 44px; padding-bottom: 8px; place-items: center; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); background: var(--color-accent); color: #fff; font-size: 18px; font-weight: 800; line-height: 1; }
.csh-change-count--inline { position: static; display: inline-grid; width: 28px; height: 30px; padding-bottom: 8px; margin-left: 10px; font-size: 13px; vertical-align: middle; }
.csh-review-item { position: relative; }
.csh-review-item__meta { color: var(--color-accent); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.csh-review-item__meta .csh-vin { color: var(--color-neutral-700); font-size: 13px; font-weight: 400; letter-spacing: normal; }
.csh-review-item h2 { margin: 6px 0 10px; font-size: 20px; font-weight: 800; }
.csh-review-item p { margin: 0; }
.csh-review-item__actions { display: grid; gap: 8px; align-content: start; }
.csh-review-item__decide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.csh-reference-empty-row { padding: 28px 20px; border: 2px solid var(--color-divider); background: var(--color-bg); color: var(--color-neutral-700); }

.csh-reference-import-box { max-width: 720px; padding: 32px; border: 2px dashed var(--color-neutral-400); background: var(--color-bg); }
.csh-reference-import-box h2 { margin: 0 0 8px; font-size: 24px; }
.csh-reference-import-box p { max-width: 620px; color: var(--color-neutral-700); }
.csh-reference-import-box .csh-control { margin: 20px 0 8px; }
.csh-reference-import-box input[type="file"] { width: 100%; padding: 12px; border: 1px solid var(--color-neutral-400); background: #fff; }
.csh-maintenance-list-heading { margin-top: 36px; }
.csh-maintenance-template-table th:nth-child(4),
.csh-maintenance-template-table td:nth-child(4) { text-align: center; }
/* Settings: one tab at a time, kept to a width a form reads well at. */
.csh-settings-panel { max-width: 640px; }
.csh-settings-save { display: flex; justify-content: flex-end; max-width: 640px; margin-top: 32px; }

@media (max-width: 900px) {
	.csh-garage-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.csh-garage-filters [name="vehicle_vin"] { grid-column: 1 / -1; }
	.csh-reference-admin { padding: 28px 24px; }
	.csh-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.csh-dashboard-columns,
	.csh-reference-form__layout,
	.csh-reference-service-basics { grid-template-columns: 1fr; gap: 0; }
	.csh-reference-owner-fields { grid-template-columns: 1fr; }
	.csh-inspection-fields { grid-template-columns: 1fr; }
	.csh-service-work-date { grid-template-columns: 1fr; }
	.csh-inspection-description { width: 100%; }
}

@media (max-width: 600px) {
	.csh-garage-filters { grid-template-columns: 1fr !important; }
	.csh-garage-filters [name="vehicle_vin"] { grid-column: auto; }
	.csh-reference-admin { padding: 24px 16px; }
	.csh-reference-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.csh-dashboard-metrics,
	.csh-reference-fields { grid-template-columns: 1fr; }
	.csh-reference-vehicle-fields { grid-template-columns: 1fr; }
	.csh-reference-discount-fields { grid-template-columns: 96px minmax(0, 1fr); }
	.csh-review-list { grid-template-columns: 1fr; }
	.csh-review-item { grid-template-columns: 1fr; }
	.csh-pagination { justify-content: flex-start; }
}

/* Shared content frame used by every workspace screen. */
.csh-login,
.csh-access-message,
.csh-workspace-page {
	width: 100%;
	max-width: 1440px;
	margin-right: auto;
	margin-left: auto;
	padding: 128px 48px;
}

.csh-login { align-items: start; }

.csh-workspace--login {
	background: linear-gradient(to right, #ffffff 0 50%, var(--csh-bg) 50% 100%);
}

.csh-workspace--login .csh-login {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.csh-workspace--login .csh-login__intro { max-width: none; }

.csh-workspace--login .csh-login__form {
	width: min(560px, 100%);
	justify-self: end;
}

.csh-workspace-page.csh-reference-admin {
	border: 0;
	background: transparent;
}

.csh-workspace > .csh-notice {
	width: calc(100% - 96px);
	max-width: 1344px;
	margin: 128px auto 0;
}

.csh-workspace > .csh-notice + .csh-workspace-page { padding-top: 24px; }

@media (max-width: 760px) {
	.csh-vehicle-tabs {
		justify-content: flex-start;
		gap: 18px 28px;
	}

	.csh-login,
	.csh-access-message,
	.csh-workspace-page {
		padding: 42px 20px 64px;
	}

	.csh-workspace--login .csh-login {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.csh-workspace--login .csh-login__form {
		width: 100%;
		justify-self: stretch;
	}

	.csh-workspace > .csh-notice {
		width: calc(100% - 40px);
		margin-top: 42px;
	}

	.csh-workspace > .csh-notice + .csh-workspace-page { padding-top: 24px; }
}

.csh-plate { text-transform: uppercase; }

.csh-reference-admin .csh-color-fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 16px;
}

@media (max-width: 900px) {
	.csh-reference-admin .csh-color-fields { grid-template-columns: 1fr; }
}

.csh-reference-admin .csh-rate-profiles { display: flex; gap: 2px; margin: 22px 0 32px; }
.csh-reference-admin .csh-rate-profiles label { flex: 1; cursor: pointer; }
.csh-reference-admin .csh-rate-profiles input { position: absolute; opacity: 0; pointer-events: none; }
.csh-reference-admin .csh-rate-profiles span { display: block; padding: 10px 14px; border: 1px solid var(--color-divider); text-align: center; }
.csh-reference-admin .csh-rate-profiles input:checked + span { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }

@media (max-width: 700px) {
	.csh-reference-admin .csh-rate-profiles { display: grid; grid-template-columns: 1fr; }
}

.csh-field-hint { display: block; margin-top: 6px; color: var(--color-neutral-700); font-size: 12px; }

/* An address whose owner asked to be left alone. */
.csh-owner-fixed--unsubscribed { background: #fde3e2; padding: 2px 6px; }

/* The way in, on a telephone. */
@media (max-width: 560px) {
	.csh-login { padding: 36px 16px 48px; }
	.csh-login__intro h1 { font-size: 34px; }
	.csh-login__form { padding: 20px; }
}

/* A telephone reads the help in one column, and the two lists on the
   dashboard scroll inside themselves rather than pushing the page sideways. */
@media (max-width: 760px) {
	.csh-help-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.csh-dashboard-columns { grid-template-columns: minmax(0, 1fr); }
	.csh-dashboard-columns > div { min-width: 0; overflow-x: auto; }
}

/* A part carries seven answers now, so it is a block of two lines rather
   than a row of seven columns two centimetres wide. */
.csh-reference-admin .csh-parts-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.csh-reference-admin .csh-part-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 16px 16px;
	border: 1px solid var(--color-neutral-300);
	border-radius: 10px;
	background: var(--color-neutral-100);
}

.csh-reference-admin .csh-part-line {
	display: grid;
	gap: 12px 18px;
	align-items: end;
}

.csh-reference-admin .csh-part-line--what { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) 34px; }
.csh-reference-admin .csh-part-line--where { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }

/* The works of one visit, picked from the shop's list one after another. */
.csh-reference-admin .csh-works {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 4px 0 2px;
}

.csh-reference-admin .csh-works__head {
	margin: 0;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.csh-reference-admin .csh-works__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.csh-reference-admin .csh-works__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* A field that offers a list: the arrow opens it, typing filters it, and
   whatever is left in the field is what gets saved. */
.csh-reference-admin .csh-picker { position: relative; }

.csh-reference-admin .csh-picker .input { padding-right: 34px; }

.csh-reference-admin .csh-picker__open {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 32px;
	height: calc(100% - 2px);
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: transparent;
	color: var(--color-neutral-700);
	cursor: pointer;
}

.csh-reference-admin .csh-picker__open svg { width: 12px; height: 12px; }

.csh-reference-admin .csh-picker__list {
	position: absolute;
	z-index: 6;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	border: 1px solid var(--color-divider);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(32, 30, 29, .16);
}

.csh-reference-admin .csh-picker__list[hidden] { display: none; }

.csh-reference-admin .csh-picker__list li {
	padding: 7px 9px;
	border-radius: 6px;
	cursor: pointer;
}

.csh-reference-admin .csh-picker__list li:hover { background: var(--color-accent-100); }

.csh-reference-admin .csh-picker__list--places {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Without the script these are a plain row of boxes, and they still work. */
.csh-reference-admin .csh-places__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.csh-reference-admin .csh-places__choice {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 0;
	font-size: 15px;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.csh-reference-admin .csh-places__choice input {
	width: 16px;
	min-height: 16px;
	height: 16px;
	margin: 0;
}

@media (max-width: 900px) {
	.csh-reference-admin .csh-part-line--what,
	.csh-reference-admin .csh-part-line--where { grid-template-columns: minmax(0, 1fr); }
}

.csh-reference-admin .csh-picker__list--places.csh-places__choices:not([hidden]) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 0 6px;
	max-height: none;
	overflow: visible;
	padding: 4px;
}

.csh-reference-admin .csh-picker__list--places .csh-places__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 9px;
	border-radius: 6px;
}

.csh-reference-admin .csh-picker__list--places .csh-places__choice:hover {
	background: var(--color-accent-100);
}

.csh-reference-admin .csh-picker__list--places .csh-places__choice input {
	flex: 0 0 16px;
	margin: 0;
}

/* The mileage and what the work cost share one half of the row. */
.csh-mileage-cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.csh-cell-money { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

/* Two fields sharing one half of a row: the next date and the next mileage. */
.csh-field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

/* The address is only as wide as the longest one, so it keeps to the right
   and the kind, the car and the date share the rest. */
.csh-reminders-table th:last-child,
.csh-reminders-table td:last-child { width: 1%; }

/* A missed day keeps the size and the place of the other dates; only the
   red tells it apart. */
.csh-reminders-table .tag { margin-left: -8px; padding: 3px 8px; font-size: inherit; letter-spacing: normal; }

/* The owner row makes room for the mobile: the owner number, the two
   readings and the language take what they need, and a long heading
   wraps instead of widening its column. The spare room goes to the
   spacer tracks between the columns, so the language keeps to the right
   edge, with the remove cross, when there is one, straight after it. */
.csh-ownership-table {
	grid-template-columns:
		max-content minmax(8px, 1fr)
		max-content minmax(8px, 1fr)
		fit-content(112px) minmax(8px, 1fr)
		max-content minmax(8px, 1fr)
		fit-content(112px) minmax(8px, 1fr)
		max-content minmax(8px, 1fr)
		max-content minmax(8px, 1fr)
		fit-content(108px)
		max-content;
}
.csh-ownership-table tr > :nth-child(1) { grid-column: 1; }
.csh-ownership-table tr > :nth-child(2) { grid-column: 3; }
.csh-ownership-table tr > :nth-child(3) { grid-column: 5; }
.csh-ownership-table tr > :nth-child(4) { grid-column: 7; }
.csh-ownership-table tr > :nth-child(5) { grid-column: 9; }
.csh-ownership-table tr > :nth-child(6) { grid-column: 11; }
.csh-ownership-table tr > :nth-child(7) { grid-column: 13; }
.csh-ownership-table tr > :nth-child(8) { grid-column: 15; }
.csh-ownership-table tr > :nth-child(9) { grid-column: 16; }
.csh-reference-admin .csh-ownership-table tr > :nth-child(9) { padding-right: 0; padding-left: 0; }
/* The language ends where the table does, level with the Add owner button. */
.csh-reference-admin .csh-ownership-table tr > :nth-child(8) { padding-right: 0; }
.csh-reference-admin .csh-ownership-table th { white-space: normal; }
.csh-ownership-table .csh-owner-inline-select { min-width: 0; }
.csh-ownership-table [data-csh-owner-start-mileage],
.csh-ownership-table [data-csh-owner-end-mileage] { width: 112px; }
.csh-ownership-table select.csh-ownership-inline-input { width: auto; }
.csh-ownership-table .csh-owner-mobile { width: 136px; }
.csh-mobile-consent { display: grid; gap: 6px; }
.csh-mobile-label { color: var(--color-muted); font-size: 11px; line-height: 1; }
.csh-mobile-consent label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.csh-mobile-consent label input { width: 15px; height: 15px; margin: 0; }
.csh-sender-status { margin-top: 12px; padding: 12px; border: 1px solid var(--color-divider); border-radius: 8px; }
.csh-sender-status p { margin: 0 0 8px; }
.csh-vehicle-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-top: 32px;
}
.csh-maintenance-panel {
	padding: 24px;
	border-radius: 8px;
	background: var(--color-surface);
}
.csh-maintenance-panel__heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-text);
}
.csh-maintenance-panel__heading h2 { margin: 0; font-size: 20px; }
.csh-maintenance-panel__choice { display: flex; align-items: center; gap: 8px; }
.csh-maintenance-panel__choice label { margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; }
.csh-reference-admin .csh-maintenance-panel__selector { width: 260px; min-width: 260px; max-width: 260px; flex: 0 0 260px; margin: 0; }
.csh-maintenance-panel__name { margin: 16px 0 6px; color: var(--color-neutral-700); font-size: 12px; }
.csh-maintenance-panel__empty { margin: 18px 0 0; color: var(--color-neutral-700); }
/* The plan itself - its share, its items and their terms - is in plan.css,
   shared with the public page. */

@media (max-width: 560px) {
	.csh-maintenance-panel__heading { display: grid; }
	.csh-reference-admin .csh-maintenance-panel__selector { width: 100%; min-width: 0; max-width: none; flex: 1 1 auto; }
}