/*
 * BuddyNext - Search CSS (v2)
 *
 * Search-results surface - composes v2 primitives (.bn-input, .bn-tabs,
 * .bn-tab, .bn-card, .bn-badge, .bn-avatar, .bn-kbd, .bn-btn) and layers
 * surface-specific structure on top. All values read from --bn-* tokens
 * defined in bn-base.css - no hardcoded px / hex / font-family in this file.
 *
 * Mirrors `docs/v2 Plans/v2/search-results.html`.
 */

/* ── Visually hidden helper (accessibility) ─────────────────────────────── */

.bn-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Search hero ────────────────────────────────────────────────────────── */

.bn-search-hero {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
	margin-bottom: var(--bn-s5);
}

.bn-search-hero__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
}

/* As-you-type suggestions overlay (typeahead). */
.bn-search-suggest {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + var(--bn-s2));
	z-index: 40;
	max-height: 60vh;
	overflow-y: auto;
	padding: var(--bn-s2);
	background: var(--bn-surface, var(--bn-canvas));
	border: 1px solid var(--bn-line, var(--bn-border));
	border-radius: var(--bn-r-md);
	box-shadow: var(--bn-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.bn-search-suggest[hidden] {
	display: none;
}

.bn-search-suggest__group {
	padding: var(--bn-s2) var(--bn-s2) 2px;
	font-size: var(--bn-text-xs);
	font-weight: 600;
	text-transform: capitalize;
	color: var(--bn-ink-2);
}

.bn-search-suggest__item {
	display: block;
	padding: var(--bn-s2) var(--bn-s2);
	border-radius: var(--bn-r-sm);
	color: var(--bn-ink-1, var(--bn-ink));
	text-decoration: none;
}

.bn-search-suggest__item:hover,
.bn-search-suggest__item:focus {
	background: color-mix(in oklch, var(--bn-accent) 12%, transparent);
	color: var(--bn-ink-1, var(--bn-ink));
}

.bn-search-hero__icon {
	position: absolute;
	inset-inline-start: var(--bn-s3);
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--bn-ink-3);
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bn-search-hero__icon svg {
	width: 18px;
	height: 18px;
}

.bn-search-hero__input.bn-input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding-inline-start: calc(var(--bn-s3) + 18px + var(--bn-s2));
	padding-inline-end: var(--bn-s3);
	font-size: var(--bn-text-md);
	font-weight: var(--bn-fw-medium);
}

.bn-search-hero__input.bn-input:focus-visible {
	border-color: var(--bn-accent);
	box-shadow: var(--bn-ring);
	outline: none;
}

.bn-search-hero__submit.bn-btn {
	height: 44px;
	flex-shrink: 0;
}

.bn-search-hero__hint {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.bn-search-hero__hint strong {
	color: var(--bn-ink);
	font-weight: var(--bn-fw-semibold);
}

/* Recent-searches chip strip — appears below the search hero when
   the localStorage list has entries. Each chip is an anchor that
   re-runs the prior query. "Clear" wipes the list. */
.bn-search-recent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-block-start: 8px;
	font-size: var(--bn-text-xs);
}
.bn-search-recent__title {
	color: var(--bn-ink-3);
	margin-inline-end: 2px;
}
.bn-search-recent__chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--bn-sunken, color-mix(in oklab, var(--bn-accent) 6%, transparent));
	color: var(--bn-accent);
	border-radius: var(--bn-r-full, 999px);
	text-decoration: none;
	transition: background var(--bn-dur-fast, 120ms) var(--bn-ease, ease);
}
.bn-search-recent__chip:hover {
	background: color-mix(in oklab, var(--bn-accent) 14%, transparent);
}
.bn-search-recent__clear {
	background: transparent;
	border: 0;
	color: var(--bn-ink-3);
	font-size: var(--bn-text-xs);
	cursor: pointer;
	margin-inline-start: auto;
	padding: 3px 6px;
	border-radius: var(--bn-r-sm, 4px);
}
.bn-search-recent__clear:hover {
	background: var(--bn-sunken);
	color: var(--bn-ink);
}

/* ── Tab strip - uses .bn-tabs primitive, adds surface-specific scroll ──── */

.bn-search-tabs {
	margin-bottom: var(--bn-s5);
	/* overflow-x + hidden scrollbar inherited from base .bn-tabs */
	-webkit-overflow-scrolling: touch;
}

/* ── Two-column layout (results + aside filters) ───────────────────────── */

.bn-search-layout {
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: var(--bn-s5);
	align-items: start;
}

.bn-search-results {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bn-s6);
}

/* ── Section header (Members / Posts / Spaces) ─────────────────────────── */

.bn-search-section {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
}

.bn-search-section__header {
	display: flex;
	align-items: baseline;
	gap: var(--bn-s2);
}

.bn-search-section__title {
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-xs);
	font-weight: var(--bn-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--bn-ls-wider);
	color: var(--bn-ink-2);
	margin: 0;
}

.bn-search-section__count {
	font-family: var(--bn-font-mono);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}

.bn-search-section__seeall {
	margin-inline-start: auto;
	font-size: var(--bn-text-xs);
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-accent);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.bn-search-section__seeall:hover,
.bn-search-section__seeall:focus-visible {
	text-decoration: underline;
	outline: none;
}

.bn-search-section__seeall svg {
	width: 12px;
	height: 12px;
}

/* ── Result list - list of cards inside a section ───────────────────────── */

.bn-search-results__list {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
}

/* ── Result row (consumes .bn-card[data-interactive]) ──────────────────── */

.bn-search-row {
	padding: var(--bn-s4);
	display: flex;
	gap: var(--bn-s3);
	align-items: center;
}

.bn-search-row__link {
	display: flex;
	gap: var(--bn-s3);
	align-items: center;
	text-decoration: none;
	color: inherit;
	flex: 1;
	min-width: 0;
}

.bn-search-row__link:focus-visible {
	outline: none;
	box-shadow: var(--bn-ring);
	border-radius: var(--bn-r-md);
}

.bn-search-row__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.bn-search-row__title {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s2);
	flex-wrap: wrap;
	font-size: var(--bn-text-base);
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-ink);
	line-height: var(--bn-leading-snug);
}

.bn-search-row__meta {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
	line-height: var(--bn-leading-normal);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Post row uses head + text + stats stacked layout. */

.bn-search-row--post {
	flex-direction: column;
	align-items: stretch;
}

.bn-search-row__head {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
	flex-wrap: wrap;
}

.bn-search-row__author {
	color: var(--bn-ink-2);
	font-weight: var(--bn-fw-semibold);
}

.bn-search-row__time {
	color: var(--bn-ink-3);
}

.bn-search-row__text {
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	line-height: var(--bn-leading-body);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bn-search-row__text mark {
	background: var(--bn-warn-bg);
	color: var(--bn-ink);
	font-weight: var(--bn-fw-semibold);
	padding: 0 2px;
	border-radius: var(--bn-r-sm);
}

.bn-search-row__stats {
	display: flex;
	gap: var(--bn-s3);
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}

.bn-search-row__stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.bn-search-row__stat svg {
	width: 12px;
	height: 12px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.bn-search-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bn-s3);
	padding: var(--bn-s12) var(--bn-s6);
	text-align: center;
}

.bn-search-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--bn-r-full);
	background: var(--bn-sunken);
	color: var(--bn-ink-3);
}

.bn-search-empty__icon svg {
	width: 28px;
	height: 28px;
}

.bn-search-empty__title {
	margin: 0;
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-lg);
	font-weight: var(--bn-fw-semibold);
	color: var(--bn-ink);
}

.bn-search-empty__body {
	margin: 0;
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-3);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ── Aside (date / sort / related filters) ─────────────────────────────── */

.bn-search-aside {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s3);
	min-width: 0;
}

.bn-search-aside__card {
	padding: var(--bn-s4);
	display: flex;
	flex-direction: column;
	gap: var(--bn-s2);
}

.bn-search-aside__title {
	margin: 0 0 var(--bn-s1);
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-xs);
	font-weight: var(--bn-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--bn-ls-wide);
	color: var(--bn-ink-3);
}

.bn-search-aside__opt {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
	font-size: var(--bn-text-sm);
	color: var(--bn-ink-2);
	cursor: pointer;
	padding: 4px 0;
	min-height: 28px;
}

.bn-search-aside__opt:hover {
	color: var(--bn-ink);
}

.bn-search-aside__opt input {
	accent-color: var(--bn-accent);
	width: 15px;
	height: 15px;
	cursor: pointer;
	flex-shrink: 0;
}

.bn-search-aside__opt input:focus-visible {
	outline: none;
	box-shadow: var(--bn-ring);
	border-radius: var(--bn-r-full);
}

.bn-search-aside__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-s2);
}

.bn-search-aside__tag {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	cursor: pointer;
}

.bn-search-aside__tag svg {
	width: 10px;
	height: 10px;
}

/* ── Responsive - 1280 / 768 / 390 ──────────────────────────────────────── */

@media (max-width: 1024px) {
	.bn-search-layout {
		grid-template-columns: 1fr;
	}

	.bn-search-aside {
		order: -1;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.bn-search-aside__card {
		flex: 1 1 240px;
		min-width: 0;
	}
}

@media (max-width: 640px) {
	.bn-search-hero__field {
		flex-direction: column;
		align-items: stretch;
	}

	.bn-search-hero__icon {
		top: 22px;
	}

	.bn-search-hero__input.bn-input {
		width: 100%;
	}

	.bn-search-hero__submit.bn-btn {
		width: 100%;
	}

	.bn-search-row {
		padding: var(--bn-s3);
	}

	.bn-search-aside {
		flex-direction: column;
	}
}