/* ==========================================================================
   Capital Drums — the three forms
   Ask (screen 07), sell (screen 05), contact (screen 06).

   Mobile-first. Single breakpoint at 900px, always min-width.
   Everything builds on the .cd-field / .cd-input / .cd-label / .cd-notice
   utilities in theme.css; this file only carries what the form screens add.

   Contrast: every colour here comes from the theme.css ink ramp, which is
   already lifted to clear WCAG AA. Nothing below sets a lighter grey than the
   ramp step it inherits — placeholders, help text and error text included.
   ========================================================================== */

:root {
	/* Mirrors the error colour theme.css already commits to in .cd-field-error
	   (5.9:1 on paper). Named here so nothing below repeats the literal, and
	   lightened for the dark panel, where the paper red measures 2.3:1. */
	--cd-error: #b3261e;
	--cd-error-on-dark: color-mix(in srgb, var(--cd-error) 45%, #fff); /* 8.4:1 on ink */

	/* The design's soft input border — one step darker than --cd-rule.
	   Derived rather than pasted so it moves if the palette does. It is a
	   border, not text, so the text minimum does not apply. */
	--cd-form-rule: var(--cd-rule);
	--cd-form-rule: color-mix(in srgb, var(--cd-rule) 95%, var(--cd-ink));
}

/* --------------------------------------------------------------------------
   1. Form shell
   -------------------------------------------------------------------------- */

.cd-form {
	margin: 0;
}

/* The honeypot. Off-canvas rather than display:none — a bot that reads computed
   styles skips hidden fields, but happily fills a field it can "see". */
.cd-form__honeypot {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cd-form .cd-field,
.cd-form .cd-fieldset,
.cd-form .cd-form__grid {
	margin-top: 14px;
}

.cd-form .cd-form__grid .cd-field,
.cd-form .cd-ask__grid .cd-field,
.cd-form .cd-ask-item--choose .cd-field {
	margin-top: 0;
}

.cd-form__grid {
	display: grid;
	gap: 14px;
}

@media (min-width: 900px) {
	.cd-form .cd-field,
	.cd-form .cd-fieldset,
	.cd-form .cd-form__grid {
		margin-top: 18px;
	}

	.cd-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
}

/* Fieldsets have to be reset before they can be laid out like anything else. */
.cd-fieldset {
	border: 0;
	padding: 0;
	margin-inline: 0;
	min-width: 0;
}

.cd-fieldset > legend {
	padding: 0;
	margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   2. Labels, help and errors

   Required-ness is never signalled by colour: optional fields say "(optional)"
   in their label, and a field in error carries an aria-invalid state, a red
   border and a sentence of text saying what to fix.
   -------------------------------------------------------------------------- */

.cd-form .cd-label {
	font-size: 10px;
}

@media (min-width: 900px) {
	.cd-form .cd-label {
		font-size: 10.5px;
	}
}

/* Set apart by weight alone: the labels are already the lowest AA-passing
   step of the ramp, so any opacity drops "(optional)" below 4.5:1. */
.cd-label__opt {
	font-weight: 500;
}

.cd-field-help {
	margin: 0;
	font: 400 11.5px/1.5 var(--cd-sans);
	color: var(--cd-ink-muted); /* 6.93:1 */
}

.cd-field-error {
	margin: 0;
	font-weight: 600;
}

.cd-field.is-invalid .cd-input,
.cd-field.is-invalid .cd-select,
.cd-field.is-invalid .cd-textarea {
	border-color: var(--cd-error);
}

/* The summary that opens a failed form. It is a live region and a focus target:
   the redirect lands on its fragment, so a keyboard or screen-reader user
   arrives on the explanation rather than at the top of the page. */
.cd-form .cd-form__notice {
	margin-top: 16px;
}

/* The notice is a white card even when the form sits on the dark panel, so
   its text must not inherit the panel's on-dark colours (.cd-panel-dark p
   would otherwise turn the lead white on white). Chained on .cd-notice to
   outrank that rule. */
.cd-notice .cd-form__notice-lead {
	margin: 0;
	font-weight: 700;
	color: var(--cd-error);
}

.cd-notice.cd-notice--error,
.cd-notice .cd-form__notice-list li {
	color: var(--cd-ink-body);
}

.cd-form__notice-list {
	margin: 8px 0 0;
	padding-left: 18px;
	font: 400 13px/1.55 var(--cd-sans);
	color: var(--cd-ink-body);
}

.cd-form__notice-list a {
	color: var(--cd-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cd-form__notice:focus {
	outline: 3px solid var(--cd-ink);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Light-panel controls (the sell card, the ask page's item picker)
   -------------------------------------------------------------------------- */

.cd-form-card .cd-input,
.cd-form-card .cd-select,
.cd-form-card .cd-textarea,
.cd-ask-item .cd-input,
.cd-ask-item .cd-select {
	border-width: 1.5px;
	border-color: var(--cd-form-rule);
	font-size: 13.5px;
	padding: 13px;
}

.cd-form-card .cd-input:focus,
.cd-form-card .cd-select:focus,
.cd-form-card .cd-textarea:focus,
.cd-ask-item .cd-input:focus,
.cd-ask-item .cd-select:focus {
	border-color: var(--cd-ink);
	outline: 3px solid var(--cd-accent);
}

.cd-form-card .cd-textarea {
	min-height: 84px;
	line-height: 1.5;
}

@media (min-width: 900px) {
	.cd-form-card .cd-input,
	.cd-form-card .cd-select,
	.cd-form-card .cd-textarea,
	.cd-ask-item .cd-input,
	.cd-ask-item .cd-select {
		font-size: 14px;
		padding: 13px 14px;
	}

	.cd-form-card .cd-textarea {
		min-height: 96px;
		line-height: 1.55;
	}
}

/* --------------------------------------------------------------------------
   4. Dark-panel controls

   Two hosts: this file's own ask panel, and the booking panel the pages lane
   builds on the contact screen. Both get the same treatment.
   -------------------------------------------------------------------------- */

:is(.cd-panel-dark, .cd-contact__panel) .cd-label {
	color: var(--cd-on-dark-soft); /* 5.33:1 */
	font-size: 9.5px;
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-input,
:is(.cd-panel-dark, .cd-contact__panel) .cd-select,
:is(.cd-panel-dark, .cd-contact__panel) .cd-textarea {
	background: transparent;
	color: #fff;
	border: 1.5px solid var(--cd-on-dark-rule);
	font-size: 13px;
	padding: 13px;
}

/* Never dimmer than the ramp's lightest legible step. */
:is(.cd-panel-dark, .cd-contact__panel) .cd-input::placeholder,
:is(.cd-panel-dark, .cd-contact__panel) .cd-textarea::placeholder {
	color: var(--cd-on-dark-soft); /* 5.33:1 */
	opacity: 1;
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-input:focus,
:is(.cd-panel-dark, .cd-contact__panel) .cd-select:focus,
:is(.cd-panel-dark, .cd-contact__panel) .cd-textarea:focus {
	border-color: var(--cd-accent-bright);
	outline: 3px solid var(--cd-accent-bright);
	outline-offset: 1px;
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-textarea {
	min-height: 110px;
	line-height: 1.55;
}

/* The select arrow is drawn in ink; on black it has to be redrawn in white. */
:is(.cd-panel-dark, .cd-contact__panel) .cd-select {
	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 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-select option {
	color: var(--cd-ink);
	background: var(--cd-card);
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-field-help {
	color: var(--cd-on-dark-soft);
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-field-error {
	color: var(--cd-error-on-dark);
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-field.is-invalid .cd-input,
:is(.cd-panel-dark, .cd-contact__panel) .cd-field.is-invalid .cd-select,
:is(.cd-panel-dark, .cd-contact__panel) .cd-field.is-invalid .cd-textarea {
	border-color: var(--cd-error-on-dark);
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-eyebrow {
	color: var(--cd-on-dark-soft);
}

@media (min-width: 900px) {
	:is(.cd-panel-dark, .cd-contact__panel) .cd-label {
		font-size: 10px;
	}

	:is(.cd-panel-dark, .cd-contact__panel) .cd-input,
	:is(.cd-panel-dark, .cd-contact__panel) .cd-select,
	:is(.cd-panel-dark, .cd-contact__panel) .cd-textarea {
		font-size: 13.5px;
		padding: 13px 14px;
	}

	:is(.cd-panel-dark, .cd-contact__panel) .cd-textarea {
		min-height: 130px;
	}
}

/* --------------------------------------------------------------------------
   5. Choice groups — segmented (ask) and chips (sell)
   -------------------------------------------------------------------------- */

.cd-choices {
	display: flex;
	gap: 7px;
}

.cd-choices--chips {
	flex-wrap: wrap;
}

.cd-choice {
	position: relative;
	display: flex;
}

.cd-choices--segmented .cd-choice {
	flex: 1;
	min-width: 0;
}

/* The radio stays a radio: it keeps its place in the tab order and its native
   arrow-key behaviour, and only its default box is taken out of the layout. */
.cd-choice__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.cd-choice__label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	text-align: center;
	font: 600 12px var(--cd-sans);
	border: 1.5px solid var(--cd-form-rule);
	border-radius: var(--cd-r-input);
	color: var(--cd-ink-body);
	background: transparent;
	padding: 10px 12px;
	cursor: pointer;
	transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}

.cd-choices--chips .cd-choice__label {
	border-radius: var(--cd-r-chip);
	padding: 7px 13px;
	min-height: 44px;
	white-space: nowrap;
}

.cd-choice__label:hover {
	border-color: var(--cd-ink);
	color: var(--cd-ink);
}

.cd-choice__input:checked + .cd-choice__label {
	background: var(--cd-ink);
	border-color: var(--cd-ink);
	color: #fff;
}

.cd-choice__input:focus-visible + .cd-choice__label {
	outline: 3px solid var(--cd-ink);
	outline-offset: 2px;
}

@media (min-width: 900px) {
	.cd-choices {
		gap: 8px;
	}

	.cd-choice__label {
		font-size: 12.5px;
	}

	/* The 44px tap-target floor is a touch rule. On a pointer device it just
	   makes the design's chips twice as tall as they should be. */
	.cd-choices--chips .cd-choice__label {
		min-height: 0;
		padding: 7px 14px;
	}
}

/* On the dark panel the segments invert: outline white, selected turns accent.
   Accent always carries white text — 4.66:1 on #D9370F. */
:is(.cd-panel-dark, .cd-contact__panel) .cd-choice__label {
	border-color: var(--cd-on-dark-rule);
	color: var(--cd-on-dark);
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-choice__label:hover {
	border-color: #fff;
	color: #fff;
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-choice__input:checked + .cd-choice__label {
	background: var(--cd-accent);
	border-color: var(--cd-accent);
	color: var(--cd-on-accent);
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-choice__input:focus-visible + .cd-choice__label {
	outline: 3px solid var(--cd-accent-bright);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. Submit and footnote
   -------------------------------------------------------------------------- */

.cd-form__submit {
	margin-top: 18px;
	padding: 15px 20px;
	font-size: 14px;
	border-radius: 9px;
}

/* The accent button's default hover turns ink-on-ink against a dark panel. */
:is(.cd-panel-dark, .cd-contact__panel) .cd-btn--accent:hover,
:is(.cd-panel-dark, .cd-contact__panel) .cd-btn--accent:focus {
	background: #fff;
	border-color: #fff;
	color: var(--cd-ink);
}

.cd-form__footnote {
	margin: 10px 0 0;
	font: 400 11.5px/1.6 var(--cd-sans);
	text-align: center;
	color: var(--cd-ink-muted);
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-form__footnote {
	color: var(--cd-on-dark-soft);
}

@media (min-width: 900px) {
	.cd-form__submit {
		margin-top: 22px;
		padding: 16px 20px;
		font-size: 15px;
	}

	.cd-form__footnote {
		margin-top: 12px;
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------
   7. Success state
   -------------------------------------------------------------------------- */

.cd-form-success {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.cd-form-success:focus {
	outline: 3px solid var(--cd-accent);
	outline-offset: 6px;
}

.cd-form-success__heading {
	font: 800 clamp(19px, 2.4vw, 24px) / 1.15 var(--cd-sans);
	letter-spacing: -.025em;
	color: var(--cd-ink);
}

.cd-form-success__body {
	margin: 0;
	font: 400 13.5px/1.6 var(--cd-sans);
	color: var(--cd-ink-body);
}

.cd-form-success__link {
	margin-top: 6px;
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-form-success__heading {
	color: #fff;
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-form-success__body {
	color: var(--cd-on-dark-muted);
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-btn--ghost {
	border-color: var(--cd-on-dark-rule);
	color: #fff;
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-btn--ghost:hover,
:is(.cd-panel-dark, .cd-contact__panel) .cd-btn--ghost:focus {
	background: #fff;
	border-color: #fff;
	color: var(--cd-ink);
}

/* --------------------------------------------------------------------------
   8. Screen 07 — the ask page
   -------------------------------------------------------------------------- */

/* The ask section carries its own 52px opening; the flow's block gap on top of
   that pushes it 22px below where the design puts it. */
.wp-site-blocks > .cd-main:has(.cd-form--ask) {
	margin-block-start: 0;
}

.cd-ask {
	margin-block-start: 0;
}

.cd-ask__wrap {
	display: flex;
	flex-direction: column;
	padding-block: 22px 0;
}

.cd-ask__intro {
	min-width: 0;
}

.cd-ask__heading {
	font: 800 clamp(30px, 3.1vw, 44px) / 1.04 var(--cd-sans);
	letter-spacing: -.035em;
	color: var(--cd-ink);
	margin-top: 9px;
}

.cd-ask__lede {
	margin: 11px 0 0;
	font: 400 clamp(13.5px, 1.6vw, 16px) / 1.62 var(--cd-sans);
	color: var(--cd-ink-body);
}

/* The house rules. The design's 390px frame drops them — on a phone the job is
   to send the message, and every one of them is repeated in the reply. */
.cd-ask__notes {
	display: none;
}

.cd-ask__note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font: 400 14.5px/1.55 var(--cd-sans);
	color: var(--cd-ink-body);
}

.cd-ask__bullet {
	flex: none;
	width: 16px;
	font: 700 12px var(--cd-mono);
	color: var(--cd-ink);
}

@media (min-width: 900px) {
	.cd-ask__wrap {
		flex-direction: row;
		align-items: flex-start;
		gap: 48px;
		padding-block: 52px 56px;
	}

	.cd-ask__intro {
		flex: 1;
	}

	.cd-ask__heading {
		margin-top: 10px;
		line-height: 1.03;
	}

	.cd-ask__lede {
		margin-top: 14px;
		max-width: 520px;
		line-height: 1.65;
	}

	.cd-ask__notes {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin: 36px 0 0;
		padding: 0;
		list-style: none;
	}
}

/* --- The referenced item, or the picker that stands in for it --- */

.cd-ask-item {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 16px;
	padding: 14px;
	background: var(--cd-card);
	border: 2px solid var(--cd-ink);
	border-radius: 11px;
}

.cd-ask-item--choose {
	display: block;
}

.cd-ask-item__media {
	position: relative;
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
}

.cd-ask-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cd-ask-item__body {
	flex: 1;
	min-width: 0;
}

.cd-ask-item__title {
	margin: 5px 0 0;
	font: 700 13px/1.3 var(--cd-sans);
	color: var(--cd-ink);
}

.cd-ask-item__title a {
	color: inherit;
	text-decoration: none;
}

.cd-ask-item__title a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cd-ask-item__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 6px;
}

.cd-ask-item__meta .cd-price__amount {
	font-size: 13.5px;
}

.cd-ask-item__meta .cd-grade {
	font-size: 9px;
	padding: 2px 5px;
}

.cd-ask-item__sold {
	font: 700 9.5px var(--cd-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cd-ink-muted);
}

.cd-ask-item__change {
	flex: none;
	align-self: center;
	font: 600 12px var(--cd-sans);
	color: var(--cd-ink-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--cd-rule);
	padding-bottom: 1px;
}

.cd-ask-item__change:hover,
.cd-ask-item__change:focus {
	color: var(--cd-ink);
	border-bottom-color: var(--cd-ink);
}

.cd-ask-item__missing {
	margin: 0 0 12px;
	font: 600 12.5px/1.5 var(--cd-sans);
	color: var(--cd-error);
}

/* The picked piece, drawn above the select in the same shapes the ?item= card
   uses. `hidden` needs saying out loud here: .cd-price and .cd-grade set a
   display of their own, which outranks the browser's rule for the attribute. */
.cd-ask-item__preview {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cd-rule);
}

.cd-ask-item__preview[hidden],
.cd-ask-item__preview .cd-price[hidden],
.cd-ask-item__preview .cd-grade[hidden] {
	display: none;
}

@media (min-width: 900px) {
	.cd-ask-item {
		gap: 16px;
		margin-top: 32px;
		padding: 18px;
		border-radius: var(--cd-r-card);
	}

	.cd-ask-item__preview {
		gap: 16px;
		margin-bottom: 18px;
		padding-bottom: 18px;
	}

	.cd-ask-item__media {
		width: 92px;
		height: 92px;
		border-radius: 9px;
	}

	.cd-ask-item__title {
		margin-top: 6px;
		font-size: 16px;
	}

	.cd-ask-item__meta {
		gap: 9px;
		margin-top: 7px;
	}

	.cd-ask-item__meta .cd-price__amount {
		font-size: 15px;
	}

	.cd-ask-item__meta .cd-grade {
		font-size: 9.5px;
		padding: 3px 6px;
	}
}

/* --- The dark panel --- */

.cd-ask__panel {
	margin-top: 18px;
	/* Full-bleed on mobile, exactly as the design's 390px frame draws it.
	   Safe here because this shortcode owns the .cd-wrap around it. */
	margin-inline: calc(var(--cd-gutter) * -1);
	padding: 22px var(--cd-gutter) 26px;
}

.cd-ask__panel-title {
	font: 800 19px var(--cd-sans);
	letter-spacing: -.02em;
	color: #fff;
}

.cd-ask__grid {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

.cd-form .cd-ask__panel .cd-field,
.cd-form .cd-ask__panel .cd-fieldset {
	margin-top: 12px;
}

@media (min-width: 900px) {
	.cd-ask__panel {
		flex: none;
		width: 480px;
		margin: 0;
		padding: 32px 34px 34px;
		border-radius: var(--cd-r-card);
	}

	.cd-ask__panel-title {
		font-size: 22px;
	}

	.cd-ask__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: 22px;
	}

	.cd-form .cd-ask__panel .cd-field,
	.cd-form .cd-ask__panel .cd-fieldset {
		margin-top: 16px;
	}
}

/* --------------------------------------------------------------------------
   9. Screen 05 — the sell card
   -------------------------------------------------------------------------- */

.cd-form-card {
	padding: 20px;
}

.cd-form-card__title {
	font: 800 18px var(--cd-sans);
	letter-spacing: -.02em;
	color: var(--cd-ink);
}

@media (min-width: 900px) {
	.cd-form-card {
		padding: 32px 34px 34px;
	}

	.cd-form-card__title {
		font-size: 22px;
	}
}

/* The photo field. The native input is deliberately left visible: hiding it
   behind a prettier box costs the one thing that works without JavaScript —
   the browser's own "3 files selected" readout — and a file input reachable
   only by mouse is not a file input. Files can be dropped straight onto it. */
.cd-dropzone__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	border: 2px dashed var(--cd-form-rule);
	border-radius: var(--cd-r-image);
	padding: 18px 14px;
	text-align: center;
}

.cd-dropzone__box:has(.cd-dropzone__input:focus-visible) {
	outline: 3px solid var(--cd-ink);
	outline-offset: 2px;
}

@supports not selector(:has(*)) {
	.cd-dropzone__box:focus-within {
		outline: 3px solid var(--cd-ink);
		outline-offset: 2px;
	}
}

.cd-dropzone__lead {
	font: 600 12.5px var(--cd-sans);
	color: var(--cd-ink);
}

.cd-dropzone__hint {
	font: 400 11px var(--cd-sans);
	color: var(--cd-ink-muted);
}

.cd-dropzone__input {
	max-width: 100%;
	font: 500 11px var(--cd-mono);
	color: var(--cd-ink-body);
}

.cd-dropzone__input::file-selector-button {
	font: 700 11px var(--cd-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cd-ink);
	background: var(--cd-chip);
	border: 1.5px solid var(--cd-form-rule);
	border-radius: var(--cd-r-input);
	padding: 10px 13px;
	margin-right: 10px;
	cursor: pointer;
}

.cd-dropzone__input::file-selector-button:hover {
	background: var(--cd-accent);
	border-color: var(--cd-ink);
}

.cd-dropzone.is-invalid .cd-dropzone__box {
	border-color: var(--cd-error);
}

@media (min-width: 900px) {
	.cd-dropzone__box {
		padding: 22px 18px;
	}

	.cd-dropzone__lead {
		font-size: 13.5px;
	}

	.cd-dropzone__hint {
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------
   10. Screen 06 — the contact form

   The booking panel itself (title, lede, the mono legal line) belongs to the
   pages lane in content.css; this shortcode contributes the fields only, so the
   two do not both try to own the same box.
   -------------------------------------------------------------------------- */

.cd-contact__panel .cd-form .cd-field:first-of-type,
.cd-contact-fields > .cd-field:first-of-type {
	margin-top: 0;
}

:is(.cd-panel-dark, .cd-contact__panel) .cd-textarea.cd-contact-when {
	min-height: 76px;
}

@media (min-width: 900px) {
	:is(.cd-panel-dark, .cd-contact__panel) .cd-textarea.cd-contact-when {
		min-height: 84px;
	}
}

/* --------------------------------------------------------------------------
   Upload tally

   A live running total under the photo field, written by site.js. It is the
   only place the visitor learns how close they are to the limit before the
   upload starts.
   -------------------------------------------------------------------------- */

.cd-dropzone__tally {
	margin: 6px 0 0;
	font: 500 11.5px/1.45 var(--cd-mono);
	font-variant-numeric: tabular-nums;
	color: var(--cd-ink-soft);
}

.cd-dropzone__tally:empty {
	display: none;
}

.cd-dropzone__tally.is-error {
	color: #b3261e;
	font-weight: 600;
}