/*
 * Management Model.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * All geometry is in the SVG's own user units and lives in the render callback.
 * What is here is colour, type, the 700px switch, and the draw-on.
 *
 * THIS COMPONENT PAINTS ITS OWN SURFACE, which most of them deliberately do not,
 * and the `background` prop chooses which. What makes that choice safe is that
 * THE CARDS DO NOT CHANGE WITH IT. Three of the four group colours are under
 * 2:1 on the paper token and no step of their ramp fixes it, so they can only
 * ever live on a dark panel — and they do, on every background, because the
 * panel is held constant while the section behind it varies. Only two things
 * actually follow the background: the intro type and the connector lines, both
 * of which sit on the section's own surface.
 *
 * The four group colours are not free choices either. Each was checked against
 * the two panel fills, and the mapping is one palette slot per group.
 * Re-pointing any of them without re-running that check is how a group silently
 * disappears.
 *
 * ONE NAMING TRAP, LEARNED THE HARD WAY. The background is `--btxc-model-paint`
 * and NOT `--btxc-model-surface`, because one of the four groups is called
 * Surface and already owns that name. When the background briefly used it, every
 * `--bg-*` class overwrote the Surface group's green — which on paper rendered
 * its rule and dots white, and on the navy would have rendered them navy on
 * navy, i.e. gone. Do not reunite those two names.
 */

@layer bertex-components {

	/* ── Shell ─────────────────────────────────────────────────────────── */

	.btxc-model {
		box-sizing: border-box;
		background: var(--btxc-model-paint, var(--btx-color-primary-1, #1a2744));
		padding-block: var(--btx-spacing-xl, 2rem);
		padding-inline: var(--btx-spacing-m, 1rem);

		font-family: var(--btx-font-body-family, system-ui, sans-serif);

		/*
		 * Establishes the query container the 700px switch measures. Without
		 * it that rule never matches and the radial diagram is still being
		 * shown at phone width.
		 */
		container-type: inline-size;

		/*
		 * Local channels. Named per group so the SVG marks, the stacked list
		 * markers and the connectors all read one value, and re-pointing a
		 * group is a single edit here rather than six.
		 *
	 * These sit on the CARD, never on the section, so the background prop
		 * does not move them. WCAG 2.1 against both panel fills — #24355d on a
		 * dark section, #1a2744 on a light one:
		 *
		 *                                        on #24355d  on #1a2744
		 *   Inputs       secondary-1        #ffee01   10.03      12.33
		 *   Surface      primary-2          #09e76a    7.26       8.92
		 *   Connections  secondary-2        #ff0190    3.25       3.99
		 *   Foundation   text-bg-2-dark-60  #8fa8cf    4.98       6.12
		 *
		 * Connections at 3.25 is the tightest thing in this component. It
		 * clears the 3:1 graphics floor and nothing more, which is the whole
		 * reason the next paragraph exists.
		 *
		 * Connections is why none of these ever colours text. Its whole ramp
		 * tops out at 4.30 — the chroma clipping pins it — so it clears the
		 * 3:1 floor for a rule, a dot and a hairline and nothing else. Three
		 * coloured groups and one ink one would read as a bug, so all four
		 * stay graphic-only and every name is ink.
		 *
		 * FOUNDATION IS SIX STEPS DOWN ITS RAMP AND NOT THE BASE TOKEN, which
		 * is the one value here picked against the ink rather than against the
		 * surface. Base text-bg-2 passes the navy comfortably at 11.20, but it
		 * sits only ΔE 10.6 from text-bg-1 — so on screen its rule and dots
		 * read as white, and the group looks like the other three with their
		 * colour missing. Rendered side by side that reads as a bug, not as a
		 * choice. dark-60 is ΔE 24.7 from the ink, unmistakably a blue, and still
		 * 6.12 on the navy. It gives up a little colour-blind separation from
		 * the other three groups to get there — worst case 15.1 against the
		 * base token's 17.7 — and that is the right side of the trade, because
		 * both clear the 15 floor while only one of them is visible as a
		 * colour at all. Quiet also happens to be correct for what this group
		 * is: the substrate everything else stands on.
		 */
		--btxc-model-inputs: var(--btx-color-secondary-1, #ffee01);
		--btxc-model-surface: var(--btx-color-primary-2, #09e76a);
		--btxc-model-connections: var(--btx-color-secondary-2, #ff0190);
		--btxc-model-foundation: var(--btx-color-text-bg-2-dark-60, #8fa8cf);

	/*
		 * Ink ON THE CARD, which is dark on every background, so these two
		 * never change. Measured against both panel fills used below:
		 *
		 *              on #24355d   on #1a2744
		 *   ink           11.53        14.18
		 *   ink-quiet       9.12        11.20
		 */
		--btxc-model-ink: var(--btx-color-text-bg-1, #f9fafb);
		--btxc-model-ink-quiet: var(--btx-color-text-bg-2, #d3e1f7);

		/* The card fill and its keyline. Overridden per scheme below; this is
		 * the dark-surface pairing, two steps up the navy's own ramp so a card
		 * lifts off the section without becoming a second colour. */
		--btxc-model-panel: var(--btx-color-primary-1-light-20, #24355d);
		--btxc-model-keyline: var(--btx-color-primary-1-light-40, #2e4578);
	}

	/* ── Surfaces ──────────────────────────────────────────────────────── */

	/*
	 * One declaration each: the paint, and nothing else. Whether a surface is
	 * light or dark is decided in component.php, which puts an `--on-light` or
	 * `--on-dark` class alongside these — so adding a swatch here is not enough
	 * on its own, and the note on that map says so.
	 */
	.btxc-model--bg-navy {
		--btxc-model-paint: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-model--bg-navy-deep {
		--btxc-model-paint: var(--btx-color-primary-1-dark-40, #000432);
	}

	.btxc-model--bg-navy-gradient {
		--btxc-model-paint: var(--btx-gradient-gradient-1, linear-gradient(180deg, #111f40, #020029));
	}

	.btxc-model--bg-paper {
		--btxc-model-paint: var(--btx-color-text-bg-1, #f9fafb);
	}

	.btxc-model--bg-paper-gradient {
		--btxc-model-paint: var(--btx-gradient-gradient-3, linear-gradient(180deg, #f9fafb, #eff0f1));
	}

	.btxc-model--bg-pale-blue {
		--btxc-model-paint: var(--btx-color-text-bg-2, #d3e1f7);
	}

	.btxc-model--bg-green-gradient {
		--btxc-model-paint: var(--btx-gradient-gradient-2, linear-gradient(180deg, #00f662, #00e14d));
	}

	.btxc-model--bg-brand-gradient {
		--btxc-model-paint: var(--btx-gradient-gradient-4, linear-gradient(135deg, #f9fafb, #00ff4a));
	}

	.btxc-model--bg-spectrum-gradient {
		--btxc-model-paint: var(--btx-gradient-gradient-5, linear-gradient(180deg, #00ff4a, #ffee01));
	}

	/*
	 * The light treatment. Only two things actually change, because only two
	 * things sit on the section's own surface: the intro type above the
	 * diagram, and the connector lines between the cards.
	 *
	 * The cards go a step DARKER rather than lighter — primary-1 instead of
	 * primary-1-light-20 — so they read as deliberate dark cards on a pale
	 * page instead of a washed-out version of the dark layout. Every group
	 * colour was measured against that fill and clears 3:1 on it, the tightest
	 * being Connections at 3.99.
	 *
	 * Connectors drop their group colour here and take ink instead. That is
	 * forced: a 1.5-unit yellow hairline on paper is 1.15:1, which is not a
	 * line, it is nothing. Ink measures at worst 8.38 across every light
	 * surface offered, including the green and yellow gradients. The colour
	 * coding is not lost — it is still on the rule and the dots inside each
	 * card, where the dark panel is holding it up.
	 */
	.btxc-model--on-light {
		--btxc-model-panel: var(--btx-color-primary-1, #1a2744);
		--btxc-model-keyline: var(--btx-color-primary-1-light-30, #293d6a);
		--btxc-model-intro-ink: var(--btx-color-primary-1, #1a2744);
		--btxc-model-intro-quiet: var(--btx-color-primary-1-light-30, #293d6a);
		--btxc-model-connector-ink: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-model--on-dark {
		--btxc-model-intro-ink: var(--btx-color-text-bg-1, #f9fafb);
		--btxc-model-intro-quiet: var(--btx-color-text-bg-2, #d3e1f7);
	}

	/* ── Full bleed ────────────────────────────────────────────────────── */

	/*
	 * Breaks out of whatever column holds the block. The inner wrapper keeps
	 * its own max width, so the background reaches the screen edges while the
	 * diagram stays where it can be read.
	 *
	 * `100vw` is the viewport INCLUDING the scrollbar, which is the one thing
	 * to know about this: on a page with a vertical scrollbar the section is
	 * wider than the visible area by the scrollbar's width and the page gains
	 * a horizontal scroll. The fix belongs to the page, not here — `overflow-x:
	 * clip` on the body — because a component cannot know whether it is the
	 * only full-bleed thing on the page.
	 */
	.btxc-model--full {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
	}

	/*
	 * The section measure is the WIDE one, not the prose one. The intro brings
	 * its own limit below; if that limit lived here instead, the diagram would
	 * be capped at the reading measure too — which sounds tidy and is wrong.
	 * At 760px a 1000-unit viewBox scales to 0.76, so the discipline names land
	 * at about 14px and the group labels at 13px, and the whole point of the
	 * drawing is lost to make a column of prose happy.
	 */
	.btxc-model__inner {
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-lg, 1.5rem);
	}

	/* ── Intro ─────────────────────────────────────────────────────────── */

	.btxc-model__intro {
		display: flex;
		flex-direction: column;
		gap: var(--btx-text-spacing, 0.75rem);
		max-width: 42ch;
	}

	.btxc-model__headline {
		margin: 0;
		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-xxl, 1.95rem);
		line-height: var(--btx-line-height-heading, 1.2);

		/* Intro ink, not card ink — this type sits on the section's own
		 * surface, which is the thing the background prop changes. */
		color: var(--btxc-model-intro-ink);
	}

	.btxc-model__body {
		margin: 0;
		font-size: var(--btx-font-body-m, 1rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-model-intro-quiet);
	}

	/*
	 * The diagram takes the full section width while the intro above it stays
	 * at a reading measure. Two different maxima rather than one shared one,
	 * because prose at 1440px is unreadable and a diagram at 42ch is unusable.
	 */
	.btxc-model__figure {
		width: 100%;
	}

	/* ── The SVG box ───────────────────────────────────────────────────── */

	/*
	 * Height comes from the aspect ratio, not from the content, so the element
	 * occupies its final box before anything paints and nothing below it moves.
	 * The ratio matches the viewBox in component.php; change one and change the
	 * other.
	 */
	.btxc-model__svg {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1000 / 540;
	}

	/* ── Group boxes ───────────────────────────────────────────────────── */

	.btxc-model__box {
		fill: var(--btxc-model-panel);
		stroke: var(--btxc-model-keyline);
		stroke-width: 1;
	}

	/*
	 * Ink, never the group colour — see the note at the top. The group's
	 * identity is carried by the rule directly underneath this and by the
	 * marker dots, both of which are graphics and only owe 3:1.
	 */
	.btxc-model__group-name {
		fill: var(--btxc-model-ink);
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 0.09em;
		text-transform: uppercase;
	}

	.btxc-model__item {
		fill: var(--btxc-model-ink);
		font-size: 19px;
	}

	.btxc-model__rule {
		stroke-width: 2;
		stroke-linecap: round;
	}

	/* ── Connectors ────────────────────────────────────────────────────── */

	/*
	 * Thin and solid. These are the whole argument of the diagram — they are
	 * what makes ten disciplines one system rather than a list of four boxes —
	 * so they are drawn in the group's own colour and never dashed. A dashed
	 * line reads as "proposed" or "optional", which is the opposite claim.
	 */
	.btxc-model__connector {
		stroke-width: 1.5;
		stroke-linecap: round;
	}

	/* ── Group colour, applied once per group ──────────────────────────── */

	/*
	 * Each group names its colour once, into a channel its own marks read.
	 *
	 * The obvious shape — one selector per group setting `stroke` AND `fill`
	 * on the rule, the dots and the connector together — does not work, and
	 * fails quietly. `.btxc-model__group--inputs .btxc-model__marker` is two
	 * classes; any `.btxc-model__marker { stroke: none }` written to undo the
	 * half that does not apply is one, so it loses and every dot keeps a
	 * stroke it was never meant to have. Handing the colour over as a variable
	 * lets each mark state the single paint property it actually uses, and
	 * there is nothing left to undo.
	 */
	.btxc-model__group--inputs,
	.btxc-model__connector--inputs {
		--btxc-model-group: var(--btxc-model-inputs);
	}

	.btxc-model__group--surface,
	.btxc-model__connector--surface {
		--btxc-model-group: var(--btxc-model-surface);
	}

	.btxc-model__group--connections,
	.btxc-model__connector--connections {
		--btxc-model-group: var(--btxc-model-connections);
	}

	.btxc-model__group--foundation,
	.btxc-model__connector--foundation {
		--btxc-model-group: var(--btxc-model-foundation);
	}

	/* A line is stroked and never filled; a dot is filled and never stroked. */
	.btxc-model__rule,
	.btxc-model__connector {
		stroke: var(--btxc-model-group);
		fill: none;
	}

	/*
	 * On a light surface the connectors give up their group colour for ink.
	 * Forced, not preferred: a 1.5-unit yellow hairline on paper is 1.15:1.
	 *
	 * Overridden here by specificity rather than by pointing the channel at a
	 * different value on the root, and that distinction matters —
	 * `--btxc-model-group` is set per connector element, so a root-level rule
	 * saying `--btxc-model-connector: var(--btxc-model-group)` would resolve
	 * against the ROOT's value of it, which is unset. Custom properties
	 * substitute where they are declared, not where they are used.
	 */
	.btxc-model--on-light .btxc-model__connector {
		stroke: var(--btxc-model-connector-ink);
	}

	.btxc-model__marker {
		fill: var(--btxc-model-group);
		stroke: none;
	}

	/* ── Centre node ───────────────────────────────────────────────────── */

	/*
	 * The one filled shape on the surface, and deliberately not in any group's
	 * colour: it belongs to all four, so taking one of them would make it look
	 * like a fifth group. Ink on a panel, ringed in the keyline.
	 */
	.btxc-model__centre-disc {
		fill: var(--btxc-model-panel);
		stroke: var(--btxc-model-keyline);
		stroke-width: 1.5;
	}

	.btxc-model__centre-label {
		fill: var(--btxc-model-ink);
		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: 27px;
		font-weight: 700;
	}

	.btxc-model__centre-sublabel {
		fill: var(--btxc-model-ink-quiet);
		font-size: 19px;
		letter-spacing: 0.04em;
	}

	/* ── Stacked layout / screen-reader text ───────────────────────────── */

	/*
	 * Above 700px this is the screen reader's only route to the ten names,
	 * because role="img" on the SVG hides everything inside it. Below 700px it
	 * stops being hidden and becomes the visible layout.
	 *
	 * Visually hidden, not display:none — the names have to stay in the
	 * accessibility tree when the pixels go.
	 *
	 * `!important` on the containment properties is not decoration. WordPress
	 * prints theme.json global styles UNLAYERED, and an unlayered rule beats
	 * every cascade layer no matter its specificity — so a global `ul` or
	 * `section > *` rule can undo this from outside, and the failure is the
	 * whole list dumped on top of the diagram. These are the properties that
	 * must survive that, which is also why the container query below has to
	 * clear them with the same weight.
	 */
	.btxc-model__stack {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		margin: -1px;
		padding: 0;
		border: 0;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/*
	 * The centre node promoted to a heading. It sits ABOVE the four cards, on
	 * the section's own surface — so it takes intro ink like the headline does,
	 * not the card ink the group names below it use. Getting this one wrong is
	 * invisible on the navy and unreadable on paper.
	 */
	.btxc-model__stack-heading {
		margin: 0;
		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-lg, 1.25rem);
		line-height: var(--btx-line-height-heading, 1.2);
		color: var(--btxc-model-intro-ink);
	}

	.btxc-model__stack-heading-sub {
		display: block;
		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-m, 1rem);
		font-weight: 400;
		color: var(--btxc-model-intro-quiet);
	}

	.btxc-model__stack-name {
		margin: 0;
		font-size: var(--btx-font-body-s, 0.9rem);
		font-weight: 700;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--btxc-model-ink);
	}

	.btxc-model__stack-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.btxc-model__stack-item {
		font-size: var(--btx-font-body-m, 1rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-model-ink);
	}

	/* ── Type as the box narrows ───────────────────────────────────────── */

	/*
	 * The drawing never changes shape — it is one viewBox at every width — so
	 * the only thing a narrow container needs is larger type in user units, so
	 * that it still lands at a readable pixel size after the whole SVG has been
	 * scaled down. Between the switch at 700px and about 1000px the scale
	 * factor runs 0.7 to 1.0, which would otherwise put the discipline names at
	 * 13px and the group labels at 12px.
	 *
	 * The boxes have room for this because the longest label, "External
	 * integrations", uses about 200 of the 260 units available to it.
	 */
	@container (max-width: 1000px) {
		.btxc-model__item {
			font-size: 23px;
		}

		.btxc-model__group-name {
			font-size: 20px;
		}

		.btxc-model__centre-label {
			font-size: 31px;
		}

		.btxc-model__centre-sublabel {
			font-size: 22px;
		}
	}

	/* ── The 700px switch ──────────────────────────────────────────────── */

	/*
	 * CONTAINER query, not a media query. For a full-width section the two are
	 * equivalent, but this component is a box like any other and a viewport
	 * query would keep showing the radial diagram to a 500px column inside a
	 * 1400px window. That is the case the rule exists to catch and the one a
	 * viewport query misses.
	 *
	 * The radial layout is abandoned rather than scaled, which is the only
	 * honest option: SVG text cannot reflow, so at phone width the ten names
	 * would either be four pixels tall or overlap each other. The connectors go
	 * with it — a line from a box to a node that is no longer beside it is
	 * drawing a relationship that is no longer on screen.
	 *
	 * What survives is the whole model as text, in reading order, with the
	 * centre node promoted to the heading it always was.
	 */
	@container (max-width: 700px) {
		.btxc-model__svg {
			display: none;
		}

		/* Clears the visually-hidden state above, property for property and at
		 * the same weight. Anything left behind here keeps the list clipped to
		 * one pixel and the section renders empty. */
		.btxc-model__stack {
			position: static !important;
			width: auto !important;
			height: auto !important;
			overflow: visible !important;
			margin: 0;
			clip-path: none;
			white-space: normal;

			display: flex;
			flex-direction: column;
			gap: var(--btx-spacing-m, 1rem);
		}

		.btxc-model__stack-group {
			display: flex;
			flex-direction: column;
			gap: var(--btx-spacing-xxs, 0.4rem);

			background-color: var(--btxc-model-panel);
			border: 1px solid var(--btxc-model-keyline);
			border-radius: var(--btx-border-radius-lg, 0.5rem);
			padding: var(--btx-card-spacing, 1rem);

			/*
			 * The group's colour, in the one place it can still be stated once
			 * the connectors have gone. Same 3:1 graphic role it has in the
			 * diagram — it is a bar beside the box, never the text.
			 */
			border-inline-start-width: 4px;
			border-inline-start-style: solid;
		}

		.btxc-model__stack-group--inputs {
			border-inline-start-color: var(--btxc-model-inputs);
		}

		.btxc-model__stack-group--surface {
			border-inline-start-color: var(--btxc-model-surface);
		}

		.btxc-model__stack-group--connections {
			border-inline-start-color: var(--btxc-model-connections);
		}

		.btxc-model__stack-group--foundation {
			border-inline-start-color: var(--btxc-model-foundation);
		}

		.btxc-model__stack-list {
			display: flex;
			flex-direction: column;
			gap: var(--btx-spacing-xxxs, 0.25rem);
		}
	}

	/* ── Draw-on ───────────────────────────────────────────────────────── */

	/*
	 * The four connectors draw outward from the centre node, then the boxes
	 * settle in behind them. Outward rather than inward on purpose: the claim
	 * is that the centre owns the ten, not that ten things converge on it.
	 *
	 * pathLength="1" in the markup is what lets four lines of different lengths
	 * share one dash value and finish together.
	 *
	 * CSS rather than an IntersectionObserver, which would be a script on every
	 * page to watch one element. The cost is that it plays on load whether or
	 * not the section is in view; for a diagram this far down the page that is
	 * the honest trade for shipping no JavaScript.
	 */
	.btxc-model--animate .btxc-model__connector {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: btxc-model-draw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s forwards;
	}

	.btxc-model--animate .btxc-model__group {
		opacity: 0;
		animation: btxc-model-fade 0.5s ease-out 0.7s forwards;
	}

	@keyframes btxc-model-draw {
		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes btxc-model-fade {
		to {
			opacity: 1;
		}
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

/*
 * Not "a shorter animation" — no animation, and the finished diagram on the
 * first frame.
 *
 * Cancelling the animation is not enough on its own: the dash offset and the
 * zero opacity ARE its starting state, so they have to be put back by hand.
 * Remove these two resets and the diagram becomes permanently invisible for
 * exactly the people the rule exists to protect.
 */
@media (prefers-reduced-motion: reduce) {
	@layer bertex-components {
		.btxc-model--animate .btxc-model__connector {
			animation: none;
			stroke-dasharray: none;
			stroke-dashoffset: 0;
		}

		.btxc-model--animate .btxc-model__group {
			animation: none;
			opacity: 1;
		}
	}
}