/*
 * Corkboard — front-end styles.
 *
 * Principle (specification §14): inherit the voice, own the mechanics.
 * Font family and page context come from the theme. Heights, spacing,
 * the type scale and states belong to the plugin.
 *
 * Mobile first (375 px), everything scoped to .corkboard, no !important.
 *
 * Token order:
 * 1. :where(.corkboard) below holds the fallbacks with zero specificity.
 * 2. The configured tokens are printed inline on .corkboard BEFORE this
 *    file (style handle corkboard-tokens).
 * 3. The dark block (only with .corkboard--dark-auto) overrides tokens.
 */

:where(.corkboard) {
	/* Colour */
	--cb-accent: #2b6cb0;
	--cb-accent-contrast: #fff;
	/* Accent used as TEXT (links, secondary buttons); lightened in dark mode */
	--cb-accent-text: var(--cb-accent);
	--cb-surface: #fff;
	--cb-surface-alt: transparent;
	--cb-text: #1a1a1a;
	--cb-muted: #5f6670;
	--cb-border: #e3e6ea;
	--cb-control-border: #8b929a;
	--cb-danger: #b42318;
	--cb-success: #1f7a4d;
	--cb-offer: #1f6f47;
	--cb-request: #8a4b08;

	/* Shape (card values follow Equipper: soft two-layer shadow, lift on hover) */
	--cb-radius: 10px;
	--cb-radius-sm: 6px;
	--cb-gap: 1.125rem;
	--cb-card-border: 1px solid var(--cb-border);
	--cb-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 8px 24px rgba(16, 24, 40, 0.06);
	--cb-shadow-hover: 0 2px 6px rgba(16, 24, 40, 0.1), 0 16px 40px rgba(16, 24, 40, 0.1);
	--cb-lift: -3px;

	/* Type: one base size, everything else relative to it */
	--cb-font-size: 15px;
	--cb-line-height: 1.55;
	--cb-text-xs: 0.8em;
	--cb-text-sm: 0.8667em;
	--cb-text-md: 1em;
	--cb-text-lg: 1.2em;
	--cb-text-xl: 1.6em;

	/* Controls: one height for inputs, selects and buttons (44 px touch target) */
	--cb-control-height: 2.75rem;
	--cb-control-padding: 0.875rem;
	--cb-board-padding: 0;

	/* Grid: columns follow from the width, never more than --cb-columns-max,
	   never narrower than --cb-card-min */
	--cb-card-min: 18.75rem;
	--cb-columns-max: 3;
	--cb-card-padding: 1.2em;
}

/* Dark mode only when the design setting follows the device. */
@media (prefers-color-scheme: dark) {
	.corkboard.corkboard--dark-auto {
		--cb-surface: #1f2328;
		--cb-surface-alt: #16191d;
		--cb-text: #e8eaed;
		--cb-muted: #a3acb6;
		--cb-border: #343a40;
		--cb-control-border: #7a838d;
		--cb-offer: #6fcf97;
		--cb-request: #f2b56b;
		--cb-danger: #f97066;
		--cb-success: #6fcf97;
		--cb-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
		--cb-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.4);
		--cb-accent-text: color-mix(in srgb, var(--cb-accent) 40%, #fff);
	}
}

/* A dark plate always needs air around the cards. */
@media (prefers-color-scheme: dark) {
	.corkboard.corkboard--dark-auto {
		padding: max(var(--cb-board-padding), var(--cb-gap));
	}
}

/* Root: base size and rhythm owned here, family inherited unless set.
   The board is a size container: layouts below react to the width the
   board actually gets in the theme, not to the window. */
.corkboard {
	container-type: inline-size;
	container-name: corkboard;
	box-sizing: border-box;
	max-width: 100%;
	margin-inline: auto;
	padding: var(--cb-board-padding);
	border-radius: var(--cb-radius);
	background: var(--cb-surface-alt);
	/* Text directly on the board background has its own tokens; surfaces
	   (cards, form, notice, messages, controls) set --cb-text again. */
	color: var(--cb-board-text, var(--cb-text));
	font-family: var(--cb-font-family, inherit);
	font-size: var(--cb-font-size);
	line-height: var(--cb-line-height);
	overflow-wrap: anywhere;
}

.corkboard *,
.corkboard *::before,
.corkboard *::after {
	box-sizing: border-box;
}

.corkboard p {
	margin: 0;
}

.corkboard a {
	color: var(--cb-accent-text);
}

/* Headings inside the board use the plugin's scale; the theme keeps the family. */
.corkboard h2,
.corkboard h3 {
	margin: 0;
	color: var(--cb-text);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
}

/* ---------------------------------------------------------------------
 * Controls: one height, padding, size, line height and radius.
 * font-size never below 16px, or iOS zooms into the field on focus.
 * ------------------------------------------------------------------- */
.corkboard input[type="text"],
.corkboard input[type="search"],
.corkboard input[type="date"],
.corkboard input[type="number"],
.corkboard select,
.corkboard .corkboard__button,
.corkboard__toggle-option {
	display: inline-flex;
	align-items: center;
	height: var(--cb-control-height);
	min-height: var(--cb-control-height);
	margin: 0;
	padding: 0 var(--cb-control-padding);
	border: 1px solid var(--cb-control-border);
	border-radius: var(--cb-radius-sm);
	font-family: inherit;
	font-size: max(16px, 1em);
	font-weight: 400;
	line-height: 1.2;
	vertical-align: middle;
}

.corkboard input[type="text"],
.corkboard input[type="search"],
.corkboard input[type="date"],
.corkboard input[type="number"],
.corkboard select {
	width: 100%;
	max-width: 100%;
	background-color: var(--cb-surface);
	color: var(--cb-text);
}

.corkboard input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

.corkboard select {
	padding-right: 2.5rem;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 12px 8px;
	text-overflow: ellipsis;
}

/* The focus ring has two layers: a halo in the surface colour directly
   around the element, and the ring itself outside it. One of the two always
   stands out, whatever is behind — the ring against the halo on a light
   card, the halo against a dark or coloured board. A single-colour ring in
   the accent colour failed on the violet board (1.2 : 1) and on the dark
   one (2.0 : 1); measured in cb-keyboard.py. */
:where(.corkboard) {
	--cb-focus-ring: var(--cb-accent-text);
	--cb-focus-halo: var(--cb-surface);
}

.corkboard input:focus-visible,
.corkboard select:focus-visible,
.corkboard textarea:focus-visible,
.corkboard summary:focus-visible,
.corkboard .corkboard__button:focus-visible,
.corkboard__toggle-option:focus-visible,
.corkboard a:focus-visible {
	outline: 2px solid var(--cb-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cb-focus-halo);
}

.corkboard input[type="radio"],
.corkboard input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--cb-accent);
}

/* Buttons */
.corkboard .corkboard__button {
	justify-content: center;
	border-color: var(--cb-accent);
	background: var(--cb-accent);
	color: var(--cb-accent-contrast);
	font-size: max(16px, 0.9667em);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.corkboard .corkboard__button:hover {
	background: var(--cb-accent-hover, color-mix(in srgb, var(--cb-accent) 85%, #000));
	border-color: var(--cb-accent-hover, color-mix(in srgb, var(--cb-accent) 85%, #000));
	color: var(--cb-accent-contrast);
}

.corkboard .corkboard__button--secondary {
	background: var(--cb-surface);
	color: var(--cb-accent-text);
}

.corkboard .corkboard__button--secondary:hover {
	background: color-mix(in srgb, var(--cb-accent) 12%, var(--cb-surface));
	border-color: var(--cb-accent);
	color: var(--cb-accent-text);
}

.corkboard .corkboard__button--danger {
	border-color: var(--cb-danger);
	background: var(--cb-surface);
	color: var(--cb-danger);
}

.corkboard .corkboard__button--danger:hover {
	border-color: var(--cb-danger);
	background: color-mix(in srgb, var(--cb-danger) 10%, var(--cb-surface));
	color: var(--cb-danger);
}

.corkboard__actions,
.corkboard-notice__manage,
.corkboard-mine__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--cb-gap);
}

.corkboard-notice__manage form,
.corkboard-mine__actions form {
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Messages
 * ------------------------------------------------------------------- */
.corkboard__message,
.corkboard__notice {
	color: var(--cb-text);
	margin: 0 0 var(--cb-gap);
	padding: 0.875rem 1rem;
	border: var(--cb-card-border);
	border-left-width: 4px;
	border-radius: var(--cb-radius-sm);
	background: var(--cb-surface);
}

.corkboard__message ul {
	margin: 0;
	padding-left: 1.25rem;
}

.corkboard__notice p + p {
	margin-top: 0.75rem;
}

.corkboard__message--success {
	border-left-color: var(--cb-success);
}

.corkboard__message--error {
	border-left-color: var(--cb-danger);
}

.corkboard__notice {
	border-left-color: var(--cb-accent);
}

/* Renewal page (link from the reminder mail). */
.corkboard__notice .corkboard__title {
	margin: 0 0 0.75rem;
	color: inherit;
	font-size: var(--cb-text-lg);
	line-height: 1.25;
}

.corkboard__hint {
	color: var(--cb-muted);
	font-size: var(--cb-text-sm);
}

/* ---------------------------------------------------------------------
 * Fields: label above control, labels on one line across a row.
 * ------------------------------------------------------------------- */
.corkboard__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
	margin: 0;
}

.corkboard__field > label,
.corkboard__field > legend,
.corkboard__label-spacer {
	display: block;
	min-height: 1.3em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: var(--cb-text-sm);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.corkboard__label-spacer {
	display: none;
}

/* Filter row: one column when narrow, two from 34rem, one aligned row
   from 46rem of board width. Category column never below 13.5rem, so the
   longest default category fits without being cut. */
.corkboard__filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	align-items: end;
	margin: 0 0 var(--cb-gap);
}

.corkboard__field--submit .corkboard__button {
	width: 100%;
}

@container corkboard (min-width: 34rem) {
	.corkboard__filters {
		grid-template-columns: minmax(10rem, 1fr) minmax(13.5rem, 1fr);
	}

	.corkboard__field--search,
	.corkboard__field--submit {
		grid-column: 1 / -1;
	}
}

@container corkboard (min-width: 46rem) {
	.corkboard__filters {
		grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) minmax(13.5rem, 1fr) auto;
	}

	.corkboard__field--search,
	.corkboard__field--submit {
		grid-column: auto;
	}

	.corkboard__label-spacer {
		display: block;
	}
}

/* ---------------------------------------------------------------------
 * Bar: count and layout toggle
 * ------------------------------------------------------------------- */
.corkboard__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 0.875rem;
}

.corkboard__count {
	color: var(--cb-board-muted, var(--cb-muted));
	font-size: var(--cb-text-sm);
}

.corkboard__toggle {
	display: inline-flex;
	color: var(--cb-text);
	border: 1px solid var(--cb-control-border);
	border-radius: var(--cb-radius-sm);
	background: var(--cb-surface);
	overflow: hidden;
}

.corkboard__toggle-option {
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--cb-text);
	font-size: max(16px, var(--cb-text-sm));
	font-weight: 600;
	text-decoration: none;
}

.corkboard__toggle-option + .corkboard__toggle-option {
	border-left: 1px solid var(--cb-control-border);
}

.corkboard__toggle-option:hover {
	background: color-mix(in srgb, var(--cb-accent) 10%, var(--cb-surface));
	color: var(--cb-text);
}

.corkboard__toggle-option[aria-current="true"] {
	background: var(--cb-accent);
	color: var(--cb-accent-contrast);
}

/* ---------------------------------------------------------------------
 * Cards (form language follows Equipper)
 *
 * auto-fill keeps empty tracks: a single card stays one column wide
 * instead of stretching over the row. min(100%, …) keeps a narrow board
 * from overflowing.
 * ------------------------------------------------------------------- */
.corkboard__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cb-gap);
	margin: 0 0 var(--cb-gap);
	padding: 0;
	list-style: none;
}

/*
 * Maximum, not a fixed count: a track is at least as wide as
 * (100% − gaps) / --cb-columns-max, so auto-fill can never fit more than
 * that many; and at least --cb-card-min, so narrow boards fall back to
 * fewer columns. min(100%, …) keeps one column from overflowing.
 */
.corkboard--cards .corkboard__items {
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(
				100%,
				max(
					var(--cb-card-min),
					calc((100% - (var(--cb-columns-max) - 1) * var(--cb-gap)) / var(--cb-columns-max))
				)
			),
			1fr
		)
	);
	align-items: stretch;
}

/* A phone-sized board always gets one column, whatever the minimum column
   width says: two cards side by side at 375 px are hard to use. */
@container corkboard (max-width: 30rem) {
	.corkboard--cards .corkboard__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

.corkboard-card {
	position: relative;
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: var(--cb-card-border);
	border-radius: var(--cb-radius);
	background: var(--cb-surface);
	color: var(--cb-text);
	box-shadow: var(--cb-shadow);
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.corkboard-card__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--cb-card-padding);
}

.corkboard-card:hover,
.corkboard-card:focus-within {
	transform: translateY(var(--cb-lift));
	box-shadow: var(--cb-shadow-hover);
	border-color: color-mix(in srgb, var(--cb-accent) 30%, var(--cb-border));
}

.corkboard-card__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.5rem;
}

.corkboard-badge {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cb-muted) 12%, var(--cb-surface));
	color: var(--cb-text);
	font-size: var(--cb-text-xs);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.corkboard-badge--offer {
	background: color-mix(in srgb, var(--cb-offer) 12%, var(--cb-surface));
	color: var(--cb-offer);
}

.corkboard-badge--request {
	background: color-mix(in srgb, var(--cb-request) 12%, var(--cb-surface));
	color: var(--cb-request);
}

.corkboard-badge--resolved,
.corkboard-badge--hidden {
	background: var(--cb-muted);
	color: var(--cb-surface);
}

.corkboard-card__category {
	color: var(--cb-muted);
	font-size: var(--cb-text-sm);
}

.corkboard .corkboard-card__title,
.corkboard .corkboard-mine__title {
	font-size: var(--cb-text-lg);
}

.corkboard-card__title a,
.corkboard-mine__title a {
	color: var(--cb-text);
	text-decoration: none;
}

/* The whole card is the click target. */
.corkboard-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.corkboard-card__title a:focus-visible {
	outline: none;
}

/* The card carries the ring for its title link (the link covers the whole
   card, so a ring around the text alone would look wrong). */
.corkboard-card:focus-within {
	outline: 2px solid var(--cb-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cb-focus-halo);
}

.corkboard-card:hover .corkboard-card__title a,
.corkboard-mine__title a:hover,
.corkboard-mine__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.is-resolved .corkboard-card__title a,
.is-resolved .corkboard-notice__title {
	text-decoration: line-through;
}

.corkboard-card__excerpt {
	color: var(--cb-muted);
	font-size: var(--cb-text-md);
}

.corkboard-card__meta,
.corkboard-mine__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	color: var(--cb-muted);
	font-size: var(--cb-text-sm);
}

/* Footer at the bottom of the card, so the dates of a row line up (also
   when only some cards have a picture). Needs the board prefix: the reset
   ".corkboard p" would win otherwise. */
.corkboard .corkboard-card__meta {
	margin-top: auto;
	padding-top: 0.25rem;
}

.corkboard-card__location::after {
	content: "·";
	margin-left: 0.75rem;
}

/* List layout: one quiet surface, rows separated by lines */
.corkboard--list .corkboard__items {
	gap: 0;
	border: var(--cb-card-border);
	border-radius: var(--cb-radius);
	background: var(--cb-surface);
	box-shadow: var(--cb-shadow);
	overflow: hidden;
}

.corkboard--list .corkboard-card {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.corkboard--list .corkboard-card + .corkboard-card {
	border-top: 1px solid var(--cb-border);
}

.corkboard--list .corkboard-card:hover,
.corkboard--list .corkboard-card:focus-within {
	transform: none;
	box-shadow: none;
	background: color-mix(in srgb, var(--cb-accent) 5%, var(--cb-surface));
}

.corkboard--list .corkboard-card:focus-within {
	outline-offset: -2px;
}

.corkboard--list .corkboard-card__inner {
	gap: 0.25rem;
	padding: 0.875em 1.2em;
}

.corkboard--list .corkboard-card__excerpt {
	display: none;
}

.is-inactive {
	opacity: 0.75;
}

/* ---------------------------------------------------------------------
 * My notices
 * ------------------------------------------------------------------- */
.corkboard-mine {
	color: var(--cb-text);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: var(--cb-card-padding);
	border: var(--cb-card-border);
	border-radius: var(--cb-radius);
	background: var(--cb-surface);
	box-shadow: var(--cb-shadow);
}

.corkboard-mine__actions {
	margin: 0.25rem 0 0;
}

/* ---------------------------------------------------------------------
 * Single notice
 * ------------------------------------------------------------------- */
.corkboard__back {
	margin: 0 0 var(--cb-gap);
	font-size: var(--cb-text-sm);
}

.corkboard__back a {
	color: var(--cb-board-text, var(--cb-accent-text));
	font-weight: 600;
	text-decoration: none;
}

.corkboard__back a::before {
	content: "← ";
}

.corkboard-notice {
	color: var(--cb-text);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5em 1.2em;
	border: var(--cb-card-border);
	border-radius: var(--cb-radius);
	background: var(--cb-surface);
	box-shadow: var(--cb-shadow);
}

.corkboard .corkboard-notice__title {
	font-size: var(--cb-text-xl);
}

.corkboard-notice__content p + p,
.corkboard-notice__content ul,
.corkboard-notice__content ol {
	margin-top: 0.75em;
}

.corkboard-notice__details {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.125rem;
	margin: 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--cb-border);
}

.corkboard-notice__details dt {
	color: var(--cb-muted);
	font-size: var(--cb-text-sm);
}

.corkboard-notice__details dd {
	margin: 0 0 0.5rem;
}

.corkboard-notice__manage {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--cb-border);
}

/* ---------------------------------------------------------------------
 * Images (step 10): card picture, detail gallery, form preview
 * ------------------------------------------------------------------- */
.corkboard__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The picture sits on top of the card; cards without one start with the
   badges as before. The card clips the picture to its rounded corners. */
.corkboard--cards .corkboard-card {
	flex-direction: column;
	overflow: hidden;
}

/* The ratio sits on the picture itself: a smaller upload (no 600x400 size)
   or a square one is cut to 3:2 as well. */
.corkboard-card__media {
	flex: 0 0 auto;
	margin: 0;
	background: color-mix(in srgb, var(--cb-muted) 10%, var(--cb-surface));
}

.corkboard-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* List layout: a small picture at the start of the row. */
.corkboard--list .corkboard-card__media {
	align-self: center;
	width: 5.5rem;
	margin-left: 1.2em;
	border-radius: var(--cb-radius-sm);
	overflow: hidden;
}

@container corkboard (max-width: 30rem) {
	.corkboard--list .corkboard-card__media {
		width: 4rem;
	}
}

.corkboard-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.corkboard-gallery__item {
	margin: 0;
}

.corkboard-gallery__item a {
	display: block;
	border-radius: var(--cb-radius-sm);
	overflow: hidden;
	background: color-mix(in srgb, var(--cb-muted) 10%, var(--cb-surface));
}

.corkboard-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: opacity 0.16s ease;
}

.corkboard-gallery__item a:hover img {
	opacity: 0.9;
}

.corkboard-images {
	gap: 0.75rem;
}

.corkboard-images__pickers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.corkboard .corkboard-images__picker {
	cursor: pointer;
}

/* The real file inputs stay in the page (keyboard, validation) but are
   drawn by their labels. */
.corkboard-images__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* The file input itself is invisible; its label shows the focus. */
.corkboard-images__input:focus-visible + .corkboard-images__picker,
.corkboard-images__picker:has(+ .corkboard-images__input:focus-visible) {
	outline: 2px solid var(--cb-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cb-focus-halo);
}

.corkboard-images__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.corkboard-images__list:empty {
	display: none;
}

.corkboard-images__item {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
	margin: 0;
	padding: 0.5rem;
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-sm);
	background: var(--cb-surface);
	color: var(--cb-text);
}

.corkboard-images__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: calc(var(--cb-radius-sm) / 2);
	object-fit: cover;
}

.corkboard-images__name {
	overflow-wrap: anywhere;
	color: var(--cb-muted);
	font-size: var(--cb-text-xs);
}

.corkboard-images__alt-label,
.corkboard-images__remove {
	font-size: var(--cb-text-sm);
}

.corkboard-images__item:has(input[name="cb_image_remove[]"]:checked) img {
	opacity: 0.35;
}

.corkboard-images__status:empty {
	display: none;
}

.corkboard .corkboard-images__status.is-error {
	color: var(--cb-danger);
	font-weight: 600;
}

/* The editing area is an iframe: the browser puts the focus on the iframe
   element and the caret inside it, so a ring on the iframe alone is not
   drawn. The container carries it while anything inside has the focus. */
/* Chrome does not carry :focus-within across a document boundary, so the
   iframe itself gets the ring while the caret is inside it (measured). */
.corkboard .mce-edit-area iframe:focus,
.corkboard .wp-editor-area:focus {
	outline: 2px solid var(--cb-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cb-focus-halo);
}

.corkboard .wp-editor-container.is-focused,
.corkboard .wp-editor-container:focus-within {
	outline: 2px solid var(--cb-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cb-focus-halo);
}

/* The buttons of the reduced editor are WordPress' own markup and bring no
   focus ring of their own; measured in cb-keyboard.py. */
.corkboard .mce-toolbar .mce-btn button:focus-visible,
.corkboard .mce-toolbar .mce-btn:focus-within button {
	outline: 2px solid var(--cb-focus-ring);
	outline-offset: -1px;
	box-shadow: 0 0 0 2px var(--cb-focus-halo);
}

/* A message that belongs to one field, right below it. */
.corkboard__field-error {
	margin: 0.25rem 0 0;
	color: var(--cb-danger);
	font-size: var(--cb-text-sm);
	font-weight: 600;
}

.corkboard [aria-invalid="true"] {
	border-color: var(--cb-danger);
}

/* ---------------------------------------------------------------------
 * Replies, private messages, inbox (step 7)
 * ------------------------------------------------------------------- */
.corkboard textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 6rem;
	margin: 0;
	padding: 0.625rem var(--cb-control-padding);
	border: 1px solid var(--cb-control-border);
	border-radius: var(--cb-radius-sm);
	background-color: var(--cb-surface);
	color: var(--cb-text);
	font-family: inherit;
	font-size: max(16px, 1em);
	line-height: 1.5;
	resize: vertical;
}

/* Covered by the shared rule above; kept for the editor's own textarea. */
.corkboard textarea:focus-visible {
	outline: 2px solid var(--cb-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cb-focus-halo);
}

.corkboard-replies,
.corkboard-contact,
.corkboard-inbox {
	display: grid;
	gap: 0.875rem;
	margin-top: calc(var(--cb-gap) * 1.5);
}

.corkboard .corkboard-replies__title,
.corkboard .corkboard-inbox__title {
	margin: 0;
	color: inherit;
	font-size: var(--cb-text-lg);
}

/* Sits directly on the board background, like the back link. */
.corkboard-contact__own {
	margin-top: var(--cb-gap);
}

.corkboard-contact__own a {
	color: var(--cb-board-text, var(--cb-accent-text));
}

.corkboard-replies__none {
	margin: 0;
	color: var(--cb-board-muted, var(--cb-muted));
}

.corkboard-replies__list,
.corkboard-thread__messages {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.corkboard-reply,
.corkboard-thread {
	color: var(--cb-text);
	padding: 0.875rem var(--cb-card-padding);
	border: var(--cb-card-border);
	border-radius: var(--cb-radius);
	background: var(--cb-surface);
}

.corkboard-reply__meta,
.corkboard-message__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin: 0 0 0.25rem;
	font-size: var(--cb-text-sm);
}

.corkboard-reply__meta span,
.corkboard-message__meta span,
.corkboard-thread__with {
	color: var(--cb-muted);
	font-weight: 400;
}

.corkboard-reply__content p,
.corkboard-message__body p {
	margin: 0;
}

.corkboard-reply__content p + p,
.corkboard-message__body p + p {
	margin-top: 0.5em;
}

.corkboard-thread {
	display: grid;
	gap: 0.75rem;
}

.corkboard-thread.is-unread {
	border-left: 4px solid var(--cb-accent);
}

.corkboard .corkboard-thread__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.625rem;
	margin: 0;
	font-size: 1em;
}

.corkboard-message {
	padding: 0.5rem 0.75rem;
	border-radius: var(--cb-radius-sm);
	background: color-mix(in srgb, var(--cb-text) 4%, var(--cb-surface));
}

.corkboard-message.is-outgoing {
	margin-left: 1.5rem;
	background: color-mix(in srgb, var(--cb-accent) 8%, var(--cb-surface));
}

.corkboard-thread__answer {
	display: grid;
	gap: 0.625rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--cb-border);
}

.corkboard-thread__answer p {
	margin: 0;
}

.corkboard__count-badge {
	display: inline-block;
	margin-left: 0.375rem;
	padding: 0.0625rem 0.5rem;
	border-radius: 999px;
	background: var(--cb-danger);
	/* The surface colour is light on the light palette and dark on the dark one. */
	color: var(--cb-surface);
	font-size: var(--cb-text-sm);
	font-weight: 600;
	line-height: 1.5;
}

.corkboard-badge--new {
	background: var(--cb-accent);
	color: var(--cb-accent-contrast);
}

/* ---------------------------------------------------------------------
 * Reports, blocks, deleting replies (step 8)
 * ------------------------------------------------------------------- */
.corkboard__notice--blocked {
	border-left-color: var(--cb-danger);
}

/* A button that looks like a quiet text link; it sits on a surface. */
.corkboard .corkboard__link-button {
	margin: 0;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--cb-accent-text);
	font: inherit;
	font-size: var(--cb-text-sm);
	text-decoration: underline;
	cursor: pointer;
}

.corkboard .corkboard__link-button:focus-visible {
	outline: 2px solid var(--cb-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cb-focus-halo);
}

.corkboard-reply {
	position: relative;
}

.corkboard-reply__delete {
	float: right;
	margin: 0 0 0 0.75rem;
}

.corkboard-thread__block {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
}

.corkboard-report {
	padding-top: 1rem;
	border-top: 1px solid var(--cb-border);
}

.corkboard-report summary {
	color: var(--cb-muted);
	font-size: var(--cb-text-sm);
	cursor: pointer;
}

.corkboard-report__form {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.corkboard-report__form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.corkboard-report__reason {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.25rem 0;
}

/* Sits directly on the board background. */
.corkboard-contact__closed {
	margin-top: var(--cb-gap);
	color: var(--cb-board-muted, var(--cb-muted));
}

/* ---------------------------------------------------------------------
 * Waiting and rejected notices (step 9)
 * ------------------------------------------------------------------- */
.corkboard-mine__status {
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-left: 4px solid var(--cb-accent);
	border-radius: var(--cb-radius-sm);
	background: color-mix(in srgb, var(--cb-accent) 6%, var(--cb-surface));
	color: var(--cb-text);
	font-size: var(--cb-text-sm);
}

.corkboard-mine__status--rejected {
	border-left-color: var(--cb-danger);
	background: color-mix(in srgb, var(--cb-danger) 6%, var(--cb-surface));
}

.corkboard-mine__status p + p {
	margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------
 * Form
 * ------------------------------------------------------------------- */
.corkboard-form {
	color: var(--cb-text);
	display: grid;
	gap: 1.25rem;
	padding: 1.5em 1.2em;
	border: var(--cb-card-border);
	border-radius: var(--cb-radius);
	background: var(--cb-surface);
	box-shadow: var(--cb-shadow);
}

.corkboard-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.corkboard__field--type,
.corkboard__field--toggles {
	gap: 0;
}

.corkboard__field--type label,
.corkboard__field--toggles label,
.corkboard__field--rules label {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	min-height: 44px;
	margin: 0;
	font-size: var(--cb-text-md);
	font-weight: 400;
}

.corkboard__form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.corkboard__field--editor .wp-editor-wrap {
	max-width: 100%;
}

.corkboard__field--editor .wp-editor-container {
	border: 1px solid var(--cb-control-border);
	border-radius: var(--cb-radius-sm);
	overflow: hidden;
}

.corkboard__field--editor .mce-toolbar .mce-btn-group {
	white-space: normal;
}

.corkboard__field--editor .mce-toolbar .mce-btn button {
	min-width: 44px;
	min-height: 44px;
}

.corkboard__counter {
	color: var(--cb-muted);
	font-size: var(--cb-text-sm);
}

.corkboard__counter.is-over {
	color: var(--cb-danger);
}

.corkboard__rules {
	margin: 0 0 0.25rem;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--cb-accent);
	border-radius: var(--cb-radius-sm);
	background: color-mix(in srgb, var(--cb-accent) 6%, var(--cb-surface));
	font-size: var(--cb-text-sm);
}

.corkboard-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@container corkboard (min-width: 46rem) {
	.corkboard-form {
		padding: 1.75em 2em;
	}
}

/* ---------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------- */
.corkboard__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.corkboard__pagination a,
.corkboard__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--cb-control-height);
	height: var(--cb-control-height);
	padding: 0 0.75rem;
	border: 1px solid var(--cb-control-border);
	border-radius: var(--cb-radius-sm);
	background: var(--cb-surface);
	color: var(--cb-text);
	font-size: var(--cb-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.corkboard__pagination a:hover {
	background: color-mix(in srgb, var(--cb-accent) 10%, var(--cb-surface));
}

.corkboard__pagination .current {
	border-color: var(--cb-accent);
	background: var(--cb-accent);
	color: var(--cb-accent-contrast);
}

.corkboard__empty {
	color: var(--cb-board-muted, var(--cb-muted));
}

/* ---------------------------------------------------------------------
 * Wider boards (container width, not window width)
 * ------------------------------------------------------------------- */
@container corkboard (min-width: 36rem) {
	.corkboard-notice {
		padding: 1.75em 2em;
	}

	.corkboard-notice__details {
		grid-template-columns: max-content 1fr;
		column-gap: 1.5rem;
		row-gap: 0.375rem;
	}

	.corkboard-notice__details dd {
		margin: 0;
	}
}

/* ---------------------------------------------------------------------
 * TinyMCE frame in dark mode (the editing area itself gets content_style
 * from the form template, it lives in an iframe)
 * ------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.corkboard.corkboard--dark-auto .wp-editor-container,
	.corkboard.corkboard--dark-auto div.mce-panel,
	.corkboard.corkboard--dark-auto div.mce-toolbar-grp,
	.corkboard.corkboard--dark-auto .mce-top-part::before {
		border-color: var(--cb-control-border);
		background: var(--cb-surface);
		box-shadow: none;
	}

	.corkboard.corkboard--dark-auto .mce-toolbar .mce-btn,
	.corkboard.corkboard--dark-auto .mce-toolbar .mce-btn button {
		background: transparent;
		color: var(--cb-text);
	}

	.corkboard.corkboard--dark-auto .mce-toolbar .mce-btn .mce-ico {
		color: var(--cb-text);
	}

	.corkboard.corkboard--dark-auto .mce-toolbar .mce-btn:hover,
	.corkboard.corkboard--dark-auto .mce-toolbar .mce-btn:focus-within,
	.corkboard.corkboard--dark-auto .mce-toolbar .mce-btn.mce-active {
		border-color: var(--cb-control-border);
		background: color-mix(in srgb, var(--cb-accent) 25%, var(--cb-surface));
	}

	.corkboard.corkboard--dark-auto .wp-editor-area {
		background: var(--cb-surface);
		color: var(--cb-text);
	}
}

@media (prefers-reduced-motion: reduce) {
	.corkboard-gallery__item img,
	.corkboard-card,
	.corkboard .corkboard__button {
		transition: none;
	}

	.corkboard-card:hover,
	.corkboard-card:focus-within {
		transform: none;
	}
}