/* DG diagram geometry and compact cards, adapted to the local Senelec tokens. */
.portal-architecture { --arch-emphasis:var(--magenta); margin-top:34px; font-family:var(--workspace-font); }
:root[data-theme="dark"] .portal-architecture { --arch-emphasis:#eda1c6; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) .portal-architecture { --arch-emphasis:#eda1c6; } }
.arch-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
.arch-head h2 { margin:0; color:var(--ink); font-size:clamp(25px,3vw,34px); letter-spacing:-.03em; line-height:1.25; }
.arch-head h2 em { font-style:normal; color:var(--arch-emphasis); }
.arch-legend { display:flex; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:13px; }
.arch-legend span { display:flex; align-items:center; gap:7px; }
.arch-legend i { width:22px; border-top:2px solid var(--muted); }
.arch-legend .arch-legend__active { border-color:var(--orange); border-top-style:dashed; }
.arch-legend .arch-legend__planned { border-color:#b5b1b9; }
.arch-stage { position:relative; border:1px solid var(--border); border-top:3px solid #782371; border-radius:24px; padding:22px; background:var(--surface); box-shadow:0 12px 30px -22px #78237150; }
.arch-stage::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background-image:radial-gradient(color-mix(in srgb,var(--ink) 13%,transparent) 1px,transparent 1px); background-size:22px 22px; mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 78%); }
.arch-scroll { position:relative; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:var(--magenta) var(--bg); scrollbar-width:thin; }
.arch-map { display:block; width:100%; min-width:1180px; height:auto; font-family:var(--workspace-font); }
.arch-lane { font:600 12px var(--workspace-font); letter-spacing:.1em; fill:var(--muted); }
.arch-store { fill:var(--bg); stroke:var(--border); stroke-dasharray:5 7; }
.arch-base { fill:none; stroke:color-mix(in srgb,var(--muted) 45%,var(--surface)); stroke-width:2; }
.arch-run { fill:none; stroke:var(--orange); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:5 11; animation:arch-dash 1.1s linear infinite; }
.arch-dot { fill:var(--orange); filter:drop-shadow(0 0 5px var(--orange)); }
.arch-pill rect { fill:var(--surface); stroke:var(--border); }
.arch-pill text { font:600 12px var(--workspace-font); fill:var(--ink); text-anchor:middle; dominant-baseline:central; }
.arch-link--planned .arch-base { stroke:#b5b1b9; }
.arch-card { width:100%; height:100%; border:1px solid var(--border); border-radius:17px; background:var(--surface); box-shadow:0 5px 14px -9px #30244360; color:var(--text); font-family:var(--sans); }
.arch-card--app { --arch-accent:var(--magenta); display:flex; flex-direction:column; gap:4px; padding:7px 11px; border-top:3px solid var(--arch-accent); background:linear-gradient(145deg,color-mix(in srgb,var(--arch-accent) 7%,var(--surface)),var(--surface)); box-shadow:0 8px 18px -12px color-mix(in srgb,var(--arch-accent) 55%,transparent); }
.arch-card--mdms { --arch-accent:#15909c; }.arch-card--vending { --arch-accent:var(--orange); }.arch-card--pnt { --arch-accent:var(--purple); }
.arch-card__top { display:flex; align-items:center; gap:8px; }.arch-card__top>span:last-child { margin-left:auto; color:var(--arch-emphasis); }
.arch-app-icon { display:grid; place-items:center; flex:0 0 32px; height:32px; border-radius:10px; background:#782371; color:#fff; font-size:10px; font-weight:700; }
.arch-card h3 { margin:0; font-size:18px; line-height:1.2; font-weight:700; color:var(--ink); }.arch-card--vending h3 { font-size:15px; }
.arch-role { margin:0; font-size:13px; font-weight:500; line-height:1.25; color:var(--text); }
.arch-metric { display:flex; flex-direction:column; align-items:flex-start; gap:1px; margin-top:auto; font-size:12px; line-height:1.3; color:var(--muted); }
.arch-metric output { color:var(--ink); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.arch-node[href] { text-decoration:none; }.arch-node[href]:hover .arch-card { border-color:var(--magenta); background:color-mix(in srgb,var(--magenta) 5%,var(--surface)); }
.arch-node[href]:focus-visible { outline:none; }.arch-node[href]:focus-visible .arch-card { border:3px solid var(--orange); }
.arch-card--chip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 8px; text-align:center; border-radius:16px; }
.arch-icon { width:21px; height:21px; flex:none; fill:none; stroke:var(--arch-emphasis); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.arch-card--chip h3 { font-size:15px; }.arch-card--chip p { margin:0; font-size:12px; line-height:1.2; color:var(--text); }
.arch-card--compact { display:grid; grid-template-columns:18px minmax(0,1fr); grid-template-rows:18px auto; align-content:center; gap:2px 5px; padding:4px 6px; }
.arch-card--compact .arch-icon { width:18px; height:18px; }.arch-card--compact h3 { font-size:13px; }.arch-card--compact p { grid-column:1 / -1; font-size:12px; }
.arch-card--planned { background:color-mix(in srgb,#b5b1b9 12%,var(--surface)); border-color:color-mix(in srgb,#b5b1b9 45%,var(--surface)); border-style:dashed; box-shadow:none; }
.arch-card--planned :is(h3,p) { color:var(--muted); }.arch-card--planned .arch-icon { stroke:#96909d; }
.arch-hint { margin:10px 0 0; color:var(--muted); font-size:13px; }
.arch-motion-stopped .arch-run,.arch-offscreen .arch-run { animation-play-state:paused; }.arch-motion-stopped .arch-dot { display:none; }
.arch-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.arch-motion-toggle { min-height:44px; padding:9px 15px; border:1px solid var(--border); border-radius:12px; color:var(--ink); background:var(--surface); font-size:15px; font-weight:600; cursor:pointer; }
.arch-motion-toggle:hover { border-color:var(--magenta); }.arch-motion-toggle[aria-pressed="true"] { color:var(--arch-emphasis); background:color-mix(in srgb,var(--magenta) 8%,var(--surface)); }
.arch-motion-enabled .arch-run { animation:arch-dash 1.1s linear infinite!important; }
.arch-motion-enabled.arch-motion-stopped .arch-run { animation-play-state:paused!important; }
.arch-motion-enabled:not(.arch-motion-stopped) .arch-dot { display:block; }
@keyframes arch-dash { to { stroke-dashoffset:-16; } }
@media(max-width:700px) { .arch-stage { padding:14px; border-radius:20px; }.arch-map { min-width:1360px; }.arch-head h2 { font-size:26px; } }
@media(prefers-reduced-motion:reduce) { .arch-run { animation:none; }.arch-dot { display:none; } }