/* The architecture template's look; see .claude/decisions/2026-11-05-runtime-architecture-site-through-backplane.md §3. */
:root {
  --bg: #0b0d10; --bg-2: #12161b; --line: #232a32; --grid: #151a20;
  --fg: #e7ebef; --fg-2: #9aa5b1; --fg-3: #66717d;
  --edge: #ff7a1a; --flow: #38d6c4; --cred: #c9a2ff; --muted: #7f8a96;
  --l-policy: #2a2140; --l-source: #1a222c; --l-edge: #2b2016; --l-control: #10302d; --l-data: #172430;
  --l-operations: #10302d; --l-run: #3a2416; --l-units: #1a222c; --l-providers: #1d2620; --l-sites: #1a222c;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f7f5; --bg-2: #ffffff; --line: #d9dcdf; --grid: #eceeef;
    --fg: #12161b; --fg-2: #4b5560; --fg-3: #7a838c;
    --edge: #d9600a; --flow: #0f8f83; --cred: #7a4fd0; --muted: #8a939c;
    --l-policy: #ece6fb; --l-source: #eef1f4; --l-edge: #fbeee2; --l-control: #dcf3f0; --l-data: #e3eef7;
    --l-operations: #dcf3f0; --l-run: #fdebdc; --l-units: #eef1f4; --l-providers: #e5f1e7; --l-sites: #eef1f4;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font: 400 14px/1.6 var(--mono);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.wrap {
  max-width: 1480px; margin: 0 auto; padding-block: 0 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.top { display: grid; gap: 6px; padding-block: 28px 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.brand { font: 800 22px/1.1 var(--display); letter-spacing: .01em; }
.lede { margin: 0; color: var(--fg-2); max-width: 65ch; }
code { font-family: var(--mono); color: var(--fg); }

.frame { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.frame svg { display: block; max-width: none; height: auto; }
.lane-h { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--fg-3); }
.n rect { stroke: var(--line); fill: var(--bg-2); }
.n text { font: 500 12px var(--mono); fill: var(--fg); }
.n:hover rect { stroke: var(--fg-2); }
.lane-policy rect { fill: var(--l-policy); } .lane-source rect { fill: var(--l-source); } .lane-edge rect { fill: var(--l-edge); }
.lane-control rect { fill: var(--l-control); } .lane-data rect { fill: var(--l-data); } .lane-operations rect { fill: var(--l-operations); }
.lane-run rect { fill: var(--l-run); } .lane-units rect { fill: var(--l-units); } .lane-providers rect { fill: var(--l-providers); }
.lane-sites rect { fill: var(--l-sites); }
.g rect { fill: none; stroke: var(--fg-3); stroke-dasharray: 2 4; }
.g.cloudflare rect { stroke: var(--edge); stroke-dasharray: 6 5; stroke-width: 1.2; }
.g text { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--fg-3); }
.g.cloudflare text { fill: var(--edge); }

.e { fill: none; stroke-width: 1.4; }
.e.runs { stroke: var(--fg-3); stroke-width: 1; }
.e.governs { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.e.request, .e.binds { stroke: var(--fg-2); }
.e.signed-request { stroke: var(--fg); stroke-width: 4.5; }
.e.signed-in { stroke: var(--bg-2); stroke-width: 1.8; }
.e.apply { stroke: var(--edge); stroke-width: 1.6; stroke-dasharray: 7 5; }
.e.state { stroke: var(--flow); stroke-width: 1.8; stroke-dasharray: 7 5; }
.e.artifact { stroke: var(--flow); stroke-width: 1.8; stroke-dasharray: 2 4; }
.e.credential { stroke: var(--cred); stroke-width: 1.6; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.mk-fg { fill: var(--fg-2); } .mk-mu { fill: var(--muted); } .mk-ed { fill: var(--edge); }
.mk-fl { fill: var(--flow); } .mk-cr { fill: var(--cred); } .mk-sg { fill: var(--fg); }
.motion .e.apply, .motion .e.state, .motion .e.artifact { animation: run 1.4s linear infinite; }
@keyframes run { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .e { animation: none !important; } }

.legend { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12px; color: var(--fg-2); }
.legend li { display: inline-flex; gap: 8px; align-items: center; }
.legend svg { width: 34px; height: 10px; }

details { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 16px; }
summary { cursor: pointer; color: var(--fg-2); font-size: 13px; }
summary:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; }
.tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; margin-top: 16px; }
.tw { overflow-x: auto; min-width: 0; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--fg-3); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
td.src { color: var(--fg-3); }
.empty { color: var(--fg-2); }
footer {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 12px; color: var(--fg-3);
}