/* /system/: the architecture page (system-render.mjs). Tokens from web-kit and site.css only. */
.sys-head .wrap { min-height: var(--size-mkt-gnb); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.sys-head img { width: auto; height: 26px; }
.sys-meta { font-size: var(--font-size-label); color: var(--color-nav-muted); font-variant-numeric: tabular-nums; }
.sys-intro { padding-block: var(--space-12) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); border-bottom: 1px solid var(--color-line); }
.sys-intro h1 { font-size: var(--font-size-mkt-h2); }
.sys-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-4); }
.sys-facts > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg); }
.sys-facts dt { order: 2; font-size: var(--font-size-label); color: var(--color-ink-secondary); }
.sys-facts dd { order: 1; font-size: var(--font-size-title-lg); font-weight: var(--font-weight-semibold); color: var(--color-action-text); font-variant-numeric: tabular-nums; }
.sys-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sys-toc a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-pill); font-size: var(--font-size-label); color: var(--color-ink); text-decoration: none; }
.sys-toc a:hover { background: var(--color-action-tint); color: var(--color-ink); }
.sys-toc span { font-size: var(--font-size-caption); color: var(--color-action-text); font-variant-numeric: tabular-nums; }
.sys-part { padding-top: var(--space-12); }
.sys-part h2 { font-size: var(--font-size-title-lg); margin-bottom: var(--space-5); }
.sys-part figure { display: flex; flex-direction: column; gap: var(--space-3); }
.sys-part figcaption { margin: 0; font-size: var(--font-size-body); line-height: 1.7; color: var(--color-ink-secondary); }

/* The drawings keep their size and scroll inside their own box on narrow screens; the page itself never scrolls sideways. */
.sys-scroll { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-4); }
.sys-svg { display: block; width: 100%; height: auto; min-width: 760px; font-family: var(--font-family-sans); }
.sys-svg text { text-anchor: middle; fill: var(--color-ink); }
.sys-svg .ttl { font-size: 13.5px; font-weight: var(--font-weight-semibold); }
.sys-svg .sub { font-size: 11.5px; fill: var(--color-ink-secondary); }
.sys-svg .nd rect { fill: var(--color-surface); stroke: var(--color-line-strong); stroke-width: 1.2; }
.sys-svg .nd.user rect { fill: var(--color-bg); }
.sys-svg .nd.edge rect { fill: var(--color-brand-navy); stroke: var(--color-brand-navy); }
.sys-svg .nd.edge text { fill: var(--color-ink-inverse); }
.sys-svg .nd.edge .sub { fill: var(--color-nav-ink); }
.sys-svg .nd.svc rect { fill: var(--color-action-soft); stroke: var(--color-action); }
.sys-svg .nd.svc .ttl { fill: var(--color-action-text); }
.sys-svg .nd.data rect { fill: var(--color-surface-sunk); stroke: var(--color-line-strong); }
.sys-svg .nd.vault rect { fill: var(--color-pi-soft); stroke: var(--color-pi-line); }
.sys-svg .nd.vault .ttl { fill: var(--color-pi); }
.sys-svg .nd.aws rect { stroke: var(--color-brand-navy); }
.sys-svg .nd.queue rect { fill: var(--color-surface); stroke: var(--color-ink-muted); stroke-dasharray: 2 3; }
.sys-svg .nd.ext rect { stroke-dasharray: 6 4; }
.sys-svg .nd.out rect { fill: var(--color-bg); }
.sys-svg .nd.bad rect { fill: var(--color-bad-soft); stroke: var(--color-bad-line); }
.sys-svg .nd.bad .ttl { fill: var(--color-bad); }
.sys-svg .nd.ghost rect { fill: var(--color-surface); stroke-dasharray: 6 4; }
.sys-svg .fr rect { fill: none; stroke: var(--color-line-strong); stroke-width: 1.2; }
.sys-svg .fr.region rect { stroke: var(--color-brand-navy); stroke-dasharray: 8 5; }
.sys-svg .fr.vpc rect { fill: var(--color-action-tint); stroke: var(--color-pri-line); }
.sys-svg .fr.group rect { fill: var(--color-bg); stroke: var(--color-line); }
.sys-svg .ftl { text-anchor: start; font-size: 12.5px; font-weight: var(--font-weight-semibold); fill: var(--color-ink-secondary); }
.sys-svg .ar polyline { fill: none; stroke: var(--color-ink-secondary); stroke-width: 1.4; }
.sys-svg .ar.dash polyline { stroke-dasharray: 5 4; }
.sys-svg .ah { fill: var(--color-ink-secondary); }
.sys-svg .lbl { font-size: 11.5px; fill: var(--color-ink-secondary); paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; stroke-linejoin: round; }
.sys-svg .lbl.start { text-anchor: start; }
.sys-svg .lbl.end { text-anchor: end; }
.sys-svg .lbl.side { font-size: 12.5px; font-weight: var(--font-weight-semibold); fill: var(--color-ink-muted); }
.sys-svg .lbl.row { font-size: 12px; font-weight: var(--font-weight-semibold); fill: var(--color-action-text); }
.sys-svg .num circle { fill: var(--color-brand-navy); }
.sys-svg .num text { font-size: 12px; font-weight: var(--font-weight-semibold); fill: var(--color-ink-inverse); }
.sys-svg .nd.step text { transform: translateX(8px); }

/* Tables and the closing list. */
.sys-table { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.sys-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--font-size-body); }
.sys-table th, .sys-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line-soft); line-height: 1.55; }
.sys-table thead th { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); color: var(--color-ink-secondary); background: var(--color-bg); }
.sys-table tbody th { font-weight: var(--font-weight-semibold); white-space: nowrap; }
.sys-table tbody tr:last-child > * { border-bottom: 0; }
.sys-part > .meta { margin-top: var(--space-3); }
.sys-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); line-height: 1.7; color: var(--color-ink-secondary); }
.sys-list strong { color: var(--color-ink); font-weight: var(--font-weight-semibold); }
.sys-foot { margin-top: var(--space-12); border-top: 1px solid var(--color-line); }
.sys-foot .wrap { padding-block: var(--space-6); }