/* =========================================================
SYSTEM ARCHITECTURE DIAGRAM
Lives outside site.css for two reasons. It is one feature, and its SVG type
is measured in viewBox user units - a rem there would resolve against the
root font-size instead of the viewBox and desync the labels from the geometry
they sit on, so px is correct here in a way it is not in site.css.
Zone state is class-driven from sys-arch-diagram.js. The :target rules are
the no-JS fallback and must stay in step with the .sys-arch-is-open ones.
========================================================= */
/* ============================================================================
EDITING GUIDE
COLOURS one block, ".sys-arch-stage" below. Colour is SEMANTIC:
teal = live request path green = active runtime
purple = release / control amber = model artifact
crimson= models / serving grey = inactive / alternate
TEXT SIZES ".t-*" overview, ".d-*" detail views. One number each.
NODES every node is a translate group:
Title
detail line
MOVE -> change the two translate() numbers. Nothing else.
RESIZE -> change width/height. Node text is LEFT-aligned at
x=16, so it does not need repositioning.
EDGES hand-routed path d="" in the 1600x900 space. Nudging a node is
fine; moving one a long way means redrawing the paths that
touch it. That is the trade for not using auto-layout.
ZONES the clickable clusters are HTML, not SVG. Each
carries --x/--y/--w/--h as PERCENTAGES, matching the tint rects
at the top of the SVG:
percent_x = svg_x / 16 percent_y = svg_y / 9
CONTAINMENT IS LITERAL. A box inside the AWS rect is deployed in the account.
A box inside a runtime is application content. Do not nest by topic.
============================================================================ */
.sys-arch-stage {
--paper: #FBFCFD;
--ink: #141821;
--muted-i: #667085;
--hair: #D7DCE3;
--grey: #8B95A5;
--aws-ink: #243244;
--aws-fill: #F3F5F7;
--c-request: #0F8F86; --f-request: #E7F6F3;
--c-active: #147D5A; --f-active: #E9F7F1;
--c-build: #6256C8; --f-build: #EFEDFC;
--c-life: #B35D05; --f-life: #FBF1E4;
--c-model: #B91C5C; --f-model: #FCEAF1;
--c-none: #8B95A5;
--docker: #2496ED; /* Docker brand blue, outlines the image boxes */
}
/* ---------- pills ---------- */
.sys-arch-pills { display: flex; gap: .45rem; flex-wrap: wrap; margin: 1.35rem 0 .7rem; }
.sys-arch-pill {
display: inline-flex; align-items: center; gap: .45rem;
font-family: var(--mono); font-size: .6875rem; font-weight: 600;
letter-spacing: .07em; text-transform: uppercase;
color: var(--muted); background: transparent;
border: 1px solid var(--line); border-radius: 999px; padding: .38rem .8rem;
transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.sys-arch-pill::before {
content: ""; width: .5rem; height: .5rem; border-radius: 50%;
background: var(--dot); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot) 28%, transparent);
}
.sys-arch-pill-overview { --dot: var(--c-none); }
.sys-arch-pill-request { --dot: var(--c-request); }
.sys-arch-pill-build { --dot: var(--c-build); }
.sys-arch-pill-lifecycle { --dot: var(--c-life); }
.sys-arch-pill:hover { color: var(--text); border-color: var(--dot); }
.sys-arch-stage:has(#sys-arch-request:target) .sys-arch-pill-request,
.sys-arch-stage:has(#sys-arch-build:target) .sys-arch-pill-build,
.sys-arch-stage:has(#sys-arch-lifecycle:target) .sys-arch-pill-lifecycle,
.sys-arch-pill.sys-arch-is-active { color: #FFFFFF; background: var(--dot); border-color: var(--dot); }
.sys-arch-stage:not(:has(.sys-arch-zone:target)):not(:has(.sys-arch-zone.sys-arch-is-open)) .sys-arch-pill-overview {
color: #FFFFFF; background: var(--dot); border-color: var(--dot);
}
/* ---------- canvas: deliberately always light ---------- */
.sys-arch-canvas {
position: relative; width: 100%; aspect-ratio: 16 / 9;
background: var(--paper); border: 1px solid var(--hair); border-radius: 16px;
overflow: hidden; scroll-margin-top: 1rem;
box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 24px 60px rgba(16,24,40,.18);
}
.sys-arch-system { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s ease; }
.sys-arch-canvas:has(.sys-arch-zone:target) .sys-arch-system, .sys-arch-canvas.sys-arch-has-open .sys-arch-system { opacity: 0; }
.sys-arch-zone {
position: absolute;
left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
border: 1.5px solid transparent; border-radius: 13px; background: transparent;
transition: top .5s cubic-bezier(.4,0,.2,1), left .5s cubic-bezier(.4,0,.2,1),
width .5s cubic-bezier(.4,0,.2,1), height .5s cubic-bezier(.4,0,.2,1),
box-shadow .25s ease, opacity .3s ease, background-color .3s ease;
}
.sys-arch-zone:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 24%, transparent); }
#sys-arch-request:target, #sys-arch-build:target, #sys-arch-lifecycle:target, .sys-arch-zone.sys-arch-is-open {
left: 0; top: 0; width: 100%; height: 100%; z-index: 5;
background: var(--paper); border-color: var(--tone); box-shadow: none;
}
.sys-arch-canvas:has(.sys-arch-zone:target) .sys-arch-zone:not(:target),
.sys-arch-canvas.sys-arch-has-open .sys-arch-zone:not(.sys-arch-is-open) { opacity: 0; pointer-events: none; }
.sys-arch-zone-hit { position: absolute; inset: 0; z-index: 3; display: block; }
.sys-arch-zone-hit:focus-visible { outline: 2px solid var(--tone); outline-offset: -4px; border-radius: 12px; }
.sys-arch-zone:target .sys-arch-zone-hit, .sys-arch-zone.sys-arch-is-open .sys-arch-zone-hit { display: none; }
.sys-arch-zone-cue {
position: absolute; right: .6rem; bottom: .45rem; z-index: 4;
font-family: var(--mono); font-size: .5625rem; letter-spacing: .1em;
color: var(--tone); opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.sys-arch-zone:hover .sys-arch-zone-cue { opacity: .9; }
.sys-arch-zone:target .sys-arch-zone-cue, .sys-arch-zone.sys-arch-is-open .sys-arch-zone-cue { display: none; }
.sys-arch-detail { position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; transition: opacity .38s ease; }
.sys-arch-zone:target .sys-arch-detail, .sys-arch-zone.sys-arch-is-open .sys-arch-detail { opacity: 1; transition-delay: .24s; }
.sys-arch-close {
position: absolute; top: .6rem; right: .75rem; z-index: 6; display: none;
font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
color: var(--muted-i); border: 1px solid var(--hair); border-radius: 999px;
padding: .3rem .7rem; background: var(--paper);
}
.sys-arch-close:hover { color: var(--tone); border-color: var(--tone); }
.sys-arch-zone:target .sys-arch-close, .sys-arch-zone.sys-arch-is-open .sys-arch-close { display: inline-flex; }
.sys-arch-section-split {
margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
scroll-margin-top: 1.5rem;
}
.sys-arch-section-split h2 {
font-size: 1.5rem; font-weight: 720; letter-spacing: -.03em; margin: 0 0 .4rem;
}
.sys-arch-section-split p { max-width: 48rem; margin: 0 0 1.1rem; color: var(--muted);
font-size: .9375rem; line-height: 1.7; }
.sys-arch-canvas-static {
width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
background: var(--paper); border: 1px solid var(--hair); border-radius: 16px;
box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 24px 60px rgba(16,24,40,.18);
}
.sys-arch-canvas-static svg { width: 100%; height: 100%; }
@media (max-width: 900px) {
.sys-arch-canvas-static { aspect-ratio: auto; overflow-x: auto; }
.sys-arch-canvas-static svg { width: 64rem; max-width: none; height: auto; }
}
/* ---------- models diagram: styles scoped so they cannot leak ---------- */
.sys-arch-pkg-svg text{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;fill:#141821}
.sys-arch-pkg-svg .title{font-size:28px;font-weight:760;letter-spacing:-.7px}
.sys-arch-pkg-svg .sub{font-size:13px;fill:#667085}
.sys-arch-pkg-svg .eyebrow{font-size:10.5px;font-weight:800;letter-spacing:1.5px}
.sys-arch-pkg-svg .node{font-size:15px;font-weight:700}
.sys-arch-pkg-svg .meta{font-size:11px;fill:#667085}
.sys-arch-pkg-svg .tiny{font-size:9.5px;fill:#667085}
.sys-arch-pkg-svg .legend{font-size:10.5px;fill:#667085}
.sys-arch-pkg-svg .chip{font-size:9.5px;font-weight:800;letter-spacing:.9px}
.sys-arch-pkg-svg .policy{font-size:12px;font-weight:700}
.sys-arch-pkg-svg .section{font-size:11px;font-weight:800;letter-spacing:1.35px}
.sys-arch-pkg-svg .mono{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace}
/* ---------- ownership-boundary tab labels: ONE class for all views ---------- */
.sys-arch-stage text.sys-arch-boundary-tab {
font-size: 11px; font-weight: 800; letter-spacing: 1.1px;
fill: #FFFFFF;
paint-order: stroke fill; /* dark rim painted behind the white fill */
stroke: #141C28; stroke-width: .8px; stroke-linejoin: round;
}
.sys-arch-stage text.sys-arch-boundary-tab.sys-arch-is-github { stroke: #1E242C; }
/* ---------- SVG type ---------- */
svg { display: block; }
svg text { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; fill: var(--ink); }
.sys-arch-t-node { font-size: 15px; font-weight: 700; }
.sys-arch-t-meta { font-size: 11px; fill: var(--muted-i); }
.sys-arch-t-tiny { font-size: 9.5px; fill: var(--muted-i); }
.sys-arch-t-sect { font-size: 11px; font-weight: 800; letter-spacing: 1.35px; }
.sys-arch-t-chip { font-size: 9.5px; font-weight: 800; letter-spacing: .9px; fill: #FFFFFF; }
.sys-arch-t-lgnd { font-size: 10.5px; fill: var(--muted-i); }
.sys-arch-d-h { font-size: 20px; font-weight: 760; letter-spacing: -.5px; }
.sys-arch-d-sub { font-size: 12px; fill: var(--muted-i); }
.sys-arch-d-sect { font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; }
.sys-arch-d-node { font-size: 13px; font-weight: 700; }
.sys-arch-d-meta { font-size: 10.5px; fill: var(--muted-i); }
.sys-arch-d-tiny { font-size: 9.5px; fill: var(--muted-i); }
.sys-arch-n-box { fill: #FFFFFF; stroke: var(--hair); stroke-width: 1.5; }
.sys-arch-n-ext { fill: #FFFFFF; stroke: var(--grey); stroke-width: 1.5; }
.sys-arch-n-cold { fill: #FFFFFF; stroke: var(--grey); stroke-width: 1.6; stroke-dasharray: 7 6; }
.sys-arch-n-req { fill: var(--f-request); stroke: var(--c-request); stroke-width: 2; }
.sys-arch-n-act { fill: var(--f-active); stroke: var(--c-active); stroke-width: 2; }
.sys-arch-n-bld { fill: #FFFFFF; stroke: var(--c-build); stroke-width: 1.6; }
.sys-arch-n-life { fill: #FFFFFF; stroke: var(--c-life); stroke-width: 1.6; }
.sys-arch-n-mod { fill: var(--f-model); stroke: var(--c-model); stroke-width: 1.6; }
.sys-arch-e-req { stroke: var(--c-request); stroke-width: 2.6; fill: none; }
.sys-arch-e-alt { stroke: var(--grey); stroke-width: 1.8; fill: none; stroke-dasharray: 7 6; }
.sys-arch-e-build { stroke: var(--c-build); stroke-width: 2; fill: none; stroke-dasharray: 7 6; }
.sys-arch-e-art { stroke: var(--c-life); stroke-width: 2; fill: none; stroke-dasharray: 3 5; }
/* Narrow viewports keep the same interaction. The canvas holds a minimum width
and its parent scrolls sideways, Zones are positioned against the canvas. */
@media (max-width: 900px) {
.sys-arch-canvas { min-width: 64rem; }
}
@media (prefers-reduced-motion: reduce) { .sys-arch-zone, .sys-arch-detail, .sys-arch-system { transition-duration: .01ms !important; } }
/* Scale is width-driven: viewBox is 1600 units, so canvas_px / 1600 sets the
rendered type size. At .shell (1032px) an 11px label lands at ~7px; at 110rem
it lands at ~10.5px, which is what the standalone mockups were rendering at. */
.sys-arch-wide {
/* The one knob. .shell is 73.75rem; every step wider buys legibility and
costs alignment with the sections above and below.
88rem -> 11px label renders at ~8.5px
96rem -> ~9.2px
110rem -> ~10.6px, but clearly detached from the page grid */
--sys-arch-max: 96rem;
width: min(calc(100% - 2.5rem), var(--sys-arch-max));
margin-inline: auto;
margin-top: 2.25rem;
overflow-x: auto; /* narrow viewports scroll rather than shrink */
}