/*
 * «غرفة القرار» (page-decision-room.php, pages/decision/*, Stage 6).
 *
 * Rhythm: dark hero → white room.
 *
 * Before the answers (pages/decision/questions.php):
 *   without JavaScript the four questions are listed, each a group of choice
 *   cards; with room.js (data-gb-room="steps" on the form) one question at a
 *   time, under a short Growth Line whose seed walks to the current question,
 *   then «نرسم طريقك…» (a stem growing from the seed) before the path.
 *
 * After (pages/decision/result.php): the answers as chips, then the path on
 * a vertical Growth Line — الجذور (navy ring with rootlets), الساق والأغصان
 * (turquoise node, the services as numbered cards), الثمرة (the seed's
 * colour, the largest node) — the ways on, and a case study.
 */

/* ---------- The room ---------- */

.gb-room {
	padding-block: var(--gb-space-2xl);
	background-color: var(--gb-bg);
}

.gb-room__inner {
	display: grid;
	gap: var(--gb-space-l);
	max-inline-size: 52rem;
}

.gb-room__missing {
	margin: 0;
	padding-block: var(--gb-space-s);
	padding-inline: var(--gb-space-m);
	border-inline-start: 4px solid #C2410C;
	border-radius: var(--gb-radius-m);
	background-color: #FFF3EC;
	color: #8A2C05;
	font-weight: var(--gb-weight-bold);
}

.gb-room__form {
	display: grid;
	gap: var(--gb-space-xl);
}

.gb-room__form[hidden],
.gb-room__step[hidden],
.gb-room__thinking[hidden],
.gb-room__progress[hidden],
.gb-room__back[hidden] {
	display: none;
}

/* ---------- One question ---------- */

.gb-room__step {
	display: grid;
	gap: var(--gb-space-m);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* A legend is not a grid item of its fieldset, so it keeps its own space below. */
.gb-room__question {
	display: grid;
	gap: var(--gb-space-2xs);
	margin-block-end: var(--gb-space-m);
	padding: 0;
}

.gb-room__count {
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	color: #00807A;
}

.gb-room__question-text {
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-3);
	font-weight: var(--gb-weight-bold);
	line-height: var(--gb-leading-heading);
}

.gb-room__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--gb-space-s);
}

.gb-room__options--many {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}

.gb-room__option {
	position: relative;
	display: grid;
}

/* The radio stays in the page (keyboard, screen readers); the card is its label. */
.gb-room__radio {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: 1; /* always above its card, even while the card moves on hover */
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.gb-room__choice {
	display: flex;
	align-items: center;
	gap: var(--gb-space-xs);
	min-block-size: 3.75rem;
	padding-block: var(--gb-space-s);
	padding-inline: var(--gb-space-m);
	border: 1.5px solid var(--gb-border);
	border-radius: var(--gb-radius-m);
	background-color: var(--gb-surface);
	font-weight: var(--gb-weight-bold);
	line-height: 1.45;
	cursor: pointer;
	transition:
		border-color var(--gb-duration-fast) linear,
		background-color var(--gb-duration-fast) linear,
		translate var(--gb-duration-fast) var(--gb-ease-out);
}

.gb-room__choice-dot {
	position: relative;
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border: 2px solid var(--gb-color-neutral-300);
	border-radius: 50%;
	background-color: var(--gb-bg);
	transition: border-color var(--gb-duration-fast) linear;
}

/* The chosen one: a seed inside the ring. */
.gb-room__choice-dot::after {
	content: "";
	position: absolute;
	inset: 0.2rem;
	border-radius: 50%;
	background-color: var(--gb-seed);
	scale: 0;
	transition: scale var(--gb-duration-fast) var(--gb-ease-out);
}

/* Hover on the option (not the radio): the card moving must not take the hover away (no flicker). */
.gb-room__option:hover > .gb-room__choice {
	border-color: var(--gb-color-turquoise-a60);
	translate: 0 -2px;
}

.gb-room__radio:focus-visible + .gb-room__choice {
	outline: 3px solid var(--gb-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--gb-focus-halo);
}

.gb-room__radio:checked + .gb-room__choice {
	border-color: var(--gb-color-navy);
	background-color: var(--gb-color-turquoise-a10);
}

.gb-room__radio:checked + .gb-room__choice .gb-room__choice-dot {
	border-color: var(--gb-color-navy);
}

.gb-room__radio:checked + .gb-room__choice .gb-room__choice-dot::after {
	scale: 1;
}

/* ---------- Back / show ---------- */

.gb-room__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gb-space-s);
}

/* «التالي» pressed before choosing (room.js). */
.gb-room__choose {
	margin: 0;
	color: #B42318;
	font-weight: var(--gb-weight-bold);
}

.gb-room__choose[hidden] {
	display: none;
}

/* ---------- The progress: a short Growth Line, the seed on the current question ---------- */

.gb-room__progress {
	--gb-room-at: 0;
	--gb-room-last: 3;

	position: relative;
	block-size: 1.5rem;
	margin-inline: 0.75rem;
}

.gb-room__progress-line {
	position: absolute;
	inset-block-start: calc(50% - 1px);
	inset-inline: 0;
	block-size: 2px;
	background-color: var(--gb-border);
}

/* The grown part, from the first question to the current one. */
.gb-room__progress-line::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: calc(var(--gb-room-at) / var(--gb-room-last) * 100%);
	background-color: var(--gb-primary);
	transition: inline-size var(--gb-duration-base) var(--gb-ease-out);
}

.gb-room__progress-node {
	position: absolute;
	inset-block-start: calc(50% - 0.375rem);
	inset-inline-start: calc(var(--i) / var(--gb-room-last) * 100% - 0.375rem);
	inline-size: 0.75rem;
	block-size: 0.75rem;
	border: 2px solid var(--gb-color-neutral-300);
	border-radius: 50%;
	background-color: var(--gb-bg);
	transition:
		border-color var(--gb-duration-base) linear,
		background-color var(--gb-duration-base) linear;
}

.gb-room__progress-node[data-gb-done] {
	border-color: var(--gb-primary);
	background-color: var(--gb-primary);
}

.gb-room__progress-seed {
	position: absolute;
	inset-block-start: calc(50% - 0.6rem);
	inset-inline-start: calc(var(--gb-room-at) / var(--gb-room-last) * 100% - 0.6rem);
	inline-size: 1.2rem;
	block-size: 1.2rem;
	border-radius: 50%;
	background-color: var(--gb-seed);
	box-shadow: 0 0 0 0.35rem var(--gb-color-seed-a35);
	transition: inset-inline-start var(--gb-duration-base) var(--gb-ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.gb-room__progress-line::after,
	.gb-room__progress-seed {
		transition: none;
	}
}

/* A question arriving (room.js): a short rise. */
@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-room__form[data-gb-room="steps"] .gb-room__step:not([hidden]) {
		animation: gb-room-in 0.4s var(--gb-ease-out) both;
	}
}

@keyframes gb-room-in {
	from {
		opacity: 0;
		translate: 0 0.75rem;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* ---------- «نرسم طريقك…» ---------- */

.gb-room__thinking {
	display: grid;
	justify-items: center;
	gap: var(--gb-space-s);
	padding-block: var(--gb-space-xl);
	text-align: center;
}

.gb-room__thinking p {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
	font-weight: var(--gb-weight-bold);
}

.gb-room__thinking-art {
	inline-size: 7rem;
	block-size: 7rem;
	overflow: visible;
}

.gb-room__thinking-ground {
	fill: none;
	stroke: var(--gb-color-neutral-300);
	stroke-width: 2;
	stroke-linecap: round;
}

.gb-room__thinking-stem {
	fill: none;
	stroke: var(--gb-mark-stroke, var(--gb-primary));
	stroke-width: 4;
	stroke-linecap: round;
}

.gb-room__thinking-head {
	fill: var(--gb-mark-stroke, var(--gb-primary));
}

.gb-room__thinking-seed {
	fill: var(--gb-seed);
}

/*
 * The stem grows from the seed, its arrow head opens, then the whole stem
 * sways back and forth around the seed while the path is drawn (owner 17:09:
 * «نخليها بتتحرك رايح جاي»). Stem and head turn together: same origin (the
 * seed, 60 94 in the drawing), same timing.
 */
.gb-room__thinking-stem,
.gb-room__thinking-head {
	transform-box: view-box;
	transform-origin: 60px 94px;
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-room__thinking:not([hidden]) .gb-room__thinking-stem {
		stroke-dasharray: 1;
		animation:
			gb-room-grow 0.6s var(--gb-ease-out) both,
			gb-room-sway 1.6s var(--gb-ease-in-out) 0.75s infinite;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-room__thinking:not([hidden]) .gb-room__thinking-head {
		animation:
			gb-room-head 0.35s var(--gb-ease-out) 0.45s both,
			gb-room-sway 1.6s var(--gb-ease-in-out) 0.75s infinite;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-room__thinking:not([hidden]) .gb-room__thinking-seed {
		transform-box: fill-box;
		transform-origin: center;
		animation: gb-room-pulse 0.8s var(--gb-ease-in-out) infinite alternate;
	}
}

/* Back and forth around the seed, starting and ending upright. */
@keyframes gb-room-sway {
	0%,
	100% {
		rotate: 0deg;
	}

	25% {
		rotate: -10deg;
	}

	75% {
		rotate: 10deg;
	}
}

@keyframes gb-room-grow {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes gb-room-head {
	from {
		opacity: 0;
		scale: 0.3;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes gb-room-pulse {
	to {
		scale: 1.35;
	}
}

/* ---------- The path ---------- */

.gb-room-result {
	padding-block: var(--gb-space-2xl);
	background-color: var(--gb-bg);
	scroll-margin-block-start: 5rem;
}

.gb-room-result:focus {
	outline: none;
}

.gb-room-result__inner {
	display: grid;
	gap: var(--gb-space-xl);
	max-inline-size: 56rem;
}

.gb-room-result__head {
	display: grid;
	gap: var(--gb-space-xs);
}

.gb-room-result__head .gb-section-head__eyebrow {
	margin: 0;
}

.gb-room-result__title {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-4);
	line-height: var(--gb-leading-heading);
}

.gb-room-result__answers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-2xs);
	margin: var(--gb-space-2xs) 0 0;
	padding: 0;
	list-style: none;
}

.gb-room-result__answers li {
	padding-block: 0.3em;
	padding-inline: 0.9em;
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-surface);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
}

/* The vertical Growth Line through the three stages. */
.gb-room-path {
	--gb-room-node: 1.1rem;
	--gb-room-rail: 2.4rem;

	position: relative;
	display: grid;
	gap: var(--gb-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The line from one stage's node to the next (it stops at the fruit). */
.gb-room-path__stage:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block-start: calc(0.45rem + var(--gb-room-node));
	inset-inline-start: calc(var(--gb-room-node) / 2 - 1.5px);
	inline-size: 3px;
	block-size: calc(100% + var(--gb-space-xl) - var(--gb-room-node));
	border-radius: 2px;
	background-image: linear-gradient(to bottom, var(--gb-color-navy), var(--gb-primary));
}

.gb-room-path__stage--stem::after {
	background-image: linear-gradient(to bottom, var(--gb-primary), var(--gb-seed));
}

.gb-room-path__stage {
	position: relative;
	display: grid;
	gap: var(--gb-space-2xs);
	padding-inline-start: var(--gb-room-rail);
}

.gb-room-path__node {
	position: absolute;
	inset-block-start: 0.45rem;
	inset-inline-start: 0;
	inline-size: var(--gb-room-node);
	block-size: var(--gb-room-node);
	border: 3px solid var(--gb-primary);
	border-radius: 50%;
	background-color: var(--gb-bg);
}

/* الجذور: a navy ring with two rootlets under it. */
.gb-room-path__stage--roots .gb-room-path__node {
	border-color: var(--gb-color-navy);
}

.gb-room-path__stage--roots .gb-room-path__node::before,
.gb-room-path__stage--roots .gb-room-path__node::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inline-size: 2px;
	block-size: 0.55rem;
	border-radius: 1px;
	background-color: var(--gb-color-navy-a60, rgb(12 35 66 / 0.6));
	transform-origin: top center;
}

.gb-room-path__stage--roots .gb-room-path__node::before {
	inset-inline-start: 0.05rem;
	rotate: 35deg;
}

.gb-room-path__stage--roots .gb-room-path__node::after {
	inset-inline-end: 0.05rem;
	rotate: -35deg;
}

/* الساق: filled turquoise. */
.gb-room-path__stage--stem .gb-room-path__node {
	background-color: var(--gb-primary);
}

/* الثمرة: the seed's colour, the largest node, a soft glow. */
.gb-room-path__stage--fruit .gb-room-path__node {
	inset-block-start: 0.3rem;
	inset-inline-start: calc(var(--gb-room-node) / 2 - 0.85rem);
	inline-size: 1.7rem;
	block-size: 1.7rem;
	border-color: var(--gb-seed);
	background-color: var(--gb-seed);
	box-shadow: 0 0 0 0.45rem var(--gb-color-seed-a35);
}

.gb-room-path__title {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
	line-height: 1.5;
}

.gb-room-path__text {
	margin: 0;
	color: var(--gb-text-muted);
}

.gb-room-path__text--fruit {
	color: var(--gb-text);
	font-size: var(--gb-step-1);
	font-weight: var(--gb-weight-bold);
}

.gb-room-path__note {
	margin: var(--gb-space-3xs) 0 0;
	padding-block: var(--gb-space-xs);
	padding-inline: var(--gb-space-s);
	border-inline-start: 3px solid var(--gb-color-navy);
	border-radius: var(--gb-radius-s);
	background-color: var(--gb-surface);
}

/* The services, in order. */
.gb-room-path__services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
	gap: var(--gb-space-s);
	margin: var(--gb-space-xs) 0 0;
	padding: 0;
	list-style: none;
}

.gb-room-service {
	position: relative;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: var(--gb-space-2xs);
	padding: var(--gb-space-m);
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-surface);
}

.gb-room-service__n {
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
	font-weight: var(--gb-weight-bold);
	line-height: 1;
	color: #00807A;
}

.gb-room-service__name {
	margin: 0;
	font-size: var(--gb-step-1);
	line-height: 1.45;
}

.gb-room-service__text {
	margin: 0;
	font-size: var(--gb-step--1);
	color: var(--gb-text-muted);
}

.gb-room-service__link {
	justify-self: start;
	color: var(--gb-color-navy);
	font-weight: var(--gb-weight-bold);
	text-decoration: underline;
	text-decoration-color: var(--gb-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* The whole card is the link's target. */
.gb-room-service__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--gb-radius-l);
}

.gb-room-service:has(.gb-room-service__link:hover) {
	border-color: var(--gb-color-turquoise-a60);
}

.gb-room-service__link:focus-visible {
	outline: none;
	box-shadow: none;
}

.gb-room-service__link:focus-visible::after {
	outline: 3px solid var(--gb-focus);
	outline-offset: 3px;
}

/* ---------- The ways on ---------- */

.gb-room-result__next {
	display: grid;
	gap: var(--gb-space-m);
	padding: var(--gb-space-l);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-scene-bg);
	background-image: radial-gradient(70% 90% at 90% 0%, var(--gb-color-turquoise-a20), transparent 70%);
	color: var(--gb-scene-text);
}

.gb-room-result__when {
	margin: 0;
	font-size: var(--gb-step-1);
	line-height: 1.6;
}

.gb-room-result__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gb-space-s) var(--gb-space-m);
}

.gb-room-result__actions .gb-button--outline {
	color: var(--gb-scene-text);
}

.gb-room-result__actions .gb-button--outline:hover {
	background-color: rgb(255 255 255 / 0.1);
}

.gb-room-result__actions :focus-visible {
	outline-color: var(--gb-focus-inverse);
}

.gb-room-result__again {
	color: var(--gb-scene-text-muted);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.gb-room-result__again:hover {
	color: var(--gb-scene-text);
}

/* ---------- A story close to theirs ---------- */

.gb-room-result__case {
	display: grid;
	gap: var(--gb-space-s);
}

.gb-room-result__case-title {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
}

/* The story: picture beside the text on wide screens (as on the home page), never a tall poster. */
@media (min-width: 48rem) {
	.gb-room-result__case .gb-work-card--large {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-rows: none;
	}

	.gb-room-result__case .gb-work-card--large .gb-work-card__visual {
		aspect-ratio: auto;
		min-block-size: 18rem;
	}

	.gb-room-result__case .gb-work-card--large .gb-work-card__body {
		align-content: center;
		padding: var(--gb-space-l);
	}
}

/* ---------- Anything the owner writes in the page's editor ---------- */

.gb-room-more {
	padding-block: 0 var(--gb-space-2xl);
	background-color: var(--gb-bg);
}