/*
 * WHAT: All dwsearch styling — rail box, the /suche/ page, the shared result
 *       row, and the in-page overlay (full-screen on mobile).
 * WHY:  Composes on the dwtheme token kernel (--bg/--ink/--rule/--rubric/--read)
 *       so it follows the light/sand/dark lightswitch. Boxes are SQUARE
 *       (border-radius:0) per DW — rounding is for buttons only. Inputs use
 *       >=16px so iOS does not zoom on focus.
 */

/* ===== Rail search box (sits under the Essays years) ===== */
.dwsearch-rail { margin: 6px 2px 16px; } /* a little room before the INFO group */
.dwsearch-rail__input {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 10px;
	font-size: 16px;
	color: var(--ink, #1a1a1a);
	background: var(--bg-2, #f3f3f3);
	border: 1px solid var(--rule, #ccc);
	border-radius: 0;
}
.dwsearch-rail__input:focus { outline: none; border-color: var(--rubric, #cc0000); }
.dwsearch-rail__input::placeholder { color: var(--ink-soft, #888); }

/* ===== Shared result row (page + overlay) — thumbnail left, text right ===== */
.dwsearch-hit {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 0;
	border-top: 1px solid var(--rule, #e5e5e5);
	text-decoration: none;
	color: inherit;
}
.dwsearch-hit:last-child { border-bottom: 1px solid var(--rule, #e5e5e5); }
.dwsearch-hit:hover .dwsearch-hit__title { color: var(--rubric, #cc0000); }
/* Fixed 4:3 thumbnail — uniform + stable (a 4:3 box that also matches each
   variable row height can't be done without a layout feedback loop). */
.dwsearch-hit__thumb {
	flex: none;
	width: 116px;
	height: 87px;                 /* 4:3 */
	object-fit: cover;
	background: var(--bg-2, #eee); /* square per DW — no border-radius */
}
.dwsearch-hit__body { flex: 1; min-width: 0; } /* min-width:0 lets long titles wrap, not overflow */
/* Header line: title (left) + meta = [▶ Video · ]date, flush top-right. */
.dwsearch-hit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dwsearch-hit__title { flex: 1; min-width: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dwsearch-hit__meta { flex: none; display: inline-flex; align-items: center; white-space: nowrap; line-height: 1.3; font-size: 0.8125rem; color: var(--rubric, #cc0000); }
/* Red, 4:3 YouTube-style play badge before the date. */
.dwsearch-hit__video { display: inline-flex; margin-right: 6px; }
.dwsearch-hit__video svg { display: block; width: 20px; height: 15px; }
.dwsearch-hit__excerpt { margin-top: 4px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft, #555); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Friendly prompt shown while the query is empty. */
.dwsearch-empty { margin: 0; padding: 20px 2px; color: var(--ink-soft, #777); font-size: 0.95rem; }

/* ===== /suche/ page ===== */
.dwsearch { max-width: var(--read, 720px); margin-inline: auto; padding: 42px 20px 64px; }
.dwsearch__title { margin: 0 0 16px; }
.dwsearch__form { margin: 0 0 8px; }
.dwsearch__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 1.0625rem;
	color: var(--ink, #1a1a1a);
	background: var(--bg-2, #f3f3f3);
	border: 1px solid var(--rule, #ccc);
	border-radius: 0;
}
.dwsearch__input:focus { outline: none; border-color: var(--rubric, #cc0000); }
.dwsearch__status { margin: 0 0 18px; color: var(--ink-soft, #666); font-size: 0.9375rem; }
.dwsearch__results { display: flex; flex-direction: column; }
.dwsearch__noscript { color: var(--ink-soft, #555); }

/* ===== Overlay (every page; full-screen on mobile) ===== */
/* Drop the browser's native search-clear "×" so the overlay shows only our own
 * close button (two ×'s side by side looked odd). */
.dwsearch__input::-webkit-search-cancel-button,
.dwsearch-rail__input::-webkit-search-cancel-button,
.dwsearch-overlay__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

html.dwsearch-locked, html.dwsearch-locked body { overflow: hidden; }

.dwsearch-overlay { position: fixed; inset: 0; z-index: 100000; }
.dwsearch-overlay[hidden] { display: none; }
.dwsearch-overlay__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }

.dwsearch-overlay__panel {
	position: absolute;
	left: 50%;
	top: 8vh;
	transform: translateX(-50%);
	width: min(680px, 94vw);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	background: var(--bg, #fff);
	border: 1px solid var(--rule, #ccc);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}
.dwsearch-overlay__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-bottom: 1px solid var(--rule, #eee);
}
.dwsearch-overlay__input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 11px 12px;
	font-size: 1.0625rem; /* 17px — also keeps iOS from zooming on focus */
	color: var(--ink, #1a1a1a);
	background: var(--bg-2, #f3f3f3);
	border: 1px solid var(--rule, #ccc);
	border-radius: 0;
}
.dwsearch-overlay__input:focus { outline: none; border-color: var(--rubric, #cc0000); }
.dwsearch-overlay__close {
	flex: none;
	width: 38px;
	height: 38px;
	font-size: 24px;
	line-height: 1;
	color: var(--ink-soft, #666);
	background: transparent;
	border: 0;
	cursor: pointer;
}
.dwsearch-overlay__close:hover { color: var(--rubric, #cc0000); }
.dwsearch-overlay__status { margin: 0; padding: 8px 12px 0; color: var(--ink-soft, #666); font-size: 0.9375rem; }
.dwsearch-overlay__results { overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 12px; }

/* Phones: the overlay fills the screen (no cramped centred card). */
@media (max-width: 600px) {
	.dwsearch-overlay__panel {
		left: 0;
		top: 0;
		transform: none;
		width: 100%;
		max-height: none;
		height: 100vh;
		height: 100dvh; /* tracks the dynamic mobile browser chrome */
		border: 0;
	}
}