@font-face{font-family:"IBM Plex Mono";src:url("/static/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

/* The map is a self-contained island: every custom property and selector is
   scoped to .archmap so it neither inherits from nor leaks into the
   surrounding marketing shell (Tailwind marketing.css). */
.archmap{
  --surface:oklch(0.985 0.003 240);
  --elev:oklch(0.995 0.001 240);
  --sunk:oklch(0.96 0.005 240);
  --ink:oklch(0.18 0.015 240);
  --text:oklch(0.18 0.015 240);
  --muted:oklch(0.34 0.012 240);
  --faint:oklch(0.55 0.010 240);
  --line:oklch(0.86 0.008 240);
  --path:oklch(0.55 0.15 62);
  --path-soft:oklch(0.55 0.15 62 / 0.12);
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Code","Fira Code",Menlo,Consolas,monospace;
  --c-actor:oklch(0.62 0.16 350);
  --c-edge:oklch(0.60 0.14 250);
  --c-handler:oklch(0.58 0.16 290);
  --c-core:oklch(0.60 0.14 200);
  --c-probe:oklch(0.55 0.15 158);
  --c-store:oklch(0.58 0.14 80);
  --c-ext:oklch(0.55 0.02 250);
  /* Break out of the centered marketing container so the seven columns
     have room; the island keeps its own horizontal padding. */
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:8px 22px 0;
  color:var(--text);
  font:400 13px/1.5 var(--mono);
}
:root[data-mk-theme="dark"] .archmap{
  --surface:oklch(0.17 0.012 256);
  --elev:oklch(0.22 0.012 256);
  --sunk:oklch(0.14 0.010 256);
  --ink:oklch(0.95 0.005 256);
  --text:oklch(0.88 0.008 256);
  --muted:oklch(0.70 0.010 256);
  --faint:oklch(0.52 0.010 256);
  --line:oklch(0.30 0.012 256);
  --path:oklch(0.82 0.14 80);
  --path-soft:oklch(0.82 0.14 80 / 0.14);
  --c-actor:oklch(0.72 0.15 350);
  --c-edge:oklch(0.72 0.13 250);
  --c-handler:oklch(0.72 0.14 290);
  --c-core:oklch(0.74 0.12 200);
  --c-probe:oklch(0.74 0.14 158);
  --c-store:oklch(0.80 0.13 80);
  --c-ext:oklch(0.62 0.02 250);
}

.archmap .map-intro{padding:4px 0 14px}
.archmap .lede{margin:0;color:var(--muted);max-width:100ch}
.archmap .legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:11px;color:var(--muted)}
.archmap .legend span{display:inline-flex;align-items:center;gap:6px}
.archmap .legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.archmap .lg-actor{background:var(--c-actor)}
.archmap .lg-edge{background:var(--c-edge)}
.archmap .lg-handler{background:var(--c-handler)}
.archmap .lg-core{background:var(--c-core)}
.archmap .lg-probe{background:var(--c-probe)}
.archmap .lg-store{background:var(--c-store)}
.archmap .lg-ext{background:var(--c-ext)}

.archmap .shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;padding:0 0 40px;align-items:start}

/* ── map ───────────────────────────────────────────── */
.archmap #map{position:relative;border:1px solid var(--line);border-radius:2px;background:var(--sunk);padding:14px;overflow-x:auto}
.archmap #cols{display:flex;gap:26px;min-width:1180px;position:relative;z-index:2}
.archmap .col{flex:1 1 0;min-width:150px}
.archmap .col h2{font-size:10px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--faint);
        margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.archmap .node{border:1px solid var(--line);border-left:2px solid var(--nc,var(--line));border-radius:2px;background:var(--elev);
      padding:6px 8px;margin:0 0 8px;cursor:pointer;transition:opacity .12s,border-color .12s,background .12s}
/* Column tint by class, not an inline style: the marketing CSP is style-src 'self'. */
.archmap .col--actor .node{--nc:var(--c-actor)}
.archmap .col--edge .node{--nc:var(--c-edge)}
.archmap .col--handler .node{--nc:var(--c-handler)}
.archmap .col--core .node{--nc:var(--c-core)}
.archmap .col--probe .node{--nc:var(--c-probe)}
.archmap .col--store .node{--nc:var(--c-store)}
.archmap .col--ext .node{--nc:var(--c-ext)}
.archmap .node b{display:block;font-weight:500;font-size:12px;color:var(--ink);letter-spacing:.01em}
.archmap .node span{display:block;font-size:10.5px;color:var(--faint);margin-top:1px;line-height:1.35}
.archmap .node:hover{border-color:var(--muted)}
.archmap .node:focus-visible,.archmap .flow:focus-visible,.archmap .step:focus-visible{outline:2px solid var(--path);outline-offset:1px}
.archmap.sel .node{opacity:.3}
.archmap.sel .node.on{opacity:1;border-color:var(--path);background:var(--path-soft)}
.archmap .node.focus{outline:1px solid var(--path);outline-offset:1px}
.archmap #wires{position:absolute;inset:14px;z-index:1;pointer-events:none;overflow:visible}
.archmap #wires path{fill:none;stroke:var(--path);stroke-width:1.4;opacity:.85}
.archmap #wires path.dim{opacity:.28}
.archmap #wires path.hot{stroke-width:2.4;opacity:1}
.archmap #badges{position:absolute;inset:14px;z-index:3;pointer-events:none;overflow:visible}
.archmap #badges circle{fill:var(--path)}
.archmap #badges text{fill:var(--surface);font:500 9px var(--mono);text-anchor:middle;dominant-baseline:central}

/* ── playback ──────────────────────────────────────── */
/* While a signal is walking the flow the map reads as a progress bar: hops
   already travelled stay lit, the rest waits in the dark. */
.archmap.play .node:not(.visited){opacity:.22;border-color:var(--line);background:var(--elev)}
.archmap.play .node.visited{opacity:1;border-color:var(--path);background:var(--path-soft)}
.archmap .node.live{border-color:var(--path);box-shadow:inset 2px 0 0 var(--path)}
@keyframes arch-hit{
  from{box-shadow:inset 2px 0 0 var(--path),0 0 0 0 color-mix(in oklch,var(--path) 55%,transparent)}
  to{box-shadow:inset 2px 0 0 var(--path),0 0 0 14px transparent}
}
.archmap .node.hit{animation:arch-hit .55s ease-out}

.archmap #wires path,.archmap #badges .badge{transition:opacity .22s ease}
.archmap.play #wires path{opacity:.16}
.archmap.play #wires path.done{opacity:.85}
.archmap.play #wires path.now{stroke-width:2.6;opacity:1}
.archmap.play #badges .badge{opacity:0}
.archmap.play #badges .badge.seen{opacity:1}
.archmap #badges .pkt{fill:var(--path);filter:drop-shadow(0 0 5px var(--path))}
.archmap #badges .pkt-halo{fill:var(--path);opacity:.16}

.archmap .transport{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
.archmap .tp{margin:0;padding:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
     color:var(--muted);transition:color .12s,border-color .12s,background .12s}
.archmap .tp svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.archmap .tp .fill{fill:currentColor;stroke:none}
.archmap .tp:hover:not(:disabled){color:var(--ink);border-color:var(--path)}
.archmap .tp:disabled{opacity:.3;cursor:default;border-color:var(--line);color:var(--faint)}
.archmap .tp--go{width:34px;height:34px;border-radius:50%;color:var(--ink);border-color:var(--path);background:var(--path-soft)}
.archmap .tp--go svg{width:15px;height:15px}
.archmap .tp .ic{display:none}
.archmap #play[data-state="play"] .ic--play,
.archmap #play[data-state="pause"] .ic--pause,
.archmap #play[data-state="replay"] .ic--replay{display:block}
.archmap .tp-count{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}

/* ── side ──────────────────────────────────────────── */
.archmap aside{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px;max-height:calc(100dvh - 90px)}
.archmap .panel{border:1px solid var(--line);border-radius:2px;background:var(--sunk);display:flex;flex-direction:column;min-height:0}
.archmap .panel > h2{font-size:10px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--faint);
            margin:0;padding:10px 12px 8px;border-bottom:1px solid var(--line)}
.archmap .scroll{overflow-y:auto;padding:8px;min-height:0}
.archmap #flows{flex:0 0 auto;max-height:46dvh}
.archmap #stepsPanel{flex:1 1 auto}

.archmap .flow{border:1px solid var(--line);border-radius:2px;background:var(--elev);padding:7px 9px;margin:0 0 6px;cursor:pointer}
.archmap .flow b{display:block;font-weight:500;font-size:12px;color:var(--ink)}
.archmap .flow span{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
.archmap .flow:hover{border-color:var(--muted)}
.archmap .flow.on{border-color:var(--path);background:var(--path-soft)}
.archmap .flow.hide{display:none}

.archmap .step{display:grid;grid-template-columns:18px 1fr;gap:8px;border:1px solid var(--line);border-radius:2px;
      background:var(--elev);padding:7px 9px;margin:0 0 6px;cursor:pointer}
.archmap .step:hover{border-color:var(--path)}
.archmap.play .step{opacity:.45}
.archmap.play .step.done{opacity:.8}
.archmap.play .step.now{opacity:1;border-color:var(--path);background:var(--path-soft)}
.archmap .step .n{width:18px;height:18px;border-radius:50%;background:var(--path);color:var(--surface);
         font-size:10px;font-weight:500;display:flex;align-items:center;justify-content:center;margin-top:1px}
.archmap .step .hop{font-size:11px;color:var(--muted)}
.archmap .step .hop b{color:var(--ink);font-weight:500}
.archmap .step .t{font-size:12px;color:var(--ink);font-weight:500;margin:1px 0}
.archmap .step .d{font-size:11px;color:var(--muted);line-height:1.45}
.archmap .empty{color:var(--faint);font-size:11.5px;padding:10px 4px;line-height:1.5}

.archmap button{font:inherit;font-size:11px;color:var(--muted);background:var(--elev);border:1px solid var(--line);
       border-radius:2px;padding:4px 9px;cursor:pointer;margin:2px 8px 10px}
.archmap button:hover{border-color:var(--path);color:var(--ink)}
.archmap code{background:var(--sunk);border:1px solid var(--line);border-radius:2px;padding:0 3px;font-size:11px}

@media (prefers-reduced-motion:reduce){
  .archmap .node.hit{animation:none}
  .archmap .node,.archmap #wires path,.archmap #badges .badge{transition:none}
}

@media (max-width:1100px){.archmap .shell{grid-template-columns:1fr}.archmap aside{position:static;max-height:none}.archmap #flows{max-height:none}}