/*
 * argmap.css — the argument-map CANVAS INTERIOR (.argmap, .am-*, .fig-canvas
 * internals, checks, demo chip). The outer .fig frame + caption bar belong to
 * site.css; this file must not restyle them (it loads after site.css, so any
 * duplicate selector here would win and break the frame).
 *
 * Authentic MindMup argument-mapping grammar (because/app/js/themes.js
 * argMappingSimple + app/css/argmap.css) expressed against the --am-* and
 * site tokens from tokens.css. ONE rule set serves both colour schemes.
 *
 * Bracket construction: MindMup's group node wraps only its claim boxes, so
 * the bracket must hug the CLAIMS ROW and never widen to a descendant
 * subtree. In flow layout each claim cell (.am-node-wrap) is as wide as its
 * whole subtree, so a single spanning element cannot do this. Instead the
 * bracket is drawn as overlapping segments:
 *   - every cell draws a top-line segment bridging half the inter-cell gap
 *     each side; the FIRST cell starts its segment at 50% (behind its claim,
 *     which is centred in the cell) and the LAST ends at 50%;
 *   - the first/last CLAIM boxes draw corner caps (top line + descending
 *     side arm; rounded for supporting, square for opposing) over exactly
 *     their own width.
 * The union renders one continuous bracket from the first claim's left edge
 * to the last claim's right edge, regardless of subtree width.
 *
 * Geometry contract with the JS: the CSS fallback stems and the hydrated SVG
 * curves land on the same bracket line; hydration hides the stems and
 * changes nothing else, so there is zero layout shift.
 */

/* ------------------------------------------------------------------ tokens */
.argmap {
	--am-row-gap: 2.933em;      /* vertical gap parent-claim bottom -> bracket bar */
	--am-claim-gap: 0.8em;    /* horizontal gap between sibling claims */
	--am-bracket-h: 0.667em;    /* corner-cap height (the arms' descent) */
	--am-bracket-air: 0.933em;  /* clearance from arm ends to claim-box tops:
	                            badges straddle box tops at -11px (+2px ring)
	                            so >13px keeps them clear of the bracket */
	--am-drop: calc(var(--am-bracket-h) + var(--am-bracket-air));
	--am-w-normal: 3px;
	--am-w-strong: 5px;
	--am-w-weak: 1.5px;
}

/* ----------------------------------------------------- canvas + scroller */
/* site.css gives .fig-canvas a flex/center layout as its pre-plugin
 * fallback; that centering clips wide maps on BOTH edges (the left side is
 * unreachable by scroll). Restore block flow — the scroller inside is the
 * scroll container, and .argmap centres itself with auto margins. */
.fig-canvas {
	display: block;
	position: relative;
	padding: 0;
	overflow: visible;
	background-color: var(--am-canvas);
	background-image: radial-gradient(var(--am-grid-dot) 1px, transparent 1.4px);
	background-size: 1.125rem 1.125rem;
}
.fig-scroller {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	padding-block: 1.75rem;
	scroll-padding-inline: var(--space-4);
	overscroll-behavior-x: contain;
}
/* visible scroll affordance: a styled (hence always-shown) scrollbar… */
.fig-scroller::-webkit-scrollbar { height: 9px; }
.fig-scroller::-webkit-scrollbar-track { background: transparent; }
.fig-scroller::-webkit-scrollbar-thumb {
	background: var(--hairline-strong);
	border-radius: 5px;
	border: 2px solid var(--am-canvas);
}
.fig-scroller { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.fig-scroller:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: -2px;
}
/* …plus edge-fade masks while more content hides beyond an edge (JS toggles
 * .am-scroll-l/.am-scroll-r on the canvas). */
.fig-canvas::before,
.fig-canvas::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 28px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 150ms ease-out;
}
.fig-canvas::before {
	left: 0;
	background: linear-gradient(to right, var(--am-canvas), transparent);
}
.fig-canvas::after {
	right: 0;
	background: linear-gradient(to left, var(--am-canvas), transparent);
}
.fig-canvas.am-scroll-l::before { opacity: 1; }
.fig-canvas.am-scroll-r::after { opacity: 1; }

/* -------------------------------------------------------------- the map box */
.argmap {
	position: relative;
	box-sizing: border-box;
	font-size: 0.9375rem;
	width: max-content;
	min-width: 100%;
	margin-inline: auto;
	padding-inline: var(--space-4);
	/* room above the root claim for its top-straddling badge */
	padding-top: 14px;
	font-family: var(--font-map);
}

/* recursive vertical stack: claim, then its groups row, centred */
.am-node-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
/* the root wrap centres in the map */
.argmap > .am-node-wrap { margin-inline: auto; width: max-content; }

/* --------------------------------------------------------------- claim box */
.am-claim {
	position: relative;
	box-sizing: border-box;
	max-width: calc(var(--claim-max-ch, 26) * 1ch);
	width: max-content;
	background: var(--am-paper);
	border: 1px solid var(--am-border);
	border-radius: 0.333em;
	box-shadow: var(--am-shadow);
	color: var(--am-ink);
	font: 400 1em/1.42 var(--font-map);
	padding: 0.667em 0.8em;
	text-align: left;
	cursor: default;
	scroll-margin-inline: 24px;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.am-claim .am-text {
	display: block;
	white-space: normal;
	overflow-wrap: break-word;
}
.am-claim { --am-claim-bw: 1px; } /* border width; caps compensate for it */
.am-implicit {
	border-style: dashed;
	border-width: 1.5px;
	--am-claim-bw: 1.5px;
}

/* number badge — straddles the top-right corner. Blue fill + white 1px ring
 * + outer blue rim (box-shadow). Same in both schemes, like the editor. */
.am-badge {
	position: absolute;
	top: -0.733em;
	right: -0.533em;
	height: 1.333em;
	min-width: 1.333em;
	box-sizing: border-box;
	padding: 0 0.333em;
	border: 1px solid #fff;
	border-radius: 0.667em;
	background: var(--am-badge, rgba(34, 170, 224, 0.8));
	box-shadow: 0 0 0 2px var(--am-badge, rgba(34, 170, 224, 0.8));
	color: #fff;
	font: 700 0.8em/1.2em var(--font-map);
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}

/* -------------------------------------------------- groups row + brackets */
.am-groups {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	margin-top: var(--am-row-gap);
	position: relative;
}

/* one group: bracket zone above a flex row of claim cells */
.am-group {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-top: var(--am-drop);
	--am-line: var(--am-green);
	--am-w: var(--am-w-normal);
}
.am-opposing { --am-line: var(--am-red); }
.am-strong { --am-w: var(--am-w-strong); }
.am-weak { --am-w: var(--am-w-weak); }

.am-claims {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: var(--am-claim-gap);
}
.am-claims > .am-node-wrap { position: relative; }

/* bracket segments: cells bridge the gaps… */
.am-claims > .am-node-wrap::before {
	content: '';
	position: absolute;
	top: calc(-1 * var(--am-drop));
	left: calc(var(--am-claim-gap) / -2);
	right: calc(var(--am-claim-gap) / -2);
	height: 0;
	border-top: var(--am-w) solid var(--am-line);
	pointer-events: none;
}
.am-claims > .am-node-wrap:first-child::before { left: 50%; }
.am-claims > .am-node-wrap:last-child::before { right: 50%; }
.am-claims > .am-node-wrap:only-child::before { content: none; }

/* …and the outer claims draw the corner caps over exactly their own width.
 * Supporting: 10px-radius corners curling down. Opposing: SQUARE corners —
 * the editor distinguishes objections by shape as well as colour.
 * Absolutely positioned pseudos anchor to the claim's PADDING box, i.e.
 * inside its border, so offsets compensate by --am-claim-bw to land on the
 * same line as the (borderless) cell segments. */
.am-claims > .am-node-wrap:first-child > .am-claim::before,
.am-claims > .am-node-wrap:last-child > .am-claim::after {
	content: '';
	position: absolute;
	top: calc(-1 * var(--am-drop) - var(--am-claim-bw));
	left: calc(-1 * var(--am-claim-bw));
	right: calc(-1 * var(--am-claim-bw));
	height: var(--am-bracket-h);
	box-sizing: border-box;
	border-top: var(--am-w) solid var(--am-line);
	pointer-events: none;
}
.am-claims > .am-node-wrap:first-child > .am-claim::before {
	border-left: var(--am-w) solid var(--am-line);
	border-top-left-radius: 10px;
}
.am-claims > .am-node-wrap:last-child > .am-claim::after {
	border-right: var(--am-w) solid var(--am-line);
	border-top-right-radius: 10px;
}
.am-opposing > .am-claims > .am-node-wrap:first-child > .am-claim::before,
.am-opposing > .am-claims > .am-node-wrap:last-child > .am-claim::after {
	border-radius: 0;
}

/* invisible bracket-line anchor: carries the CSS fallback stem and marks the
 * group's top for the hydrated connectors. No borders of its own. */
.am-bracket {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--am-bracket-h);
	pointer-events: none;
}

/* --------------------------------------------- hydrated absolute layout */
/* The JS envelope layout (docs/LAYOUT-SPEC.md) flips the map to .am-abs:
 * wrappers stop generating boxes, every claim box / bracket / io-bar is
 * absolutely positioned by measured coordinates, and the bracket becomes a
 * SINGLE element sized to hug exactly the packed claims row — the segment
 * construction below only serves the no-JS nested fallback. */
.argmap.am-abs {
	width: auto;
	min-width: 0;
	padding: 0;
}
.am-abs .am-node-wrap,
.am-abs .am-groups,
.am-abs .am-group,
.am-abs .am-claims,
.am-abs .am-inference-objection {
	display: contents;
}
.am-abs .am-claim,
.am-abs .am-io-bar {
	position: absolute;
	margin: 0;
}
.am-abs .am-claims > .am-node-wrap::before,
.am-abs .am-claims > .am-node-wrap:first-child > .am-claim::before,
.am-abs .am-claims > .am-node-wrap:last-child > .am-claim::after {
	content: none;
}
.am-abs .am-bracket {
	position: absolute;
	box-sizing: border-box;
	left: auto;
	right: auto;
	height: calc(var(--am-bracket-h) + var(--am-w));
	border: var(--am-w) solid var(--am-line);
	border-bottom: none;
	border-radius: 0.667em 0.667em 0 0;
}
.am-abs .am-opposing > .am-bracket { border-radius: 0; }
/* inference objection, authentic form: a square red bracket over the
 * objecting claims (in the same row as the reason's claims) whose bar
 * extends left as a tail beneath the green bracket. JS positions the bar
 * and its io-section left arm; the io group's own bracket is replaced. */
.am-abs .am-io-bar {
	left: auto;
	right: auto;
	box-sizing: border-box;
	height: var(--am-w);
	border-top: var(--am-w) solid var(--am-red);
}
.am-abs .am-inference-objection .am-group > .am-bracket { display: none; }

/* CSS-only fallback stem: a coloured vertical line rising from the bracket
 * bar to the parent claim (height = the row gap). Hydration hides it and
 * draws the SVG curve into the same geometry -> no layout shift. */
.am-stem {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	width: var(--am-w);
	height: var(--am-row-gap);
	background: var(--am-line);
	border-radius: 2px;
	pointer-events: none;
}
.argmap[data-hydrated] .am-stem { display: none; }

/* ---------------------------------------------- inference objection (§4) */
/* a red bar ~70% of the bracket width, centred, 4px under the supporting
 * bracket's bar; the objection GROUP (square red bracket + claims) hangs
 * below the claims row, connected by a red curve from the bar's underside. */
.am-io-bar {
	position: absolute; /* against the owning .am-group */
	top: calc(var(--am-w-normal) + 4px);
	left: 15%;
	right: 15%;
	height: 0;
	border-top: var(--am-w-normal) solid var(--am-red);
	pointer-events: none;
}
.am-inference-objection {
	display: flex;
	justify-content: center;
	margin-top: var(--am-row-gap);
}

/* ------------------------------------------------------------- connectors */
.am-links {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
.am-links path.am-link {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* widened invisible hit path for strength-enabled connectors */
.am-links path.am-hit {
	fill: none;
	stroke: transparent;
	stroke-width: 16px;
	pointer-events: stroke;
	cursor: pointer;
}

/* ------------------------------------------------------------- selection */
.am-claim.is-selected {
	outline: 3px dotted var(--am-select);
	outline-offset: 1px;
}
.am-claim.am-implicit.is-selected {
	outline-style: dashed;
}
.am-claim:focus { outline: 3px dotted var(--am-select); outline-offset: 1px; }
.am-claim.am-implicit:focus { outline-style: dashed; }
.am-claim:focus:not(:focus-visible) { outline: none; }
.am-claim.is-selected:focus:not(:focus-visible) {
	outline: 3px dotted var(--am-select);
}

/* ---------------------------------------------------------------- hover */
/* subtle emphasis; never re-layouts. JS thickens the matched connector. */
.am-claim:hover {
	border-color: color-mix(in srgb, var(--am-border) 88%, #000);
}
:root[data-theme='dark'] .am-claim:hover {
	border-color: color-mix(in srgb, var(--am-border) 82%, #fff);
}

/* -------------------------------------------------------- demo prompt bar */
/* Lives BETWEEN the canvas and the caption bar (its own layout band), so
 * it can never overlap the map. Hidden once the demo has run. */
.am-demo-bar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-4);
	background: var(--brand-wash);
	border-top: 1px solid var(--hairline);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	color: var(--ink);
	line-height: 1.5;
}
.am-demo-bar[hidden] { display: none; }
.am-demo-bar .am-demo-prompt { flex: 1; }
.am-demo-bar kbd {
	display: inline-block;
	min-width: 1.2em;
	padding: 1px 0.375rem;
	margin: 0 1px;
	font: 600 0.78125rem/1.5 var(--font-ui);
	color: var(--ink-strong);
	background: var(--paper);
	border: 1px solid var(--hairline-strong);
	border-bottom-width: 2px;
	border-radius: 5px;
	white-space: nowrap;
}
.am-chip-btn {
	appearance: none;
	background: var(--brand);
	color: #fff;
	border: none;
	border-radius: var(--radius-ui);
	padding: 0.1875rem 0.625rem;
	font: 600 0.78125rem/1.4 var(--font-ui);
	cursor: pointer;
	white-space: nowrap;
}
.am-chip-btn:hover { background: var(--brand-ink); }
.am-chip-btn.am-chip-secondary {
	background: transparent;
	color: var(--brand);
	border: 1px solid var(--hairline-strong);
}
.am-chip-btn.am-chip-secondary:hover {
	background: var(--brand-wash);
	color: var(--brand-ink);
}
.am-chip-btn:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* -------------------------------------------------- strength popover */
.am-strength-pop {
	position: absolute;
	z-index: 4;
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--paper-raised);
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-ui);
	box-shadow: var(--shadow-card);
	transform: translate(-50%, -50%);
	font-family: var(--font-ui);
}
.am-strength-pop button {
	appearance: none;
	background: var(--paper);
	border: 1px solid var(--hairline-strong);
	border-radius: 6px;
	padding: 0.1875rem 0.625rem;
	font: 600 0.78125rem/1.4 var(--font-ui);
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
}
.am-strength-pop button:hover { background: var(--brand-wash); color: var(--brand-ink); }
.am-strength-pop button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ------------------------------------------- demo node-entrance motion */
.am-enter {
	animation: am-rise 260ms ease-out both;
}
@keyframes am-rise {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.am-connector-enter { animation: am-fade 260ms ease-out both; }
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }

/* ----------------------------------------------- quiz / check mini-maps */
/* The card SHELL (.check, .check__eyebrow, .check__option, .check__submit,
 * .check__feedback, .check__correct-tag, …) is site.css §11; this file only
 * supplies what site.css delegates: the mini-map interior, inertness, and
 * small pieces the shell omits. Markup uses the site's BEM names. */
.check__option .fig-canvas {
	border: none;
	padding: var(--space-3);
	background-color: transparent;
	overflow-x: auto;
}
.check__option:has(input:focus-visible) {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}
/* clear the absolutely positioned radio (site.css places it top-left) */
.check__option > .check__option-label { padding-inline-start: 30px; }
.check__correct-tag { display: none; margin-top: var(--space-2); }
.check__option.is-correct .check__correct-tag { display: inline-flex; }
.check__feedback[hidden] { display: none; }
.check__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

/* mini-maps inside checks are inert: no pointer/selection interaction */
.argmap.am-inert .am-claim { cursor: default; }
.argmap.am-inert .am-claim:hover { border-color: var(--am-border); }

/* --------------------------------------------------- no-JS degradation */
.demo-fallback,
.check-fallback {
	margin-top: var(--space-3);
	font-family: var(--font-ui);
	font-size: var(--text-small);
	color: var(--muted);
}
.demo-fallback summary,
.check-fallback summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--brand);
}
.js .demo-fallback,
.js .check-fallback { display: none; }

/* ------------------------------------------------ missing-fixture box */
.am-missing {
	margin: var(--space-4) 0;
	padding: var(--space-4);
	border: 2px dashed var(--am-red);
	border-radius: var(--radius-card);
	background: rgba(255, 0, 0, 0.06);
	color: var(--am-red);
	font-family: var(--font-ui);
	font-weight: 600;
}

/* --------------------------------------------------------- a11y helper */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	.am-claim,
	.fig-canvas::before,
	.fig-canvas::after,
	.am-enter, .am-connector-enter {
		transition: none !important;
		animation: none !important;
	}
}

/* --------------------------------------------------------------- print */
@media print {
	/* figures always print in the LIGHT map grammar, on white */
	.fig-canvas {
		--am-paper: #fff;
		--am-ink: #4f4f4f;
		--am-border: #707070;
		--am-green: #339966;
		--am-red: #ff0000;
		--am-shadow: none;
		background: #fff;
	}
	.fig-scroller { overflow: visible; }
	.am-claim { box-shadow: none; }
	.am-demo-bar, .fig-actions { display: none; }
	.demo-fallback, .check-fallback { display: block; }
}