/* ERRCSCheck diagram tokens: navy, code red, link blue. Civic and calm; slow easing. */
.dg {
  --dg-bg: #f4f6f9; --dg-card: #ffffff; --dg-soft: #e6eaf1; --dg-earth: #e3e1db; --dg-frame: #d9dee6;
  --dg-fg: #0d1b2e; --dg-ink2: #4a5568; --dg-line: #d9dee6; --dg-line2: #9aa5b5; --dg-kicker: #b42318; --dg-link: #1546a0;
  --dg-sig: #1546a0; --dg-sig-soft: rgba(21, 70, 160, .13); --dg-sig-ink: #1546a0; --dg-pulse: #1546a0; --dg-bar: #1546a0;
  --dg-hot: #c8102e; --dg-hot-soft: rgba(200, 16, 46, .12); --dg-hot-ink: #b42318; --dg-hot-on: #ffffff;
  --dg-ok: #1b6e3a; --dg-ok-ink: #1b6e3a; --dg-ok-soft: #eaf3ed;
  --dg-mk: #0d1b2e; --dg-mk-on: #ffffff;
  --dg-font: "Public Sans", "Helvetica Neue", Arial, sans-serif; --dg-head: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --dg-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --dg-fw: 800; --dg-ls: -0.01em;
  --dg-radius: 4px; --dg-radius-sm: 3px; --dg-dur: 900ms; --dg-step: 110ms; --dg-cell: 70ms; --dg-run: 9s;
}
/* Diagram figures: hand-built inline SVG + HTML. No icon fonts, no stock glyphs.
   Finished state is the default. Motion only after diagrams.js arms a figure that is
   below the fold (.is-armed) and then sees it (.is-in, .is-live). Reduced motion: nothing moves. */
.dg { margin: 2rem 0; padding: var(--dg-pad, clamp(16px, 3vw, 32px)); background: var(--dg-bg); color: var(--dg-fg);
  border: 1px solid var(--dg-frame); border-radius: var(--dg-radius); font-family: var(--dg-font); }
.placed > .dg, .split__body > .dg { margin: 0; }
:where(.dg) ol, :where(.dg) ul, :where(.dg) dl, :where(.dg) p { margin-top: 0; }
:where(.dg) li, :where(.dg) li + li { margin: 0; }
.dg__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.dg__kicker { margin: 0 0 .3rem; font: 600 .72rem/1.2 var(--dg-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--dg-kicker); }
.dg__title { margin: 0; font: var(--dg-fw) clamp(1.1rem, 2vw, 1.4rem)/1.2 var(--dg-head); letter-spacing: var(--dg-ls); color: var(--dg-fg); max-width: 46ch; }
.dg__tag { flex: none; font: 600 .68rem/1 var(--dg-mono); letter-spacing: .08em; text-transform: uppercase; padding: .4rem .6rem;
  border: 1.5px solid var(--dg-fg); border-radius: 999px; color: var(--dg-fg); }
.dg__note { margin: 1rem 0 0; font-size: .9rem; color: var(--dg-ink2); }
.dg__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1.5rem; margin-top: 1.25rem; padding-top: .85rem;
  border-top: 1px solid var(--dg-line); font-size: .92rem; color: var(--dg-ink2); }
.dg__captext { flex: 1 1 28rem; }
.dg__src { flex: 0 1 auto; font: .76rem/1.5 var(--dg-mono); color: var(--dg-ink2); }
.dg a { color: var(--dg-link); }
.dg-cite { display: block; margin-top: .3rem; font: .74rem/1.4 var(--dg-mono); color: var(--dg-ink2); }

/* picture + numbered key */
.dg__body--key { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .dg__body--key { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 2.5rem; } }
.dg__art { min-width: 0; }
.dg__svg { display: block; width: 100%; height: auto; overflow: visible; }
.dg__key { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.dg__key li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .7rem; align-items: start; }
.dg__key b { display: block; font: var(--dg-fw) 1rem/1.25 var(--dg-head); letter-spacing: var(--dg-ls); }
.dg__key li > div > span { display: block; font-size: .92rem; line-height: 1.45; color: var(--dg-ink2); margin-top: .15rem; }
.dg__key .dg-cite { margin-top: .25rem; }
.dg__n { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--dg-mk); color: var(--dg-mk-on) !important;
  font: 700 .82rem/1 var(--dg-mono) !important; margin: 0 !important; }
@media (min-width: 900px) { .dg__key--2 { grid-template-columns: 1fr 1fr; } }

/* SVG kit (classes used inside the drawings) */
.dg svg text { font-family: var(--dg-font); }
.dg .k-ln { fill: none; stroke: var(--dg-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg .k-ln2 { fill: none; stroke: var(--dg-line2); stroke-width: 1.5; stroke-linejoin: round; }
.dg .k-thin { fill: none; stroke: var(--dg-line2); stroke-width: 1; }
.dg .k-grid { fill: none; stroke: var(--dg-line2); stroke-width: 1; stroke-dasharray: 4 4; }
.dg .k-card { fill: var(--dg-card); stroke: var(--dg-fg); stroke-width: 2; stroke-linejoin: round; }
.dg .k-wall { fill: var(--dg-card); stroke: var(--dg-fg); stroke-width: 2.5; stroke-linejoin: round; }
.dg .k-slab { fill: none; stroke: var(--dg-line2); stroke-width: 1.5; }
.dg .k-soft { fill: var(--dg-soft); }
.dg .k-earth { fill: var(--dg-earth); }
.dg .k-fgf { fill: var(--dg-fg); }
.dg .k-bgf { fill: var(--dg-bg); }
.dg .k-cardf { fill: var(--dg-card); }
.dg .k-sig { fill: none; stroke: var(--dg-sig); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dg .k-sigf { fill: var(--dg-sig); }
.dg .k-sigsoft { fill: var(--dg-sig-soft); }
.dg .k-hot { fill: none; stroke: var(--dg-hot); stroke-width: 2.5; stroke-linecap: round; }
.dg .k-hotf { fill: var(--dg-hot); }
.dg .k-hotsoft-f { fill: var(--dg-hot-soft); }
.dg .k-okf { fill: var(--dg-ok); }
.dg .k-dash { stroke-dasharray: 7 6; }
.dg .k-dot { stroke-dasharray: 1 7; stroke-linecap: round; stroke-width: 3; }
.dg .k-t { fill: var(--dg-fg); font-size: 14px; }
.dg .k-tb { fill: var(--dg-fg); font-size: 15px; font-weight: 700; font-family: var(--dg-head); }
.dg .k-t2 { fill: var(--dg-ink2); font-size: 13px; }
.dg .k-tm { fill: var(--dg-ink2); font: 600 11px var(--dg-mono); letter-spacing: .06em; text-transform: uppercase; }
.dg .k-tmh { fill: var(--dg-hot-ink); font: 700 11px var(--dg-mono); letter-spacing: .06em; text-transform: uppercase; }
.dg .k-tms { fill: var(--dg-sig-ink); font: 700 11px var(--dg-mono); letter-spacing: .06em; text-transform: uppercase; }
.dg-m circle { fill: var(--dg-mk); stroke: var(--dg-bg); stroke-width: 3; }
.dg-m text { fill: var(--dg-mk-on); font: 700 14px var(--dg-mono); }
.dg-m { transform-box: fill-box; transform-origin: center; }
@media (max-width: 640px) {
  .dg .k-lbl { display: none; }
  .dg-m { transform: scale(1.7); }
  .dg__head { flex-direction: column; }
}
/* failure-finder and coverage-slider hooks (tools team toggles these classes) */
.dg-mk.is-hl .dg-m circle { fill: var(--dg-hot); }
.dg-mk.is-hl .dg-m text { fill: var(--dg-hot-on); }
.dg [data-layer="with-system"] { display: none; }
.dg.dg--with [data-layer="with-system"] { display: inline; }
.dg.dg--with .dz { opacity: .14; }

/* step flow: vertical on phones, horizontal track on wide screens */
.dg-flow-wrap { position: relative; --gap: 1rem; }
.dg-flow-wrap + .dg-flow__label, .dg-status + .dg-flow__label { margin-top: 1.75rem; }
.dg-flow__label { margin: 0 0 .9rem; font: 700 .76rem/1.2 var(--dg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dg-kicker); }
.dg-flow { list-style: none; margin: 0; padding: 0; display: grid; position: relative; z-index: 1; }
.dg-flow > li { position: relative; padding: 0 0 1.2rem 2.9rem; min-width: 0; }
.dg-flow > li::before { content: ""; position: absolute; left: .95rem; top: 2.1rem; bottom: .1rem; width: 2px; background: var(--dg-line2); }
.dg-flow > li:last-child { padding-bottom: 0; }
.dg-flow > li:last-child::before { display: none; }
.dg-flow__n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--dg-card); border: 2px solid var(--dg-fg); color: var(--dg-fg); font: 700 .82rem/1 var(--dg-mono); }
@media (max-width: 1119px) { .dg-flow-wrap--wide .dg-flow > li { padding-left: 4.4rem; } .dg-flow-wrap--wide .dg-flow > li::before { left: 1.7rem; } }
.dg-flow__n--wide { width: auto; min-width: 2rem; padding: 0 .55rem; border-radius: 999px; }
.dg-flow > li:last-child .dg-flow__n { background: var(--dg-mk); border-color: var(--dg-mk); color: var(--dg-mk-on); }
.dg-flow__t { display: block; font: var(--dg-fw) 1rem/1.25 var(--dg-head); letter-spacing: var(--dg-ls); padding-top: .3rem; }
.dg-flow__d { display: block; margin-top: .3rem; font-size: .9rem; line-height: 1.45; color: var(--dg-ink2); }
.dg-flow__d:empty { display: none; }
.dg-flow__rail { display: none; }
@media (min-width: 900px) {
  .dg-flow-wrap:not(.dg-flow-wrap--long) .dg-flow { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); }
  .dg-flow-wrap:not(.dg-flow-wrap--long) .dg-flow > li { padding: 2.9rem 0 0; }
  .dg-flow-wrap:not(.dg-flow-wrap--long) .dg-flow > li::before { display: none; }
  .dg-flow-wrap:not(.dg-flow-wrap--long) .dg-flow__rail { display: block; }
}
@media (min-width: 1120px) {
  .dg-flow-wrap--long .dg-flow { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); }
  .dg-flow-wrap--long .dg-flow > li { padding: 2.9rem 0 0; }
  .dg-flow-wrap--long .dg-flow > li::before { display: none; }
  .dg-flow-wrap--long .dg-flow__rail { display: block; }
  .dg-flow-wrap--long .dg-flow__d { font-size: .84rem; }
}
.dg-flow__rail { position: absolute; z-index: 0; height: 2px; background: var(--dg-line2); left: 1rem;
  right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) - 1rem); bottom: auto; transform-origin: left center; }
.dg-flow__rail { top: .95rem; }
.dg-flow__rail i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; } /* a zero-width runner moved by left, so it never pokes past the rail and widens the page */
.dg-flow__rail i::after { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--dg-pulse); opacity: 0; }

/* timeline with real dates */
.dg-tl { position: relative; }
.dg-tl__axis { position: relative; height: 3.2rem; margin: 0 .5rem 1rem; }
.dg-tl__axis::before { content: ""; position: absolute; left: 0; right: 0; top: 1.6rem; height: 3px; background: var(--dg-fg); border-radius: 2px; transform-origin: left center; }
.dg-tl__yr { position: absolute; left: var(--at); top: 0; transform: translateX(-50%); font: 600 .78rem/1 var(--dg-mono); color: var(--dg-ink2); }
.dg-tl__yr::after { content: ""; position: absolute; left: 50%; top: 1.15rem; width: 1px; height: .85rem; background: var(--dg-line2); }
.dg-tl__dot { position: absolute; left: var(--at); top: 1.6rem; width: 18px; height: 18px; margin: -7.5px 0 0 -9px; border-radius: 50%; background: var(--dg-mk); border: 3px solid var(--dg-bg); }
.dg-tl__dot--prop { background: var(--dg-bg); border: 2.5px dashed var(--dg-fg); }
.dg-tl__today { position: absolute; left: var(--at, 50%); top: .8rem; bottom: -.4rem; width: 2px; background: var(--dg-hot); }
.dg-tl__today span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; margin-top: .15rem;
  font: 700 .68rem/1 var(--dg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dg-hot-ink); background: var(--dg-bg); padding: .15rem .3rem; }
.dg-tl__today.is-r span { transform: translateX(-92%); }
.dg-tl__ev { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .9rem; }
.dg-tl__ev li { background: var(--dg-card); border: 1px solid var(--dg-line); border-left: 4px solid var(--dg-mk); border-radius: var(--dg-radius); padding: .85rem 1rem; }
.dg-tl__ev li.is-prop { border-left-style: dashed; border-left-color: var(--dg-fg); }
.dg-tl__ev time { display: block; font: 700 .8rem/1.2 var(--dg-mono); color: var(--dg-kicker); letter-spacing: .04em; }
.dg-tl__ev b { display: block; margin-top: .3rem; font: var(--dg-fw) 1rem/1.25 var(--dg-head); }
.dg-tl__ev span { display: block; margin-top: .25rem; font-size: .9rem; color: var(--dg-ink2); line-height: 1.45; }
@media (min-width: 900px) {
  .dg-tl__ev { grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 0; }
  .dg-tl__ev li { grid-row: 1; grid-column: var(--c) / span 11; margin-right: .75rem; }
  .dg-tl__ev li.is-end { grid-column: var(--c) / span 11; margin: 0; border-left: 1px solid var(--dg-line); border-right: 4px dashed var(--dg-fg); text-align: right; }
}
.dg-sub { margin: 2rem 0 .9rem; font: 700 .76rem/1.2 var(--dg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dg-kicker); }

/* proportional bars */
.dg-bars__axis { display: grid; gap: .3rem; margin-bottom: .6rem; }
.dg-bars__unit { font: 600 .72rem/1 var(--dg-mono); color: var(--dg-ink2); text-transform: uppercase; letter-spacing: .07em; }
.dg-bars__ticks { position: relative; height: 1rem; border-bottom: 1px solid var(--dg-line2); }
.dg-bars__ticks span { white-space: nowrap; position: absolute; left: var(--at); bottom: .25rem; transform: translateX(-50%); font: .72rem/1 var(--dg-mono); color: var(--dg-ink2); }
.dg-bars__ticks span:first-child { transform: none; }
.dg-bars__ticks span:last-child { transform: translateX(-100%); }
.dg-bars__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.dg-bars__lbl { display: block; font-size: .92rem; line-height: 1.4; color: var(--dg-ink2); margin-bottom: .4rem; }
.dg-bars__lbl b { color: var(--dg-fg); font-family: var(--dg-head); }
.dg-bars__track { position: relative; display: block; height: 1.9rem; background: var(--dg-soft); border-radius: var(--dg-radius); }
.dg-bars__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--dg-bar); border-radius: var(--dg-radius); transform-origin: left center; }
.hot .dg-bars__fill { background: var(--dg-hot); }
.dg-bars__val { position: absolute; top: 50%; left: var(--v); transform: translate(.5rem, -50%); white-space: nowrap; font: 700 .8rem/1 var(--dg-mono); color: var(--dg-fg); }
.dg-bars__list li.is-full .dg-bars__val { left: auto; right: calc(100% - var(--v)); transform: translate(-.6rem, -50%); color: var(--dg-bar-on, #fff); }
.dg-bars__list li.is-min .dg-bars__fill::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 2.5rem;
  background: repeating-linear-gradient(90deg, var(--dg-bar) 0 4px, transparent 4px 9px); }
.dg-bars__list li.is-min .dg-bars__val { transform: translate(3.2rem, -50%); }
@media (min-width: 900px) {
  .dg-bars__axis { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 2rem; }
  .dg-bars__list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: center; }
  .dg-bars__lbl { margin: 0; }
}

/* generic panels: columns, tiers, chips */
.dg-cols { display: grid; gap: 1rem; }
@media (min-width: 900px) { .dg-cols { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.dg-col { background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 1.1rem; min-width: 0; }
.dg-col--yes { border-top: 4px solid var(--dg-ok); }
.dg-col--no { border-top: 4px solid var(--dg-hot); }
.dg-col__pic { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 0 .75rem; }
.dg-col__name { margin: 0 0 .75rem; font: var(--dg-fw) 1.1rem/1.2 var(--dg-head); letter-spacing: var(--dg-ls); }
.dg-col dl { margin: 0; display: grid; gap: .65rem; }
.dg-col dt { font: 600 .7rem/1.2 var(--dg-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--dg-ink2); }
.dg-col dd { margin: .15rem 0 0; font-size: .92rem; line-height: 1.45; }
.dg-verdict { display: inline-block; font: 700 .74rem/1 var(--dg-mono); letter-spacing: .06em; text-transform: uppercase; padding: .35rem .55rem; border-radius: 3px; border: 1.5px solid currentColor; }
.dg-verdict--yes { color: var(--dg-ok-ink); }
.dg-verdict--no { color: var(--dg-hot-ink); }
.dg-verdict--maybe { color: var(--dg-ink2); }
.dg-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.dg-tiers li { position: relative; background: var(--dg-card); border: 1px solid var(--dg-line); border-left: 5px solid var(--dg-fg); border-radius: var(--dg-radius); padding: .95rem 1.1rem; }
.dg-tiers li:last-child { border-left-color: var(--dg-hot); }
.dg-tiers .dg-tier__k { font: 700 .72rem/1.2 var(--dg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dg-kicker); }
.dg-tiers b { display: block; margin-top: .25rem; font: var(--dg-fw) 1.05rem/1.25 var(--dg-head); }
.dg-tiers span.d { display: block; margin-top: .25rem; font-size: .92rem; color: var(--dg-ink2); line-height: 1.45; }
@media (min-width: 900px) {
  .dg-tiers li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem; align-items: start; }
  .dg-tiers li:nth-child(2) { margin-left: 4%; } .dg-tiers li:nth-child(3) { margin-left: 8%; } .dg-tiers li:nth-child(4) { margin-left: 12%; }
  .dg-tiers li::after { content: ""; position: absolute; left: 1.4rem; top: 100%; width: 2px; height: .6rem; background: var(--dg-line2); }
  .dg-tiers li:last-child::after { display: none; }
}
.dg-split { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .dg-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: start; } }
.dg-aside { background: var(--dg-card); border: 1px solid var(--dg-line); border-top: 4px solid var(--dg-hot); border-radius: var(--dg-radius); padding: 1rem 1.1rem; font-size: .92rem; line-height: 1.5; }
.dg-aside b { display: block; font-family: var(--dg-head); margin-bottom: .3rem; }
.dg-aside ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.dg-aside li { margin: .25rem 0; }

/* decision tree */
.dg-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; counter-reset: q; }
.dg-tree > li { display: grid; gap: .5rem; }
@media (min-width: 900px) { .dg-tree > li { grid-template-columns: minmax(0, 7fr) 3.5rem minmax(0, 4fr); align-items: center; gap: 0; } }
.dg-q { position: relative; background: var(--dg-card); border: 1.5px solid var(--dg-fg); border-radius: var(--dg-radius); padding: .85rem 1rem .85rem 3.2rem; }
.dg-q::before { counter-increment: q; content: counter(q); position: absolute; left: .85rem; top: .85rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--dg-mk); color: var(--dg-mk-on); font: 700 .78rem/1 var(--dg-mono); }
.dg-q b { display: block; font: var(--dg-fw) .98rem/1.3 var(--dg-head); }
.dg-q span { display: block; margin-top: .2rem; font-size: .88rem; color: var(--dg-ink2); }
.dg-yes { position: relative; height: 2px; background: var(--dg-ok); display: none; }
.dg-yes::after { content: "Yes"; position: absolute; left: 50%; top: -1.25rem; transform: translateX(-50%); font: 700 .7rem/1 var(--dg-mono); color: var(--dg-ok-ink); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 900px) { .dg-yes { display: block; } }
.dg-out { background: var(--dg-ok-soft); border: 1px solid var(--dg-ok); border-radius: var(--dg-radius); padding: .7rem .9rem; font-size: .9rem; line-height: 1.4; }
.dg-out b { font-family: var(--dg-head); }
.dg-out::before { content: "If yes: "; font: 700 .72rem/1 var(--dg-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dg-ok-ink); }
@media (min-width: 900px) { .dg-out::before { content: none; } }
.dg-tree + .dg-no { margin: .7rem 0 .5rem 1.6rem; }
.dg-no { margin: .1rem 0 0 1.6rem; font: 700 .7rem/1 var(--dg-mono); color: var(--dg-ink2); text-transform: uppercase; letter-spacing: .06em; }
.dg-end { background: var(--dg-mk); color: var(--dg-mk-on); border-radius: var(--dg-radius); padding: 1rem 1.1rem; }
.dg-end b { display: block; font: var(--dg-fw) 1.05rem/1.3 var(--dg-head); }
.dg-end span { display: block; margin-top: .3rem; font-size: .92rem; opacity: .92; }
.dg-end .dg-cite { color: inherit; opacity: .85; }

/* hub (one thing, many names) */
.dg-hub { position: relative; display: grid; gap: .6rem; }
.dg-hub__lines { display: none; }
.dg-hub__c { background: var(--dg-mk); color: var(--dg-mk-on); border-radius: var(--dg-radius); padding: 1.1rem; }
.dg-hub__c b { display: block; font: var(--dg-fw) 1.15rem/1.25 var(--dg-head); }
.dg-hub__c span { display: block; margin-top: .3rem; font-size: .9rem; opacity: .9; }
.dg-hub__c .dg-cite { color: inherit; opacity: .8; }
.dg-hub__n { position: relative; z-index: 1; background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: .8rem .95rem; }
.dg-hub__n b { display: block; font: var(--dg-fw) 1.05rem/1.2 var(--dg-head); }
.dg-hub__n span { display: block; font-size: .86rem; color: var(--dg-ink2); margin-top: .15rem; line-height: 1.4; }
@media (min-width: 900px) {
  .dg-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 1.4rem 2.2rem; }
  .dg-hub__n { grid-column: var(--c); grid-row: var(--r); }
  .dg-hub__c { grid-column: 2; grid-row: 2; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
  .dg-hub__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
}

/* seats, window, venn status */
.dg-seats { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.dg-seats li { width: 2.6rem; height: 2.6rem; border-radius: var(--dg-radius-sm); border: 2px solid var(--dg-fg); background: var(--dg-card); }
.dg-seats li.is-f { background: var(--dg-hot); border-color: var(--dg-hot); }
.dg-panel { background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 1.1rem; }
.dg-panel b.h { display: block; font: var(--dg-fw) 1.1rem/1.2 var(--dg-head); letter-spacing: var(--dg-ls); }
.dg-panel p { margin: .4rem 0 0; font-size: .92rem; color: var(--dg-ink2); line-height: 1.45; }
.dg-big { font: var(--dg-fw) clamp(2rem, 4vw, 2.8rem)/1 var(--dg-head); letter-spacing: var(--dg-ls); color: var(--dg-fg); }
.dg-win { position: relative; }
.dg-win__bar { position: relative; height: 3.4rem; margin: 3.6rem 0 3.4rem; background: var(--dg-soft); border-radius: var(--dg-radius);
}
.dg-win__bar > i { position: absolute; top: 0; bottom: 0; left: var(--at); width: 1px; background: var(--dg-line2); }
.dg-win__fill { position: absolute; inset: 0; border-radius: var(--dg-radius); background: linear-gradient(90deg, var(--dg-bar) 0 8%, transparent 8%); transform-origin: left center; }
.dg-win__ends { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--dg-ink2); }
.dg-win__ends b { display: block; color: var(--dg-fg); font-family: var(--dg-head); font-size: .98rem; }
.dg-win__ends > div:last-child { text-align: right; }
.dg-pin { position: absolute; left: var(--at); width: 3px; background: var(--dg-fg); }
.dg-pin--up { bottom: 100%; height: 1.2rem; }
.dg-pin--down { top: 100%; height: 1.2rem; }
.dg-pin span { position: absolute; left: 50%; white-space: nowrap; font: 700 .72rem/1.2 var(--dg-mono); letter-spacing: .05em; text-transform: uppercase; padding: .3rem .5rem; border-radius: 4px; }
.dg-pin--up span { bottom: 100%; transform: translateX(-10%); background: var(--dg-hot); color: var(--dg-hot-on); }
.dg-pin--down span { top: 100%; transform: translateX(-90%); background: var(--dg-card); color: var(--dg-ink2); border: 1px solid var(--dg-line); }
.dg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; counter-reset: c; }
.dg-chips li { counter-increment: c; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--dg-line2); border-radius: 999px; font-size: .9rem; background: var(--dg-card); }
.dg-chips li::before { content: counter(c); font: 700 .74rem/1 var(--dg-mono); color: var(--dg-kicker); }
.dg-status { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.dg-status li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .9rem; align-items: start; background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: .8rem .95rem; }
.dg-status .st { font: 700 .7rem/1 var(--dg-mono); letter-spacing: .06em; text-transform: uppercase; padding: .35rem .5rem; border-radius: 4px; text-align: center; border: 1.5px solid var(--dg-line2); color: var(--dg-ink2); }
.dg-status .st--live { background: var(--dg-hot); border-color: var(--dg-hot); color: var(--dg-hot-on); }
.dg-status b { display: block; font-family: var(--dg-head); }
.dg-status span.d { display: block; font-size: .88rem; color: var(--dg-ink2); margin-top: .15rem; }
.dg-exit { margin: 1.4rem 0 0; display: flex; gap: .7rem; align-items: center; font-size: .9rem; color: var(--dg-ink2); }
.dg-exit::before { content: ""; flex: none; width: 1.6rem; height: 2px; background: var(--dg-hot); }
.dg-two { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .dg-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } }

/* ---------------- motion (only after diagrams.js arms a figure) ---------------- */
.dg__pulse { opacity: 0; }
.dg-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.dg.is-live .dg__pulse { opacity: 1; }
.dg.is-live .dg-ring { animation: dg-ring 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
.dg.is-live .dz { animation: dg-dz 3.2s ease-in-out infinite; }
.dg.is-live .dg-led { animation: dg-led 1.6s steps(2, jump-none) infinite; }
.dg.is-live .dg-flow__rail i { animation: dg-run-x var(--dg-run, 7s) linear infinite; }
.dg.is-live .dg-flow__rail i::after { opacity: 1; }
@keyframes dg-ring { 0% { transform: scale(.35); opacity: .85; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes dg-dz { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes dg-led { 0% { opacity: 1; } 100% { opacity: .2; } }
@keyframes dg-run { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes dg-run-x { from { left: 0; } to { left: 100%; } }
.dg.is-armed .dg-rv { opacity: 0; transform: translateY(14px); }
.dg.is-armed .dg-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dg.is-armed .dg-cellfill { opacity: 0; }
.dg.is-armed .dg-bars__fill, .dg.is-armed .dg-win__fill { transform: scaleX(0); }
.dg.is-armed .dg-flow__rail, .dg.is-armed .dg-tl__axis::before { transform: scaleX(0); }
.dg.is-armed .dg-hand { transform: rotate(-360deg); }
.dg.is-in .dg-rv { opacity: 1; transform: none; transition: opacity var(--dg-dur) ease calc(var(--i, 0) * var(--dg-step)), transform var(--dg-dur) cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * var(--dg-step)); }
.dg.is-in .dg-draw { stroke-dashoffset: 0; transition: stroke-dashoffset calc(var(--dg-dur) * 1.8) ease calc(var(--i, 0) * var(--dg-step)); }
.dg.is-in .dg-cellfill { opacity: 1; transition: opacity calc(var(--dg-dur) * .6) ease calc(var(--i, 0) * var(--dg-cell)); }
.dg.is-in .dg-bars__fill, .dg.is-in .dg-win__fill { transform: scaleX(1); transition: transform calc(var(--dg-dur) * 1.6) cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * var(--dg-step) + 150ms); }
.dg.is-in .dg-flow__rail, .dg.is-in .dg-tl__axis::before { transform: scaleX(1); transition: transform calc(var(--dg-dur) * 2) cubic-bezier(.2, .7, .2, 1); }
.dg-hand { transform-box: view-box; transform-origin: 260px 260px; }
.dg.is-in .dg-hand { transform: rotate(0deg); transition: transform 2.4s cubic-bezier(.3, .6, .2, 1) .2s; }
@media (prefers-reduced-motion: reduce) {
  .dg .dg-rv, .dg .dg-draw, .dg .dg-cellfill, .dg .dg-bars__fill, .dg .dg-win__fill, .dg .dg-flow__rail, .dg .dg-hand { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .dg .dg__pulse, .dg .dg-ring { display: none; }
  .dg .dz, .dg .dg-led { animation: none !important; }
}
html.rm .dg .dg__pulse, html.rm .dg .dg-ring { display: none; }

@media print {
  .dg { break-inside: avoid; background: #fff; color: #000; border-color: #999; }
  .dg__pulse, .dg-ring, .dg-tl__today { display: none !important; }
  .dg .dg-rv, .dg .dg-draw, .dg .dg-cellfill, .dg .dg-bars__fill, .dg .dg-win__fill, .dg .dg-flow__rail { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}