/**
 * Manga Search Bar - frontend styles.
 *
 * Everything is scoped under .msb-wrap. Madara themes carry broad `.search-*`
 * and `input[type=search]` rules, and an unscoped selector here would either
 * lose to them or, worse, leak into the theme's own header search.
 *
 * Layout safety: the suggestion panel is absolutely positioned inside a
 * relative field wrapper, so opening it can never reflow the page. On a site
 * that cares enough about CLS to run a dedicated optimiser plugin, a dropdown
 * that pushes content down would be an own goal.
 */

/* ---------------------------------------------------------------------------
   Tokens - light is the base; dark overrides only the colours.
   --------------------------------------------------------------------------- */

.msb-wrap {
	--msb-bg: #ffffff;
	--msb-fg: #14161a;
	--msb-muted: #6b7280;
	--msb-border: #e3e6ea;
	--msb-border-strong: #cbd2d9;
	--msb-accent: #e5533d;
	--msb-accent-fg: #ffffff;
	--msb-panel-bg: #ffffff;
	--msb-hover: #f4f6f8;
	--msb-ring: rgba(229, 83, 61, 0.22);
	--msb-shadow: 0 12px 32px -8px rgba(16, 24, 40, 0.18), 0 2px 6px -2px rgba(16, 24, 40, 0.08);
	--msb-bar-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	--msb-radius: 999px;
	--msb-panel-radius: 14px;
	/* Madara headers and sticky bars stack high; override this token rather
	   than fighting the panel with !important. */
	--msb-panel-z: 999;

	position: relative;
	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font-size: 16px;
	line-height: 1.4;
}

.msb-wrap *,
.msb-wrap *::before,
.msb-wrap *::after {
	box-sizing: inherit;
}

/* Dark palette, shared by the forced and the automatic scheme. */
.msb-scheme-dark {
	--msb-bg: #171a1f;
	--msb-fg: #eef1f5;
	--msb-muted: #98a2b3;
	--msb-border: #2a2f37;
	--msb-border-strong: #3a414b;
	--msb-panel-bg: #1c2027;
	--msb-hover: #242932;
	--msb-ring: rgba(229, 83, 61, 0.32);
	--msb-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
	--msb-bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
	.msb-scheme-auto {
		--msb-bg: #171a1f;
		--msb-fg: #eef1f5;
		--msb-muted: #98a2b3;
		--msb-border: #2a2f37;
		--msb-border-strong: #3a414b;
		--msb-panel-bg: #1c2027;
		--msb-hover: #242932;
		--msb-ring: rgba(229, 83, 61, 0.32);
		--msb-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
	--msb-bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	}
}

/* ---------------------------------------------------------------------------
   Field
   --------------------------------------------------------------------------- */

.msb-form {
	margin: 0;
}

.msb-field {
	position: relative;
}

.msb-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 7px 7px 18px;
	background: var(--msb-bg);
	border: 1px solid var(--msb-border);
	border-radius: var(--msb-radius);
	box-shadow: var(--msb-bar-shadow);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.msb-wrap:hover .msb-bar {
	border-color: var(--msb-border-strong);
}

.msb-wrap:focus-within .msb-bar {
	border-color: var(--msb-accent);
	box-shadow: 0 0 0 4px var(--msb-ring), var(--msb-bar-shadow);
}

.msb-icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--msb-muted);
	pointer-events: none;
}

.msb-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.msb-input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 13px 0;
	border: 0;
	background: transparent;
	color: var(--msb-fg);
	/* 16px keeps iOS Safari from zooming the viewport on focus. */
	font: inherit;
	font-size: 16px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.msb-input::placeholder {
	color: var(--msb-muted);
	opacity: 1;
}

/* The native clear affordance is replaced by .msb-clear, which can be styled
   consistently and reached by keyboard. */
.msb-input::-webkit-search-cancel-button,
.msb-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.msb-clear {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--msb-muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.msb-clear:hover,
.msb-clear:focus-visible {
	background: var(--msb-hover);
	color: var(--msb-fg);
}

.msb-clear[hidden] {
	display: none;
}

.msb-submit {
	flex: 0 0 auto;
	margin: 0;
	padding: 13px 28px;
	border: 0;
	border-radius: var(--msb-radius);
	background: var(--msb-accent);
	color: var(--msb-accent-fg);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 6px 18px -8px var(--msb-accent);
	transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.msb-submit:hover {
	filter: brightness(1.07);
	box-shadow: 0 8px 22px -8px var(--msb-accent);
}

.msb-submit:active {
	transform: translateY(1px);
}

.msb-submit:focus-visible,
.msb-clear:focus-visible {
	outline: 2px solid var(--msb-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Suggestion panel
   --------------------------------------------------------------------------- */

.msb-panel {
	position: absolute;
	z-index: var(--msb-panel-z, 999);
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	padding: 6px;
	background: var(--msb-panel-bg);
	border: 1px solid var(--msb-border);
	border-radius: var(--msb-panel-radius);
	box-shadow: var(--msb-shadow);
	overscroll-behavior: contain;
}

.msb-panel[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.msb-open .msb-panel {
		animation: msb-pop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
	}

	@keyframes msb-pop {
		from {
			opacity: 0;
			transform: translateY(-6px) scale(0.99);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

.msb-option {
	display: block;
	padding: 10px 12px;
	border-radius: 9px;
	color: var(--msb-fg);
	text-decoration: none;
	cursor: pointer;
}

.msb-option:hover,
.msb-option.is-active {
	background: var(--msb-hover);
	color: var(--msb-fg);
	text-decoration: none;
}

.msb-option-title {
	display: block;
	overflow: hidden;
	font-size: 15px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.msb-mark {
	padding: 0;
	background: transparent;
	color: var(--msb-accent);
	font-weight: 700;
}

.msb-view-all {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--msb-border);
	border-radius: 0 0 9px 9px;
	color: var(--msb-accent);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.msb-state {
	padding: 14px 12px;
	color: var(--msb-muted);
	font-size: 14px;
	text-align: center;
}

/* Loading placeholder. Fixed heights, so the panel does not resize when the
   real rows replace the shimmer. */
.msb-loading {
	display: grid;
	gap: 8px;
	padding: 10px;
}

.msb-shimmer {
	display: block;
	height: 16px;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--msb-hover) 25%, var(--msb-border) 37%, var(--msb-hover) 63%);
	background-size: 400% 100%;
}

.msb-shimmer:nth-child(2) {
	width: 82%;
}

.msb-shimmer:nth-child(3) {
	width: 64%;
}

@media (prefers-reduced-motion: no-preference) {
	.msb-shimmer {
		animation: msb-shimmer 1.3s ease-in-out infinite;
	}

	@keyframes msb-shimmer {
		from {
			background-position: 100% 50%;
		}

		to {
			background-position: 0 50%;
		}
	}
}

/* ---------------------------------------------------------------------------
   Filters
   --------------------------------------------------------------------------- */

.msb-filters {
	margin-top: 16px;
}

/* Grid, not flex.
   A flex item can be shrunk below its own content width, and Madara puts a
   fixed `width` on `select`. The select then paints outside the shrunken
   wrapper - which is exactly how the three filters ended up overlapping each
   other. Grid gives every control its own track, and the width:100% further
   down keeps the select inside that track whatever the theme asks for.

   auto-fit means one row when there is room and a clean vertical stack in a
   sidebar, without a media query needing to guess which is which. */
.msb-filters-inline,
.msb-filters-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	align-items: end;
}

.msb-filters-dropdown {
	display: block;
}

.msb-filters-inner {
	margin-top: 14px;
}

.msb-filters-toggle {
	display: block;
	width: -moz-max-content;
	width: max-content;
	margin: 0 auto;
	padding: 7px 20px;
	border: 1px solid var(--msb-border);
	border-radius: var(--msb-radius);
	background: var(--msb-bg);
	color: var(--msb-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease, border-color 0.15s ease;
	-webkit-user-select: none;
	user-select: none;
}

.msb-filters-toggle::-webkit-details-marker,
.msb-filters-toggle::marker {
	display: none;
	content: "";
}

.msb-filters-toggle:hover,
.msb-filters-dropdown[open] .msb-filters-toggle {
	color: var(--msb-fg);
	border-color: var(--msb-border-strong);
}

.msb-filter {
	display: block;
	min-width: 0;
	text-align: center;
}

.msb-filter-label {
	display: block;
	margin-bottom: 7px;
	color: var(--msb-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Two classes deep so these beat a theme's bare `select` rule without needing
   !important, which would take the styling away from anyone overriding it. */
.msb-wrap .msb-select {
	display: block;
	padding: 12px 38px 12px 15px;
	border: 1px solid var(--msb-border);
	border-radius: 12px;
	background-color: var(--msb-panel-bg);
	/* Inline SVG chevron: an external asset would be a second request for an
	   8-byte glyph, and a font icon would depend on the theme. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 15px 15px;
	color: var(--msb-fg);
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Containment, kept separate and at higher specificity: these are the
   declarations that stop a themed select from escaping its grid track, so they
   need to win even where the cosmetic rule above does not. */
.msb-wrap .msb-filters .msb-select,
.msb-wrap .msb-filters-inner .msb-select {
	position: static;
	float: none;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	box-sizing: border-box;
}

.msb-wrap .msb-select:hover {
	border-color: var(--msb-border-strong);
}

.msb-wrap .msb-select:focus,
.msb-wrap .msb-select:focus-visible {
	border-color: var(--msb-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--msb-ring);
}

/* The option list is painted by the OS, which does not inherit the page
   palette - without this a dark skin gets white-on-white options. */
.msb-wrap .msb-select option {
	background-color: var(--msb-panel-bg);
	color: var(--msb-fg);
}

/* ---------------------------------------------------------------------------
   Skins
   --------------------------------------------------------------------------- */

.msb-skin-glass .msb-bar,
.msb-skin-glass .msb-panel {
	background: var(--msb-bg);
	background: color-mix(in srgb, var(--msb-bg) 72%, transparent);
	border-color: var(--msb-border);
	border-color: color-mix(in srgb, var(--msb-fg) 12%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
}

.msb-skin-minimal .msb-bar {
	padding-left: 0;
	border-width: 0 0 1px;
	border-radius: 0;
	background: transparent;
}

.msb-skin-minimal:focus-within .msb-bar {
	border-color: var(--msb-accent);
	box-shadow: none;
}

.msb-skin-minimal .msb-submit {
	border-radius: 8px;
}

.msb-skin-neon {
	--msb-accent: #7c5cff;
	--msb-ring: rgba(124, 92, 255, 0.3);
}

.msb-skin-neon .msb-bar {
	border-color: var(--msb-accent);
	border-color: color-mix(in srgb, var(--msb-accent) 45%, var(--msb-border));
	box-shadow: 0 8px 30px -12px var(--msb-accent);
}

.msb-skin-neon:focus-within .msb-bar {
	box-shadow: 0 0 0 4px var(--msb-ring), 0 10px 34px -12px var(--msb-accent);
}

/* ---------------------------------------------------------------------------
   Narrow containers (sidebars) and small screens
   --------------------------------------------------------------------------- */

@container (max-width: 400px) {
	.msb-submit {
		padding: 12px 16px;
		font-size: 14px;
	}

	.msb-filters-inline,
	.msb-filters-inner {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Fallback for browsers without container queries: the same collapse, keyed to
   the viewport instead. */
@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.msb-submit {
			padding: 12px 16px;
			font-size: 14px;
		}

		.msb-filters-inline,
		.msb-filters-inner {
			grid-template-columns: 1fr;
			gap: 12px;
		}
	}
}

/* Admin-only diagnostic notice from MSB_Render::bar(). */
.msb-notice {
	padding: 10px 14px;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
	color: #14161a;
	font-size: 14px;
}