/* ==========================================================================
   Clazing & Mol — components

   One class per component in the design system, with its state rules kept
   exactly: filled buttons darken one step on hover and take the darkest green
   on press, outline and ghost controls pick up an accent wash and a green
   border, cards lift 2px. Never lighten a fill on hover, never scale up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: var(--control-h-m);
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--radius-xs);
	background: var(--accent);
	color: var(--text-inverse);
	font: var(--weight-bold) var(--size-body-s)/1 var(--font-display);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: var(--transition-control), transform var(--dur-instant) var(--ease-standard);
}
.button:hover {
	background: var(--accent-hover);
	color: var(--text-inverse);
	border-color: transparent;
}
.button:active { background: var(--accent-press); transform: translateY(1px); }

.button_sm { height: var(--control-h-s); padding: 0 14px; }
.button_lg { height: var(--control-h-l); padding: 0 28px; font-size: var(--size-body-m); }
.button_block { display: flex; width: 100%; }

.button_dark { background: var(--cm-ink-900); }
.button_dark:hover { background: var(--cm-ink-800); }
.button_dark:active { background: var(--cm-black); }

.button_secondary {
	background: transparent;
	color: var(--text-body);
	border: var(--border-w-thick) solid var(--border-strong);
}
.button_secondary:hover {
	background: var(--accent-wash);
	color: var(--text-body);
	border-color: var(--accent);
}
.button_secondary:active { background: var(--accent-soft); }

.button_ghost {
	background: transparent;
	color: var(--text-body);
	border-color: transparent;
}
.button_ghost:hover { background: var(--surface-muted); color: var(--text-body); }

.button_inverse {
	background: var(--cm-neutral-000);
	color: var(--cm-ink-900);
}
.button_inverse:hover { background: var(--cm-neutral-100); color: var(--cm-ink-900); }
.button_inverse:active { background: var(--cm-neutral-200); }

.button[disabled], .button.is_disabled {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Icon button — always carries a label for the tooltip and screen reader
   -------------------------------------------------------------------------- */
.icon_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--control-h-m);
	height: var(--control-h-m);
	border: 1px solid transparent;
	border-radius: var(--radius-xs);
	background: transparent;
	color: var(--text-body);
	cursor: pointer;
	transition: var(--transition-control);
}
.icon_button:hover { background: var(--surface-muted); color: var(--text-body); }

.icon_button_sm { width: var(--control-h-s); height: var(--control-h-s); }
.icon_button_lg { width: var(--control-h-l); height: var(--control-h-l); }

.icon_button_primary { background: var(--accent); color: var(--text-inverse); }
.icon_button_primary:hover { background: var(--accent-hover); color: var(--text-inverse); }

.icon_button_outline { border-color: var(--border-default); }
.icon_button_outline:hover { background: var(--accent-wash); border-color: var(--accent); }

.icon_button_inverse {
	color: var(--text-inverse);
	border-color: var(--border-on-dark);
}
.icon_button_inverse:hover { background: var(--hover-on-dark); color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   Card. White, 1px subtle border, 4px radius, 24px padding, flat.
   -------------------------------------------------------------------------- */
.card {
	display: block;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	color: var(--text-body);
	box-shadow: var(--shadow-none);
	transition:
		box-shadow var(--dur-base) var(--ease-standard),
		transform var(--dur-base) var(--ease-standard),
		border-color var(--dur-fast) var(--ease-standard);
}
.card_body { padding: var(--space-5); }
.card_body > *:last-child { margin-bottom: 0; }

.card_outlined { border: var(--border-w-thick) solid var(--border-strong); }
.card_sunken { background: var(--surface-sunken); }
.card_dark {
	background: var(--surface-dark);
	border-color: var(--border-on-dark);
	color: var(--text-inverse);
}
.card_dark h2, .card_dark h3, .card_dark h4 { color: var(--text-inverse); }
.card_dark p { color: var(--cm-neutral-300); }
.card_dark .field_hint { color: var(--cm-neutral-400); }
/* :not(.button) — a plain link on a dark card is muted, but a button inside
   one keeps its own skin; without this the white inverse button lost its ink. */
.card_dark a:not(.button) { color: var(--cm-neutral-300); }
.card_dark a:not(.button):hover { color: var(--text-inverse); }
.card_accent {
	background: var(--accent-wash);
	border-color: var(--accent-soft);
}

/* The 3px green top rule is the one decorative accent. */
.card_rule { border-top: var(--rule-accent) solid var(--accent); }

.card_interactive { cursor: pointer; }
.card_interactive:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
a.card { border-bottom: 1px solid var(--border-subtle); color: var(--text-body); }
a.card:hover { border-bottom-color: var(--border-subtle); color: var(--text-body); }
a.card_rule { border-top-color: var(--accent); }

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: var(--radius-xs);
	background: var(--surface-muted);
	color: var(--text-muted);
	font: var(--weight-bold) var(--size-overline)/1 var(--font-display);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	white-space: nowrap;
}
.badge_accent { background: var(--accent); color: var(--text-inverse); }
.badge_soft { background: var(--accent-soft); color: var(--cm-green-700); }
.badge_dark { background: var(--cm-ink-900); color: var(--text-inverse); }
.badge_warning { background: #fbf1dc; color: #8a5c07; }
.badge_danger { background: #f9e5e3; color: var(--cm-danger); }

/* --------------------------------------------------------------------------
   Tag. No pills — 2px radius, like everything else.
   -------------------------------------------------------------------------- */
.tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xs);
	background: var(--surface-card);
	color: var(--text-body);
	font: var(--text-body-s);
	transition: var(--transition-control);
}
a.tag:hover {
	background: var(--accent-wash);
	border-color: var(--accent);
	color: var(--text-body);
}
.tag_selected {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--text-inverse);
}
.tag_list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.field_label {
	font: var(--weight-bold) var(--size-caption)/1.2 var(--font-display);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
	color: var(--text-body);
}
.field_required { color: var(--accent); }

/* Hints explain why we ask; errors are helpful, never scolding. */
.field_hint {
	font: var(--text-caption);
	color: var(--text-faint);
}
.field_error {
	font: var(--text-caption);
	color: var(--cm-danger);
}

.input, .textarea, .select {
	width: 100%;
	height: var(--control-h-m);
	padding: 0 12px;
	background: var(--surface-card);
	color: var(--text-body);
	font: var(--text-body-m);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xs);
	outline: none;
	transition: var(--transition-control);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }

.input:focus, .textarea:focus, .select:focus {
	border-color: var(--accent);
	box-shadow: var(--shadow-focus);
	outline: none;
}

.textarea {
	height: auto;
	padding: 12px;
	resize: vertical;
	line-height: var(--leading-normal);
}

.select {
	appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%235b5b54'%3E%3Cpath d='M480-344 240-584l43-43 197 197 197-197 43 43-240 240Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px 20px;
}

.is_invalid .input,
.is_invalid .textarea,
.is_invalid .select { border-color: var(--cm-danger); }

/* The honeypot. Named so browsers will not autofill it. */
.field_trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Checkbox — square, like everything else */
.checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--space-3);
	font: var(--text-body-m);
	cursor: pointer;
}
.checkbox input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.checkbox_box {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xs);
	color: transparent;
	transition: var(--transition-control);
}
.checkbox input:checked + .checkbox_box {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--text-inverse);
}
.checkbox input:focus-visible + .checkbox_box {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}
.checkbox_text { display: block; }
.checkbox_label { display: block; }
.checkbox_description {
	display: block;
	margin-top: 2px;
	font: var(--text-caption);
	color: var(--text-faint);
}

/* Radio — the single round element in the system, because a square radio
   reads as a checkbox. */
.radio { display: inline-flex; align-items: flex-start; gap: var(--space-3); font: var(--text-body-m); cursor: pointer; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio_dot {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: 50%;
	transition: var(--transition-control);
}
.radio_dot::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: transparent;
	transition: var(--transition-control);
}
.radio input:checked + .radio_dot { border-color: var(--accent); }
.radio input:checked + .radio_dot::after { background: var(--accent); }
.radio input:focus-visible + .radio_dot { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Alert — inline form feedback. Flat, with the tone carried by the top rule.
   -------------------------------------------------------------------------- */
.alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--surface-sunken);
	border: 1px solid var(--border-subtle);
	border-top: var(--rule-accent) solid var(--border-default);
	border-radius: var(--radius-md);
}
.alert_icon { flex: 0 0 auto; line-height: 0; padding-top: 2px; }
.alert_body { flex: 1; min-width: 0; }
.alert_title {
	display: block;
	font: var(--weight-bold) var(--size-body-s)/1.3 var(--font-display);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	color: var(--text-heading);
}
.alert_text {
	margin-top: 2px;
	font: var(--text-body-s);
	color: var(--text-muted);
}

.alert_success { background: var(--accent-wash); border-color: var(--accent-soft); border-top-color: var(--accent); }
.alert_success .alert_icon { color: var(--cm-success); }
.alert_danger { background: #fdf4f3; border-color: #f2dbd8; border-top-color: var(--cm-danger); }
.alert_danger .alert_icon { color: var(--cm-danger); }

/* --------------------------------------------------------------------------
   Toast — the fixed message strip driven by message.js (jQuery slideDown,
   so it starts hidden). Overlay elevation, dark plate, coloured icon.
   -------------------------------------------------------------------------- */
.bottom_message {
	display: none;
	position: fixed;
	right: var(--space-5);
	bottom: var(--space-5);
	z-index: 60;
	width: 360px;
	max-width: calc(100vw - var(--space-8));
	padding: var(--space-4);
	background: var(--cm-ink-900);
	color: var(--text-inverse);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	font: var(--text-body-s);
}
.bottom_message_success { border-top: var(--rule-accent) solid var(--cm-success); }
.bottom_message_error { border-top: var(--rule-accent) solid var(--cm-danger); }

/* --------------------------------------------------------------------------
   Photo plate. Photos crop to cover inside their box, flush to its edges,
   with no radius of their own. A hovered card scales its photo 3%; the photo
   never lifts independently.
   -------------------------------------------------------------------------- */
.plate {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--surface-muted);
}
.plate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-standard);
}
.card_interactive:hover .plate img,
a:hover > .plate img { transform: scale(1.03); }

/* The honest placeholder for a slot with no photography yet. */
.plate_empty {
	display: flex;
	align-items: flex-end;
	padding: var(--space-3);
	background: var(--surface-muted);
	background-image: var(--pattern-chevron);
	border: 1px solid var(--border-subtle);
}
.plate_empty span {
	padding: 5px 8px;
	background: var(--surface-card);
	color: var(--text-faint);
	font: var(--weight-bold) var(--size-overline)/1 var(--font-display);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
}
.plate_empty_dark {
	background: var(--surface-dark);
	background-image: var(--pattern-chevron-dark);
	border: none;
}
.plate_empty_dark span {
	background: rgba(0, 0, 0, .35);
	color: var(--cm-neutral-400);
}

@media (prefers-reduced-motion: reduce) {
	.card_interactive:hover .plate img,
	a:hover > .plate img { transform: none; }
}