/* Shared visual baseline for every standalone Architecture Diagram. */
:root {
  --architecture-canvas: #0A0F1D;
  --architecture-canvas-fill: radial-gradient(ellipse at 50% 18%, #00F5FF14 0%, transparent 58%), #0A0F1D;
  --architecture-surface: #101923;
  --architecture-surface-bar: #0B111B;
  --architecture-casing: #070B12;
}

html[data-theme="light"] {
  --architecture-canvas: #F8F9FF;
  --architecture-canvas-fill: radial-gradient(ellipse at 50% 18%, #EFF4FF 0%, transparent 60%), #F8F9FF;
  --architecture-surface: #FFFFFF;
  --architecture-surface-bar: #EFF4FF;
  --architecture-casing: #F8F9FF;
}

html,
body {
  background: var(--architecture-canvas) !important;
}

.surface {
  background: var(--architecture-surface) !important;
}

.surface-bar {
  background: var(--architecture-surface-bar) !important;
}

.diagram-viewport {
  background: var(--architecture-surface) !important;
}

.diagram {
  background: var(--architecture-canvas-fill) !important;
}

.diagram::after {
  background: none !important;
}

.app:fullscreen,
#app:fullscreen {
  background: var(--architecture-canvas) !important;
}

/* Controls belong to the standalone/full view, not compact embedded previews. */
html[data-view="embed"] .controls {
  display: none !important;
}

html[data-view="embed"] .app {
  padding-bottom: 0 !important;
}

/* Compact embeds keep the diagram itself, not the standalone interaction footer. */
html[data-view="embed"] .bottom-bar,
html[data-view="embed"] .flow-legend,
html[data-view="embed"] .keyboard-hint {
  display: none !important;
}

/* Solid wires are the common default; arrowheads and labels carry direction. */
.wire,
.wire.request,
.standby {
  stroke-dasharray: none !important;
  stroke-width: 2px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-opacity: .86 !important;
}

.wire-casing {
  stroke: var(--architecture-casing) !important;
  stroke-width: 6px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Architecture pages can request a calm, non-animated embedded preview. */
html[data-motion="off"] .packet {
  display: none !important;
  filter: none !important;
}

html[data-motion="off"] .activity-dot {
  animation: none !important;
  box-shadow: none !important;
}