/* Madina Core: community voice.
   Bar: light, warm strip that stays at the top with the sticky header.
   Spotlight: the page dims and the bar's button is lit (after the USA Cabinets header
   spotlight), with a pinned note and drawn arrow (after "Beautiful Things" by Would Be Great).
   Survey: one question at a time with a thin progress line (after ResearchHub by Cansaas). */

.mcv-bar[hidden], .mcv[hidden] { display: none !important; }
.mcv-bar { position: sticky; top: 0; z-index: 51; overflow: hidden; background: radial-gradient(60% 220% at 50% 140%, rgba(255, 208, 40, .22), rgba(255, 208, 40, 0) 62%), linear-gradient(90deg, #DCEFEB 0%, #F7FBFA 50%, #DCEFEB 100%); border-bottom: 1px solid rgba(11, 74, 67, .1); font-family: var(--sans, Inter, system-ui, sans-serif); }
.admin-bar .mcv-bar { top: 32px; }
.mcv-bar__in { max-width: 1240px; margin: 0 auto; padding: 8px 32px; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.mcv-bar__face { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #FFD028; }
.mcv-bar__text { margin: 0; color: #4F4F4F; font-size: 14.5px; line-height: 1.35; }
.mcv-bar__text b { color: #0B4A43; font-weight: 700; }
.mcv-bar__go { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 16px; border: 0; border-radius: 999px; background: #0B4A43; color: #fff; font: 600 14px var(--sans, Inter, sans-serif); cursor: pointer; transition: background .2s; }
.mcv-bar__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.mcv-bar__go:hover { background: #083A35; }
.mcv-bar__go:hover svg { transform: translateX(3px); }
.mcv-card__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* The spotlight */
html.mcv-spot-on { overflow: hidden; } /* html only: locking body too un-sticks the bar */
.mcv-spot { position: fixed; inset: 0; z-index: 9990; cursor: default; touch-action: none; overscroll-behavior: contain; font-family: var(--sans, Inter, system-ui, sans-serif); }
.mcv-spot__hole { position: fixed; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(5, 30, 27, 0), 0 0 0 0 rgba(255, 208, 40, 0), 0 0 0 0 rgba(255, 208, 40, 0); transition: box-shadow .6s cubic-bezier(.2, .8, .2, 1); }
.mcv-spot.is-in .mcv-spot__hole { box-shadow: 0 0 0 200vmax rgba(5, 30, 27, .7), 0 0 0 3px #FFD028, 0 0 0 0 rgba(255, 208, 40, 0); animation: mcv-glow 2.4s 1s ease-in-out infinite; }
@keyframes mcv-glow { 0%, 100% { box-shadow: 0 0 0 200vmax rgba(5, 30, 27, .7), 0 0 0 3px #FFD028, 0 0 0 0 rgba(255, 208, 40, 0); } 50% { box-shadow: 0 0 0 200vmax rgba(5, 30, 27, .7), 0 0 0 3px #FFD028, 0 0 28px 8px rgba(255, 208, 40, .5); } }
.mcv-spot__card { position: fixed; width: min(340px, calc(100vw - 24px)); box-sizing: border-box; padding: 20px 20px 16px; border-radius: 20px; background: #fff; box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(14px) rotate(-1.2deg); transition: opacity .35s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.mcv-spot.is-in .mcv-spot__card { opacity: 1; transform: rotate(-1.2deg); transition-delay: .18s; }
.mcv-spot__card:focus { outline: none; }
.mcv-spot__ink { position: absolute; top: -64px; width: 120px; height: 70px; overflow: visible; pointer-events: none; }
.mcv-spot__ink path { fill: none; stroke: #FFD028; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; }
.mcv-spot.is-in .mcv-spot__ink path:first-child { animation: mcv-draw .7s .55s ease-out forwards; }
.mcv-spot.is-in .mcv-spot__ink path:last-child { animation: mcv-draw .3s 1.2s ease-out forwards; }
.mcv-spot__who { display: flex; gap: 14px; align-items: flex-start; }
.mcv-spot__who img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #FFD028; }
.mcv-spot__quote { margin: 0; color: #0B4A43; font: italic 400 22px/1.16 var(--serif, "Instrument Serif", Georgia, serif); }
.mcv-spot__by { margin: 6px 0 0; color: #5C5C5C; font-size: 13px; }
.mcv-spot__acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #EDF2F1; }
.mcv-spot__go { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 18px; border: 0; border-radius: 999px; background: #0B4A43; color: #fff; font: 600 14.5px var(--sans, Inter, sans-serif); cursor: pointer; transition: background .2s; }
.mcv-spot__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.mcv-spot__go:hover { background: #083A35; }
.mcv-spot__go:hover svg { transform: translateX(3px); }
.mcv-spot__later { border: 0; background: none; padding: 6px 2px; color: #5C5C5C; font: 500 14px var(--sans, Inter, sans-serif); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); text-underline-offset: 3px; }
.mcv-spot__later:hover { color: #0B4A43; }
.mcv-spot__go:focus-visible, .mcv-spot__later:focus-visible { outline: 2px solid #FFD028; outline-offset: 2px; }
@keyframes mcv-draw { to { stroke-dashoffset: 0; } }

/* The survey */
html.mcv-lock { overflow: hidden; }
.mcv { position: fixed; inset: 0; z-index: 9991; display: grid; place-items: center; padding: 24px; font-family: var(--sans, Inter, system-ui, sans-serif); }
.mcv__scrim { position: absolute; inset: 0; background: rgba(6, 34, 31, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s ease; }
.mcv.is-in .mcv__scrim { opacity: 1; }
.mcv-box { position: relative; width: min(900px, 100%); max-height: calc(100vh - 48px); display: grid; grid-template-columns: 320px 1fr; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 50px 120px -40px rgba(3, 30, 27, .6); }
.mcv .mcv-box { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .32s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.mcv.is-in .mcv-box { transition-duration: .45s, .7s; }
.mcv.is-in .mcv-box { opacity: 1; transform: none; }
.mcv-box:focus, .mcv-step__q:focus { outline: none; }
.mcv-side { position: relative; display: flex; align-items: flex-end; padding: 32px; color: #fff; background: linear-gradient(180deg, rgba(8, 58, 52, .5) 0%, rgba(5, 36, 32, .95) 70%), var(--mcv-photo) center / cover; }
.mcv-side__face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #FFD028; }
.mcv-side__quote { margin: 18px 0 16px; color: #fff; font: italic 400 25px/1.2 var(--serif, "Instrument Serif", Georgia, serif); }
.mcv-side__by { margin: 0; color: #fff; font-size: 14.5px; font-weight: 600; }
.mcv-side__by span { display: block; color: #D3ECE8; font-weight: 400; font-size: 13px; margin-top: 2px; }

.mcv-card { display: flex; flex-direction: column; min-height: 540px; padding: 30px 36px 26px; overflow-y: auto; }
.mcv-card__top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.mcv-card__count { color: #00796B; font-size: 13px; font-weight: 600; }
.mcv-card__x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #F2F7F6; color: #0B4A43; cursor: pointer; display: grid; place-items: center; padding: 0; }
.mcv-card__prog { height: 3px; margin: 12px 0 4px; border-radius: 99px; background: #E8F0EE; overflow: hidden; }
.mcv-card__prog i { display: block; height: 100%; width: 8%; border-radius: inherit; background: #0B4A43; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.mcv-step[hidden] { display: none; }
.mcv-step.is-on { animation: mcv-in .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes mcv-in { from { opacity: 0; transform: translateX(14px); } }
.mcv-step__q { margin: 24px 0 8px; color: #0B4A43; font-size: 27px; line-height: 1.15; letter-spacing: -.8px; font-weight: 800; }
.mcv-step__help { margin: 0 0 18px; color: #5C5C5C; font-size: 15px; line-height: 1.5; }
.mcv-step[data-step="1"] .mcv-step__q { margin-bottom: 20px; }

.mcv-opts { display: grid; gap: 10px; }
.mcv-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid #DCE6E4; border-radius: 14px; cursor: pointer; font-size: 16px; font-weight: 500; color: #141414; transition: border-color .2s, background .2s; }
.mcv-opt:hover { border-color: #8FB7B0; }
.mcv-opt input, .mcv-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mcv-opt::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #B9C9C6; background: #fff; transition: all .2s; }
.mcv-opt.is-on { border: 1.5px solid #0B4A43; background: #EEF7F4; }
.mcv-opt.is-on::before { border-color: #0B4A43; background: #0B4A43; box-shadow: inset 0 0 0 4px #fff; }
.mcv-opt:focus-within, .mcv-chip:focus-within { outline: 3px solid #FFD028; outline-offset: 2px; }

.mcv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mcv-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border: 1px solid #DCE6E4; border-radius: 999px; cursor: pointer; font-size: 14.5px; font-weight: 500; color: #141414; transition: all .2s; user-select: none; }
.mcv-chip::before { content: "+"; font-weight: 600; color: #008F7E; }
.mcv-chip:hover { border-color: #8FB7B0; }
.mcv-chip.is-on { background: #0B4A43; border-color: #0B4A43; color: #fff; }
.mcv-chip.is-on::before { content: "\2713"; color: #FFD028; }

.mcv-card textarea, .mcv-field input { width: 100%; border: 1px solid #DCE6E4; border-radius: 14px; padding: 14px 16px; font: 16px/1.5 var(--sans, Inter, sans-serif); color: #141414; background: #fff; transition: border-color .2s, box-shadow .2s; }
.mcv-card textarea { min-height: 150px; resize: vertical; }
.mcv-card textarea:focus, .mcv-field input:focus { outline: 0; border-color: #0B4A43; box-shadow: 0 0 0 3px rgba(0, 143, 126, .15); }
.mcv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.mcv-field { display: flex; flex-direction: column; gap: 6px; }
.mcv-field:last-child { grid-column: 1 / -1; }
.mcv-field span { font-size: 13px; font-weight: 600; color: #4F4F4F; }
.mcv-field input { height: 48px; padding: 0 14px; border-radius: 12px; }
.mcv-check { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 14.5px; color: #4F4F4F; cursor: pointer; }
.mcv-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: #0B4A43; }
.mcv-ts { margin-top: 14px; }
.mc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.mcv-err { margin: 12px 0 0; color: #B32D2E; font-size: 14px; }
.mcv-card__nav { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.mcv-card__nav[hidden] { display: none; }
.mcv-back { margin-right: auto; padding: 8px 4px; border: 0; background: none; color: #4F4F4F; font: 500 15px var(--sans, Inter, sans-serif); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mcv-btn { min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: #0B4A43; color: #fff; font: 600 15.5px var(--sans, Inter, sans-serif); cursor: pointer; transition: background .2s, opacity .2s; }
.mcv-btn:hover { background: #083A35; }
.mcv-btn.is-busy { opacity: .65; pointer-events: none; }

.mcv-done { text-align: center; margin: auto 0; padding: 20px 0; }
.mcv-done .mcv-step__q { margin-top: 18px; }
.mcv-done .mcv-btn { margin-top: 10px; }
.mcv-done__mark { width: 76px; height: 76px; }
.mcv-done__mark circle { fill: #FFF6D1; stroke: #FFD028; stroke-width: 3; }
.mcv-done__mark path { fill: none; stroke: #0B4A43; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: mcv-draw .5s .2s ease-out forwards; }

/* On a page */
.mcv-box--inline { width: 100%; max-height: none; box-shadow: 0 30px 80px -50px rgba(3, 30, 27, .55); border: 1px solid #E3ECEA; }
.mcv-box--inline .mcv-card { min-height: 560px; }

@media (max-width: 760px) {
	.mcv-bar__in { padding: 8px 14px; gap: 10px; min-height: 48px; justify-content: flex-start; }
	.mcv-bar__text span { display: none; }
	.mcv-bar__text b { font-size: 13.5px; }
	.mcv-bar__face { width: 26px; height: 26px; }
	.mcv-bar__go { height: 32px; padding: 0 12px; font-size: 13px; margin-left: auto; }
	.mcv { padding: 0; place-items: end stretch; }
	.mcv .mcv-box { width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; transform: translateY(60px); }
	.mcv-box--inline { grid-template-columns: 1fr; }
	.mcv-side { padding: 16px 20px; align-items: center; background: linear-gradient(90deg, rgba(5, 36, 32, .95), rgba(8, 58, 52, .82)), var(--mcv-photo) center / cover; }
	.mcv-side__in { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
	.mcv-side__face { width: 44px; height: 44px; grid-row: span 2; box-shadow: 0 0 0 2px #FFD028; }
	.mcv-side__quote { margin: 0; font-size: 16px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.mcv-side__by { font-size: 12.5px; margin-top: 4px; }
	.mcv-side__by span { display: none; }
	.mcv-card { min-height: 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); }
	.mcv-step__q { font-size: 23px; margin-top: 18px; }
	.mcv-fields { grid-template-columns: 1fr; }
	.mcv-opt { padding: 13px 16px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.mcv .mcv-box, .mcv-spot__card { transition: opacity .2s; transform: none !important; }
	.mcv-spot__hole { animation: none !important; }
	.mcv-step.is-on { animation: none; }
}