/**
 * Manabreath Tools
 *
 * Brand colours and fonts live in the variables just below, so they can be
 * changed in one place. Everything else is scoped to .mana-tool so it never
 * touches the rest of the site.
 */

:root {
	/* ------------------------------------------------------------------
	 * Brand colours
	 * ---------------------------------------------------------------- */
	--mana-deep-green: #3F6F6A;  /* Primary: headings and body text. */
	--mana-sage: #9CAF9A;        /* Secondary: soft fills, such as the pacer circle. */
	--mana-clay: #C58B6B;        /* Accent: decorative touches, used sparingly. */
	--mana-sand: #E6DFD2;        /* Warm background panels. */
	--mana-pale-grey: #F3F5F5;   /* Light backgrounds. */
	--mana-white: #FFFFFF;

	/* ------------------------------------------------------------------
	 * Accessible companions to the brand colours
	 *
	 * Measured contrast (WCAG 2.x, 4.5:1 needed for normal text):
	 *   white on clay          2.9:1  fails
	 *   deep green on clay     2.0:1  fails
	 *   clay on white          2.9:1  fails (so clay cannot be link text)
	 *   deep green on sand     4.3:1  fails for body text
	 *   deep green on sage     2.4:1  fails
	 * So clay keeps its warmth through a deeper shade for buttons and links,
	 * and text sitting on sand or sage uses a deeper green.
	 * ---------------------------------------------------------------- */
	--mana-clay-deep: #8E5234;   /* Buttons (white text 6.2:1) and links (6.2:1 on white, 4.7:1 on sand). */
	--mana-ink: #2C4E4A;         /* Text on sand panels (6.9:1). */
	--mana-ink-deep: #1F3A37;    /* Text on the sage circle (5.2:1). */

	/* ------------------------------------------------------------------
	 * Fonts. Both are already loaded by the site, so they are only named here.
	 * ---------------------------------------------------------------- */
	--mana-font-heading: "Philosopher", Georgia, "Times New Roman", serif;
	--mana-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* ------------------------------------------------------------------
	 * Shape and space
	 * ---------------------------------------------------------------- */
	--mana-radius: 20px;
	--mana-radius-small: 12px;
	--mana-space: 1.5rem;
	--mana-focus: 3px solid var(--mana-deep-green);
}

/* ======================================================================
 * Shared
 * ==================================================================== */

.mana-tool {
	box-sizing: border-box;
	max-width: 40rem;
	margin: 0 auto 2rem;
	padding: var(--mana-space) 1.25rem;
	border-radius: var(--mana-radius);
	background: var(--mana-pale-grey);
	color: var(--mana-deep-green);
	font-family: var(--mana-font-body);
	font-size: 1rem;
	line-height: 1.65;
}

.mana-tool *,
.mana-tool *::before,
.mana-tool *::after {
	box-sizing: inherit;
}

.mana-tool p {
	margin: 0 0 1rem;
}

.mana-tool__title,
.mana-reflection__heading {
	margin: 0 0 1rem;
	color: var(--mana-deep-green);
	font-family: var(--mana-font-heading);
	font-weight: 700;
	line-height: 1.3;
}

.mana-tool__title {
	font-size: 1.6rem;
}

.mana-tool__note {
	font-size: 0.9rem;
}

.mana-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Buttons. Primary uses the deep clay with white text; quiet uses deep green on white. */
.mana-tool .mana-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--mana-clay-deep);
	border-radius: 999px;
	background: var(--mana-clay-deep);
	color: var(--mana-white);
	font-family: var(--mana-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mana-tool .mana-button:hover {
	border-color: var(--mana-ink);
	background: var(--mana-ink);
	color: var(--mana-white);
}

.mana-tool .mana-button--quiet {
	border-color: var(--mana-deep-green);
	background: var(--mana-white);
	color: var(--mana-deep-green);
}

.mana-tool .mana-button--quiet:hover {
	border-color: var(--mana-ink);
	background: var(--mana-sand);
	color: var(--mana-ink);
}

.mana-tool .mana-button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.mana-tool .mana-button[disabled]:hover {
	border-color: var(--mana-deep-green);
	background: var(--mana-white);
	color: var(--mana-deep-green);
}

.mana-tool .mana-link {
	color: var(--mana-clay-deep);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--mana-clay);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.mana-tool .mana-link:hover {
	color: var(--mana-ink);
}

.mana-tool a:focus-visible,
.mana-tool button:focus-visible,
.mana-tool input:focus-visible,
.mana-tool [tabindex="-1"]:focus-visible {
	outline: var(--mana-focus);
	outline-offset: 3px;
}

.mana-tool [tabindex="-1"]:focus:not(:focus-visible) {
	outline: none;
}

.mana-tool fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mana-tool legend {
	padding: 0;
}

.mana-tool input[type="radio"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	flex: none;
	accent-color: var(--mana-deep-green);
}

/* ======================================================================
 * [mana_breath_pacer]
 * ==================================================================== */

.mana-pacer {
	text-align: center;
}

.mana-pacer__legend {
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.mana-pacer__options {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.mana-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 2px solid var(--mana-sage);
	border-radius: 999px;
	background: var(--mana-white);
	color: var(--mana-ink);
	cursor: pointer;
}

.mana-chip:has(input:checked) {
	border-color: var(--mana-deep-green);
	background: var(--mana-sand);
}

.mana-chip:has(input:focus-visible) {
	outline: var(--mana-focus);
	outline-offset: 2px;
}

.mana-chip input:focus-visible {
	outline: none;
}

.mana-pacer__stage {
	position: relative;
	width: min(100%, 17rem);
	aspect-ratio: 1;
	margin: 1.75rem auto 1rem;
}

/* A faint ring shows how full the breath will become. */
.mana-pacer__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px dashed var(--mana-sage);
	border-radius: 50%;
	opacity: 0.6;
}

.mana-pacer__circle {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--mana-sage);
	transform: scale(0.55);
	will-change: transform;
}

.mana-pacer__readout {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--mana-ink-deep);
	font-family: var(--mana-font-heading);
	line-height: 1.2;
}

.mana-pacer__word {
	font-size: 1.15rem;
}

.mana-pacer__count {
	font-size: 2rem;
	font-weight: 700;
}

.mana-pacer__status {
	min-height: 1.65em;
	font-weight: 600;
}

.mana-pacer__controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.mana-pacer__controls .mana-button {
	min-width: 7rem;
}

.mana-pacer__invite {
	padding: 1.25rem;
	border-radius: var(--mana-radius-small);
	background: var(--mana-sand);
	color: var(--mana-ink);
}

.mana-pacer__invite p:last-child {
	margin-bottom: 0;
}

/* Reduced motion: the circle rests at a steady size and the text countdown leads. */
@media (prefers-reduced-motion: reduce) {
	.mana-pacer__circle {
		transform: scale(0.8);
		will-change: auto;
	}

	.mana-pacer__count {
		font-size: 2.5rem;
	}

	.mana-tool .mana-button {
		transition: none;
	}
}

/* ======================================================================
 * [mana_next_session]
 * ==================================================================== */

.mana-sessions__list {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.mana-sessions__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--mana-clay);
	border-radius: var(--mana-radius-small);
	background: var(--mana-white);
}

.mana-sessions__name {
	font-family: var(--mana-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
}

.mana-sessions__when {
	font-size: 1rem;
}

.mana-sessions__book {
	margin: 1.25rem 0 0;
}

/* ======================================================================
 * [mana_reflection]
 * ==================================================================== */

.mana-reflection__heading {
	font-size: 1.4rem;
}

.mana-reflection__step {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--mana-font-body);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.mana-reflection__question {
	display: block;
}

.mana-progress {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.mana-progress__step {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--mana-sand);
}

.mana-progress__step.is-done {
	background: var(--mana-sage);
}

.mana-progress__step.is-current {
	background: var(--mana-deep-green);
}

.mana-reflection__hint {
	font-size: 0.95rem;
}

.mana-reflection__options {
	display: grid;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
}

.mana-option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.75rem 1rem;
	border: 2px solid transparent;
	border-radius: var(--mana-radius-small);
	background: var(--mana-white);
	cursor: pointer;
}

.mana-option:hover {
	border-color: var(--mana-sage);
}

.mana-option:has(input:checked) {
	border-color: var(--mana-deep-green);
	background: var(--mana-sand);
	color: var(--mana-ink);
}

.mana-option:has(input:focus-visible) {
	outline: var(--mana-focus);
	outline-offset: 2px;
}

.mana-option input:focus-visible {
	outline: none;
}

.mana-reflection__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.mana-reflection__noticed {
	margin-bottom: 1rem;
	padding: 1.25rem;
	border-radius: var(--mana-radius-small);
	background: var(--mana-sand);
	color: var(--mana-ink);
}

.mana-reflection__noticed-title {
	font-weight: 600;
}

.mana-reflection__noticed ul {
	margin: 0;
	padding-left: 1.25rem;
}

/* ======================================================================
 * [mana_moon_breath]
 * ==================================================================== */

.mana-moon__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
}

.mana-moon__art {
	display: block;
	width: 7.5rem;
	height: 7.5rem;
	flex: none;
	overflow: visible;
}

.mana-moon__art[hidden] {
	display: none;
}

/* A soft glow behind the moon. */
.mana-moon__halo {
	fill: var(--mana-sage);
	opacity: 0.22;
}

/* The unlit part of the moon. */
.mana-moon__dark {
	fill: var(--mana-deep-green);
}

/* The lit part. Sand on deep green is 4.3:1, comfortably visible as a shape. */
.mana-moon__lit {
	fill: var(--mana-sand);
	animation: mana-moon-glow 1.6s ease-out both;
}

.mana-moon__rim {
	fill: none;
	stroke: var(--mana-sage);
	stroke-width: 1.5;
}

@keyframes mana-moon-glow {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.mana-moon__body {
	min-width: 0;
}

.mana-moon__eyebrow {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.mana-tool .mana-moon__eyebrow {
	margin-bottom: 0.25rem;
}

.mana-moon__phase {
	margin: 0 0 0.75rem;
	color: var(--mana-deep-green);
	font-family: var(--mana-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.mana-tool .mana-moon__link {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mana-moon__lit {
		animation: none;
	}
}

/* ======================================================================
 * Larger screens: a little more breathing room.
 * ==================================================================== */

@media (min-width: 600px) {
	.mana-tool {
		padding: 2.25rem 2.5rem;
	}

	.mana-pacer__stage {
		width: 19rem;
	}

	.mana-moon__card {
		flex-direction: row;
		align-items: flex-start;
		gap: 2rem;
		text-align: left;
	}

	.mana-moon__art {
		width: 8.5rem;
		height: 8.5rem;
	}
}

/* Respect Windows high contrast and forced colours. */
@media (forced-colors: active) {
	.mana-moon__dark {
		fill: Canvas;
	}

	.mana-moon__lit {
		fill: CanvasText;
	}

	.mana-moon__rim {
		stroke: CanvasText;
	}

	.mana-pacer__circle {
		background: CanvasText;
		opacity: 0.3;
	}

	.mana-progress__step.is-current,
	.mana-progress__step.is-done {
		background: Highlight;
	}
}