/* Moeen tests, public page. Colours come from the theme's tokens, so light, dark and follow-system just work. */
.moeen-tests {
	--mt-accent: var(--wp--preset--color--accent-1, #3a7f1d);
	--mt-on: var(--moeen-on-accent, #fff);
	--mt-line: var(--wp--preset--color--accent-5, #d6e5c3);
	--mt-surface: var(--wp--preset--color--surface, #fff);
	--mt-soft: var(--wp--preset--color--accent-5, #e5f0d3);
	--mt-muted: var(--wp--preset--color--accent-4, #51694f);
	--mt-warm: var(--wp--preset--color--coral-ink, #a8402f);
	--mt-warm-bg: var(--wp--preset--color--coral-bg, #fae0da);
	--mt-leaf: 6px 22px 6px 22px;
	max-width: 54rem; margin-inline: auto; display: grid; gap: 2rem;
}
.mt-lead { font-size: 1.0625rem; margin: 0; color: var(--mt-muted); }
.mt-empty { padding: 1.25rem; border: 1px dashed var(--mt-line); border-radius: var(--mt-leaf); color: var(--mt-muted); }
.mt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .55rem 1.3rem;
	border-radius: 4px 16px 4px 16px; border: 1px solid var(--mt-accent); background: var(--mt-accent); color: var(--mt-on);
	font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s;
}
.mt-btn:hover { transform: translateY(-1px); }
.mt-btn-soft { background: transparent; color: var(--mt-accent); }
.mt-btn:focus-visible, .mt-opts input:focus-visible + label { outline: 3px solid var(--mt-warm); outline-offset: 2px; }

/* list */
.mt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.mt-card {
	position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.1rem;
	background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-leaf); overflow: hidden;
	transition: border-color .2s, transform .2s;
}
.mt-card:hover { border-color: var(--mt-accent); transform: translateY(-2px); }
.mt-card-mark {
	width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50% 50% 50% 8px;
	background: color-mix(in srgb, var(--mt-accent) calc(14% + var(--mt-i, 0) * 6%), transparent); color: var(--mt-accent);
	font-weight: 700; font-size: 1.15rem;
}
.mt-card:nth-child(even) .mt-card-mark { background: var(--mt-warm-bg); color: var(--mt-warm); }
.mt-card h2 { font-size: 1.125rem; margin: 0; line-height: 1.5; }
.mt-card h2 a { color: inherit; text-decoration: none; }
.mt-card h2 a::after { content: ""; position: absolute; inset: 0; }
.mt-card p { margin: 0; }
.mt-card > p:last-child { margin-top: auto; padding-top: .5rem; position: relative; z-index: 1; }
.mt-meta { font-size: .8125rem; color: var(--mt-muted); }
.mt-tag { border: 1px solid var(--mt-warm); color: var(--mt-warm); border-radius: 99px; padding: 0 .45rem; }
.mt-card-clinic { background: var(--mt-soft); border-style: dashed; }
.mt-card-clinic h2 { font-size: 1.0625rem; }

/* notice */
.mt-notice { border-inline-start: 4px solid var(--mt-warm); background: var(--mt-surface); border-radius: 4px 18px 4px 18px; padding: 1rem 1.25rem; font-size: .9375rem; }
.mt-notice h2 { font-size: 1.0625rem; margin: 0 0 .5rem; }
.mt-notice ul { margin: 0 0 .75rem; padding-inline-start: 1.1rem; display: grid; gap: .35rem; }
.mt-notice p { margin: 0; }

/* test */
.mt-back { margin: 0; }
.mt-back a::before { content: "→ "; }
[dir="ltr"] .mt-back a::before { content: "← "; }
.mt-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 .25rem; }
.mt-intro { background: var(--mt-soft); border-radius: var(--mt-leaf); padding: .9rem 1.1rem; margin: .75rem 0 0; }
.mt-source { font-size: .8125rem; color: var(--mt-muted); margin: 0; }
.mt-prog { position: sticky; top: 0; z-index: 2; background: var(--wp--preset--color--base, #f6f9f0); padding: .5rem 0; }
.mt-progress { height: .5rem; border-radius: 99px; background: var(--mt-soft); overflow: hidden; }
.mt-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--mt-accent), color-mix(in srgb, var(--mt-accent) 60%, var(--mt-warm))); border-radius: 99px; transition: width .3s; }
[dir="rtl"] .mt-progress span { margin-inline-start: auto; background: linear-gradient(270deg, var(--mt-accent), color-mix(in srgb, var(--mt-accent) 60%, var(--mt-warm))); }
.mt-progress-text { font-size: .8125rem; color: var(--mt-muted); margin: .35rem 0 0; }
.mt-form { display: grid; gap: .9rem; }
.mt-item { border: 1px solid var(--mt-line); border-radius: var(--mt-leaf); background: var(--mt-surface); padding: 1rem 1.1rem 1.1rem; margin: 0; transition: border-color .2s; }
.mt-item:has(input:checked) { border-color: color-mix(in srgb, var(--mt-accent) 45%, var(--mt-line)); }
.mt-item.mt-unanswered { border-color: var(--mt-warm); box-shadow: inset 4px 0 0 var(--mt-warm); }
.mt-item legend { display: flex; gap: .6rem; align-items: baseline; font-weight: 600; line-height: 1.7; padding: 0; float: left; width: 100%; margin-bottom: .75rem; }
[dir="rtl"] .mt-item legend { float: right; }
.mt-item legend + * { clear: both; }
.mt-n { flex: none; min-width: 1.9rem; height: 1.9rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--mt-soft); color: var(--mt-accent); font-size: .8125rem; }
/* position: relative keeps each visually hidden radio inside its own question; without it the radios sat at the
   top of the article and focusing one (by clicking its label) scrolled the page back up. */
.mt-opts { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .4rem; }
.mt-opts input { position: absolute; inset-block-start: 0; inset-inline-start: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mt-opts label {
	display: grid; place-items: center; text-align: center; min-height: 2.9rem; padding: .4rem .55rem; font-size: .875rem; line-height: 1.35;
	border: 1px solid var(--mt-line); border-radius: 4px 14px 4px 14px; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
	background: color-mix(in srgb, var(--mt-accent) calc(var(--mt-k, 0) * 3%), var(--mt-surface));
}
.mt-opts label:hover { border-color: var(--mt-accent); }
.mt-opts input:checked + label { background: var(--mt-accent); border-color: var(--mt-accent); color: var(--mt-on); font-weight: 600; }
.mt-missing { color: var(--mt-warm); font-weight: 600; margin: 0; }
.mt-nav { display: flex; flex-wrap: wrap; gap: .6rem; }
.mt-resume { background: var(--mt-soft); border-radius: var(--mt-leaf); padding: 1.1rem 1.25rem; }
.mt-resume p { margin: 0 0 .8rem; }

/* result */
.mt-result { background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: 8px 30px 8px 30px; padding: clamp(1rem, 3vw, 1.75rem); }
.mt-result h3 { margin: 0 0 1rem; font-size: 1.35rem; }
.mt-result h3:focus { outline: none; }
.mt-code { display: flex; align-items: baseline; gap: .75rem; margin: 0; }
.mt-code b { font-size: 2.2rem; letter-spacing: .12em; color: var(--mt-accent); }
.mt-code-names { margin: 0 0 1rem; color: var(--mt-muted); }
.mt-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.mt-bar-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.mt-band { font-size: .75rem; border-radius: 99px; padding: .05rem .6rem; border: 1px solid var(--mt-line); color: var(--mt-muted); }
.mt-band-high { border-color: var(--mt-accent); color: var(--mt-accent); }
.mt-band-low { border-color: var(--mt-warm); color: var(--mt-warm); }
.mt-bar { height: .7rem; border-radius: 99px; background: var(--mt-soft); margin: .4rem 0 .5rem; overflow: hidden; }
.mt-bar span { display: block; height: 100%; border-radius: 99px; background: var(--mt-accent); }
[dir="rtl"] .mt-bar span { margin-inline-start: auto; }
.mt-bars p { margin: 0; font-size: .9375rem; line-height: 1.8; }
.mt-hint { font-size: .8125rem; color: var(--mt-muted); margin: 1rem 0 0; }
.mt-result .mt-nav { margin-top: 1.25rem; }

@media (max-width: 40rem) {
	.mt-opts { grid-template-columns: 1fr; }
	.mt-opts label { min-height: 2.75rem; place-items: center start; padding-inline: 1rem; text-align: start; }
}
@media (prefers-reduced-motion: reduce) { .mt-btn, .mt-card, .mt-progress span { transition: none; } }
@media print {
	.mt-noprint, .mt-back, .mt-notice .mt-btn, header, footer, .wp-site-blocks > header, .wp-site-blocks > footer { display: none !important; }
	.mt-result { border: 0; padding: 0; }
	.mt-bar { border: 1px solid #000; }
	.mt-bar span { background: #555 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* desk */
.mt-desk { max-width: 64rem; }
.mt-desk-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.mt-desk-table th, .mt-desk-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--mt-line); text-align: start; vertical-align: top; }
.mt-desk-table th { color: var(--mt-muted); font-weight: 600; font-size: .8125rem; }
@media (max-width: 40rem) { .mt-desk-table { display: block; overflow-x: auto; } }
.mt-tag-soft { border-color: var(--mt-line); color: var(--mt-muted); }

/* respondent versions, top scales */
.mt-variants { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem; }
.mt-variants input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mt-variants label { display: grid; gap: .3rem; padding: .9rem 1rem; border: 1px solid var(--mt-line); border-radius: var(--mt-leaf); cursor: pointer; line-height: 1.7; }
.mt-variants label span { font-weight: 400; font-size: .9rem; color: var(--mt-muted); }
.mt-variants input:checked + label { border-color: var(--mt-accent); box-shadow: inset 0 0 0 1px var(--mt-accent); background: var(--mt-soft); }
.mt-variants input:focus-visible + label { outline: 3px solid var(--mt-warm); outline-offset: 2px; }
.mt-variant-note { margin: 0; font-size: .875rem; color: var(--mt-muted); }
.mt-sub { font-size: 1.05rem; margin: 1rem 0 .75rem; }
.mt-more { margin-top: 1.25rem; }
.mt-more > summary { cursor: pointer; font-weight: 600; color: var(--mt-accent); }
.mt-bars-compact { gap: .55rem; margin-top: .75rem; }
.mt-bars-compact .mt-bar { margin-bottom: 0; }
.mt-btn-warm { background: var(--mt-warm); border-color: var(--mt-warm); }
.mt-card-clinic .mt-card-mark { background: var(--mt-warm-bg); color: var(--mt-warm); }