/*
 * foundation-shell.css — component family "ad/foundation-shell" v1.0.0 (Wave 0, 2026-08-22).
 *
 * The anti-one-off foundation the 27-week program's Article Component Contract requires: a shared
 * shell every future article/interactive component is built on top of, so no article ships a
 * bespoke wrapper. This file defines ONLY the outer shell primitive — a scoped container that
 * gives any component (a) a namespaced boundary, (b) container-query context, (c) predictable
 * inline sizing. It does NOT define any visualization family (decision-flow, comparison-matrix,
 * etc.) — per the plan's closed decision "shared shell/layout/a11y primitives first;
 * visualization families added on first demand; never speculative-build."
 *
 * Namespacing rule (enforced by review, not yet a guard): every selector here starts with
 * `.ad-fnd-`. Zero bare element selectors. This file must never be the source of a sitewide
 * regression the way a bare `img {}` or `button {}` rule would be.
 */

.ad-fnd-shell {
	/* Establishes container-query context so any nested primitive/component can respond to
	   the SHELL's width, not the viewport -- required for the article breakout width
	   (~960-1160px) to recompose correctly regardless of where the shell is placed on the page. */
	container-type: inline-size;
	container-name: ad-fnd-shell;

	inline-size: 100%;
	max-inline-size: 100%;
	box-sizing: border-box;
}

.ad-fnd-shell * {
	box-sizing: border-box;
}

/* The breakout width band from the integration contract's "Article visual layout system":
   desktop major visuals expand into a controlled ~960-1160px canvas. A component asks for this
   via a data attribute, not a bespoke width -- `<div class="ad-fnd-shell" data-ad-fnd-width="breakout">`. */
.ad-fnd-shell[data-ad-fnd-width="breakout"] {
	max-inline-size: 1160px;
	margin-inline: auto;
}

.ad-fnd-shell[data-ad-fnd-width="readable"] {
	/* Body-prose column width -- a component that should NOT expand past the reading column
	   (e.g. an inline stat callout) opts in explicitly instead of inheriting page defaults. */
	max-inline-size: 720px;
	margin-inline: auto;
}

/* No page-level horizontal scroll, ever (UI Quality Standard §4). A shell is the one place this
   is enforced structurally rather than per-component. */
.ad-fnd-shell {
	overflow-x: clip;
}