/**
 * "Tell us what's missing".
 *
 * One block, used standalone via the shortcode and injected into the
 * search page's empty state. Tokens only (rule 2.1), built for 402px
 * first (rule 2.7).
 */

.ph-sub {
	border: 1.5px dashed var(--ph-color-line);
	border-radius: var(--ph-radius-lg);
	background: var(--ph-color-surface);
	padding: var(--ph-space-5);
	margin: var(--ph-space-5) 0;
}

/* Inline in the search results grid: spans the full width of the grid
   rather than sitting as one card-width column among the results. */
.ph-sub--inline { grid-column: 1 / -1; }

.ph-sub__h {
	margin: 0 0 var(--ph-space-1);
	font-size: var(--ph-text-h3);
	font-weight: 800;
	color: var(--ph-color-ink);
}

.ph-sub__sub {
	margin: 0 0 var(--ph-space-4);
	font-size: var(--ph-text-small);
	color: var(--ph-color-ink-soft);
}

/* ── Kind chips: reuse the shared chip component's look, at the small
   size, rather than inventing a fourth chip style (rule 2.2). ── */
.ph-sub__kinds {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ph-space-2);
	margin-bottom: var(--ph-space-4);
}

.ph-sub__kind {
	min-height: 36px;
	padding: 0 var(--ph-space-3);
	border: 1.5px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	background: var(--ph-color-surface);
	color: var(--ph-color-ink-soft);
	font-size: var(--ph-text-label);
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ph-sub__kind:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-sub__kind:focus-visible { outline: 2px solid var(--ph-color-primary); outline-offset: 2px; }
.ph-sub__kind.is-on {
	background: var(--ph-color-primary);
	border-color: var(--ph-color-primary);
	color: #fff;
}

/* ── Fields ── */
.ph-sub__label {
	display: block;
	margin-bottom: var(--ph-space-3);
	font-size: var(--ph-text-label);
	font-weight: 700;
	color: var(--ph-color-ink);
}

.ph-sub__ta,
.ph-sub__input {
	display: block;
	width: 100%;
	margin-top: var(--ph-space-1);
	padding: var(--ph-space-3);
	border: 1.5px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	background: var(--ph-color-surface);
	color: var(--ph-color-ink);
	font-family: inherit;
	font-size: var(--ph-text-body);
	font-weight: 400;
	resize: vertical;
}
.ph-sub__input { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.ph-sub__ta:focus,
.ph-sub__input:focus {
	outline: none;
	border-color: var(--ph-color-primary);
	box-shadow: 0 0 0 3px rgba(232,86,138,0.18);
}

/* ── Send ── */
.ph-sub__send {
	min-height: 44px;
	padding: 0 var(--ph-space-5);
	border: none;
	border-radius: var(--ph-radius-pill);
	background: var(--ph-color-primary);
	color: #fff;
	font-family: inherit;
	font-size: var(--ph-text-small);
	font-weight: 800;
	cursor: pointer;
}
.ph-sub__send:hover { filter: brightness(0.93); }
.ph-sub__send:disabled { opacity: 0.55; cursor: not-allowed; }

.ph-sub__msg {
	margin: var(--ph-space-2) 0 0;
	font-size: var(--ph-text-label);
	color: var(--ph-color-ink-soft);
}
.ph-sub__msg.is-error { color: #c62828; }

/* The whole form is replaced by this on success, so a used form never
   sits there inviting a duplicate report. */
.ph-sub__done {
	margin: 0;
	font-size: var(--ph-text-small);
	font-weight: 700;
	color: var(--ph-color-ink);
}

.ph-sub--compact { padding: var(--ph-space-4); }

@media (min-width: 783px) {
	.ph-sub { padding: var(--ph-space-6); }
	/* The two short fields sit side by side once there is room, so the
	   block stays a compact aside rather than a tall column. */
	.ph-sub__send { min-width: 140px; }
}