/**
 * SNYCF — Search, informational pages and 404
 *
 * Loads only on those views. Everything here arranges components that already
 * exist; nothing re-implements a card, a row, a button or a form control.
 *
 * @package snycf
 */

/* =====================================================================
 * Search
 * ================================================================== */

.snycf-search-header__title,
.snycf-page-header__title,
.snycf-404__title {
	margin: var( --snycf-space-sm ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: var( --snycf-size-h1 );
	line-height: var( --snycf-leading-tight );
	letter-spacing: var( --snycf-tracking-display );
	text-transform: none;

	/* A long policy title has to wrap, never widen the page. */
	min-width: 0;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.snycf-search-header .snycf-search {
	margin-top: var( --snycf-space-lg );
}

.snycf-search-header__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --snycf-space-2xs ) var( --snycf-space-sm );
	margin: var( --snycf-space-lg ) 0 0;
	padding-bottom: var( --snycf-space-sm );
	border-bottom: var( --snycf-rule-top );
	border-bottom-color: var( --snycf-border-strong );
	min-width: 0;
}

.snycf-search-header__label {
	flex: none;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

/*
 * The searched phrase is reader-supplied and can be anything at all, so it
 * wraps and breaks rather than deciding how wide this page is.
 */
.snycf-search-header__term {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.375rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.snycf-search-header__count {
	flex: none;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --snycf-accent );
	white-space: nowrap;
}

.snycf-search-filters .snycf-filters {
	border-top: 0;
	padding-top: 0;
}

.snycf-search-results__items > * + * {
	border-top: var( --snycf-divider );
}

.snycf-search-results__items .snycf-row,
.snycf-search-results__items .snycf-record-row,
.snycf-search-results__items .snycf-video-card--row {
	padding-block: var( --snycf-space-md );
	border-bottom: 0;
}

/* Empty state */

.snycf-search-empty {
	border: var( --snycf-border-width-hair ) solid var( --snycf-border );
	padding: var( --snycf-space-2xl ) var( --snycf-space-lg );
	text-align: center;
}

.snycf-search-empty__eyebrow {
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.75rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --snycf-accent );
}

.snycf-search-empty__title {
	margin: var( --snycf-space-xs ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.5rem;
	line-height: var( --snycf-leading-snug );
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.snycf-search-empty__hints,
.snycf-search-empty__more {
	margin: var( --snycf-space-sm ) auto 0;
	max-width: 30rem;
	font-size: 0.875rem;
	line-height: var( --snycf-leading-prose );
	color: var( --snycf-text-meta );
}

.snycf-search-empty__actions {
	margin-top: var( --snycf-space-lg );
}

.snycf-search-empty .snycf-boroughs,
.snycf-404__boroughs .snycf-boroughs {
	justify-content: center;
	margin-top: var( --snycf-space-lg );
}

.snycf-search-empty__more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --snycf-space-md );
}

.snycf-search-empty__more a {
	display: inline-flex;
	align-items: center;
	min-height: var( --snycf-target-min );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* =====================================================================
 * Informational pages
 * ================================================================== */

.snycf-page-header {
	padding-top: var( --snycf-space-2xl );
}

.snycf-page-header__deck {
	margin: var( --snycf-space-md ) 0 0;
	max-width: 52ch;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-deck );
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

.snycf-page-header__meta {
	margin: var( --snycf-space-lg ) 0 0;
	padding-block: var( --snycf-space-xs );
	border-top: var( --snycf-border-width-hair ) solid var( --snycf-ink );
	border-bottom: var( --snycf-divider );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-meta );
	font-weight: var( --snycf-weight-semibold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-page__body {
	padding-top: var( --snycf-space-xl );
}

/*
 * Contents on the left, as in the approved designs. Single column until there
 * is genuinely room for two, so the list never becomes a narrow strip.
 */
.snycf-page-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-xl );
}

@media ( min-width: 60rem ) {

	.snycf-page-layout {
		grid-template-columns: 15rem minmax( 0, 1fr );
		gap: var( --snycf-space-4xl );
		align-items: start;
	}

	.snycf-page-layout--solo {
		grid-template-columns: minmax( 0, 1fr );
	}

	.snycf-page-aside {
		position: sticky;
		top: var( --snycf-space-lg );
	}
}

.snycf-page-main {
	min-width: 0;
}

/* =====================================================================
 * About
 * ================================================================== */

.snycf-about__lede > p {
	max-width: 46ch;
	font-size: var( --snycf-size-deck );
	line-height: var( --snycf-leading-deck );
}

.snycf-about__mission-body > p,
.snycf-about__panel > p {
	margin: var( --snycf-space-sm ) 0 0;
	max-width: 64ch;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-prose-sm );
	line-height: var( --snycf-leading-prose );
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

.snycf-about__coverage-list {
	list-style: none;
	margin: var( --snycf-space-md ) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 17rem, 100% ), 1fr ) );
	gap: var( --snycf-space-lg ) var( --snycf-space-xl );
}

.snycf-about__coverage-item {
	border-top: var( --snycf-divider );
	padding-top: var( --snycf-space-xs );
	min-width: 0;
}

.snycf-about__coverage-name {
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.78125rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.1em;
	text-transform: uppercase;

	/* The longest approved issue name runs to 60 characters. */
	min-width: 0;
	overflow-wrap: break-word;
}

.snycf-about__coverage-body {
	margin: var( --snycf-space-3xs ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 0.90625rem;
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

.snycf-about__records {
	background-color: var( --snycf-surface-inverse );
	color: var( --snycf-text-on-inverse );
}

.snycf-about__records-title {
	margin: var( --snycf-space-xs ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: var( --snycf-size-h2 );
	line-height: var( --snycf-leading-headline );
	text-transform: none;
	color: var( --snycf-text-on-inverse );
	text-wrap: pretty;
}

.snycf-about__records-body {
	margin: var( --snycf-space-md ) 0 var( --snycf-space-lg );
	max-width: 46ch;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-prose-sm );
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose-on-inverse );
}

.snycf-about__records .snycf-eyebrow {
	color: var( --snycf-accent-on-ink );
}

.snycf-about__principles-list {
	list-style: none;
	margin: var( --snycf-space-md ) 0 0;
	counter-reset: snycf-principle;
}

/* Beats the ol[class] padding rule in base.css, which is one level stronger. */
ol.snycf-about__principles-list {
	padding-inline-start: 0;
}

.snycf-about__principle {
	counter-increment: snycf-principle;
	display: grid;
	grid-template-columns: 2.5rem minmax( 0, 1fr );
	gap: var( --snycf-space-sm );
	padding-block: var( --snycf-space-md );
	border-top: var( --snycf-divider );
}

/*
 * The numbering is real information — these are the steps in order — so it is
 * generated from the list rather than typed into each entry.
 */
.snycf-about__principle::before {
	content: counter( snycf-principle );
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 1.75rem;
	line-height: 1;
	color: var( --snycf-accent );
}

.snycf-about__principle-name {
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.8125rem;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.snycf-about__principle-body {
	grid-column: 2;
	margin: var( --snycf-space-3xs ) 0 0;
	max-width: 62ch;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 0.96875rem;
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

.snycf-about__closing-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 20rem, 100% ), 1fr ) );
	gap: var( --snycf-space-xl ) var( --snycf-space-3xl );
}

/* =====================================================================
 * Contact
 * ================================================================== */

.snycf-contact__email {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --snycf-space-2xs ) var( --snycf-space-sm );
	margin: var( --snycf-space-lg ) 0 0;
	min-width: 0;
}

.snycf-contact__email-label {
	flex: none;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-contact__email a {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 1.125rem;
	font-weight: var( --snycf-weight-bold );
	text-decoration: underline;
	text-underline-offset: 2px;

	/* An address is unbreakable text; let it break rather than overflow. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.snycf-contact__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-xl );
}

@media ( min-width: 60rem ) {

	.snycf-contact__layout {
		grid-template-columns: minmax( 0, 1fr ) 17rem;
		gap: var( --snycf-space-4xl );
		align-items: start;
	}
}

.snycf-contact__main {
	min-width: 0;
}

.snycf-contact-form {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-md );
	min-width: 0;
}

.snycf-contact-form__row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-md );
}

@media ( min-width: 34rem ) {

	.snycf-contact-form__row {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.snycf-field {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-3xs );
	margin: 0;
	min-width: 0;
}

/* Always visible, never a placeholder standing in for a label. */
.snycf-field__label {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-field input,
.snycf-field select,
.snycf-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 3rem;
	padding: var( --snycf-space-2xs ) var( --snycf-space-xs );
	border: var( --snycf-border-width-hair ) solid var( --snycf-border-soft );
	background-color: var( --snycf-surface );
	color: var( --snycf-text );
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 1rem;
}

.snycf-field textarea {
	min-height: 10rem;
	resize: vertical;
}

.snycf-field [ aria-invalid='true' ] {
	border-color: var( --snycf-accent );
	border-width: var( --snycf-border-width-button );
}

.snycf-field__error {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.8125rem;
	font-weight: var( --snycf-weight-bold );
	color: var( --snycf-accent );
}

.snycf-contact-form__submit {
	align-self: flex-start;
	min-height: 3.25rem;
	padding-inline: var( --snycf-space-xl );
}

.snycf-contact-form__notice {
	margin: 0;
	max-width: 60ch;
	font-size: 0.8125rem;
	line-height: var( --snycf-leading-prose );
	color: var( --snycf-text-meta );
}

/* The honeypot: hidden from sight without being hidden from submission. */
.snycf-contact-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.snycf-contact__status {
	margin-bottom: var( --snycf-space-lg );
	padding: var( --snycf-space-md );
	border-inline-start: var( --snycf-border-width-rule ) solid var( --snycf-accent );
	background-color: var( --snycf-surface-alt );
}

.snycf-contact__status--sent {
	border-inline-start-color: var( --snycf-ink );
}

.snycf-contact__status-title {
	margin: 0 0 var( --snycf-space-3xs );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.8125rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: var( --snycf-tracking-label );
	text-transform: uppercase;
}

.snycf-contact__status p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: var( --snycf-leading-deck );
}

.snycf-contact__status-list {
	margin: var( --snycf-space-2xs ) 0 0;
	padding-inline-start: var( --snycf-space-md );
	font-size: 0.9375rem;
}

.snycf-contact__status:focus-visible {
	outline: 2px solid var( --snycf-focus );
	outline-offset: 3px;
}

.snycf-contact__aside {
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-xl );
	min-width: 0;
}

.snycf-contact__note p {
	margin: var( --snycf-space-2xs ) 0 var( --snycf-space-xs );
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 0.90625rem;
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
}

/* =====================================================================
 * 404
 * ================================================================== */

.snycf-404 {
	text-align: center;
}

/*
 * Large, not absurd. It clamps well below the display scale so a phone gets a
 * strong mark rather than a number filling the screen.
 */
.snycf-404__code {
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-weight: var( --snycf-weight-black );
	font-size: clamp( 3.5rem, 2rem + 7vw, 6rem );
	line-height: 1;
	letter-spacing: -0.02em;
}

.snycf-404__code span {
	color: var( --snycf-accent );
}

.snycf-404__eyebrow {
	margin: var( --snycf-space-sm ) 0 0;
}

.snycf-404__title {
	max-width: 20ch;
	margin-inline: auto;
}

.snycf-404__body {
	margin: var( --snycf-space-md ) auto 0;
	max-width: 44ch;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-prose-sm );
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
}

.snycf-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --snycf-space-xs );
	margin-top: var( --snycf-space-lg );
}

.snycf-404 .snycf-search {
	margin: var( --snycf-space-lg ) auto 0;
	max-width: 34rem;
}

.snycf-404__boroughs {
	margin-top: var( --snycf-space-lg );
}

.snycf-404__boroughs-label {
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}