@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 app.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);
}
@media (prefers-color-scheme: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}
.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{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 #wires circle{fill:var(--path)}
.archmap #wires text{fill:var(--surface);font:500 9px var(--mono);text-anchor:middle;dominant-baseline:central}

/* ── 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}
.archmap .step:hover{border-color:var(--path)}
.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 (max-width:1100px){.archmap .shell{grid-template-columns:1fr}.archmap aside{position:static;max-height:none}.archmap #flows{max-height:none}}