/* The architecture diagram on /architecture/ (tools/arch-render.mjs renders it, assets/js/arch-diagram.mjs animates it).
   Shared parts: tokens from system.css, .btn (34px pill), .seg, .sec-head. Animated properties: opacity, transform, stroke-dashoffset only; no filter or backdrop-filter on anything that moves.
   Desktop (>= 75em): a fixed 1112 x 720 stage, centred in a 720px-high frame. Below that the same DOM is a stack of five collapsible layer cards. */
.ad-wrap.wrap { max-width: calc(1160px + 2 * var(--gutter)); }
.ad { --ad-line: rgba(255, 255, 255, .1); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.ad { visibility: visible; }
.ad button { font: inherit; }

/* ---- bar: scenario + playback ---- */
.ad-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ad-seg { flex: none; flex-wrap: nowrap; }
.ad-seg .seg__ink { opacity: 0; }
.ad-seg.is-ink .seg__ink { opacity: 1; }
.ad .ad-seg:not(.is-ink) > button[aria-pressed="true"] { background: var(--surface-2); }
.ad .ad-seg > button { padding: 0 18px; height: var(--btn-h); font-size: var(--btn-fs); font-weight: 500; line-height: 1; white-space: nowrap; border: 0; background: none; border-radius: 999px; }
.ad .ad-seg > button[aria-pressed="true"] { color: var(--text); }
.ad-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-ctl .btn { padding: 0 14px; }
.ad-ctl .btn svg { width: 14px; height: 14px; }
.ad-ctl .ad-b-back, .ad-ctl .ad-b-fwd { width: var(--btn-h); padding: 0; }
.ad-b-play { min-width: 92px; }
.ad-b-play .ad-i-pause { display: none; }
.ad.is-playing .ad-b-play .ad-i-play { display: none; }
.ad.is-playing .ad-b-play .ad-i-pause { display: inline-flex; }
.ad-ctl .btn:disabled { opacity: .4; cursor: default; }
.ad-b-speed { min-width: 48px; font-variant-numeric: tabular-nums; }
.ad-b-speed[aria-pressed="true"] { border-color: rgba(251, 186, 2, .6); color: #FFD27A; }

/* ---- frame and stage ---- */
.ad-frame { position: relative; height: 720px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(90, 93, 203, .09), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)), #07080c; }
.ad-stage { position: relative; margin-inline: auto; --mx: 0; --my: 0; }
.ad-svg { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.ad-layer { position: absolute; margin: 0; }
.ad-layer::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--h) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--h) 17%, transparent), color-mix(in srgb, var(--h) 4%, transparent) 62%, transparent); box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--h) 70%, #000), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translate3d(calc(var(--mx) * -5px), calc(var(--my) * -3px), 0); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.ad-layer--f::before { background: linear-gradient(180deg, rgba(158, 163, 179, .1), rgba(158, 163, 179, .03)); border-style: dashed; border-color: rgba(158, 163, 179, .28); }
.ad-lh { position: absolute; z-index: 2; top: 13px; left: 16px; right: 12px; margin: 0; font: 600 12px/16px var(--font); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--h) 55%, #fff); }
.ad-lt { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: default; }
.ad-lt:disabled { color: inherit; opacity: 1; }
.ad-lt__n { white-space: nowrap; }
.ad-lt__c { display: none; width: 14px; height: 14px; margin-left: auto; flex: none; transition: transform .2s var(--ease); }
.ad-layer.is-off { opacity: .16; pointer-events: none; transition: opacity .3s var(--ease); }
.ad-layer { transition: opacity .3s var(--ease); }

/* ---- nodes ---- */
.ad-nodes { display: contents; }
.ad-node { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px 26px; margin: 0; text-align: left; color: var(--text); cursor: pointer; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--h) 36%, rgba(255, 255, 255, .1)); background: linear-gradient(158deg, color-mix(in srgb, var(--h) 17%, #0f1118) 0%, #0b0d13 62%);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07); transition: opacity .25s var(--ease), border-color .25s var(--ease); }
.ad-node::before, .ad-node::after { content: ''; position: absolute; inset: -1px; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); }
.ad-node::before { box-shadow: 0 0 0 1px color-mix(in srgb, var(--h) 70%, #fff); }
.ad-node::after { inset: -2px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--h) 60%, #fff), 0 0 28px 3px color-mix(in srgb, var(--h) 62%, transparent); }
.ad-node:hover::before, .ad-node.is-lit::before { opacity: .55; }
.ad-node:hover::after, .ad-node.is-now::after, .ad-node.is-sel::after { opacity: 1; }
.ad-node:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ad-node:focus-visible::after { opacity: 1; }
.ad-t { font: 600 14px/1.25 var(--font); color: var(--text); letter-spacing: 0; }
.ad-ss { display: flex; flex-direction: column; gap: 1px; width: 100%; }
.ad-s { font: 400 12px/16px var(--font); color: #B4B9C8; }
.ad-ss--list { flex: 1; gap: 0; margin-top: 8px; }
.ad-ss--list .ad-s { flex: 1; display: flex; align-items: center; border-top: 1px solid rgba(255, 255, 255, .08); }
.ad-b { position: absolute; left: 12px; bottom: 7px; display: flex; gap: 4px; }
.ad-b i { font: 500 12px/16px var(--mono); font-style: normal; padding: 0 6px; border-radius: 999px; color: #C9CDD9; background: rgba(255, 255, 255, .08); transition: background .25s var(--ease), color .25s var(--ease); }
.ad-node.is-stage .ad-b i { background: color-mix(in srgb, var(--h) 70%, #fff 0%); color: #fff; }
.ad-node.is-bad { --h: #FF3D5E; border-color: rgba(255, 61, 94, .8); }
.ad-node.is-dark { opacity: .34; }

/* hover and selection: the node and what it connects to stay, the rest dims to 35% */
.ad.is-focus .ad-node:not(.is-rel) { opacity: .35; }
.ad.is-play .ad-node:not(.is-lit):not(.is-now):not(.is-rel) { opacity: .4; }
.ad.is-play .ad-node.is-dark { opacity: .22; }

/* ---- connectors ---- */
.ad-e { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; transition: opacity .25s var(--ease); }
.ad-f { fill: none; stroke: url(#adg); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 20; opacity: .55; }
.ad-dep { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.4; stroke-dasharray: 1 6; stroke-linecap: round; transition: opacity .25s var(--ease), stroke .25s var(--ease); }
.ad.is-focus .ad-e:not(.is-rel), .ad.is-focus .ad-f:not(.is-rel), .ad.is-focus .ad-dep:not(.is-rel) { opacity: .14; }
.ad.is-focus .ad-e.is-rel { stroke: rgba(255, 255, 255, .7); }
.ad.is-focus .ad-dep.is-rel { stroke: rgba(255, 255, 255, .85); }
.ad .is-off-e { opacity: .06; }
.ad.is-play .ad-f { opacity: .2; animation: none; }
.ad-live { opacity: 0; transition: opacity .2s; }
.ad.is-nomotion .ad-live { display: none; }
.ad.is-play .ad-live { opacity: 1; }
.ad-trail { fill: none; stroke: url(#adg); stroke-width: 3.2; stroke-linecap: round; opacity: .9; }
.ad-guide { fill: none; stroke: none; }
.ad-pd { fill: #fff; opacity: .5; }
.ad-glow { fill: url(#adglow); }
.ad-pulse { fill: #fff; stroke: var(--ph, #FBBA02); stroke-width: 2.5; }
.ad.is-bad-run .ad-trail { stroke: #FF3D5E; }
.ad.is-bad-run .ad-pulse { stroke: #FF3D5E; }

/* ---- caption, receipt ---- */
.ad-cap { display: flex; align-items: center; gap: 18px; min-height: 84px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)); }
.ad-cap__t { flex: 1; min-width: 0; margin: 0; font: 500 15px/1.5 var(--font); color: var(--text); }
.ad-cap__t small { display: block; margin-top: 4px; font: 400 12px/1.5 var(--font); color: #B4B9C8; }
.ad-rcpt { flex: none; width: 310px; min-height: 56px; }
.ad-rc { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(46, 229, 157, .5); background: linear-gradient(160deg, rgba(46, 229, 157, .12), rgba(46, 229, 157, .03)), #0b0d13; box-shadow: 0 0 0 1px rgba(46, 229, 157, .1), 0 14px 30px -18px rgba(46, 229, 157, .5); animation: ad-stamp .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both; transform-origin: 20% 40%; }
.ad-rc--bad { border-color: rgba(255, 61, 94, .6); background: linear-gradient(160deg, rgba(255, 61, 94, .14), rgba(255, 61, 94, .03)), #0b0d13; box-shadow: 0 0 0 1px rgba(255, 61, 94, .12), 0 14px 30px -18px rgba(255, 61, 94, .55); }
.ad-rc b { display: block; margin-bottom: 4px; font: 600 12px/16px var(--font); letter-spacing: .12em; text-transform: uppercase; color: #7CF0BE; }
.ad-rc--bad b { color: #FF8CA0; }
.ad-rc dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; margin: 0; }
.ad-rc dt { font: 400 12px/18px var(--font); color: #B4B9C8; }
.ad-rc dd { margin: 0; font: 500 12px/18px var(--mono); color: var(--text); text-align: right; }
@keyframes ad-stamp { 0% { opacity: 0; transform: scale(1.22) rotate(-3deg); } 55% { opacity: 1; transform: scale(.97) rotate(0); } 100% { opacity: 1; transform: none; } }

/* ---- the twelve stages ---- */
.ad-rail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ad-rail li { position: relative; padding-top: 10px; min-width: 0; }
.ad-rail li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: var(--c); opacity: .28; transition: opacity .3s var(--ease); }
.ad-rail b { display: block; font: 500 12px/16px var(--mono); color: #C9CDD9; }
.ad-rail span { display: block; font: 400 12px/16px var(--font); color: #9EA3B3; transition: color .3s var(--ease); }
.ad-rail li.is-done::before { opacity: .75; }
.ad-rail li.is-now::before { opacity: 1; box-shadow: 0 0 10px 1px var(--c); }
.ad-rail li.is-now b, .ad-rail li.is-now span { color: #fff; }
.ad.is-idle-rail .ad-rail { opacity: .55; }

/* ---- legend ---- */
.ad-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-legend__t { margin-right: 4px; font: 600 12px/16px var(--font); letter-spacing: .12em; text-transform: uppercase; color: #B4B9C8; }
.ad-lg { position: relative; display: inline-flex; align-items: center; gap: 8px; height: var(--btn-h); padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--text); font: 500 var(--btn-fs)/1 var(--font); cursor: pointer; transition: opacity .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.ad-lg i { width: 10px; height: 10px; border-radius: 50%; background: var(--h); box-shadow: 0 0 10px color-mix(in srgb, var(--h) 70%, transparent); }
.ad-lg:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .07); }
.ad-lg[aria-pressed="false"] { opacity: .5; }
.ad-lg[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--h); }
@media (pointer: coarse), (hover: none) { .ad-lg::after, .ad-x::after { content: ''; position: absolute; inset: -5px 0; } .ad-x { position: absolute; } }
.ad-lg:focus-visible, .ad-lt:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---- detail panel (docked inside the frame) ---- */
.ad-panel { position: absolute; z-index: 6; top: 12px; right: 12px; bottom: 12px; width: 344px; padding: 20px 20px 18px; overflow: auto; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ph, #FBBA02) 45%, rgba(255, 255, 255, .1));
  background: linear-gradient(170deg, color-mix(in srgb, var(--ph, #FBBA02) 12%, #10121a), #0b0d13 55%); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07);
  opacity: 0; visibility: hidden; transform: translateX(18px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; }
.ad-panel.is-left { right: auto; left: 12px; transform: translateX(-18px); }
.ad-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ad-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ad-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: rgba(255, 255, 255, .04); color: var(--text); cursor: pointer; }
.ad-x svg { width: 14px; height: 14px; }
.ad-x:hover { background: rgba(255, 255, 255, .1); }
.ad-pl { margin: 0 36px 4px 0; font: 600 12px/16px var(--font); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ph, #FBBA02) 55%, #fff); }
.ad-pn h3 { margin: 0 36px 10px 0; font: 600 19px/1.25 var(--font); }
.ad-pn p { margin: 0 0 12px; font: 400 14px/1.55 var(--font); color: #D3D6E0; }
.ad-pn .ad-pk { margin: 14px 0 6px; font: 600 12px/16px var(--font); letter-spacing: .12em; text-transform: uppercase; color: #B4B9C8; }
.ad-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.ad-chips li { padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ph, #FBBA02) 40%, rgba(255, 255, 255, .1)); background: rgba(255, 255, 255, .04); font: 500 12px/18px var(--font); color: var(--text); }
.ad-st { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 2px; }
.ad-st li { font: 400 12px/18px var(--font); color: #C9CDD9; }
.ad-st b { font: 500 12px/18px var(--mono); color: #fff; margin-right: 8px; }
.ad-pn .btn { margin: 4px 0 12px; max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: var(--btn-h); padding-block: 8px; line-height: 1.25; }
.ad-ex, .ad-lk { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.ad-ex a, .ad-lk a { font: 400 13px/1.45 var(--font); color: #A9C9FF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(169, 201, 255, .4); }
.ad-ex a:hover, .ad-lk a:hover { color: #fff; }
.ad-ex code { font: 500 12px/1.4 var(--mono); color: #fff; margin-right: 6px; }

/* ---- text alternative ---- */
.ad-list { border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.ad-list > summary { display: flex; align-items: center; min-height: 48px; padding: 0 18px; cursor: pointer; font: 500 14px/1.2 var(--font); list-style: none; border-radius: 14px; }
.ad-list > summary::-webkit-details-marker { display: none; }
.ad-list > summary::after { content: ''; width: 9px; height: 9px; margin-left: auto; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
.ad-list[open] > summary::after { transform: rotate(225deg); }
.ad-list > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ad-list__in { padding: 4px 18px 18px; }
.ad-list__in p { margin: 0 0 14px; font: 400 14px/1.55 var(--font); color: #C9CDD9; }
.ad-list__in h3 { margin: 18px 0 10px; font: 600 16px/1.3 var(--font); }
.ad-lg-grid, .ad-lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 24px; }
.ad-li h4 { margin: 0 0 6px; font: 600 12px/16px var(--font); letter-spacing: .12em; text-transform: uppercase; color: #B4B9C8; }
.ad-li ul, .ad-li ol { margin: 0; padding-left: 18px; list-style: revert; display: grid; gap: 4px; }
.ad-li li { font: 400 14px/1.5 var(--font); color: #D3D6E0; }
.ad-li a { color: #A9C9FF; }

/* ---- idle shimmer on the connectors (only while on screen, never with reduced motion) ---- */
@media (prefers-reduced-motion: no-preference) {
  .ad.is-vis .ad-f { animation: ad-flow 3.4s linear infinite; }
  @keyframes ad-flow { to { stroke-dashoffset: -66; } }
}
@media (prefers-reduced-motion: reduce) {
  .ad-node, .ad-node::before, .ad-node::after, .ad-panel, .ad-layer, .ad-layer::before, .ad-e, .ad-dep, .ad-live, .ad-rc, .ad-rail li::before { transition: none !important; animation: none !important; }
}

/* ---- below 75em: the same content as a stack of five collapsible layer cards ---- */
@media (max-width: 74.99em) {
  .ad-stage { width: auto; height: auto; }
  .ad-frame { height: auto; overflow: visible; border: 0; background: none; border-radius: 0; display: grid; gap: 12px; }
  .ad-stage { width: auto; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; margin: 0; }
  .ad-svg { display: none; }
  .ad-layer, .ad-layer--f { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 0; }
  .ad-layer--f { grid-column: 1 / -1; }
  .ad-layer::before { transform: none; }
  .ad-lh { position: relative; top: auto; left: auto; right: auto; z-index: 2; }
  .ad-lt { min-height: 52px; padding: 0 16px; cursor: pointer; }
  .ad-lt:disabled { cursor: pointer; }
  .ad-lt__c { display: block; }
  .ad-layer.is-open .ad-lt__c { transform: rotate(180deg); }
  .ad-nodes { position: relative; z-index: 2; display: grid; gap: 8px; padding: 0 12px 12px; }
  .js .ad-layer:not(.is-open) .ad-nodes { display: none; }
  .ad-node { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; min-height: 48px; padding: 10px 12px 12px; }
  .ad-b { position: static; margin-top: 4px; }
  .ad-node { scroll-margin: 96px 0 150px; }
  .ad-ss--list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; column-gap: 12px; }
  .ad-ss--list .ad-s { padding: 4px 0; }
  .ad-panel { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; display: none; transform: none; opacity: 1; visibility: visible; }
  .ad-panel.is-left { left: auto; }
  .ad-panel.is-open { display: block; }
  .ad-cap { position: sticky; bottom: 8px; z-index: 8; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)), #0b0d13; box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .9); }
  .ad-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 12px; }
  .ad-bar { gap: 10px; }
}
@media (max-width: 47.99em) {
  .ad-stage { grid-template-columns: minmax(0, 1fr); }
  .ad-cap { flex-wrap: wrap; gap: 10px; }
  .ad-rcpt { width: 100%; min-height: 0; }
  .ad-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ad-seg { display: flex; width: 100%; }
  .ad .ad-seg > button { flex: 1 1 0; padding: 0 4px; font-size: 14px; }
  .ad-ctl { width: 100%; }
  .ad-ctl .ad-b-play { flex: 1 1 auto; }
  .ad-lg { padding: 0 12px; }
}