/*
 * system-map-loop.css — component family "ad/system-map-loop" v1.0.0 (Wave 0.3, 2026-08-23,
 * Lane 4 / CC-AD-PLATFORM).
 *
 * Built for DESIGN-01 (job 1's mechanism visual, article 1: "optimization as a decision system"):
 * the closed 5-decision loop Diagnose -> Prioritize -> Test -> Learn -> Scale -> back to Diagnose.
 * Source frame: docs/design-intake/article-01-2026-08-22/DESIGN-01-FINAL.dc.html. Real production
 * tokens reconciled in docs/design-intake/article-01-2026-08-22/TOKEN-RECONCILIATION-2026-08-23.md
 * — every color/radius/font value below is the RECONCILED real value, never the source frame's raw
 * estimate. Geometry (path coordinates, circle anchors, arrow chevrons) is reused near-verbatim from
 * the source frame per the ingest brief ("use its exact SVG path/circle/arrow geometry ... but
 * re-express it as governed, namespaced, accessible markup") — the MARKUP is new/governed, the
 * shape it draws is the same loop Claude Design specified.
 *
 * This is a NEW family, not an extension of ad/decision-flow (sequential binary Q&A tree) or
 * ad/triage-disclosure (flat single-entry fan-out): system-map-loop is a CLOSED CYCLE of exactly 5
 * ordered stages that always returns to its own start. The loop-closure (stage 5 -> stage 1) is a
 * DO_NOT_CHANGE structural requirement, not a styling choice — see the comment on
 * .ad-system-map-loop__diagram-wrap below.
 *
 * Structure (all static, all visible without JS -- AEO/GEO crawlability requirement):
 *   .ad-system-map-loop                        -- root, sits inside .ad-fnd-shell[data-ad-fnd-width="breakout"]
 *     .ad-system-map-loop__panel                -- dark canvas (navy-deep bg, navy-border, cardLg radius)
 *       .ad-system-map-loop__eyebrow             -- "Continuous optimization" mono label, shared by
 *                                                    both diagram variants below (not duplicated per-breakpoint)
 *       .ad-system-map-loop__diagram-wrap         -- DESKTOP variant wrapper (>=782px), position:relative,
 *                                                     aspect-ratio locked to the SVG viewBox so the Test-node
 *                                                     overlay's percentage coordinates stay correct at any
 *                                                     rendered width
 *         .ad-system-map-loop__diagram             -- the closed-loop SVG, role="img", real aria-label
 *                                                       (NOT decorative). Main path carries data-ad-draw
 *                                                       for the existing site.js scroll-reveal hook.
 *         .ad-system-map-loop__test-disclosure      -- <details>/<summary> overlaid at the Test anchor's
 *                                                        coordinates -- see NO_JS_FALLBACK note below
 *       .ad-system-map-loop__diagram-wrap--mobile -- MOBILE/TABLET variant wrapper (<=781px, the theme's
 *                                                     real tablet ceiling), same pattern as above with its
 *                                                     own SVG + its own Test disclosure instance
 *     .ad-system-map-loop__fallback              -- plain <ol> STATIC_FALLBACK, always present, never
 *                                                    display:none -- same convention as
 *                                                    triage-disclosure.css's __fallback table: it is not
 *                                                    hidden, de-emphasized, or gated behind any
 *                                                    "enhanced"/JS-present state. It simply always renders.
 *
 * Mobile recomposition pattern: "Horizontal flow -> vertical stack" is satisfied here as
 * "wide closed-rectangle loop -> narrow closed-rounded-rectangle loop" -- i.e. a SECOND, simpler SVG
 * (not HTML cards) drawing the same 5-anchor closed path in a portrait aspect ratio, because an SVG
 * path renders the curved stage-5-to-stage-1 return arrow far more legibly than a CSS/HTML
 * approximation would (this is the "pick whichever renders the return-arrow most clearly" call the
 * brief asked to document). Both SVGs share one closed <path> shape each -- the loop closure is
 * geometric, not an added arrow: the path itself never terminates at stage 5, it continues back
 * through to stage 1. Do not replace either path with an open/terminating shape.
 *
 * Test node accessibility: because both SVGs carry role="img" + aria-label, their internal <text>
 * nodes are collapsed out of the accessibility tree by the img role (standard SVG-a11y behavior) --
 * so the Test node's title/number are deliberately NOT drawn as SVG text (every other stage's is).
 * Instead the real, separately focusable <details>/<summary> overlay IS the Test node's visible
 * label ("03 / Test"), avoiding any duplicate announcement while still being a real, keyboard- and
 * AT-operable disclosure with zero JS (NO_JS_FALLBACK satisfied structurally, not via a JS check).
 *
 * Namespacing rule: every selector starts with `.ad-system-map-loop` or targets its own
 * `[data-ad-system-map-*]` attributes. Zero bare element selectors, zero global overrides.
 */

.ad-system-map-loop {
	--ad-sml-primary: var(--wp--preset--color--primary, #2353D4);
	--ad-sml-teal: var(--wp--preset--color--teal-on-navy, #2DD4BF);
	--ad-sml-bg: var(--wp--preset--color--navy-deep, #0B1220);
	--ad-sml-border: var(--wp--preset--color--navy-border, #262C36);
	--ad-sml-text: var(--wp--preset--color--light-text, #E6EDF6);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ad-system-map-loop__panel {
	background: var(--ad-sml-bg);
	border: 1px solid var(--ad-sml-border);
	border-radius: var(--wp--custom--radius--card-lg, 16px);
	padding: 2.75rem 2.5rem 2.25rem;
}

.ad-system-map-loop__eyebrow {
	display: block;
	text-align: center;
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--mono, 'IBM Plex Mono', monospace);
	font-size: 0.9375rem; /* theme "small" floor -- source frame's 0.75rem estimate corrected up */
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ad-sml-teal);
}

/* ---- Desktop diagram (>=782px, the theme's real tablet ceiling is 781px) ---- */

.ad-system-map-loop__diagram-wrap {
	position: relative;
	aspect-ratio: 1160 / 400; /* locks to the SVG's own viewBox so % overlay coordinates stay true */
	display: block;
}

.ad-system-map-loop__diagram {
	display: block;
	width: 100%;
	height: 100%;
}

.ad-system-map-loop__diagram-wrap--mobile {
	position: relative;
	aspect-ratio: 420 / 480;
	display: none; /* shown only <=781px, below */
}

.ad-system-map-loop__diagram-mobile {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 781px) {
	.ad-system-map-loop__diagram-wrap {
		display: none;
	}
	.ad-system-map-loop__diagram-wrap--mobile {
		display: block;
	}
	.ad-system-map-loop__panel {
		padding: 1.75rem 1.25rem 1.75rem;
	}
}

/* Loop path + arrows + anchors: real primary-blue token, no other hex introduced */
.ad-system-map-loop__diagram path[data-ad-draw],
.ad-system-map-loop__diagram-mobile path[data-ad-draw] {
	fill: none;
	stroke: var(--ad-sml-primary);
	stroke-linecap: round;
}
.ad-system-map-loop__diagram .ad-system-map-loop__arrow path,
.ad-system-map-loop__diagram-mobile .ad-system-map-loop__arrow path {
	fill: none;
	stroke: var(--ad-sml-primary);
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ad-system-map-loop__diagram .ad-system-map-loop__anchor,
.ad-system-map-loop__diagram-mobile .ad-system-map-loop__anchor {
	fill: var(--ad-sml-primary);
}
.ad-system-map-loop__diagram .ad-system-map-loop__anchor-dot,
.ad-system-map-loop__diagram-mobile .ad-system-map-loop__anchor-dot {
	fill: var(--ad-sml-text);
}
.ad-system-map-loop__diagram text.ad-system-map-loop__stage-title,
.ad-system-map-loop__diagram-mobile text.ad-system-map-loop__stage-title {
	font-family: var(--wp--preset--font-family--display, 'Schibsted Grotesk', sans-serif);
	font-weight: 700;
	fill: var(--ad-sml-text);
}
.ad-system-map-loop__diagram text.ad-system-map-loop__stage-number,
.ad-system-map-loop__diagram-mobile text.ad-system-map-loop__stage-number {
	font-family: var(--wp--preset--font-family--mono, 'IBM Plex Mono', monospace);
	fill: var(--ad-sml-teal);
}
.ad-system-map-loop__diagram text.ad-system-map-loop__outcome-title,
.ad-system-map-loop__diagram-mobile text.ad-system-map-loop__outcome-title {
	font-family: var(--wp--preset--font-family--display, 'Schibsted Grotesk', sans-serif);
	font-weight: 700;
	fill: var(--ad-sml-text);
}
.ad-system-map-loop__diagram text.ad-system-map-loop__outcome-subtitle,
.ad-system-map-loop__diagram-mobile text.ad-system-map-loop__outcome-subtitle {
	font-family: var(--wp--preset--font-family--body, 'Hanken Grotesk', sans-serif);
	fill: var(--ad-sml-teal);
}

/* ---- Test node: real <details>/<summary> overlaid at the Test anchor's coordinates. CSS-only
   disclosure -- no JS required for keyboard/AT operation. Collapsed by default (INITIAL_STATE). ---- */

.ad-system-map-loop__test-disclosure {
	position: absolute;
	transform: translate(-50%, -50%);
	/* Desktop Test anchor sits at (900, 150) of the 1160x400 viewBox. */
	left: 77.586%;
	top: 37.5%;
	min-width: 3rem;
	text-align: center;
}
.ad-system-map-loop__diagram-wrap--mobile .ad-system-map-loop__test-disclosure {
	/* Mobile Test anchor sits at (290, 240) of the 420x480 viewBox. */
	left: 69.048%;
	top: 50%;
}

.ad-system-map-loop__test-summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-width: 44px;
	min-height: 44px; /* real sitewide touch-target minimum */
	padding: 0.4rem 0.6rem;
	border-radius: 8px;
	background: transparent;
	color: var(--ad-sml-text);
}
.ad-system-map-loop__test-summary::-webkit-details-marker {
	display: none;
}
.ad-system-map-loop__test-summary::marker {
	content: '';
}
.ad-system-map-loop__test-number {
	font-family: var(--wp--preset--font-family--mono, 'IBM Plex Mono', monospace);
	font-size: 0.9375rem;
	color: var(--ad-sml-teal);
}
.ad-system-map-loop__test-title {
	font-family: var(--wp--preset--font-family--display, 'Schibsted Grotesk', sans-serif);
	font-weight: 700;
	font-size: 1.05rem;
}

.ad-system-map-loop__test-sublabel {
	margin-top: 0.4rem;
	max-width: 12.5rem;
	font-family: var(--wp--preset--font-family--body, 'Hanken Grotesk', sans-serif);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--ad-sml-text);
	background: var(--ad-sml-bg);
	border: 1px solid var(--ad-sml-border);
	border-radius: 8px;
	padding: 0.6rem 0.75rem;
}

/* Test node's tap-expand micro-transition -- real theme token, not a new duration. */
.ad-system-map-loop__test-summary {
	transition: color var(--ad-ease, 180ms ease);
}

/* Reuse the theme's real focus ring verbatim (foundation-a11y.css:49-53) via the shared attribute. */
[data-ad-fnd-focusable].ad-system-map-loop__test-summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #2353D4);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Scroll-build animation: the theme's existing generic stroke-draw mechanism (site.js
   initCurveDraw) auto-computes stroke-dasharray/dashoffset for any [data-ad-draw] path and animates
   it once on scroll-into-view, already reduced-motion-gated. No new JS needed here. */
@media (prefers-reduced-motion: reduce) {
	.ad-system-map-loop__diagram path[data-ad-draw],
	.ad-system-map-loop__diagram-mobile path[data-ad-draw] {
		/* initCurveDraw() returns early under reduced motion and never sets a dasharray, so the
		   path is already fully visible by default -- this rule is a belt-and-suspenders
		   guarantee, not a fix for an observed bug. */
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}
}

/* ---- Static fallback: always present, never display:none -- same convention as
   triage-disclosure.css's __fallback (present unconditionally, no JS/"enhanced" gating). ---- */

.ad-system-map-loop__fallback {
	margin: 0;
	padding: 0;
	list-style: decimal;
	padding-left: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}
.ad-system-map-loop__fallback li {
	margin: 0 0 0.85rem;
}
.ad-system-map-loop__fallback li:last-child {
	margin-bottom: 0;
}
.ad-system-map-loop__fallback-label {
	font-weight: 600;
}
.ad-system-map-loop__fallback-question,
.ad-system-map-loop__fallback-evidence {
	margin: 0.2rem 0 0;
}
.ad-system-map-loop__fallback-question-label,
.ad-system-map-loop__fallback-evidence-label {
	font-weight: 600;
}
.ad-system-map-loop__fallback-note {
	margin: 1rem 0 0;
	font-style: italic;
}