/* REKA diagram kit (owner, 14 Oct 2026: "go with your recs, yes to Seth, start the diagram kit").
   One language for every technical diagram on the site, from the brand kit's instrument-panel look: a dot-grid plate,
   chamfered boxes on flat offset plates, one line weight for structure and one in the accent for the path that matters,
   Poppins for words and JetBrains Mono only for numbers, units and IDs. Motion only where the system itself moves.
   Rules and how to add a diagram: docs/strategy/DIAGRAM_KIT.md. Sources: assets/diagrams/*.html, copied into pages by
   scripts/diagrams-inline.mjs. Markup: <figure class="dgm" data-tone="…"> … <svg class="dg dg-h"> … </figure>. */

/* ---------- tokens: the figure's tone sets the accent; the plate is light, or dark on the Lab and story pages ---------- */
.dgm{--dg-ink:var(--ink,#1D1D1D);--dg-muted:var(--muted,#5E5A54);--dg-line:var(--line,#DEDBD3);--dg-card:#fff;
  --dg-plate:var(--oat,#ECEAE4);--dg-dot:rgba(29,29,29,.10);
  --a:var(--t,#FB9800);--at:var(--t-bg,#FFF1DC);--a-ink:var(--t-ink,#A85A00)}
.dgm[data-tone=yara]{--a:#098284;--at:#EEF9F9;--a-ink:#066B6D}
.dgm.dark{--dg-ink:#E6E9EE;--dg-muted:#9AA3B2;--dg-line:#2A303A;--dg-card:#11151C;--dg-plate:#07090F;--dg-dot:rgba(255,255,255,.075);
  --a:#FB9800;--at:#3A2A12;--a-ink:#FFB347}
.dgm.dark[data-tone=heuristik]{--a:#6EA6FF;--at:#1B2943;--a-ink:#9DC2FF}
.dgm.dark[data-tone=kinetik]{--a:#3CCBB0;--at:#11302A;--a-ink:#7FE0CD}
.dgm.dark[data-tone=harmonik]{--a:#A48BFF;--at:#241D3F;--a-ink:#C6B7FF}
.dgm.dark[data-tone=esoterik]{--a:#E08BC8;--at:#33192C;--a-ink:#F0B5DF}

/* ---------- the plate ---------- */
.dgm{position:relative;margin:0;background-color:var(--dg-plate);background-image:radial-gradient(circle,var(--dg-dot) 1px,transparent 1.3px);
  background-size:20px 20px;border-radius:28px;padding:28px;color:var(--dg-ink);min-width:0}
.tray>.dgm,.card>.dgm{border-radius:20px}
.dgm .dg-wrap{overflow-x:auto;overscroll-behavior-x:contain}
.dgm svg.dg{display:block;width:100%;height:auto;overflow:visible}
.dgm svg.dg-h{min-width:640px}
.dgm svg.dg-v{display:none}
@media (max-width:760px){
  .dgm{padding:12px;border-radius:20px}
  .tray .dgm{margin-inline:-14px}  /* inside a tray, a diagram uses the tray's width so its words stay readable */
  .dgm.dg-bleed{margin-left:calc(-1 * var(--bl,0px))!important;margin-right:calc(-1 * var(--br,0px))!important;padding:12px 8px}  /* diagram.js: 6px from each screen edge */
  .dgm:has(svg.dg-v) svg.dg-h{display:none}
  .dgm svg.dg-v{display:block;min-width:0}
}
/* a figure set in a column too narrow for its wide drawing (a card, half a row, a side column) shows its tall one */
.dgm{container-type:inline-size}
@container (max-width:639px){.dgm:has(svg.dg-v) svg.dg-h{display:none}.dgm svg.dg-v{display:block;min-width:0}}
.dgm figcaption{font-size:14px;line-height:21px;color:var(--dg-muted);margin-top:12px;max-width:72ch}

/* ---------- drawing parts ---------- */
.dg text{font-family:var(--sans,Poppins,sans-serif);fill:var(--dg-ink);font-size:13px}
.dg .dg-mn{font-family:var(--mono,"JetBrains Mono",monospace);font-size:11px;fill:var(--dg-muted)}
.dg .dg-sm{font-size:11.5px;fill:var(--dg-muted)}
/* the tall (phone) drawings set their words a step larger: 13.5 / 12.5 / 12 at a 360-wide drawing, about the same in px on a phone */
.dgm svg.dg-v text{font-size:13.5px}
.dgm svg.dg-v .dg-sm{font-size:12.5px}
.dgm svg.dg-v .dg-mn{font-size:12px}
.dg .dg-b{font-weight:600}
.dg .dg-node{fill:var(--dg-card);stroke:var(--dg-ink);stroke-width:1.5}
.dg .dg-node.dg-on,.dg .dg-node.dg-key{stroke:var(--a);stroke-width:2.5}
.dg .dg-ln{fill:none;stroke:var(--dg-ink);stroke-width:1.5}
.dg .dg-acc{stroke:var(--a)}
.dg .dg-ln.dg-acc{stroke-width:2.5}
.dg .dg-accf{fill:var(--a)}
.dg .dg-acct{fill:var(--a-ink)}
.dg .dg-tint{fill:var(--at)}
.dg .dg-wh{fill:var(--dg-card)}
.dg .dg-dash{stroke-dasharray:4 4}
.dg .dg-hud{fill:none;stroke:var(--a);stroke-width:1.8;opacity:.45}
.dg .dg-plt{fill:var(--a);opacity:.3}
.dg .dg-tab .dg-ico{fill:none;stroke:var(--dg-card);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.dg .dg-tab .dg-icf{fill:var(--dg-card)}
.dg .dg-chips rect{fill:var(--dg-card);stroke:var(--dg-line)}
.dg .dg-chips text{fill:var(--dg-ink)}
.dg .dg-band{fill:var(--at);stroke:var(--a);stroke-width:2.5}
.dg .dg-lid{fill:var(--a)}
.dg .dg-ink{fill:var(--dg-ink)}

/* ---------- reading: hover, focus or tap a part, the readout line says what it does ---------- */
.dg [data-say]{cursor:pointer;outline:none}
.dg [data-say]:hover .dg-node,.dg [data-say]:focus-visible .dg-node{fill:var(--at);stroke:var(--a)}
.dg [data-say]:hover .dg-cp,.dg [data-say]:focus-visible .dg-cp{fill:var(--a)}
.dg [data-say]:focus-visible .dg-band{stroke-width:3.5}
.dg .dg-lift{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.dg .dg-lift:hover,.dg .dg-lift:focus-visible{transform:translate(-3px,-3px)}
.dg .dg-lit .dg-node{fill:var(--at);stroke:var(--a);stroke-width:2.5}  /* lit by a part with data-light (diagram.js) */
.dgm .dg-ro{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:14px 0 0;font-size:14.5px;line-height:21px}
.dgm .dg-ro .k{font:600 10.5px/1 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--a-ink);background:var(--dg-card);
  padding:6px 8px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.dgm .dg-ro .v{color:var(--dg-ink);flex:1 1 280px;min-width:0}
.dgm .dg-play{font:500 13px/1 var(--sans,sans-serif);border:0;background:var(--dg-ink);color:var(--dg-plate);padding:11px 15px;cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.dgm .dg-play:hover{background:var(--a);color:#fff}
.dgm .dg-play:focus-visible{outline:2px solid var(--a);outline-offset:3px}

/* ---------- motion that explains (paused for reduced motion and until the figure is in view) ---------- */
.dg .dg-ring{fill:none;stroke:var(--a);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:dgRing 2s ease-out infinite}
@keyframes dgRing{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}
.dg .dg-live{animation:dgLive 2s ease-in-out infinite}
@keyframes dgLive{50%{opacity:.25}}
.dg .dg-ants{animation:dgAnts 1.4s linear infinite}
@keyframes dgAnts{to{stroke-dashoffset:-16}}
.dg .dg-scan{fill:var(--a);opacity:.55;animation:dgScan 3.4s linear infinite}
@keyframes dgScan{from{transform:translateY(var(--s0,30px))}to{transform:translateY(var(--s1,414px))}}
.dg .dg-rise{opacity:1}
.dgm.in .dg .dg-rise{animation:dgRise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * .13s)}
@keyframes dgRise{from{opacity:0;transform:translateY(26px)}}
.dg .dg-st.dg-on .dg-node{fill:var(--at);stroke:var(--a);stroke-width:2.5}
.dg .dg-tap{opacity:0;transform-box:fill-box;transform-origin:center}
.dg .dg-tapping .dg-tap{animation:dgTap .7s ease-out}
@keyframes dgTap{from{opacity:.95;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}
.dgm:not(.in) .dg .dg-ring,.dgm:not(.in) .dg .dg-live,.dgm:not(.in) .dg .dg-ants,.dgm:not(.in) .dg .dg-scan{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.dgm .dg *{animation:none!important;transition:none!important}.dg .dg-tap,.dg .dg-scan{display:none}}

/* ---------- Seth Linton narrates, on dark plates only (brand kit 04: dark ground, an expression state, never decoration) ---------- */
.dgm .dg-seth{display:flex;align-items:center;gap:14px;margin-top:8px}
.dgm .dg-seth img{width:88px;height:88px;flex:none}
.dgm .dg-seth p{margin:0;font-size:14.5px;line-height:21px;color:#E6E9EE;background:#11151C;padding:12px 16px;max-width:560px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.dgm .dg-seth b{display:block;font:600 10.5px/1 var(--mono,monospace);color:#46D6C8;letter-spacing:.12em;margin-bottom:5px}
.dgm:not(.dark) .dg-seth{display:none}
@media (max-width:760px){.dgm .dg-seth img{width:64px;height:64px}}

/* ---------- the detail a diagram replaced stays on the page, one tap away ---------- */
.dgm details.dg-more{margin-top:12px;font-size:14px}
.dgm details.dg-more summary{cursor:pointer;font-weight:600;color:var(--a-ink);list-style:none;display:inline-flex;align-items:center;gap:8px}
.dgm details.dg-more summary::-webkit-details-marker{display:none}
.dgm details.dg-more summary::after{content:"+";font:600 16px/1 var(--mono,monospace)}
.dgm details.dg-more[open] summary::after{content:"\2212"}
.dgm details.dg-more table{width:100%;border-collapse:collapse;margin-top:10px;background:var(--dg-card);border-radius:12px;overflow:hidden}
.dgm details.dg-more th,.dgm details.dg-more td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--dg-line);color:var(--dg-ink)}
.dgm details.dg-more th{font:600 11px/1.3 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--dg-muted)}
.dgm details.dg-more .dg-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.dgm details.dg-more .dg-list li{background:var(--dg-card);border-radius:12px;padding:12px 14px;color:var(--dg-ink);line-height:1.55}
.dgm details.dg-more .dg-list span{color:var(--dg-muted)}
.dg a:focus-visible .dg-node{stroke:var(--a);stroke-width:2.5}