/* Header search: toggle, panel, live results.
 * Light theme, matching the pop-art header (white surface, ink text, hard shadow).
 */

.cy-search { position: relative; display: flex; align-items: center; }

.cy-search-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0;
	background: transparent; border: 2px solid transparent; border-radius: 12px;
	color: var(--cy-ink-dim, #5a6485); cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cy-search-toggle:hover,
.cy-search-toggle:focus-visible { color: var(--cy-ink, #0b1020); border-color: var(--cy-line, rgba(11,16,32,.1)); outline: none; }
.cy-search-toggle[aria-expanded="true"] { color: var(--cy-ink, #0b1020); border-color: var(--cy-line-strong, rgba(11,16,32,.85)); }

.cy-search-panel {
	position: absolute; top: calc(100% + 12px); right: 0; z-index: 90;
	width: min(430px, calc(100vw - 24px));
	padding: 14px;
	background: var(--cy-paper-2, #fff);
	border: 2px solid var(--cy-line-strong, rgba(11,16,32,.85));
	border-radius: var(--cy-radius, 16px);
	box-shadow: 6px 6px 0 0 var(--cy-line-strong, rgba(11,16,32,.85));
}
.cy-search-panel[hidden] { display: none; }

.cy-search-form { display: flex; gap: 8px; }
.cy-search-input {
	flex: 1 1 auto; min-width: 0;
	padding: 11px 13px;
	font: inherit; font-size: 15px;
	color: var(--cy-ink, #0b1020);
	background: var(--cy-paper, #f6f8fd);
	border: 1px solid var(--cy-line, rgba(11,16,32,.1));
	border-radius: var(--cy-radius-sm, 11px);
	-webkit-appearance: none; appearance: none;
}
.cy-search-input:focus {
	outline: none;
	border-color: var(--cy-cyan-strong, #06b6d4);
	box-shadow: 0 0 0 3px var(--cy-line-cyan, rgba(0,200,240,.35));
}
.cy-search-submit {
	flex: 0 0 auto; padding: 11px 16px;
	font: inherit; font-size: 14px; font-weight: 700;
	color: var(--cy-ink, #0b1020);
	background: var(--cy-cyan, #00c8f0);
	border: 2px solid var(--cy-line-strong, rgba(11,16,32,.85));
	border-radius: var(--cy-radius-sm, 11px);
	cursor: pointer;
	box-shadow: 2px 2px 0 0 var(--cy-line-strong, rgba(11,16,32,.85));
	transition: transform .12s ease, box-shadow .12s ease;
}
.cy-search-submit:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--cy-line-strong, rgba(11,16,32,.85)); }
.cy-search-submit:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--cy-line-strong, rgba(11,16,32,.85)); }

.cy-search-results { margin-top: 10px; max-height: min(58vh, 420px); overflow-y: auto; }
.cy-search-results:empty { margin-top: 0; }

.cy-sr-item {
	display: flex; gap: 10px; align-items: center;
	padding: 8px; border-radius: 10px; text-decoration: none; color: var(--cy-ink, #0b1020);
}
.cy-sr-item:hover, .cy-sr-item:focus-visible, .cy-sr-item.is-active {
	background: var(--cy-surface-2, #eef3ff); outline: none;
}
.cy-sr-thumb {
	flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
	background: var(--cy-surface-2, #eef3ff);
	border: 1px solid var(--cy-line, rgba(11,16,32,.1));
}
.cy-sr-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cy-sr-title { font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cy-sr-meta { font-size: 12px; color: var(--cy-ink-dim, #5a6485); }
.cy-sr-more {
	display: block; margin-top: 6px; padding: 9px 10px;
	font-size: 13px; font-weight: 600; text-align: center; text-decoration: none;
	color: var(--cy-cyan-ink, #04586b);
	border-top: 1px solid var(--cy-line, rgba(11,16,32,.1));
}
.cy-sr-more:hover { color: var(--cy-violet, #7c3aed); }
.cy-sr-empty { padding: 10px; font-size: 13px; color: var(--cy-ink-dim, #5a6485); }

/* Search results page: empty state */
.cy-search-summary { margin: .35rem 0 0; color: var(--cy-ink-dim, #5a6485); font-size: .95rem; }
.cy-search-empty { max-width: 640px; padding: 1.4rem 1.5rem; background: var(--cy-paper-2, #fff);
	border: 1px solid var(--cy-line, rgba(11,16,32,.1)); border-radius: var(--cy-radius, 16px); }
.cy-search-retry { display: flex; gap: 8px; margin: 1rem 0; }
.cy-search-fallback-head { margin: 1.2rem 0 .5rem; font-weight: 700; }
.cy-search-fallback { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.cy-search-fallback li { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }

@media (max-width: 720px) {
	.cy-search-panel {
		position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto;
		border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -8px 24px rgba(11,16,32,.18);
	}
}