/**
 * Car Society front-end.
 *
 * Scoped under .cs so it never fights the active theme, and built on custom
 * properties so a club can restyle it from the customiser or a child theme.
 */

.cs {
	--cs-radius: 12px;
	--cs-radius-sm: 8px;
	--cs-gap: 1rem;
	--cs-ink: #16181d;
	--cs-ink-soft: #5b6472;
	--cs-line: #e2e5ea;
	--cs-surface: #ffffff;
	--cs-surface-alt: #f6f7f9;
	--cs-accent: #1d4ed8;
	--cs-accent-ink: #ffffff;
	--cs-ok: #0f7b45;
	--cs-ok-bg: #e6f6ed;
	--cs-warn: #92610a;
	--cs-warn-bg: #fdf3e0;
	--cs-error: #b4231d;
	--cs-error-bg: #fdeceb;

	color: var(--cs-ink);
	line-height: 1.5;
	box-sizing: border-box;
}

.cs *,
.cs *::before,
.cs *::after {
	box-sizing: inherit;
}

@media (prefers-color-scheme: dark) {
	.cs {
		--cs-ink: #eef1f6;
		--cs-ink-soft: #9aa4b5;
		--cs-line: #2b3140;
		--cs-surface: #161a22;
		--cs-surface-alt: #1d222c;
		--cs-accent: #6b9dff;
		--cs-accent-ink: #0b0d12;
		--cs-ok: #7ee2a8;
		--cs-ok-bg: #10331f;
		--cs-warn: #f2c98a;
		--cs-warn-bg: #3a2a10;
		--cs-error: #ffa39d;
		--cs-error-bg: #3b1614;
	}
}

/* ---------------------------------------------------------------- Layout */

.cs-card,
.cs-panel {
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	padding: 1.25rem;
	margin: 0 0 var(--cs-gap);
}

.cs-card h3,
.cs-panel h2 {
	margin-top: 0;
}

.cs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem 1rem;
}

@media (min-width: 40rem) {
	.cs-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cs-field--wide {
		grid-column: 1 / -1;
	}
}

.cs-muted {
	color: var(--cs-ink-soft);
	font-size: 0.9rem;
}

.cs-help {
	display: block;
	color: var(--cs-ink-soft);
	font-size: 0.85rem;
	margin-top: 0.25rem;
}

.cs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 1rem 0 0;
}

.cs-inline-form {
	display: inline;
	margin: 0;
}

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

.cs-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
}

.cs-form legend {
	font-weight: 600;
	font-size: 1.05rem;
	padding: 0;
	margin-bottom: 0.5rem;
}

.cs-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.cs-field label {
	font-weight: 600;
	font-size: 0.9rem;
}

.cs-field input[type="text"],
.cs-field input[type="email"],
.cs-field input[type="tel"],
.cs-field input[type="number"],
.cs-field input[type="date"],
.cs-field input[type="password"],
.cs-field select,
.cs-field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface);
	color: var(--cs-ink);
	font: inherit;
	font-size: 1rem; /* 16px keeps iOS from zooming on focus. */
}

.cs-field input:focus-visible,
.cs-field select:focus-visible,
.cs-field textarea:focus-visible,
.cs-button:focus-visible {
	outline: 2px solid var(--cs-accent);
	outline-offset: 2px;
}

.cs-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5rem;
}

.cs-field--check label {
	font-weight: 400;
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.cs-field--error input,
.cs-field--error textarea {
	border-color: var(--cs-error);
}

.cs-error {
	color: var(--cs-error);
	font-size: 0.85rem;
}

.cs-required {
	color: var(--cs-error);
}

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

.cs-preview {
	max-width: 10rem;
	border-radius: var(--cs-radius-sm);
	margin-top: 0.5rem;
	display: block;
}

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

.cs-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.65rem 1.1rem;
	border-radius: var(--cs-radius-sm);
	border: 1px solid var(--cs-line);
	background: var(--cs-surface-alt);
	color: var(--cs-ink);
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	min-height: 44px; /* Comfortable target for gloved hands at an event. */
}

.cs-button:hover {
	border-color: var(--cs-ink-soft);
}

.cs-button--primary {
	background: var(--cs-accent);
	border-color: var(--cs-accent);
	color: var(--cs-accent-ink);
}

.cs-button--danger {
	color: var(--cs-error);
	border-color: var(--cs-line);
	background: transparent;
}

.cs-button--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--cs-ink-soft);
	min-height: 0;
	padding: 0.35rem 0.5rem;
}

.cs-button--small {
	padding: 0.4rem 0.75rem;
	font-size: 0.85rem;
	min-height: 36px;
}

.cs-button--big {
	padding: 1rem 1.25rem;
	font-size: 1.05rem;
	width: 100%;
}

.cs-button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

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

.cs-notice {
	border-radius: var(--cs-radius-sm);
	padding: 0.85rem 1rem;
	margin: 0 0 var(--cs-gap);
	border: 1px solid transparent;
}

.cs-notice p:first-child { margin-top: 0; }
.cs-notice p:last-child { margin-bottom: 0; }

.cs-notice--success { background: var(--cs-ok-bg); color: var(--cs-ok); border-color: currentColor; }
.cs-notice--info { background: var(--cs-surface-alt); color: var(--cs-ink); border-color: var(--cs-line); }
.cs-notice--error { background: var(--cs-error-bg); color: var(--cs-error); border-color: currentColor; }

.cs-badge {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: var(--cs-surface-alt);
	color: var(--cs-ink-soft);
	border: 1px solid var(--cs-line);
	white-space: nowrap;
}

.cs-badge--active,
.cs-badge--trialing,
.cs-badge--comped { background: var(--cs-ok-bg); color: var(--cs-ok); border-color: transparent; }

.cs-badge--past-due,
.cs-badge--incomplete,
.cs-badge--processing { background: var(--cs-warn-bg); color: var(--cs-warn); border-color: transparent; }

.cs-badge--canceled,
.cs-badge--unpaid,
.cs-badge--suspended { background: var(--cs-error-bg); color: var(--cs-error); border-color: transparent; }

/* ---------------------------------------------------------------- Lists */

.cs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-list__row {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-top: 1px solid var(--cs-line);
	flex-wrap: wrap;
}

.cs-list__row:first-child {
	border-top: 0;
}

.cs-list__title {
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.cs-table-wrap {
	overflow-x: auto;
}

.cs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.cs-table th,
.cs-table td {
	text-align: left;
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid var(--cs-line);
	white-space: nowrap;
}

.cs-table__actions a {
	margin-right: 0.5rem;
}

/* ---------------------------------------------------------------- Dashboard */

.cs-dashboard__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.cs-dashboard__greeting { margin: 0; }

/*
 * The membership number, beside the name. Tabular figures so it does not shift
 * about between members, and a slightly lighter weight so it reads as a label
 * on the name rather than as part of it.
 */
.cs-dashboard__number {
	margin-left: .5rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
	opacity: .75;
}
.cs-dashboard__meta { margin: 0.35rem 0 0; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.cs-dashboard__logout { margin: 0; }

.cs-tabs {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	border-bottom: 1px solid var(--cs-line);
	margin-bottom: var(--cs-gap);
	scrollbar-width: thin;
}

.cs-tabs__tab {
	padding: 0.65rem 0.9rem;
	text-decoration: none;
	color: var(--cs-ink-soft);
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.cs-tabs__tab.is-active {
	color: var(--cs-ink);
	border-bottom-color: var(--cs-accent);
}

.cs-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-checklist__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--cs-line);
}

.cs-checklist__item:first-child { border-top: 0; }
.cs-checklist__item.is-done { color: var(--cs-ink-soft); }
.cs-checklist__item.is-done .cs-checklist__mark { color: var(--cs-ok); }
.cs-checklist__action { margin-left: auto; font-size: 0.9rem; }

.cs-media-row {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.cs-media-row .cs-field { flex: 1 1 16rem; }

.cs-thumb {
	width: 6rem;
	height: 6rem;
	object-fit: cover;
	border-radius: var(--cs-radius-sm);
	border: 1px solid var(--cs-line);
}

/* ---------------------------------------------------------------- Garage */

.cs-cars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.cs-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cs-cars__item {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	overflow: hidden;
	background: var(--cs-surface-alt);
}

.cs-cars__photo {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.cs-cars__photo--empty { background: var(--cs-line); }
.cs-cars__body { padding: 0.75rem; }
.cs-cars__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.75rem 0 0; }

/* ---------------------------------------------------------------- Events */

.cs-events__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
	.cs-events__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cs-event-card {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	overflow: hidden;
	background: var(--cs-surface);
}

.cs-event-card__link { text-decoration: none; color: inherit; display: block; height: 100%; }
.cs-event-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cs-event-card__body { padding: 0.9rem; }
.cs-event-card__date { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cs-ink-soft); }
.cs-event-card__title { margin: 0.25rem 0 0.35rem; font-size: 1.05rem; }
.cs-event-card__where, .cs-event-card__excerpt { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--cs-ink-soft); }
.cs-event-card__meta { margin: 0; display: flex; gap: 0.35rem; flex-wrap: wrap; }

.cs-register__facts {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--cs-line);
}

.cs-register__facts > div { display: flex; flex-direction: column; }
.cs-register__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cs-ink-soft); }

.cs-guests__row { flex-direction: row; align-items: center; gap: 0.5rem; }
.cs-guests__row input { flex: 1 1 auto; }

.cs-reg {
	border-top: 1px solid var(--cs-line);
	padding-top: 1rem;
	margin-top: 1rem;
}

.cs-reg:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.cs-reg__header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cs-reg__badges { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.cs-reg__meta { color: var(--cs-ink-soft); font-size: 0.9rem; }
.cs-reg__guests fieldset[disabled] { opacity: 0.65; }

/* ---------------------------------------------------------------- Boards */

.cs-boards__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.cs-boards__filter { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.cs-chip {
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--cs-line);
	text-decoration: none;
	color: var(--cs-ink-soft);
	font-size: 0.85rem;
}

.cs-chip.is-active { background: var(--cs-ink); color: var(--cs-surface); border-color: var(--cs-ink); }

.cs-topic { align-items: flex-start; }
.cs-topic__vote { flex: 0 0 auto; }
.cs-topic__body { flex: 1 1 auto; }

.cs-vote {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	padding: 0.35rem 0.55rem;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: transparent;
	color: var(--cs-ink-soft);
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	min-width: 3rem;
}

.cs-vote.is-voted { border-color: var(--cs-accent); color: var(--cs-accent); }

.cs-poll { border-top: 1px solid var(--cs-line); padding-top: 1rem; margin-top: 1rem; }
.cs-poll:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.cs-poll__option { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }

.cs-poll__button {
	text-align: left;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface-alt);
	color: inherit;
	font: inherit;
	cursor: pointer;
	width: 100%;
}

.cs-poll__option.is-chosen .cs-poll__button { border-color: var(--cs-accent); color: var(--cs-accent); }
.cs-poll__button--closed { cursor: default; opacity: 0.7; }
.cs-poll__bar { background: var(--cs-surface-alt); border-radius: 999px; height: 0.6rem; overflow: hidden; }
.cs-poll__bar span { display: block; height: 100%; background: var(--cs-accent); }
.cs-poll__count { font-size: 0.85rem; color: var(--cs-ink-soft); min-width: 2rem; text-align: right; }

/* ---------------------------------------------------------------- Directory */

.cs-directory__note {
	margin: 0 0 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--cs-line);
	max-width: 62ch;
}

.cs-directory__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.cs-directory__card { border: 1px solid var(--cs-line); border-radius: var(--cs-radius-sm); overflow: hidden; background: var(--cs-surface); }
.cs-directory__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cs-directory__body { padding: 0.75rem; }

.cs-pagination { margin-top: 1rem; display: flex; gap: 0.5rem; }

.cs-gate__teaser { color: var(--cs-ink-soft); font-style: italic; }

/* ---------------------------------------------------------------- Wallet */

/*
 * Apple's own "Add to Apple Wallet" artwork is licensed and must not be redrawn,
 * so this is a plainly-styled button rather than an imitation of the badge.
 */
.cs-wallet-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.1rem;
	min-height: 44px;
	border-radius: var(--cs-radius-sm);
	background: #000;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid #000;
}

.cs-wallet-button:hover { background: #1c1c1e; }
.cs-wallet-button:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }

.cs-wallet-button__mark {
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 3px;
	border: 2px solid currentColor;
	position: relative;
	flex: 0 0 auto;
}

.cs-wallet-button__mark::after {
	content: "";
	position: absolute;
	inset: 2px 2px auto 2px;
	height: 2px;
	background: currentColor;
}

@media (prefers-color-scheme: dark) {
	.cs-wallet-button { background: #f5f5f7; color: #000; border-color: #f5f5f7; }
	.cs-wallet-button:hover { background: #fff; }
}

/* Accessibility helper, in case the theme does not ship one. */
.cs .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- Dashboard panels
   The overview is a set of independent cards, so it reads as a two-column board
   on a desktop and a single stack on a phone. Panels are addressed by level and
   group, which means any of them may be absent — hence auto-flow rather than
   fixed positions. */

.cs-panels {
	display: grid;
	gap: 1rem;
	align-items: start;
}

@media (min-width: 860px) {
	.cs-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cs-panels > .cs-card { margin: 0; }

/* -------------------------------------------------------------- Announcements */

.cs-card--notice { border-left: 3px solid var(--cs-accent); }
.cs-announce + .cs-announce { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--cs-line); }
.cs-announce__title { margin: 0; font-size: 1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cs-announce__when { font-size: .82rem; margin: .15rem 0 .4rem; }
.cs-announce__body p { margin: 0 0 .5rem; }
.cs-announce__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- Calendar */

.cs-cal__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.cs-cal__head h3 { margin: 0; }
.cs-cal__nav { display: flex; gap: .35rem; }

.cs-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
	margin: .9rem 0 .75rem;
}

.cs-cal__label {
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cs-ink-soft);
	text-align: center;
	padding-bottom: .3rem;
}

.cs-cal__day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 2.2rem;
	border-radius: 4px;
	font-size: .85rem;
	color: var(--cs-ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.cs-cal__day--empty { visibility: hidden; }
.cs-cal__day.is-today { outline: 1px solid var(--cs-accent); font-weight: 600; }

a.cs-cal__day.has-event { background: var(--cs-surface-alt); font-weight: 600; }
a.cs-cal__day.has-event:hover,
a.cs-cal__day.has-event:focus-visible { background: var(--cs-accent); color: #fff; }

.cs-cal__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--cs-accent);
	margin-top: 2px;
}

a.cs-cal__day.has-event:hover .cs-cal__dot,
a.cs-cal__day.has-event:focus-visible .cs-cal__dot { background: #fff; }

.cs-cal__list { list-style: none; margin: 0; padding: .75rem 0 0; border-top: 1px solid var(--cs-line); }
.cs-cal__list li { display: flex; gap: .6rem; align-items: baseline; padding: .2rem 0; font-size: .9rem; }

.cs-cal__date {
	font-variant-numeric: tabular-nums;
	color: var(--cs-ink-soft);
	min-width: 1.4rem;
	text-align: right;
}

/* ---------------------------------------------------------------- Level card */

.cs-level p { margin: 0 0 .4rem; }

/* ----------------------------------------------------------------- Gate board
   Read at arm's length on a phone, in daylight, by somebody who is also holding
   a coffee. Big numbers, high contrast, and nothing that moves without cause. */

.cs-board__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.cs-board__title { margin: 0; font-size: 1.4rem; }
.cs-board__live { display: flex; align-items: center; gap: .5rem; }

.cs-board__pulse {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cs-ok);
	flex: none;
}

.cs-board.is-stale .cs-board__pulse { background: var(--cs-error); }

@media (prefers-reduced-motion: no-preference) {
	.cs-board__pulse.is-beat { animation: cs-beat .9s ease-out; }
	@keyframes cs-beat {
		0% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; opacity: 1; }
		100% { transform: scale(1); box-shadow: 0 0 0 9px transparent; opacity: .75; }
	}
}

.cs-board__picker { margin: 0 0 1rem; }
.cs-board__picker select { max-width: 100%; padding: .5rem .6rem; border-radius: var(--cs-radius-sm); border: 1px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-ink); font: inherit; }

.cs-board__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem;
	margin-bottom: .75rem;
}

@media (min-width: 46rem) {
	.cs-board__figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cs-figure {
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	padding: .9rem 1rem;
	text-align: center;
}

.cs-figure b {
	display: block;
	font-size: 2.1rem;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.cs-figure--lead { background: var(--cs-accent); border-color: var(--cs-accent); color: var(--cs-accent-ink); }
.cs-figure--lead b { font-size: 2.6rem; }
.cs-figure span { display: block; font-size: .8rem; font-weight: 600; margin-top: .15rem; }
.cs-figure small { display: block; font-size: .75rem; color: var(--cs-ink-soft); margin-top: .1rem; }

/* After the generic rules, or the soft ink wins and the lead card's own
   small print goes dark-on-vermilion. */
.cs-figure--lead small,
.cs-figure--lead span { color: var(--cs-accent-ink); opacity: .9; }

/* A number that has just changed is worth a glance, once. */
@media (prefers-reduced-motion: no-preference) {
	[data-cs-field].is-changed { animation: cs-tick .8s ease-out; }
	@keyframes cs-tick {
		from { color: var(--cs-ok); transform: translateY(-2px); }
		to { color: inherit; transform: none; }
	}
}

.cs-board__bar {
	height: 8px;
	border-radius: 999px;
	background: var(--cs-surface-alt);
	overflow: hidden;
	margin-bottom: 1rem;
}

.cs-board__bar span { display: block; height: 100%; background: var(--cs-ok); transition: width .5s ease; }

.cs-board__grid { display: grid; gap: 1rem; align-items: start; }

@media (min-width: 60rem) {
	.cs-board__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.cs-board__side { display: grid; gap: 1rem; align-items: start; }
.cs-board__panel { margin: 0; }
.cs-board__subhead { margin: 1.1rem 0 .3rem; font-size: .9rem; }
.cs-board__search input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--cs-line); border-radius: var(--cs-radius-sm); background: var(--cs-surface); color: var(--cs-ink); font: inherit; font-size: 16px; margin-bottom: .5rem; }

.cs-party.is-complete { opacity: .55; }
.cs-party.is-partial { border-left: 3px solid var(--cs-warn); padding-left: .6rem; }
.cs-party__in { text-decoration: line-through; opacity: .6; }
.cs-party__count { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.cs-party__count small { display: block; font-weight: 400; }

.cs-arrivals .cs-list__row.is-new { background: var(--cs-ok-bg); border-radius: var(--cs-radius-sm); }
.cs-scans .cs-list__row.is-refused { color: var(--cs-error); }

.cs-board__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.cs-board__stats dt { font-size: .75rem; color: var(--cs-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.cs-board__stats dd { margin: 0; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-board__stats dd.is-warn { color: var(--cs-error); }

.cs-pace {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 64px;
	margin: .4rem 0 .2rem;
}

.cs-pace__bar {
	flex: 0 1 22px;
	min-width: 4px;
	max-width: 34px;
	background: var(--cs-accent);
	border-radius: 2px 2px 0 0;
	position: relative;
}

.cs-pace__bar em { display: none; }

/* ------------------------------------------------------------------ *
 * Who is coming
 *
 * The count is the headline and the names live behind it, because two
 * hundred guests printed in full pushed the booking form off the screen.
 * Past a couple of dozen the list scrolls inside itself rather than
 * growing the page.
 * ------------------------------------------------------------------ */

.cs-attending__summary {
	cursor: pointer;
	display: flex;
	gap: .5rem;
	align-items: baseline;
	flex-wrap: wrap;
}

.cs-attending__toggle { font-size: .875em; }
.cs-attending__details[open] .cs-attending__toggle { visibility: hidden; }

.cs-attending__list {
	list-style: none;
	margin: .75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: .25rem .75rem;
}

.cs-attending__list.is-long {
	max-height: 16rem;
	overflow-y: auto;
	padding-right: .5rem;
}

.cs-attending__guests { margin-top: .5rem; font-size: .875em; }

/* ------------------------------------------------------------------ *
 * The club area
 * ------------------------------------------------------------------ */

.cs-club__tabs {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.cs-club__tab {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .75rem;
	border: 1px solid var(--cs-line);
	border-radius: 999px;
	text-decoration: none;
}

.cs-club__tab.is-current { border-color: currentColor; font-weight: 600; }

.cs-club__count {
	font-variant-numeric: tabular-nums;
	font-size: .8em;
	padding: 0 .4em;
	border-radius: 999px;
	background: var(--cs-accent);
	color: var(--cs-accent-ink);
}

.cs-club__row {
	border-top: 1px solid var(--cs-line);
	padding: 1rem 0;
}

.cs-club__row:first-of-type { border-top: 0; }

.cs-club__decide {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: .5rem;
}

.cs-club__stats { display: flex; gap: 1rem; flex-wrap: wrap; }

.cs-club__stat {
	border: 1px solid var(--cs-line);
	border-radius: 6px;
	padding: .75rem 1rem;
	min-width: 8rem;
}

.cs-club__stat strong {
	display: block;
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
}

.cs-club__photos { display: flex; gap: .75rem; flex-wrap: wrap; margin: .5rem 0; }
.cs-club__photos img,
.cs-club__photo { max-width: 12rem; height: auto; border-radius: 4px; }