/*
 * Floating surfaces: Get updates dropdown, email popover, search dialog,
 * mobile menu panel, Read next, cookie notice. Compact-layout positions
 * are in compact.css.
 */

.popover {
	background: var(--popover-bg);
	border: 1px solid var(--popover-border);
	border-radius: 14px;
	box-shadow: var(--popover-shadow);
	color: var(--text);
}

/* Get updates dropdown: 290px, right-aligned under the pill. */
.updates__menu,
.updates-popover {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 40;
	animation: brookshire-pop .16s var(--ease);
}
.updates__menu { width: 290px; padding: 8px; }

.updates__item {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text);
	text-align: left;
	transition: background-color var(--speed);
}
.updates__item .icon { width: 20px; height: 20px; flex: none; color: var(--accent); }
.updates__item b { display: block; font-size: 15px; }
.updates__item small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.updates__item:focus-visible { outline-offset: -2px; background: var(--hover-tint); }

/* Email and RSS popovers: 340px. */
.updates-popover { width: 340px; padding: 20px; }

/* Follow by RSS. */
.rss-panel__copy { display: flex; gap: 8px; }
.rss-panel .rss-panel__url {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 10px 12px;
	font-size: 14px;
	text-overflow: ellipsis;
}
.rss-panel__button { flex: none; padding: 10px 18px; }
.rss-panel .subscribe__message:not(:empty) { margin-top: 8px; }
.rss-panel__about { margin-top: 12px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }

.subscribe__title {
	margin: 0 0 6px;
	font-size: 17px;
	letter-spacing: -.01em;
}
.subscribe__lede { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.subscribe__lede b { color: var(--text); }
.subscribe .field { margin-bottom: 12px; padding: 12px 14px; font-size: 15px; }
.subscribe .button { padding: 12px; }
.subscribe__message:not(:empty) { margin-top: 10px; color: var(--text-muted); font-size: 14px; }
.subscribe__message.is-error { color: var(--text); }
.subscribe__message.is-error::before { content: "⚠ "; color: var(--accent); }
.subscribe__done:focus { outline: none; }
/* Honeypot: off-screen, never shown. */
.subscribe__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@keyframes brookshire-pop {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

/* Search dialog (desktop): 640px, 110px from the top, over a dimmed page. */
.search-dialog {
	width: min(640px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 160px);
	margin: calc(110px + var(--admin-bar)) auto auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--popover-border);
	border-radius: 18px;
	background: var(--popover-bg);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
	color: var(--text);
}
.search-dialog[open] { display: flex; flex-direction: column; animation: brookshire-pop .16s var(--ease); }
.search-dialog::backdrop { background: var(--scrim); }

.search-dialog__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--hairline);
}
.search-dialog__field { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; }
.search-dialog__field .icon { width: 22px; height: 22px; flex: none; color: var(--accent); }
.search-dialog__field input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text);
	font-size: 20px;
}
.search-dialog__field input::placeholder { color: var(--text-muted); }
.search-dialog__field input::-webkit-search-cancel-button { display: none; }
.search-dialog__esc {
	padding: 3px 7px;
	border: 1px solid var(--control-border);
	border-radius: 6px;
	color: var(--text-muted);
	font: 700 12px/1.2 var(--font);
}
.search-dialog__clear,
.search-dialog__cancel { display: none; }

.search-dialog__body { overflow-y: auto; }
.search-dialog__count:empty { display: none; }
.search-dialog__count { padding: 14px 22px 0; color: var(--text-muted); }
.search-dialog__results { list-style: none; }
.search-result {
	display: block;
	padding: 16px 22px;
	border-bottom: 1px solid var(--hairline);
}
.search-result.is-active { background: var(--hover-tint); }
.search-result:focus-visible { outline-offset: -2px; }
.search-result__thumb { display: none; }
.search-result__date { display: block; margin-bottom: 4px; color: var(--date); }
.search-result__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.search-result__excerpt { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.search-dialog__note { padding: 18px 22px; color: var(--text-muted); font-size: 15px; }

.search-dialog__foot {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 22px;
	color: var(--text-muted);
	font-size: 13px;
}
.search-dialog__all { color: var(--accent); font-weight: 600; }

/* Mobile menu panel: only reachable in the compact layout. */
.mobile-menu {
	position: fixed;
	inset: var(--menu-top, 64px) 0 0;
	z-index: 25;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--bg);
	animation: brookshire-slide-down .22s var(--ease);
}
@keyframes brookshire-slide-down {
	from { opacity: 0; transform: translateY(-12px); }
	to { opacity: 1; transform: none; }
}

/* Read next: bottom-right, 360px. */
.read-next {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 20;
	display: grid;
	grid-template-columns: 64px 1fr;
	align-items: center;
	gap: 14px;
	width: 360px;
	padding: 16px 44px 16px 16px;
	box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .45);
	transform: translateY(calc(100% + 40px));
	opacity: 0;
	transition: transform .32s var(--ease), opacity .32s var(--ease);
}
.read-next.is-visible { transform: none; opacity: 1; }
.read-next:not(:has(.read-next__thumb)) { grid-template-columns: 1fr; }
.read-next__thumb { width: 64px; height: 64px; overflow: hidden; border-radius: var(--thumb-radius); background: var(--placeholder); }
.read-next__thumb img { width: 100%; height: 100%; object-fit: cover; }
.read-next__label { display: block; color: var(--accent); font-size: 11px; letter-spacing: .14em; }
.read-next__title { display: block; margin-top: 4px; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.read-next__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text-muted);
}
.read-next__close .icon { width: 18px; height: 18px; }

/* Cookie notice: bottom-left, above the footer bar. */
.cookie-notice {
	position: fixed;
	left: 24px;
	bottom: calc(var(--footer-bar-height) + 24px);
	z-index: 35;
	width: 380px;
	padding: 18px 20px;
	box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .45);
}
.cookie-notice p { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.cookie-notice__actions { display: flex; align-items: center; gap: 18px; }
.cookie-notice__link { color: var(--accent); font-size: 14px; font-weight: 600; }

@media (hover: hover) {
	.updates__item:hover { background: var(--hover-tint); }
	.search-result:hover { background: var(--hover-tint); }
	.search-result:hover .search-result__title,
	.read-next__title:hover { color: var(--accent); }
	.read-next__close:hover { color: var(--accent); }
	.search-dialog__all:hover,
	.cookie-notice__link:hover { text-decoration: underline; text-underline-offset: 4px; }
}