/* Municipal Universal Search — frontend.css v1.0.0
   AAA-verified palette pairs only. LVHA order enforced. REM units. */

:root {
	--mus-bg: #1b365d;
	--mus-heading: #ffffff;
	--mus-helper: #d6d2c4;
	--mus-btn-bg: #1b365d;
	--mus-btn-text: #ffffff;
	--mus-accent-bg: #ffc845;
	--mus-accent-text: #1b365d;
	--mus-card-bg: #ffffff;
	--mus-card-text: #003b49;
	--mus-field-h: 3.5rem;
	--mus-radius: 0.5rem;
	--mus-card-gap: 1rem;
	--mus-focus: #ffc845;
	--mus-font: Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Hero ---------- */

.mus-hero {
	background-color: var(--mus-bg);
	color: var(--mus-heading);
	font-family: var(--mus-font);
	padding: 3rem 1.5rem;
	border-radius: var(--mus-radius);
	max-width: 100%;
	box-sizing: border-box;
}

.mus-hero *,
.mus-results *,
.mus-panel *,
.mus-popular * {
	box-sizing: border-box;
}

.mus-eyebrow,
.mus-hero .mus-eyebrow {
	color: var(--mus-helper) !important;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.75rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 0.75rem;
}

/* Rendered as an <h2>. High specificity + !important so theme/Elementor
   heading colors (dark navy on dark navy) can never override it. */
.mus-heading,
.mus-hero h2.mus-heading,
h2.mus-heading {
	color: var(--mus-heading) !important;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	margin: 0 0 0.75rem;
	padding: 0;
}

.mus-helper,
.mus-hero .mus-helper {
	color: var(--mus-helper) !important;
	font-size: 1.0625rem;
	text-align: center;
	margin: 0 auto 1.75rem;
	max-width: 46rem;
}

/* ---------- Photo-background hero variant ---------- */

.mus-hero--image {
	background-color: var(--mus-bg); /* Shown while the photo loads / if it 404s. */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4rem 2rem;
	min-height: var(--mus-hero-minh, 30rem);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Translucent navy panel keeps white text AAA-readable over any photo.
   0.88 alpha over worst-case white ground ≈ #34496b behind #ffffff (>7:1). */
.mus-hero--image .mus-hero-panel {
	background-color: rgba(27, 54, 93, 0.88);
	border-radius: var(--mus-radius);
	padding: 2.5rem 2.75rem;
	max-width: 40rem;
	width: 100%;
}

.mus-hero--solid .mus-hero-panel {
	max-width: 100%;
}

/* Left-aligned variant (Somerville style). */
.mus-hero--left {
	justify-content: flex-start;
}

.mus-hero--left .mus-eyebrow,
.mus-hero--left .mus-heading,
.mus-hero--left .mus-helper {
	text-align: left;
}

.mus-hero--left .mus-helper {
	margin-left: 0;
	margin-right: 0;
}

.mus-hero--left .mus-quick-actions {
	justify-content: flex-start;
}

/* Right-positioned variant: panel sits right, text stays left-aligned for readability. */
.mus-hero--right {
	justify-content: flex-end;
}

.mus-hero--right .mus-eyebrow,
.mus-hero--right .mus-heading,
.mus-hero--right .mus-helper {
	text-align: left;
}

.mus-hero--right .mus-helper {
	margin-left: 0;
	margin-right: 0;
}

.mus-hero--right .mus-quick-actions {
	justify-content: flex-start;
}

/* Compact mode: icon-only search button. */
.mus-hero--compact .mus-submit {
	padding: 0 1.125rem;
	min-width: var(--mus-field-h);
}

.mus-hero--compact .mus-submit .mus-submit-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* ---------- Search field ---------- */

.mus-form {
	margin: 0;
}

.mus-field-wrap {
	position: relative;
	display: flex;
	max-width: 56rem;
	margin: 0 auto;
	border-radius: var(--mus-radius);
	overflow: hidden;
	border: 0.125rem solid var(--mus-accent-bg);
	background-color: #ffffff;
}

.mus-input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--mus-field-h);
	border: 0;
	padding: 0 1.25rem;
	font-size: 1.0625rem;
	font-family: var(--mus-font);
	color: #003b49;
	background-color: #ffffff;
}

.mus-input::placeholder {
	color: #545859;
	opacity: 1;
}

.mus-input:focus {
	outline: 0.1875rem solid var(--mus-focus);
	outline-offset: -0.1875rem;
}

/* Clear (X) button inside the field. AAA: #003b49 on #ffffff; hover flips to #ffffff on #003b49. */
.mus-clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: var(--mus-field-h);
	border: 0;
	cursor: pointer;
	background-color: #ffffff;
	color: #003b49;
}

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

.mus-clear svg {
	width: 1.125rem;
	height: 1.125rem;
}

.mus-clear:hover {
	background-color: #003b49;
	color: #ffffff;
}

.mus-clear:active {
	background-color: #003b49;
	color: #ffffff;
}

.mus-clear:focus-visible {
	outline: 0.1875rem solid var(--mus-focus);
	outline-offset: -0.1875rem;
}

.mus-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: var(--mus-field-h);
	padding: 0 1.75rem;
	border: 0;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	font-family: var(--mus-font);
	background-color: var(--mus-btn-bg);
	color: var(--mus-btn-text);
}

.mus-submit:hover {
	background-color: #003b49;
	color: #ffffff;
}

.mus-submit:focus-visible {
	outline: 0.1875rem solid var(--mus-focus);
	outline-offset: -0.25rem;
	background-color: var(--mus-btn-bg);
	color: var(--mus-btn-text);
}

.mus-submit:active {
	background-color: #000000;
	color: #ffffff;
}

.mus-submit-icon svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
}

/* ---------- Suggestions ---------- */

.mus-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	background-color: #ffffff;
	border: 0.0625rem solid #d0d3d4;
	border-top: 0;
	z-index: 40;
	max-height: 18rem;
	overflow-y: auto;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.mus-suggestion {
	padding: 0.625rem 1.25rem;
	color: #003b49;
	cursor: pointer;
	font-size: 1rem;
	font-family: var(--mus-font);
}

.mus-suggestion:hover,
.mus-suggestion.is-active {
	background-color: #1b365d;
	color: #ffffff;
}

/* ---------- Quick actions & buttons ---------- */

.mus-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-start;
	max-width: 56rem;
	margin: 1.25rem auto 0;
}

.mus-qa,
.mus-btn {
	display: inline-block;
	padding: 0.625rem 1.5rem;
	border-radius: 62rem;
	font-weight: 700;
	font-size: 0.9375rem;
	font-family: var(--mus-font);
	text-decoration: none;
	border: 0;
	cursor: pointer;
	line-height: 1.4;
}

/* Gold pill — AAA: #1b365d on #ffc845. LVHA order. */
.mus-qa--gold:link { background-color: var(--mus-accent-bg); color: var(--mus-accent-text); }
.mus-qa--gold:visited { background-color: var(--mus-accent-bg); color: var(--mus-accent-text); }
.mus-qa--gold:hover { background-color: #ffffff; color: #003b49; }
.mus-qa--gold:active { background-color: #f2c75c; color: #1b365d; }
.mus-qa--gold { background-color: var(--mus-accent-bg); color: var(--mus-accent-text); }

/* White pill — AAA: #003b49 on #ffffff. LVHA order. */
.mus-qa--white:link { background-color: #ffffff; color: #003b49; }
.mus-qa--white:visited { background-color: #ffffff; color: #003b49; }
.mus-qa--white:hover { background-color: #ffc845; color: #1b365d; }
.mus-qa--white:active { background-color: #d0d3d4; color: #003b49; }
.mus-qa--white { background-color: #ffffff; color: #003b49; }

.mus-qa:focus-visible,
.mus-btn:focus-visible {
	outline: 0.1875rem solid var(--mus-focus);
	outline-offset: 0.1875rem;
}

/* Primary — AAA: #ffffff on #1b365d. LVHA order. */
.mus-btn--primary:link { background-color: #1b365d; color: #ffffff; }
.mus-btn--primary:visited { background-color: #1b365d; color: #ffffff; }
.mus-btn--primary:hover { background-color: #003b49; color: #ffffff; }
.mus-btn--primary:active { background-color: #000000; color: #ffffff; }
.mus-btn--primary { background-color: #1b365d; color: #ffffff; }
.mus-btn--primary:disabled { background-color: #d0d3d4; color: #003b49; cursor: not-allowed; }

/* Secondary — AAA: #1b365d on #d0d3d4. LVHA order. */
.mus-btn--secondary:link { background-color: #d0d3d4; color: #1b365d; }
.mus-btn--secondary:visited { background-color: #d0d3d4; color: #1b365d; }
.mus-btn--secondary:hover { background-color: #1b365d; color: #ffffff; }
.mus-btn--secondary:active { background-color: #003b49; color: #ffffff; }
.mus-btn--secondary { background-color: #d0d3d4; color: #1b365d; }
.mus-btn--secondary:disabled { background-color: #d0d3d4; color: #545859; cursor: not-allowed; }

/* Accent — AAA: #1b365d on #ffc845. LVHA order. */
.mus-btn--accent:link { background-color: #ffc845; color: #1b365d; }
.mus-btn--accent:visited { background-color: #ffc845; color: #1b365d; }
.mus-btn--accent:hover { background-color: #1b365d; color: #ffffff; }
.mus-btn--accent:active { background-color: #f2c75c; color: #1b365d; }
.mus-btn--accent { background-color: #ffc845; color: #1b365d; }

/* Danger — AAA: #ffffff on #5d3754. LVHA order. */
.mus-btn--danger:link { background-color: #5d3754; color: #ffffff; }
.mus-btn--danger:visited { background-color: #5d3754; color: #ffffff; }
.mus-btn--danger:hover { background-color: #000000; color: #ffffff; }
.mus-btn--danger:active { background-color: #000000; color: #d6d2c4; }
.mus-btn--danger { background-color: #5d3754; color: #ffffff; }

/* ---------- Results ---------- */

.mus-results {
	font-family: var(--mus-font);
	margin-top: 1.5rem;
}

.mus-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.mus-filter {
	padding: 0.5rem 1.125rem;
	border-radius: 62rem;
	border: 0.0625rem solid #1b365d;
	background-color: #ffffff;
	color: #003b49;
	font-weight: 600;
	font-size: 0.875rem;
	font-family: var(--mus-font);
	cursor: pointer;
}

.mus-filter:hover {
	background-color: #1b365d;
	color: #ffffff;
}

.mus-filter:focus-visible {
	outline: 0.1875rem solid #1b365d;
	outline-offset: 0.125rem;
}

.mus-filter.is-active {
	background-color: #1b365d;
	color: #ffffff;
}

.mus-count {
	color: #003b49;
	font-weight: 600;
	margin: 0 0 1rem;
}

.mus-group {
	margin-bottom: 2rem;
}

.mus-group-title {
	color: #1b365d;
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-bottom: 0.125rem solid #ffc845;
	padding-bottom: 0.375rem;
	margin: 0 0 var(--mus-card-gap);
}

.mus-card {
	background-color: var(--mus-card-bg);
	color: var(--mus-card-text);
	border: 0.0625rem solid #d0d3d4;
	border-radius: var(--mus-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: var(--mus-card-gap);
}

.mus-card-title {
	margin: 0 0 0.375rem;
	font-size: 1.1875rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.mus-card-title a:link { color: #1d4289; text-decoration: underline; }
.mus-card-title a:visited { color: #5d3754; text-decoration: underline; }
.mus-card-title a:hover { color: #003b49; text-decoration: underline; }
.mus-card-title a:active { color: #000000; }

.mus-card-title a:focus-visible {
	outline: 0.1875rem solid #1b365d;
	outline-offset: 0.125rem;
}

.mus-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #003b49;
	background-color: #d6d2c4;
	border-radius: 0.25rem;
	padding: 0.1875rem 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mus-icon {
	width: 0.875rem;
	height: 0.875rem;
}

.mus-card-meta {
	color: #545859;
	font-size: 0.875rem;
	margin: 0 0 0.5rem;
}

.mus-card-excerpt {
	margin: 0 0 0.875rem;
	line-height: 1.6;
}

.mus-card-action {
	margin: 0;
}

/* ---------- Featured answer ---------- */

.mus-featured {
	background-color: #1b365d;
	color: #ffffff;
	border-radius: var(--mus-radius);
	border-left: 0.375rem solid #ffc845;
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.75rem;
}

.mus-featured-label {
	color: #ffc845;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 0.5rem;
}

.mus-featured-title {
	color: #ffffff;
	margin: 0 0 0.5rem;
	font-size: 1.375rem;
}

.mus-featured-desc {
	color: #d6d2c4;
	margin: 0 0 1rem;
}

/* ---------- Empty / loading / notices ---------- */

.mus-empty,
.mus-notice {
	background-color: #d6d2c4;
	color: #003b49;
	border-radius: var(--mus-radius);
	padding: 1.25rem 1.5rem;
}

/* Result count row with Clear search button. */
.mus-count-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 1rem;
}

.mus-count-row .mus-count {
	margin: 0;
}

/* Inline (same-page) results container injected below the hero. */
.mus-results--inline {
	margin-top: 1.5rem;
}

.mus-results--inline[hidden] {
	display: none;
}

/* ---------- Common topics (ProudCity-style pills under the search) ---------- */

.mus-topics {
	margin-top: 1.5rem;
}

.mus-topics-label {
	color: var(--mus-helper) !important;
	font-family: var(--mus-font);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	font-weight: 700;
	margin: 0 0 0.625rem;
}

.mus-topics-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Pills on the navy hero. AAA: #ffffff on #1b365d; hover flips to #1b365d on #ffffff. */
.mus-topic {
	font-family: var(--mus-font);
	font-size: 0.9375rem;
	font-weight: 600;
	background-color: transparent;
	color: #ffffff;
	border: 0.125rem solid #ffffff;
	border-radius: 2rem;
	padding: 0.4375rem 1rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

a.mus-topic--link:link {
	background-color: transparent;
	color: #ffffff;
}

a.mus-topic--link:visited {
	background-color: transparent;
	color: #ffffff;
}

.mus-topic:hover,
a.mus-topic--link:hover {
	background-color: #ffffff;
	color: #1b365d;
}

.mus-topic:active,
a.mus-topic--link:active {
	background-color: #ffffff;
	color: #1b365d;
}

.mus-topic:focus-visible {
	outline: 0.1875rem solid var(--mus-focus);
	outline-offset: 0.125rem;
}

/* ---------- Full-screen search overlay (ProudCity pattern) ---------- */

/* Trigger button. AAA: #ffffff on #1b365d; hover flips. */
.mus-overlay-trigger {
	font-family: var(--mus-font);
	font-size: 1rem;
	font-weight: 600;
	background-color: #1b365d;
	color: #ffffff;
	border: 0.125rem solid #1b365d;
	border-radius: var(--mus-radius);
	padding: 0.5rem 1rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.mus-overlay-trigger svg {
	width: 1.125rem;
	height: 1.125rem;
}

.mus-overlay-trigger:hover {
	background-color: #ffffff;
	color: #1b365d;
}

.mus-overlay-trigger:active {
	background-color: #ffffff;
	color: #1b365d;
}

.mus-overlay-trigger:focus-visible {
	outline: 0.1875rem solid #ffc845;
	outline-offset: 0.125rem;
}

.mus-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background-color: rgba(27, 54, 93, 0.97);
	overflow-y: auto;
	padding: 4rem 1.5rem 3rem;
}

.mus-overlay[hidden] {
	display: none;
}

.mus-overlay-inner {
	max-width: 46rem;
	margin: 0 auto;
	position: relative;
}

/* Close X. AAA: #ffffff on transparent-over-navy; hover flips to navy on white. */
.mus-overlay-close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	background-color: transparent;
	color: #ffffff;
	border: 0.125rem solid #ffffff;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.mus-overlay-close svg {
	width: 1.125rem;
	height: 1.125rem;
}

.mus-overlay-close:hover {
	background-color: #ffffff;
	color: #1b365d;
}

.mus-overlay-close:active {
	background-color: #ffffff;
	color: #1b365d;
}

.mus-overlay-close:focus-visible {
	outline: 0.1875rem solid #ffc845;
	outline-offset: 0.125rem;
}

.mus-overlay-field {
	display: flex;
	background-color: #ffffff;
	border: 0.1875rem solid #ffc845;
	border-radius: var(--mus-radius);
	overflow: hidden;
}

.mus-overlay-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	font-family: var(--mus-font);
	font-size: 1.25rem;
	padding: 0 1.25rem;
	height: 3.75rem;
	color: #003b49;
	background-color: #ffffff;
}

.mus-overlay-input:focus {
	outline: 0.1875rem solid #ffc845;
	outline-offset: -0.1875rem;
}

.mus-overlay-topics {
	margin-top: 1.75rem;
}

.mus-overlay-topics[hidden] {
	display: none;
}

.mus-overlay-body {
	margin-top: 1.75rem;
}

.mus-overlay-body .mus-count {
	color: #ffffff;
}

.mus-overlay-body .mus-loading {
	color: #ffffff;
}

.mus-overlay-field .mus-submit {
	height: 3.75rem;
	min-width: 3.75rem;
	padding: 0 1.25rem;
}

/* Show-all expander per result group. */
.mus-showmore-wrap {
	margin: 0.5rem 0 1.5rem;
}

.mus-group-more[hidden] {
	display: none;
}

/* Did-you-mean suggestion. AAA: #003b49 on #d6d2c4; hover/active flip to #ffffff on #1b365d. */
.mus-didyoumean {
	margin: 0.75rem 0 0;
	font-family: var(--mus-font);
	font-size: 1.0625rem;
	color: #003b49;
}

.mus-suggestion-link:link {
	background-color: transparent;
	color: #003b49;
	text-decoration: underline;
	text-underline-offset: 0.125rem;
	border-radius: 0.25rem;
	padding: 0 0.25rem;
}

.mus-suggestion-link:visited {
	background-color: transparent;
	color: #003b49;
}

.mus-suggestion-link:hover {
	background-color: #1b365d;
	color: #ffffff;
	text-decoration: underline;
}

.mus-suggestion-link:active {
	background-color: #1b365d;
	color: #ffffff;
}

.mus-suggestion-link:focus-visible {
	outline: 0.1875rem solid #1b365d;
	outline-offset: 0.125rem;
}

.mus-loading {
	color: #003b49;
	font-family: var(--mus-font);
}

/* ---------- Popular services ---------- */

.mus-popular {
	font-family: var(--mus-font);
}

.mus-popular-heading {
	color: #1b365d;
	margin: 0 0 0.75rem;
}

.mus-popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.mus-popular-item {
	padding: 0.5rem 1.125rem;
	border-radius: 62rem;
	border: 0.0625rem solid #1b365d;
	background-color: #ffffff;
	color: #003b49;
	font-family: var(--mus-font);
	font-size: 0.9375rem;
	cursor: pointer;
}

.mus-popular-item:hover {
	background-color: #1b365d;
	color: #ffffff;
}

.mus-popular-item:focus-visible {
	outline: 0.1875rem solid #1b365d;
	outline-offset: 0.125rem;
}

/* ---------- Panels (dashboard / analytics / design) ---------- */

.mus-panel {
	background-color: #ffffff;
	color: #003b49;
	border: 0.0625rem solid #d0d3d4;
	border-radius: 0.75rem;
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.5rem;
	font-family: var(--mus-font);
}

.mus-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

.mus-panel-head h3 {
	color: #1b365d;
	margin: 0;
	font-size: 1.25rem;
}

.mus-help {
	color: #545859;
	font-size: 0.9375rem;
	margin: 0 0 1rem;
}

.mus-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 0.125rem solid #d0d3d4;
	margin-bottom: 1.25rem;
}

.mus-tab {
	padding: 0.625rem 1.25rem;
	border: 0;
	background-color: transparent;
	color: #003b49;
	font-weight: 600;
	font-family: var(--mus-font);
	font-size: 0.9375rem;
	cursor: pointer;
	border-bottom: 0.1875rem solid transparent;
}

.mus-tab:hover {
	background-color: #1b365d;
	color: #ffffff;
}

.mus-tab:focus-visible {
	outline: 0.1875rem solid #1b365d;
	outline-offset: -0.1875rem;
}

.mus-tab.is-active {
	border-bottom-color: #ffc845;
	color: #1b365d;
}

.mus-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.mus-table th {
	text-align: left;
	color: #1b365d;
	border-bottom: 0.125rem solid #1b365d;
	padding: 0.5rem 0.75rem;
}

.mus-table td {
	border-bottom: 0.0625rem solid #d0d3d4;
	padding: 0.625rem 0.75rem;
	vertical-align: top;
}

.mus-td-actions {
	white-space: nowrap;
}

.mus-inline-form {
	background-color: #d6d2c4;
	border-radius: 0.5rem;
	padding: 1.25rem 1.5rem;
	margin-top: 1.25rem;
}

.mus-inline-form h4 {
	color: #003b49;
	margin: 0 0 0.75rem;
}

.mus-inline-form label,
.mus-field label {
	display: block;
	color: #003b49;
	font-weight: 600;
	font-size: 0.875rem;
	margin: 0.75rem 0 0.25rem;
}

.mus-inline-form input[type="text"],
.mus-inline-form input[type="url"],
.mus-field input,
.mus-field select {
	width: 100%;
	padding: 0.5625rem 0.75rem;
	border: 0.0625rem solid #545859;
	border-radius: 0.375rem;
	font-family: var(--mus-font);
	font-size: 0.9375rem;
	color: #003b49;
	background-color: #ffffff;
}

.mus-inline-form input:focus,
.mus-field input:focus,
.mus-field select:focus {
	outline: 0.1875rem solid #1b365d;
	outline-offset: 0.0625rem;
}

.mus-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.mus-form-actions {
	display: flex;
	gap: 0.625rem;
	margin-top: 1rem;
}

.mus-design-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.mus-design-grid .mus-field {
	flex: 1 1 16rem;
}

.mus-stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.mus-stat {
	flex: 1 1 10rem;
	background-color: #1b365d;
	color: #ffffff;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-family: var(--mus-font);
}

.mus-stat-value {
	font-size: 1.75rem;
	font-weight: 800;
	color: #ffc845;
}

.mus-stat-label {
	font-size: 0.8125rem;
	color: #d6d2c4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ---------- Modal ---------- */

.mus-modal-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1rem;
}

.mus-modal {
	background-color: #ffffff;
	color: #003b49;
	border-radius: 0.75rem;
	overflow: hidden;
	max-width: 30rem;
	width: 100%;
	padding: 1.75rem;
	font-family: var(--mus-font);
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

.mus-modal h3 {
	color: #1b365d;
	margin: 0 0 0.75rem;
}

.mus-modal-url {
	word-break: break-all;
	background-color: #d6d2c4;
	color: #003b49;
	border-radius: 0.375rem;
	padding: 0.625rem 0.875rem;
	font-size: 0.875rem;
}

.mus-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

/* ---------- Accessibility helpers ---------- */

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

.mus-live {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.mus-hero *,
	.mus-results *,
	.mus-panel * {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 48rem) {
	.mus-hero--image {
		padding: 2rem 1rem;
		min-height: var(--mus-hero-minh, 18rem);
	}

	.mus-hero--image .mus-hero-panel {
		padding: 1.5rem 1.25rem;
	}

	.mus-heading {
		font-size: 1.875rem;
	}
	.mus-hero {
		padding: 2rem 1rem;
	}
	.mus-field-wrap {
		flex-direction: column;
		border-width: 0.125rem;
	}
	.mus-submit {
		width: 100%;
		justify-content: center;
	}
	.mus-panel {
		padding: 1.125rem 1rem;
	}
	.mus-table {
		display: block;
		overflow-x: auto;
	}
}