/*
Theme Name: AWSNetworks
Theme URI: https://awsnetworks.com/
Author: AWSNetworks
Description: A lightweight editorial block theme for AWSNetworks — an independent AWS architecture reference. Monospace body, serif headings, warm parchment canvas, no webfonts, no framework. Built for long-form technical reading and interactive reference tools.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.5.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: awsnetworks
Tags: blog, one-column, custom-colors, custom-menu, block-patterns, full-site-editing, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   Nearly all visual design lives in theme.json. This file carries only what
   theme.json cannot express: focus behaviour, the skip link, table rules,
   and the interactive reference tools.
   --------------------------------------------------------------------------- */

/* --- Accessibility: visible focus everywhere -------------------------------
   theme.json has no focus-state API. Without this, keyboard users get the
   browser default, which is near-invisible on a warm parchment canvas. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Retain a focus ring for browsers without :focus-visible, but never show it
   on mouse click where :focus-visible is supported. */
:where(a, button, input, select, textarea):focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
	outline: none;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}
.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Editorial furniture --------------------------------------------------- */

/* Wide-tracked uppercase label. Monad uses these as section eyebrows. */
.awsn-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.75rem;
}

.awsn-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	margin: 0;
}

/* Entry meta line under a post title */
.awsn-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* --- Long-form body copy ---------------------------------------------------
   Deviation D3 from the Monad reference: the reference sets mono body at
   16px/1.35, which is punishing across a 1,500-word technical article. Body
   runs 17px/1.6 at roughly a 68ch measure instead. */

.awsn-prose {
	max-width: 68ch;
}
.awsn-prose h2 {
	margin-top: 2.75rem;
}
.awsn-prose h3 {
	margin-top: 2rem;
}
.awsn-prose ul,
.awsn-prose ol {
	padding-left: 1.5rem;
}
.awsn-prose li + li {
	margin-top: 0.4rem;
}

/* --- Tables ----------------------------------------------------------------
   The resources lean heavily on comparison tables. theme.json cannot express
   border collapse, cell alignment or horizontal overflow. */

.wp-block-table {
	overflow-x: auto;
}
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--rule);
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}
.wp-block-table th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* --- Technical diagrams ----------------------------------------------------
   Diagrams are inlined as SVG rather than uploaded, so they scale cleanly,
   inherit the palette, and cost no extra request. */

.awsn-figure {
	margin: 2.5rem 0;
}
.awsn-figure svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
}
.awsn-figure figcaption {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* --- Cards ----------------------------------------------------------------- */

.awsn-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	padding: 1.5rem;
	height: 100%;
}
.awsn-card h3 {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--h4);
}
.awsn-card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--graphite);
}

/* A grid of blue underlined titles reads as a link dump. Card headings stay
   ink and reveal their underline on hover, so the accent stays rationed. */
.awsn-card h2 a,
.awsn-card h3 a,
.awsn-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.awsn-card h2 a:hover,
.awsn-card h3 a:hover,
.awsn-card .wp-block-post-title a:hover,
.awsn-card h2 a:focus-visible,
.awsn-card h3 a:focus-visible,
.awsn-card .wp-block-post-title a:focus-visible {
	text-decoration: underline;
}

/* Wide tool pages: the tool uses the full column, prose does not. */
.awsn-wide-prose > p,
.awsn-wide-prose > ul,
.awsn-wide-prose > ol,
.awsn-wide-prose > h2,
.awsn-wide-prose > h3,
.awsn-wide-prose > .wp-block-separator {
	max-width: 44rem;
}

/* Footer link columns are navigation, not prose lists. */
footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

/* --- Interactive reference tools -------------------------------------------
   Shared chrome for the calculators. Inputs use border-strong (#8e8a88,
   3.10:1) rather than the decorative rule colour, to satisfy WCAG 1.4.11
   non-text contrast. */

.awsn-tool {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	padding: 1.75rem;
	margin: 2rem 0;
}
.awsn-tool__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.awsn-tool label {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.4rem;
}
.awsn-tool input[type="text"],
.awsn-tool input[type="number"],
.awsn-tool select {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 6px;
	padding: 0.6rem 0.7rem;
}
.awsn-tool input[aria-invalid="true"] {
	border-color: #a3301f;
	border-width: 2px;
}

.awsn-tool__error {
	color: #a3301f;
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.5rem;
}
.awsn-tool__error:empty {
	display: none;
}

.awsn-tool__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--graphite);
	margin-top: 1rem;
}

.awsn-tool__out {
	margin-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 1.25rem;
}
.awsn-tool__out:empty {
	display: none;
	border-top: 0;
	padding-top: 0;
}

/* Statistic treatment: oversized figure, small tracked label beneath */
.awsn-stat {
	display: block;
}
.awsn-stat__value {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.75rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}
.awsn-stat__label {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	margin-top: 0.3rem;
}

.awsn-stat-row {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/* Subnet allocation table emitted by the CIDR planner */
.awsn-subnets {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}
.awsn-subnets th,
.awsn-subnets td {
	border: 1px solid var(--wp--preset--color--rule);
	padding: 0.5rem 0.6rem;
	text-align: left;
}
.awsn-subnets th {
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.06em;
}
.awsn-subnets caption {
	caption-side: top;
	text-align: left;
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	padding-bottom: 0.6rem;
}
.awsn-subnets td:nth-child(2),
.awsn-subnets td:nth-child(3) {
	white-space: nowrap;
}

/* Scrolling container for the allocation table on narrow screens */
.awsn-scroll {
	overflow-x: auto;
}

/* --- Checklist tool ------------------------------------------------------- */

.awsn-check__group {
	margin-bottom: 1.5rem;
}
.awsn-check__group > legend {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
	padding: 0;
	margin-bottom: 0.75rem;
}
.awsn-check__item {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.awsn-check__item:last-child {
	border-bottom: 0;
}
.awsn-check__item input[type="checkbox"] {
	margin: 0.2rem 0 0;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}
.awsn-check__item label {
	/* Override the uppercase tool-label treatment for checklist prose. */
	font-size: var(--wp--preset--font-size--base);
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--graphite);
	margin: 0;
	cursor: pointer;
}

.awsn-progress {
	height: 6px;
	background: var(--wp--preset--color--rule);
	border-radius: 3px;
	overflow: hidden;
	margin-top: 0.5rem;
}
.awsn-progress__bar {
	height: 100%;
	width: 0;
	background: var(--wp--preset--color--accent);
	transition: width 180ms ease-out;
}

/* --- Header / footer ------------------------------------------------------- */

.awsn-logo img,
.wp-block-site-logo img {
	display: block;
	height: auto;
}

/* --- Print -----------------------------------------------------------------
   The resources get printed and forwarded. Drop the furniture, keep the text. */

@media print {
	.awsn-tool,
	.skip-link,
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-navigation {
		display: none !important;
	}
	body {
		background: #fff;
		color: #000;
	}
	.awsn-prose {
		max-width: none;
	}
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-break: break-all;
	}
}

/* --- Eyebrow term links ----------------------------------------------------
   core/post-terms renders each term as a link, so the eyebrow inherits the
   accent colour and underline and a card grid fills with blue. The eyebrow is
   a label, not a call to action: keep it muted, underline only on hover. */

.awsn-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.awsn-eyebrow a:hover,
.awsn-eyebrow a:focus-visible {
	text-decoration: underline;
}

/* ===========================================================================
   HERO + MULTI-AZ STAGE  (MISSION-012)
   ===========================================================================
   A layered failure-and-recovery stage: edge, load balancing, compute, data
   and a control layer, across three availability zones. A five-phase state
   machine (assets/js/hero-stage.js) sets data-phase on the figure; every
   state-dependent mark carries ph-N classes, so words and drawing switch on
   the same attribute and cannot disagree. Text swaps instantly; only shapes
   fade. No JavaScript, or reduced motion: steady state, steppable by hand.
   ------------------------------------------------------------------------- */

.awsn-hero {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: minmax(0, 1fr);
}

.awsn-hero__head {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 39.99rem) {
	.awsn-hero { display: flex; flex-direction: column; gap: 1rem; }
	.awsn-hero__head { display: contents; }
	.awsn-hero__title { order: 1; }
	.awsn-stage { order: 2; }
	.awsn-hero__intro { display: contents; }
	.awsn-hero__actions { order: 3; margin-top: -0.25rem; }
	.awsn-independence { order: 4; }
	.awsn-hero__lede { order: 5; margin: 0; }
	.awsn-stage__steps { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0.3rem; }
	.awsn-stage__t { display: none; }
	.awsn-stage__step { text-align: center; padding: 0.55rem 0; }
	.awsn-stage__n { font-size: 0.875rem; letter-spacing: 0; opacity: 1; }
	.awsn-stage__more { display: none; }
	.awsn-stage__caption { font-size: 0.75rem; }
	.awsn-hero .awsn-hero__actions { flex-wrap: nowrap; gap: 0.5rem; }
	.awsn-hero .awsn-btn { padding: 0.6rem 0.8rem; font-size: 0.6875rem; letter-spacing: 0.02em; white-space: nowrap; }
	.awsn-stage__console { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.awsn-stage__status { grid-column: 1 / -1; }
	.awsn-stage__pause { grid-column: 2; padding: 0.4rem 0.7rem; }
}
@media (min-width: 40rem) {
	.awsn-hero__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "title intro" "indep intro";
		gap: 0.9rem 2rem;
		align-items: end;
	}
	.awsn-hero__title { grid-area: title; }
	.awsn-hero__intro { grid-area: intro; align-self: end; }
	.awsn-independence { grid-area: indep; }
}
@media (min-width: 62rem) {
	.awsn-hero__head {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		gap: 0.9rem 3rem;
		align-items: end;
	}
}

.awsn-hero__h1 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.9rem, 1rem + 2.2vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	margin: 0;
	text-wrap: balance;
}

.awsn-hero__lede {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--graphite);
	margin: 0 0 0.8rem;
	max-width: 36rem;
}

.awsn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.awsn-btn {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.2;
	border-radius: 100px;
	padding: 0.7rem 1.4rem;
	text-decoration: none;
}
.awsn-btn--primary {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 1px solid var(--wp--preset--color--accent);
}
.awsn-btn--primary:hover { background: #2249b0; color: #fff; }
.awsn-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--border-strong);
}
.awsn-btn--ghost:hover { background: var(--wp--preset--color--surface); }

/* The independence statement is body-scale, not fine print. AWS trademark
   guidance forbids implying affiliation; burying the denial in 11px grey
   would be the wrong side of that line. */
.awsn-independence {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--graphite);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 3px solid var(--wp--preset--color--border-strong);
	border-radius: 0 6px 6px 0;
	padding: 0.55rem 0.8rem;
	margin: 0;
	max-width: 36rem;
	font-size: 0.75rem;
}
.awsn-independence strong { color: var(--wp--preset--color--ink); }

/* --- the stage panel ------------------------------------------------------- */

.awsn-stage {
	--st-bg: #14161b;
	--st-plane: #1b1e25;
	--st-cell: #222630;
	--st-edge: #0e1014;
	--st-hair: rgba(233, 228, 220, 0.14);
	--st-ink: #ece8e1;
	--st-muted: #aaa59c;
	--st-line: #86a2f7;
	--st-warn: #f4a088;
	margin: 0;
	background:
		radial-gradient(120% 70% at 50% 0%, #1f2430 0%, var(--st-bg) 62%);
	color: var(--st-ink);
	border-radius: 14px;
	border: 1px solid #2a2e38;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 28px 60px -34px rgba(20, 22, 27, 0.55);
	padding: 0.6rem clamp(0.6rem, 1.4vw, 1.25rem) 0.9rem;
	overflow: hidden;
}

.awsn-stage__canvas { line-height: 0; }
.awsn-stage__svg { display: block; width: 100%; height: auto; overflow: visible; }
.awsn-stage__svg--tall { display: none; max-width: 28rem; margin: 0 auto; }
@media (max-width: 61.99rem) {
	.awsn-stage__svg--wide { display: none; }
	.awsn-stage__svg--tall { display: block; }
}

.awsn-stage .t {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 16px;
	fill: var(--st-ink);
}
.awsn-stage .t.muted { fill: var(--st-muted); }
.awsn-stage .t.warn  { fill: var(--st-warn); }
.awsn-stage .t.lbl   { fill: var(--st-ink); font-size: 16px; letter-spacing: 0.08em; font-weight: 600; }
.awsn-stage .t.lbl2  { fill: var(--st-muted); font-size: 16px; }
.awsn-stage .t.azl   { font-size: 18px; font-weight: 600; letter-spacing: 0.06em; fill: var(--st-ink); }
.awsn-stage .t.azl.warn { fill: var(--st-warn); }
.awsn-stage .t.ctitle { font-weight: 600; }
.awsn-stage__svg--tall .t { font-size: 13.5px; }
.awsn-stage__svg--tall .t.lbl { font-size: 13.5px; letter-spacing: 0.06em; }
.awsn-stage__svg--tall .t.azl { font-size: 13.5px; letter-spacing: 0.02em; }
.awsn-stage__svg--tall .t.lbl { font-weight: 600; }

.awsn-stage .vpc   { fill: none; stroke: var(--st-hair); stroke-width: 1; stroke-dasharray: 6 5; }
.awsn-stage .slab  { stroke: rgba(233, 228, 220, 0.12); stroke-width: 1; }
.awsn-stage .plane { fill: rgba(255, 255, 255, 0.04); }
.awsn-stage .plane-sh { fill: #090a0d; opacity: 0.5; }
.awsn-stage .plane-hi { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; }
.awsn-stage .ln--dot { fill: none; stroke: var(--st-muted); stroke-width: 1.5; stroke-dasharray: 2 4; }
.awsn-stage .rail--faint { stroke: rgba(134, 162, 247, 0.28); }
.awsn-stage .rail--dash { stroke-dasharray: 3 4; }
.awsn-stage .cell  { fill: var(--st-cell); stroke: var(--st-hair); stroke-width: 1; }
.awsn-stage .cell--ctl { fill: #1e2a4a; stroke: rgba(134, 162, 247, 0.35); }
.awsn-stage .chip  { fill: #2c323f; stroke: rgba(233, 228, 220, 0.22); stroke-width: 1; }
.awsn-stage .chip--edge { fill: #2a3a66; stroke: rgba(134, 162, 247, 0.55); }
.awsn-stage .chip--data { fill: #26304d; stroke: rgba(134, 162, 247, 0.28); }
.awsn-stage .chip--none { fill: none; stroke: rgba(233, 228, 220, 0.2); stroke-dasharray: 4 4; }
.awsn-stage .hl    { fill: none; stroke: var(--st-line); stroke-width: 2; }
.awsn-stage .inst  { fill: #313847; stroke: rgba(233, 228, 220, 0.25); stroke-width: 1; }
.awsn-stage .inst--ghost { fill: none; stroke-dasharray: 4 4; stroke: rgba(233, 228, 220, 0.3); }
.awsn-stage .inst--on { fill: #2a3a66; stroke: var(--st-line); stroke-dasharray: none; }

.awsn-stage .ln   { fill: none; stroke: var(--st-muted); stroke-width: 1.5; }
.awsn-stage .ln--repl { stroke: var(--st-line); stroke-dasharray: 5 5; }
.awsn-stage .ln--warn { stroke: var(--st-warn); }
.awsn-stage .ah   { fill: var(--st-muted); stroke: none; }
.awsn-stage .rail { fill: none; stroke: rgba(134, 162, 247, 0.55); stroke-width: 1.5; transition: opacity 0.4s; }
.awsn-stage .rail--bus { stroke: rgba(134, 162, 247, 0.4); }
.awsn-stage .rail--warn { stroke: var(--st-warn); stroke-dasharray: 3 5; }
.awsn-stage .ah--rail, .awsn-stage .ah.ph { fill: rgba(134, 162, 247, 0.85); }
.awsn-stage .pkt-key { fill: #b9c8fb; }
.awsn-stage .lane { fill: none; stroke: none; }

.awsn-stage .flow { animation: awsn-march 1.1s linear infinite; }
.awsn-stage .flow--rev { animation-direction: reverse; }
@keyframes awsn-march { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

.awsn-stage .hit { fill: #86a2f7; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-out; }
.awsn-stage .hit.on { opacity: 0.2; transition-duration: 0.12s; }

.awsn-stage .pkt   { fill: #c4d1fc; }
.awsn-stage .pkt-halo { fill: #86a2f7; opacity: 0.28; }
.awsn-stage .pkt.lost { fill: var(--st-warn); }
.awsn-stage .pkt-halo.lost { fill: var(--st-warn); }

/* zone impairment: content dims, hatch overlay appears */
.awsn-stage .zb-content { transition: opacity 0.45s; }
.awsn-stage .hatch      { pointer-events: none; }
.awsn-stage .hatch-edge { fill: none; stroke: var(--st-warn); stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.awsn-stage[data-phase="1"] .zb-content,
.awsn-stage[data-phase="2"] .zb-content,
.awsn-stage[data-phase="3"] .zb-content { opacity: 0.6; }
.awsn-stage[data-phase="2"] .rail-b,
.awsn-stage[data-phase="3"] .rail-b { opacity: 0.18; }

/* phase-gated marks. Shapes fade; text switches instantly so a label never
   outlives the state it describes. */
.awsn-stage .ph { opacity: 0; transition: opacity 0.35s; }
.awsn-stage text.ph { transition: none; }
.awsn-stage[data-phase="0"] .ph-0, .awsn-stage[data-phase="1"] .ph-1,
.awsn-stage[data-phase="2"] .ph-2, .awsn-stage[data-phase="3"] .ph-3,
.awsn-stage[data-phase="4"] .ph-4, .awsn-stage[data-phase="5"] .ph-5 { opacity: 1; }

/* console: status line + stage selector */
.awsn-stage__console {
	display: grid;
	gap: 0.4rem;
	padding: 0.5rem 0.25rem 0.1rem;
	position: relative;
}
.awsn-stage__status {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--st-ink);
	margin: 0;
	max-width: 62rem;
}
.awsn-stage__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.5rem;
}
.awsn-stage__steps li { margin: 0; padding: 0; display: flex; }
.awsn-stage__steps li > span,
.awsn-stage__steps li > button {
	font-family: var(--wp--preset--font-family--mono);
}
.awsn-stage__step {
	flex: 1;
	display: grid;
	gap: 0.15rem;
	text-align: left;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--st-hair);
	border-radius: 8px;
	padding: 0.3rem 0.75rem;
	color: var(--st-muted);
	cursor: pointer;
	font-size: 0.8125rem;
	line-height: 1.3;
}
/* Hover only where a pointer really hovers: on touch, :hover sticks to the last tapped
   chip and would make a second chip look active. State changes are instant so the
   lit chip always matches the phase. */
@media (hover: hover) {
	.awsn-stage__step:hover { background: rgba(255, 255, 255, 0.07); color: var(--st-ink); }
}
.awsn-stage__step { -webkit-tap-highlight-color: transparent; }
.awsn-stage__step[aria-current="step"] {
	background: rgba(134, 162, 247, 0.16);
	border-color: rgba(134, 162, 247, 0.7);
	color: #fff;
}
.awsn-stage__steps li:not(:has(button)) { color: var(--st-muted); font-size: 0.8125rem; display: grid; gap: 0.15rem; }
.awsn-stage__n { font-size: 0.75rem; letter-spacing: 0.12em; opacity: 0.85; }
.awsn-stage__t { font-weight: 600; }
.awsn-stage__stepbtn-focus:focus-visible { outline: 2px solid #fff; }
.awsn-stage__step:focus-visible,
.awsn-stage__pause:focus-visible { outline: 2px solid #c4d1fc; outline-offset: 2px; }

.awsn-stage__pause {
	justify-self: start;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: transparent;
	color: var(--st-ink);
	border: 1px solid rgba(233, 228, 220, 0.4);
	border-radius: 100px;
	padding: 0.4rem 1rem;
	cursor: pointer;
}
.awsn-stage__pause:hover { background: rgba(255, 255, 255, 0.08); }
@media (min-width: 62rem) {
	.awsn-stage__console { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
	.awsn-stage__status { grid-column: 1 / -1; }
	.awsn-stage__steps { grid-column: 1; }
	.awsn-stage__pause { grid-column: 2; align-self: center; }
}
@media (max-width: 61.99rem) {
	.awsn-stage__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
	.awsn-stage__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
	.awsn-stage__status { font-size: 0.8125rem; line-height: 1.45; }
}

.awsn-stage__caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--st-muted);
	margin: 0.6rem 0.25rem 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--st-hair);
}

/* Reduced motion: no autoplay, no marching dashes, no fades. The steady state
   is shown and the stage buttons step through the sequence on request. */
@media (prefers-reduced-motion: reduce) {
	.awsn-stage .flow { animation: none; }
	.awsn-stage .ph, .awsn-stage .rail, .awsn-stage .zb-content, .awsn-stage .hit { transition: none; }
}


/* ===========================================================================
   RECOVERY LADDER (MISSION-012): four strategies as stepped towers of what
   is already running in the recovery Region. Qualitative; no figures.
   ------------------------------------------------------------------------- */
.awsn-ladder { padding-bottom: 1rem; }
.awsn-ladder__head { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 2rem; }
@media (min-width: 62rem) { .awsn-ladder__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: end; } }
.awsn-ladder__h {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
	line-height: 1.08; letter-spacing: -0.02em; color: var(--wp--preset--color--ink); margin: 0; text-wrap: balance;
}
.awsn-ladder__lede { font-size: 0.9375rem; line-height: 1.65; margin: 0 0 0.75rem; color: var(--wp--preset--color--graphite); }
.awsn-ladder__link { margin: 0; font-size: var(--wp--preset--font-size--small); }

.awsn-ladder__grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .awsn-ladder__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .awsn-ladder__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 1.1rem; } }

.awsn-rung {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	padding: 1.1rem 1.1rem 1.25rem;
	box-shadow: 0 1px 0 #fff inset, 0 14px 30px -24px rgba(36, 36, 36, 0.5);
}
@media (min-width: 62rem) { .awsn-rung { margin-top: calc((3 - var(--i)) * 2.6rem); } }
.awsn-rung__top { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.9rem; }
.awsn-rung__no { font-family: var(--wp--preset--font-family--serif); font-size: 2.25rem; line-height: 1; color: var(--wp--preset--color--accent); }
.awsn-rung__top h3 { font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.15; margin: 0; color: var(--wp--preset--color--ink); }
.awsn-tower { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.awsn-layer {
	display: grid; gap: 0.1rem; margin: 0; padding: 0.55rem 0.75rem;
	border-radius: 7px; border: 1px solid transparent; position: relative; overflow: hidden;
	font-family: var(--wp--preset--font-family--mono); line-height: 1.3;
	transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}
.awsn-layer__k { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.9; }
.awsn-layer__v { font-size: 0.8125rem; font-weight: 600; }
.awsn-layer.is-full { background: var(--wp--preset--color--accent); color: #fff; }
.awsn-layer.is-low  { background: var(--wp--preset--color--periwinkle); color: #1c2f66; border-color: #9fb3ea; }
.awsn-layer.is-cold { background: repeating-linear-gradient(135deg, #f1efee 0 6px, #e6e3e1 6px 12px); color: var(--wp--preset--color--graphite); border-color: var(--wp--preset--color--rule); }
.awsn-layer.is-off  { background: transparent; color: #5d5b5a; border: 1px dashed var(--wp--preset--color--border-strong); }
.awsn-rung__do { font-size: 0.8125rem; line-height: 1.55; margin: 0.9rem 0 0; color: var(--wp--preset--color--graphite); }
.awsn-rung__do strong { color: var(--wp--preset--color--ink); }

.awsn-ladder__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.5rem 0 0; padding: 0; font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; color: var(--wp--preset--color--graphite); }
.awsn-ladder__legend li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.awsn-sw { display: inline-block; width: 1.4rem; height: 0.9rem; border-radius: 3px; border: 1px solid transparent; }
.awsn-sw.is-full { background: var(--wp--preset--color--accent); }
.awsn-sw.is-low { background: var(--wp--preset--color--periwinkle); border-color: #9fb3ea; }
.awsn-sw.is-cold { background: repeating-linear-gradient(135deg, #f1efee 0 4px, #dcd9d7 4px 8px); border-color: var(--wp--preset--color--rule); }
.awsn-sw.is-off { border: 1px dashed var(--wp--preset--color--border-strong); }
.awsn-ladder__axis { display: none; }
@media (min-width: 62rem) {
	.awsn-ladder__axis { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-top: 1.25rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--wp--preset--color--graphite); }
	.awsn-ladder__arrow { height: 1px; background: var(--wp--preset--color--border-strong); position: relative; }
	.awsn-ladder__arrow::after { content: ""; position: absolute; right: 0; top: -4px; border-left: 8px solid var(--wp--preset--color--border-strong); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
}
.awsn-ladder__note { font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; line-height: 1.55; color: var(--wp--preset--color--muted); margin: 1rem 0 0; max-width: 52rem; }

/* failure drill: each rung does only the recovery work it has not already done */
.awsn-ladder__bar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: space-between; margin: 0 0 1.25rem; padding: 0.7rem 0.9rem; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--rule); border-radius: 10px; }
.awsn-ladder__status { font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; line-height: 1.5; margin: 0; color: var(--wp--preset--color--ink); flex: 1 1 22rem; min-height: 2.4em; }
.awsn-ladder[data-state="failed"] .awsn-ladder__status { color: #8a2c17; }
.awsn-ladder[data-state="done"] .awsn-ladder__status { color: #1c2f66; }
.awsn-ladder__play { font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; background: var(--wp--preset--color--accent); color: #fff; border: 0; border-radius: 100px; padding: 0.55rem 1.2rem; cursor: pointer; }
.awsn-ladder__play:hover { background: #2249b0; }
.awsn-ladder__play:disabled { opacity: 0.55; cursor: default; }
.awsn-layer { min-height: 3.5rem; }
@media (max-width: 61.99rem) {
}
@media (max-width: 39.99rem) {
	.awsn-tower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.awsn-layer { min-height: 3.1rem; padding: 0.4rem 0.55rem; }
	.awsn-layer__k { font-size: 0.75rem; }
	.awsn-layer__v, .awsn-layer__w, .awsn-layer__d { font-size: 0.75rem; }
	.awsn-rung { padding: 0.8rem 0.8rem 0.9rem; }
}
.awsn-layer__w, .awsn-layer__d { display: none; font-size: 0.8125rem; font-weight: 600; }
.awsn-layer.is-working .awsn-layer__v, .awsn-layer.is-done .awsn-layer__v { display: none; }
.awsn-layer.is-working .awsn-layer__w { display: block; }
.awsn-layer.is-done .awsn-layer__d { display: block; }
.awsn-layer.is-working { background: #fff; color: var(--wp--preset--color--accent); border: 1px solid var(--wp--preset--color--accent); }
.awsn-layer.is-working::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--wp--preset--color--accent); transform-origin: left; animation: awsn-work var(--step, 1s) linear forwards; }
@keyframes awsn-work { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.awsn-layer.is-done { background: var(--wp--preset--color--accent); color: #fff; border: 1px solid var(--wp--preset--color--accent); }
.awsn-rung__tag { margin-left: auto; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--wp--preset--color--accent); border-radius: 100px; padding: 0.15rem 0.6rem; opacity: 0; transition: opacity 0.15s; align-self: center; }
.awsn-rung.is-serving .awsn-rung__tag { opacity: 1; }
.awsn-rung { transition: border-color 0.4s, box-shadow 0.4s; }
.awsn-rung.is-serving { border-color: var(--wp--preset--color--accent); }
@media (prefers-reduced-motion: reduce) { .awsn-layer.is-working::after { animation: none; } .awsn-rung__tag { transition: none; } }

/* --- Mobile menu overlay (MISSION-012 polish) ------------------------------
   Core renders the open menu as a bare white panel. Match the site: parchment,
   serif links separated by hairlines, a visible close control. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--parchment) !important;
	color: var(--wp--preset--color--ink) !important;
	padding: 1.25rem 1.5rem 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 2.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem 0;
	line-height: 1.2;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.75rem;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--ink);
}

/* The independence statement is a compliance surface, not decoration. It is
   kept at small (not caption) scale with body-weight colour, and given a rule
   above so it reads as a distinct statement rather than trailing legal dust. */
.awsn-footer-independence {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 1rem;
	max-width: 68ch;
	line-height: 1.6;
}
.awsn-footer-independence strong { color: var(--wp--preset--color--ink); }

/* Article diagrams ship in two layouts, emitted together by awsn_refresh_figures():
   the wide one (labels render at 12px or more at the 640px article column) and a
   portrait one built for phones and tablets. Below 75rem only the portrait one is
   shown, fully visible, with no horizontal scroll. */
.awsn-figure svg { box-sizing: border-box; }
.awsn-figure .awsn-fig-m { display: none !important; }  /* the SVG files carry an inline display:block */
@media (max-width: 75rem) {
	.awsn-figure:has(.awsn-fig-m) .awsn-fig-d { display: none !important; }
	.awsn-figure .awsn-fig-m { display: block !important; max-width: 30rem; margin-left: auto; margin-right: auto; }
	.awsn-figure:has(.awsn-fig-m) figcaption { max-width: 30rem; margin-left: auto; margin-right: auto; }
}