/**
 * MaVitamine component system — controls, badges, cards and dynamic states.
 * Components use semantic tokens only and remain identical in light/dark mode.
 */

/* Buttons ------------------------------------------------------------- */
.mv-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mv-space-2);
	min-width: 44px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--mv-radius-sm);
	font: inherit;
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--mv-dur) var(--mv-ease), background-color var(--mv-dur) var(--mv-ease), color var(--mv-dur) var(--mv-ease), border-color var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease);
}

.mv-btn:hover { transform: translateY(-1px); }
.mv-btn:active { transform: translateY(0); }

.mv-btn--primary {
	background: var(--mv-silo-fill);
	color: var(--mv-silo-contrast);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--mv-silo-fill) 20%, transparent);
}
.mv-btn--primary:hover { background: color-mix(in srgb, var(--mv-silo-fill) 90%, black); color: var(--mv-silo-contrast); }

.mv-btn--secondary {
	background: var(--mv-ink);
	color: var(--mv-on-dark);
}
.mv-btn--secondary:hover { background: var(--mv-ink-deep); color: var(--mv-on-dark); }

.mv-btn--outline {
	background: transparent;
	color: var(--mv-text);
	border-color: var(--mv-border-strong);
}
.mv-btn--outline:hover { border-color: var(--mv-silo); color: var(--mv-silo-text); background: var(--mv-silo-soft); }
[data-theme="dark"] .mv-btn--outline:hover { background: var(--mv-interactive-hover); }

.mv-btn--text,
.mv-btn--ghost {
	min-height: 36px;
	padding: 6px 4px;
	background: transparent;
	color: var(--mv-silo-text);
	border-color: transparent;
}
.mv-btn--text:hover,
.mv-btn--ghost:hover { color: var(--mv-text); }

.mv-btn--danger { background: var(--mv-danger); color: white; }
.mv-btn--danger:hover { background: color-mix(in srgb, var(--mv-danger) 88%, black); color: white; }

.mv-btn--icon { width: 44px; padding: 0; border-radius: 50%; }

.mv-btn[aria-busy="true"] { color: transparent; cursor: wait; }
.mv-btn[aria-busy="true"]::after {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	color: var(--mv-silo-contrast);
	content: "";
	animation: mv-spin 700ms linear infinite;
}

.mv-btn:disabled,
.mv-btn[aria-disabled="true"] {
	opacity: 0.48;
	cursor: not-allowed;
	transform: none;
}

@keyframes mv-spin { to { transform: rotate(360deg); } }

/* Form controls ------------------------------------------------------- */
.mv-form { display: grid; gap: var(--mv-space-5); }
.mv-field { display: grid; gap: var(--mv-space-2); }
.mv-field__head { display: flex; justify-content: space-between; gap: var(--mv-space-4); align-items: baseline; }
.mv-label,
.mv-legend { color: var(--mv-text); font-weight: 700; font-size: 0.94rem; }
.mv-field__help,
.mv-field__count { margin: 0; color: var(--mv-text-muted); font-size: 0.84rem; line-height: 1.45; }
.mv-field__error { display: flex; gap: var(--mv-space-2); margin: 0; color: var(--mv-danger); font-size: 0.86rem; font-weight: 650; }

.mv-input,
.mv-select,
.mv-textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	background: var(--mv-surface);
	color: var(--mv-text);
	border: 1px solid var(--mv-border-strong);
	border-radius: var(--mv-radius-sm);
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.45;
	transition: border-color var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease), background-color var(--mv-dur) var(--mv-ease);
}
.mv-textarea { min-height: 126px; resize: vertical; }
.mv-input::placeholder,
.mv-textarea::placeholder { color: var(--mv-text-muted); opacity: 0.85; }
.mv-input:hover,
.mv-select:hover,
.mv-textarea:hover { border-color: color-mix(in srgb, var(--mv-silo) 52%, var(--mv-border-strong)); }
.mv-input:focus,
.mv-select:focus,
.mv-textarea:focus { border-color: var(--mv-silo); box-shadow: 0 0 0 4px var(--mv-silo-soft); outline: none; }
.mv-field[aria-invalid="true"] :is(.mv-input, .mv-select, .mv-textarea),
:is(.mv-input, .mv-select, .mv-textarea)[aria-invalid="true"] { border-color: var(--mv-danger); }

/**
 * Form controls, hardened against the parent theme and against autofill.
 *
 * Two separate problems, both of which made typed text invisible in dark mode:
 *
 * 1. **Specificity.** The rules above are single classes (0,1,0). Blocksy styles
 *    fields with attribute selectors — `input[type="email"]`, `[type="password"]`
 *    — which score (0,1,1) and therefore win, repainting the text in its own
 *    light-mode colour on our dark surface. Qualifying the selector with the
 *    element name brings us to (0,1,1) too, and later source order settles it.
 *
 * 2. **Autofill.** Chrome paints `:-webkit-autofill` fields with a hard-coded
 *    white background and near-black text, and `color` cannot override it —
 *    only `-webkit-text-fill-color` can. The inset shadow repaints the
 *    background, and the absurd transition delay stops Chrome animating back to
 *    white on blur.
 *
 * `color-scheme: inherit` makes the native furniture — the autofill dropdown,
 * the caret, Edge's password reveal, spinners — follow the theme as well.
 */
input.mv-input,
select.mv-select,
textarea.mv-textarea,
.mv-input[type],
.mv-select[type],
.mv-textarea[type] {
	background-color: var(--mv-surface);
	color: var(--mv-text);
	-webkit-text-fill-color: var(--mv-text);
	caret-color: var(--mv-text);
	color-scheme: inherit;
}

input.mv-input::placeholder,
textarea.mv-textarea::placeholder {
	color: var(--mv-text-muted);
	-webkit-text-fill-color: var(--mv-text-muted);
	opacity: 0.85;
}

input.mv-input:-webkit-autofill,
input.mv-input:-webkit-autofill:hover,
input.mv-input:-webkit-autofill:focus,
input.mv-input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--mv-text);
	box-shadow: inset 0 0 0 1000px var(--mv-surface);
	transition: background-color 100000s ease-in-out 0s;
}

/* Same reasoning for the buttons attached to a field. */
button.mv-password__toggle,
button.mv-search__button { color: inherit; }

.mv-choice { display: flex; align-items: flex-start; gap: var(--mv-space-3); color: var(--mv-text); font-size: 0.92rem; }
.mv-choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--mv-silo-fill); }
.mv-choice a { color: inherit; }
.mv-fieldset { display: grid; gap: var(--mv-space-3); padding: 0; border: 0; }
.mv-input-group { display: grid; grid-template-columns: 1fr auto; }
.mv-input-group .mv-input { border-radius: var(--mv-radius-sm) 0 0 var(--mv-radius-sm); }
.mv-input-group .mv-btn { border-radius: 0 var(--mv-radius-sm) var(--mv-radius-sm) 0; }

/* Honeypot: hidden from humans, present for bots. */
.mv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Badges -------------------------------------------------------------- */
.mv-badge {
	--mv-badge-color: var(--mv-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: fit-content;
	min-height: 26px;
	padding: 4px 9px;
	border: 1px solid color-mix(in srgb, var(--mv-badge-color) 28%, transparent);
	border-radius: var(--mv-radius-pill);
	background: color-mix(in srgb, var(--mv-badge-color) 10%, var(--mv-surface));
	color: var(--mv-badge-color);
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.045em;
	line-height: 1;
	text-transform: uppercase;
}
.mv-badge .mv-icon { width: 14px; height: 14px; }
.mv-badge--silo { --mv-badge-color: var(--mv-silo-text); background: var(--mv-silo-soft); }
.mv-badge--content { --mv-badge-color: var(--mv-info); }
.mv-badge--evidence { --mv-badge-color: var(--mv-evidence-moderate); }
.mv-badge--verified { --mv-badge-color: var(--mv-success); }
.mv-badge--expert { --mv-badge-color: var(--mv-brand-deep); }
.mv-badge--author { --mv-badge-color: oklch(0.46 0.15 254); }
[data-theme="dark"] .mv-badge--author { --mv-badge-color: oklch(0.76 0.12 254); }
.mv-badge--moderator { --mv-badge-color: var(--mv-warning); }
.mv-badge--updated { --mv-badge-color: var(--mv-text-muted); }
.mv-badge--affiliate { --mv-badge-color: var(--mv-brand-deep); border-style: dashed; }
.mv-badge--sponsored { --mv-badge-color: var(--mv-warning); }
.mv-badge--open { --mv-badge-color: var(--mv-info); }
.mv-badge--resolved { --mv-badge-color: var(--mv-success); }
.mv-badge--draft { --mv-badge-color: var(--mv-text-muted); }
.mv-badge--pending { --mv-badge-color: var(--mv-warning); }

/* Cards --------------------------------------------------------------- */
.mv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--mv-space-5); }
.mv-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--mv-surface);
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius-md);
	overflow: hidden;
	box-shadow: var(--mv-shadow-sm);
	transition: transform var(--mv-dur) var(--mv-ease), box-shadow var(--mv-dur) var(--mv-ease), border-color var(--mv-dur) var(--mv-ease);
}
.mv-card:hover { transform: translateY(-2px); border-color: var(--mv-silo-line); box-shadow: var(--mv-shadow); }
.mv-card__media { display: block; aspect-ratio: 16 / 10; background: var(--mv-card-image, none) center / cover no-repeat, var(--mv-bg-soft); overflow: hidden; }
.mv-card__img { width: 100%; height: 100%; object-fit: cover; }
.mv-card__body { display: grid; align-content: start; gap: var(--mv-space-3); flex: 1; padding: var(--mv-space-4); }
.mv-card__title { margin: 0; font-size: 1.02rem; line-height: 1.35; letter-spacing: -0.018em; }
.mv-card__title a { color: var(--mv-text); text-decoration: none; }
.mv-card__title a:hover { color: var(--mv-silo-text); }
.mv-card__text { margin: 0; color: var(--mv-text-muted); font-size: 0.9rem; line-height: 1.55; }
.mv-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mv-space-2); margin: auto 0 0; color: var(--mv-text-muted); font-size: 0.8rem; }
.mv-card__avatar { width: 24px; height: 24px; border-radius: 50%; }
.mv-card__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: auto; border: 1px solid var(--mv-silo-line); border-radius: var(--mv-radius-md); background: var(--mv-silo-soft); color: var(--mv-silo-text); }
.mv-card__score { margin-left: auto; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--mv-success) 42%, var(--mv-border)); border-radius: var(--mv-radius-pill); color: var(--mv-success); font-size: 0.82rem; }
.mv-card--horizontal { display: grid; grid-template-columns: minmax(128px, 34%) 1fr; }
.mv-card--horizontal .mv-card__media { aspect-ratio: auto; min-height: 100%; }
.mv-card--compact { box-shadow: none; }
.mv-card:is(.mv-card--ingredient, .mv-card--product, .mv-card--comparison, .mv-card--question, .mv-card--testimonial, .mv-card--member, .mv-card--tool, .mv-card--alert, .mv-card--source, .mv-card--author) .mv-card__media { display: grid; place-items: center; aspect-ratio: 16 / 7; background: linear-gradient(145deg, var(--mv-bg-soft), var(--mv-surface)); }
.mv-card--alert { border-color: color-mix(in srgb, var(--mv-warning) 40%, var(--mv-border)); }
.mv-card--alert .mv-card__icon { color: var(--mv-warning); }
.mv-card--source .mv-card__icon { color: var(--mv-success); }
.mv-card--testimonial .mv-card__text { font-style: italic; }
.mv-card--member .mv-card__icon,
.mv-card--author .mv-card__icon { border-radius: 50%; }

.mv-grid { display: grid; gap: var(--mv-space-5); }
.mv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* Progressive pagination -------------------------------------------- */
.mv-more-pagination {
	display: grid;
	justify-items: center;
	gap: 10px;
	margin-top: clamp(32px, 5vw, 64px);
	padding-top: clamp(24px, 3vw, 36px);
	border-top: 1px solid var(--mv-border);
}
.mv-more-pagination[hidden] { display: none; }
.mv-more-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: min(100%, 280px);
	min-height: 50px;
	padding: 12px 22px;
	border: 1px solid var(--mv-border-strong);
	border-radius: var(--mv-radius-xs);
	background: var(--mv-surface);
	color: var(--mv-text);
	font-size: 0.95rem;
	font-weight: 750;
	text-decoration: none;
	box-shadow: var(--mv-shadow-sm);
	transition: border-color var(--mv-dur) var(--mv-ease), background-color var(--mv-dur) var(--mv-ease), color var(--mv-dur) var(--mv-ease), transform var(--mv-dur) var(--mv-ease);
}
.mv-more-pagination__link:hover {
	border-color: var(--mv-silo-text);
	background: var(--mv-silo-soft);
	color: var(--mv-silo-text);
	transform: translateY(-1px);
}
.mv-more-pagination__link .mv-icon { transition: transform var(--mv-dur) var(--mv-ease); }
.mv-more-pagination__link:hover .mv-icon { transform: translateX(3px); }
.mv-more-pagination__position { color: var(--mv-text-muted); font-size: 0.78rem; }

/* Health and evidence ------------------------------------------------- */
.mv-health {
	--mv-health-tone: var(--mv-info);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--mv-space-4);
	padding: var(--mv-space-5);
	border: 1px solid color-mix(in srgb, var(--mv-health-tone) 34%, var(--mv-border));
	border-radius: var(--mv-radius-sm);
	background: color-mix(in srgb, var(--mv-health-tone) 7%, var(--mv-surface));
}
.mv-health--warning { --mv-health-tone: var(--mv-warning); }
.mv-health--danger { --mv-health-tone: var(--mv-danger); }
.mv-health--success { --mv-health-tone: var(--mv-success); }
.mv-health--neutral { --mv-health-tone: var(--mv-text-muted); }
.mv-health--evidence { --mv-health-tone: var(--mv-evidence-moderate); }
.mv-health__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mv-surface); color: var(--mv-health-tone); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mv-health-tone) 25%, var(--mv-border)); }
.mv-health__title { margin: 1px 0 var(--mv-space-2); font-size: 1rem; letter-spacing: -0.01em; }
.mv-health__content { color: var(--mv-text-muted); font-size: 0.92rem; line-height: 1.6; }
.mv-health__content > :last-child { margin-bottom: 0; }
.mv-health__content ul { display: grid; gap: var(--mv-space-2); padding-left: var(--mv-space-5); }
.mv-health__content li { list-style: disc; }

.mv-evidence { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mv-space-2); color: var(--mv-text); font-size: 0.84rem; }
.mv-evidence__bars { display: inline-flex; align-items: end; gap: 3px; height: 18px; }
.mv-evidence__bars span { width: 5px; height: 6px; border: 1px solid var(--mv-border-strong); border-radius: 2px 2px 1px 1px; background: transparent; }
.mv-evidence__bars span:nth-child(2) { height: 10px; }
.mv-evidence__bars span:nth-child(3) { height: 14px; }
.mv-evidence__bars span:nth-child(4) { height: 18px; }
.mv-evidence[data-level="low"] { color: var(--mv-evidence-low); }
.mv-evidence[data-level="limited"] { color: var(--mv-evidence-limited); }
.mv-evidence[data-level="moderate"] { color: var(--mv-evidence-moderate); }
.mv-evidence[data-level="strong"] { color: var(--mv-evidence-strong); }
.mv-evidence__bars .is-filled { border-color: currentColor; background: currentColor; }
.mv-evidence-legend { display: grid; gap: var(--mv-space-3); padding: var(--mv-space-4); border: 1px solid var(--mv-border); border-radius: var(--mv-radius-sm); background: var(--mv-bg-soft); }
.mv-evidence-legend__levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mv-space-3); }
.mv-evidence-legend > a { display: inline-flex; align-items: center; justify-self: start; gap: 6px; color: var(--mv-silo-text); font-size: .875rem; font-weight: 700; text-decoration: none; }

/* Dynamic states ------------------------------------------------------ */
.mv-state {
	display: grid;
	justify-items: center;
	gap: var(--mv-space-3);
	padding: clamp(var(--mv-space-5), 5vw, var(--mv-space-8));
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius-md);
	background: var(--mv-bg-soft);
	color: var(--mv-text-muted);
	text-align: center;
}
.mv-state__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mv-surface); color: var(--mv-silo-text); box-shadow: inset 0 0 0 1px var(--mv-border); }
.mv-state__title { margin: 0; font-size: 1.08rem; letter-spacing: -0.015em; }
.mv-state__message { max-width: 52ch; margin: 0; }
.mv-state--error { border-color: color-mix(in srgb, var(--mv-danger) 45%, var(--mv-border)); }
.mv-state--error .mv-state__icon { color: var(--mv-danger); }
.mv-state--success .mv-state__icon { color: var(--mv-success); }
.mv-state--moderation .mv-state__icon { color: var(--mv-warning); }
.mv-state--loading { align-items: stretch; justify-items: stretch; text-align: left; }
.mv-skeleton { display: grid; gap: var(--mv-space-3); }
.mv-skeleton__line,
.mv-skeleton__media { border-radius: var(--mv-radius-xs); background: linear-gradient(100deg, var(--mv-border) 20%, var(--mv-surface) 40%, var(--mv-border) 60%); background-size: 220% 100%; animation: mv-shimmer 1.4s ease-in-out infinite; }
.mv-skeleton__media { aspect-ratio: 16 / 9; }
.mv-skeleton__line { height: 14px; }
.mv-skeleton__line:nth-child(2) { width: 82%; }
.mv-skeleton__line:nth-child(3) { width: 58%; }
@keyframes mv-shimmer { to { background-position-x: -220%; } }

.mv-form__status { min-height: 1.35em; margin: var(--mv-space-2) 0 0; font-size: 0.875rem; }
.mv-form__status.is-error { color: var(--mv-danger); }
.mv-form__status.is-success { color: var(--mv-success); }

@media (max-width: 640px) {
	.mv-btn:not(.mv-btn--icon, .mv-btn--text, .mv-btn--ghost) { width: 100%; }
	.mv-input-group { grid-template-columns: 1fr; gap: var(--mv-space-2); }
	.mv-input-group .mv-input,
	.mv-input-group .mv-btn { border-radius: var(--mv-radius-sm); }
	.mv-card--horizontal { grid-template-columns: 112px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.mv-skeleton__line,
	.mv-skeleton__media { animation: none; }
}

/* Internal component gallery ----------------------------------------- */
.mv-gallery { padding-block: clamp(var(--mv-space-7), 7vw, var(--mv-space-9)); }
.mv-gallery__hero { max-width: 920px; margin-bottom: var(--mv-space-8); }
.mv-gallery__hero > p:last-child { max-width: 62ch; color: var(--mv-text-muted); }
.mv-gallery__eyebrow { margin-bottom: var(--mv-space-3); color: var(--mv-silo-text); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.mv-gallery__section { padding-block: var(--mv-space-7); border-top: 1px solid var(--mv-border); }
.mv-gallery__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mv-space-3); }
.mv-gallery__form { max-width: 680px; }
.mv-gallery__states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mv-space-4); }
.mv-gallery__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mv-space-4); }
.mv-gallery__health { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mv-space-4); }
.mv-gallery__evidence { margin-top: var(--mv-space-5); }
@media (max-width: 1023px) { .mv-gallery__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .mv-gallery__states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.mv-health { grid-template-columns: 1fr; }
	.mv-gallery__states,
	.mv-gallery__cards,
	.mv-gallery__health,
	.mv-evidence-legend__levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}