/* Reflectin Assessments – calm, warm style matched to the reflectin.me design.
   Everything is scoped under .rfl so theme styles don't leak in or out. */
.rfl {
	--rfl-bg: #f7f4ef;
	--rfl-paper: #fbfaf7;
	--rfl-beige: #ebe5db;
	--rfl-sage: #e1e6e0;
	--rfl-band: #dbe1dc;
	--rfl-teal: #446160;
	--rfl-teal-dark: #34504f;
	--rfl-ink: #16292b;
	--rfl-text: #3b3f45;
	--rfl-muted: #7d7f82;
	--rfl-line: #ddd6ca;
	--rfl-warm: #a8927c;
	--rfl-serif: "Newsreader", "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	color: var(--rfl-text);
	font-size: 17px;
	line-height: 1.6;
	max-width: 880px;
	margin: 0 auto 40px;
}
.rfl *, .rfl *::before, .rfl *::after { box-sizing: border-box; }
.rfl h2, .rfl h3, .rfl p { margin-top: 0; }
.rfl h2, .rfl h3, .rfl .rfl-question {
	font-family: var(--rfl-serif);
	font-weight: 400;
	color: var(--rfl-ink);
	letter-spacing: -.01em;
}
.rfl h2 { font-size: 38px; line-height: 1.12; margin-bottom: 14px; }
.rfl h3 { font-size: 26px; line-height: 1.2; margin-bottom: 8px; }
.rfl h2:focus, .rfl .rfl-question:focus { outline: none; }

.rfl .rfl-card {
	background: var(--rfl-paper);
	border: 1px solid var(--rfl-line);
	border-radius: 8px;
	padding: 32px;
	margin-bottom: 20px;
}
.rfl .rfl-hero { background: var(--rfl-paper); }
.rfl .rfl-muted { color: var(--rfl-muted); }
.rfl .rfl-fine { color: var(--rfl-muted); font-size: 14px; line-height: 1.6; margin: 16px 0 0; }
.rfl .rfl-center { text-align: center; justify-content: center; }

.rfl .rfl-eyebrow {
	display: block; margin-bottom: 14px;
	font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--rfl-text);
}
.rfl .rfl-chips { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 22px; padding: 0; }
.rfl .rfl-chips span { font-size: 15px; color: var(--rfl-muted); }
.rfl .rfl-chips span + span::before { content: "·"; margin-right: 18px; color: var(--rfl-line); }

/* Buttons: explicit values so theme button styles don't take over. */
.rfl .rfl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 26px; min-height: 48px; border-radius: 6px;
	border: 1px solid #cfc8bc; background: transparent; color: var(--rfl-ink);
	font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2;
	text-decoration: none; text-transform: none; letter-spacing: normal; box-shadow: none;
	cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rfl .rfl-btn:hover { background: #f1ece4; color: var(--rfl-ink); text-decoration: none; }
.rfl .rfl-btn.rfl-primary { background: var(--rfl-teal); border-color: var(--rfl-teal); color: #fff; }
.rfl .rfl-btn.rfl-primary:hover { background: var(--rfl-teal-dark); border-color: var(--rfl-teal-dark); color: #fff; }
.rfl .rfl-btn:disabled { opacity: .45; cursor: not-allowed; }
.rfl .rfl-link {
	display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
	font: inherit; font-size: 16px; color: var(--rfl-ink); text-decoration: underline;
	text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer;
}
.rfl .rfl-link:hover { color: var(--rfl-teal); }
.rfl .rfl-btn:focus-visible, .rfl .rfl-link:focus-visible, .rfl .rfl-score:focus-visible, .rfl input:focus-visible {
	outline: 2px solid var(--rfl-teal); outline-offset: 3px;
}
.rfl .rfl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; }

/* Consent */
.rfl .rfl-consent {
	display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; margin: 0;
	border-radius: 6px; background: var(--rfl-sage); font-size: 15px; line-height: 1.5; cursor: pointer;
}
.rfl .rfl-consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--rfl-teal); }

/* Quiz */
.rfl .rfl-quiz { text-align: center; padding-top: 28px; }
.rfl .rfl-progress-label { display: flex; justify-content: space-between; font-size: 14px; color: var(--rfl-muted); margin-bottom: 10px; }
.rfl .rfl-progress { height: 4px; border-radius: 999px; background: var(--rfl-beige); overflow: hidden; }
.rfl .rfl-progress > div { height: 100%; background: var(--rfl-teal); transition: width .25s ease; }
.rfl .rfl-section { margin: 34px 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rfl-warm); }
.rfl .rfl-question { font-size: 32px; line-height: 1.3; max-width: 680px; margin: 0 auto 10px; }
.rfl .rfl-hint { color: var(--rfl-muted); font-size: 15px; margin-bottom: 24px; }
.rfl .rfl-scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rfl .rfl-score {
	display: block; width: 100%; padding: 16px 6px; border-radius: 6px;
	border: 1px solid var(--rfl-line); background: #fff; color: var(--rfl-ink);
	font: inherit; line-height: 1.2; text-transform: none; letter-spacing: normal; box-shadow: none;
	cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.rfl .rfl-score:hover { border-color: var(--rfl-teal); background: #fff; color: var(--rfl-ink); }
.rfl .rfl-score .rfl-n { display: block; font-family: var(--rfl-serif); font-size: 26px; margin-bottom: 4px; }
.rfl .rfl-score .rfl-t { display: block; font-size: 13px; color: var(--rfl-muted); }
.rfl .rfl-score.is-on { background: var(--rfl-teal); border-color: var(--rfl-teal); color: #fff; }
.rfl .rfl-score.is-on .rfl-t { color: #dfe8e7; }

/* Result */
.rfl .rfl-pill { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; margin: 0 0 16px; }
.rfl .rfl-low { background: #e1e6e0; color: #2f4a3a; }
.rfl .rfl-mild { background: #dde5e8; color: #2e4a57; }
.rfl .rfl-moderate { background: #efe1cf; color: #6b4a22; }
.rfl .rfl-high { background: #f0d9d2; color: #7a3524; }
.rfl .rfl-summary { padding: 16px 18px; border-radius: 6px; background: var(--rfl-sage); }
.rfl .rfl-teaser { background: var(--rfl-beige); border-color: var(--rfl-beige); }
.rfl .rfl-locked-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.rfl .rfl-locked-list li { display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 14px; align-items: center; font-size: 16px; color: var(--rfl-ink); }
.rfl .rfl-bar { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .6); overflow: hidden; filter: blur(2.5px); }
.rfl .rfl-bar span { display: block; height: 100%; background: var(--rfl-teal); opacity: .55; }
.rfl .rfl-crisis {
	padding: 18px 20px; margin-bottom: 20px; border-radius: 8px;
	background: #fbf1e6; border: 1px solid #e8cfb0; color: #5f3a1c; font-size: 16px;
}
.rfl .rfl-disclaimer { padding: 0 4px; }

/* Library */
.rfl.rfl-library { max-width: 1200px; }
.rfl .rfl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rfl .rfl-acard {
	display: flex; flex-direction: column; margin: 0; padding: 26px 24px 24px;
	border: 0; border-radius: 6px; position: relative; min-height: 220px;
}
.rfl .rfl-acard.rfl-tint-a { background: var(--rfl-beige); }
.rfl .rfl-acard.rfl-tint-b { background: var(--rfl-sage); }
.rfl .rfl-acard h3 { padding-right: 80px; margin-bottom: 10px; }
.rfl .rfl-acard p { font-size: 16px; line-height: 1.55; color: var(--rfl-text); margin-bottom: 14px; }
.rfl .rfl-acard .rfl-meta { font-size: 15px; color: var(--rfl-muted); margin-bottom: 18px; }
.rfl .rfl-acard .rfl-link { margin-top: auto; align-self: flex-start; }
.rfl .rfl-wave { position: absolute; top: 24px; right: 22px; width: 70px; height: 28px; color: var(--rfl-warm); opacity: .8; }
.rfl .rfl-pro-badge {
	display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: 999px;
	background: var(--rfl-teal); color: #fff; font-family: inherit; font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
}
.rfl .rfl-library-note { text-align: center; margin-top: 22px; }

@media (max-width: 1000px) {
	.rfl .rfl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.rfl { font-size: 16px; }
	.rfl .rfl-card { padding: 22px 20px; }
	.rfl h2 { font-size: 30px; }
	.rfl h3 { font-size: 24px; }
	.rfl .rfl-question { font-size: 25px; }
	.rfl .rfl-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rfl .rfl-grid { grid-template-columns: 1fr; }
	.rfl .rfl-locked-list li { grid-template-columns: 1fr; gap: 4px; }
	.rfl .rfl-row .rfl-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.rfl * { transition: none !important; }
}