/* Public architecture illustrations. No detector internals or live measurements. */
.mg-physics { background: #f2f6fd; border-block: 1px solid #e2e9f6; }
.mg-physics-copy p { color: var(--text-muted); font-size: 15px; line-height: 1.8; }
.mg-physics-copy p:last-child { margin-bottom: 0; }
.mg-physics-panel { max-width: none; }
.mg-physics-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; padding: 22px 28px; }
.mg-physics-legend { display: flex; align-items: center; gap: 8px; color: #b1c6e5; font-size: 11px; }
.mg-physics-legend i { width: 7px; height: 7px; border-radius: 50%; background: #8bb4ff; }
.mg-physics-legend i:nth-of-type(2) { margin-left: 14px; background: #85e9cc; }
.mg-path-lanes { display: grid; gap: 18px; padding: 0 28px 24px; }
.mg-path-lane { padding: 24px; background: #10213c; border: 1px solid #334b6b; border-radius: 10px; }
.mg-path-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 28px; }
.mg-path-heading strong { font-size: 15px; color: #a8c8ff; }
.mg-path-heading > span { font-size: 11px; color: #a2b8d7; }
.mg-path-lane--tls .mg-path-heading strong { color: #8ee8cd; }
.mg-path-track { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(70px, 1fr) minmax(90px, 1fr) minmax(70px, 1fr) minmax(90px, 1fr); align-items: center; gap: 14px; }
.mg-path-node { display: grid; justify-items: center; text-align: center; gap: 7px; padding: 16px 8px; background: #142c49; border: 1px solid #3e5b80; border-radius: 9px; min-width: 0; }
.mg-node-icon { color: #9ab9e7; font-size: 23px; line-height: 1; }
.mg-path-node strong { font-size: 14px; color: #e9f2ff; }
.mg-path-node small { font-size: 10px; color: #a9bed9; }
.mg-path-guard { border-color: #538ea2; background: #123348; }
.mg-path-guard .mg-node-icon { color: #9cebd6; }
.mg-path-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; min-height: 74px; padding-bottom: 2px; }
.mg-path-link > span { font: 600 13px ui-monospace, monospace; color: #a7caff; }
.mg-path-link small { color: #9fb6d3; font-size: 9px; }
.mg-path-link i { position: absolute; height: 2px; background: #577caa; top: 50%; left: 0; right: 0; }
.mg-path-link i::before, .mg-path-link i::after { content: ""; position: absolute; width: 7px; height: 7px; background: #b1ceff; border-radius: 50%; top: -2.5px; left: 0; animation: mg-network-packet 2.6s ease-in-out infinite alternate; animation-play-state: paused; }
.mg-path-link i::after { animation-delay: -2.6s; opacity: .55; }
.mg-path-lane--tls .mg-path-link i { background: #397f77; }
.mg-path-lane--tls .mg-path-link i::before, .mg-path-lane--tls .mg-path-link i::after { background: #9affda; animation-duration: 3.8s; }
.mg-path-lane--tls .mg-path-visible-link i::before, .mg-path-lane--tls .mg-path-visible-link i::after { animation-delay: -.9s; }
.mg-path-lane--tls .mg-path-hidden-link > span { color: #f4d493; }
.mg-path-lane--tls .mg-path-hidden-link i { background: #9a8050; }
.mg-path-lane--tls .mg-path-hidden-link i::before, .mg-path-lane--tls .mg-path-hidden-link i::after { background: #f4d493; }
.mg-path-lane--tcp .mg-path-browser, .mg-path-lane--tcp .mg-path-hidden-link { opacity: .4; }
.mg-path-lane--tcp .mg-path-hidden-link > span { font: 10px var(--font-body); color: #a5b9d5; transform: translateY(-13px); }
.mg-path-lane--tcp .mg-path-hidden-link i { background: repeating-linear-gradient(90deg,#547396 0 4px,transparent 4px 8px); }
.mg-path-lane--tcp .mg-path-hidden-link i::before, .mg-path-lane--tcp .mg-path-hidden-link i::after { display: none; }
.mg-physics-panel.is-running .mg-path-link i::before, .mg-physics-panel.is-running .mg-path-link i::after { animation-play-state: running; }
@keyframes mg-network-packet { from { left: 0; transform: translateX(0); } to { left: 100%; transform: translateX(-100%); } }
.mg-physics-panel[data-route="direct"] .mg-path-track { grid-template-columns: minmax(90px, 1fr) minmax(100px, 2fr) minmax(90px, 1fr); }
.mg-physics-panel[data-route="direct"] .mg-path-peer, .mg-physics-panel[data-route="direct"] .mg-path-hidden-link { display: none; }
.mg-physics-panel[data-route="direct"] .mg-path-browser { opacity: 1; }
.mg-physics-panel[data-beat="0"] .mg-path-lane--tcp { border-color: #80a9e8; }
.mg-physics-panel[data-beat="1"] .mg-path-lane--tls { border-color: #70ceb3; }
.mg-physics-insight { margin: 0 28px 24px; padding: 20px 22px; background: #102d37; border-left: 3px solid #7fe0c3; border-radius: 0 8px 8px 0; }
.mg-physics-insight__label { display: block; margin-bottom: 8px; color: #94ead1; font: 10px ui-monospace, monospace; letter-spacing: .08em; }
.mg-physics-insight p { font-size: 13px; line-height: 1.8; color: #c9e0e9; margin: 0; }
.mg-physics-note { color: #63718a; max-width: 820px; margin: 18px auto 0; font-size: 12px; line-height: 1.8; text-align: center; }
.mg-managed { background: linear-gradient(180deg, #fff, #f8faff); }
.mg-managed .mg-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.mg-managed .mg-feature-list strong { display: block; margin-bottom: 4px; }
.mg-appliance-body { padding: 24px; }
.mg-control-plane, .mg-edge-appliance { padding: 20px; border: 1px solid #3b5278; border-radius: 10px; background: #12243f; }
.mg-architecture-label { color: #a3bfff; font: 10px ui-monospace, monospace; letter-spacing: .05em; }
.mg-appliance h3 { color: #eff5ff; font-size: 19px; line-height: 1.3; margin: 12px 0 18px; }
.mg-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mg-control-grid > div { padding: 11px 9px; background: #0c1930; border: 1px solid #304564; border-radius: 6px; }
.mg-control-grid strong { display: block; color: #d6e4fa; font-size: 10px; line-height: 1.6; }
.mg-control-grid small { display: block; color: #a5bad9; font-size: 9px; line-height: 1.65; margin-top: 7px; }
.mg-management-channel { position: relative; display: grid; justify-items: center; gap: 10px; padding: 14px 0; }
.mg-channel-copy { text-align: center; }
.mg-channel-copy strong { display: block; font-size: 11px; color: #b9d4ef; }
.mg-channel-copy small { display: block; font-size: 9px; color: #95accb; margin-top: 3px; }
.mg-channel-lines { display: flex; justify-content: center; gap: 20px; height: 38px; width: 100%; }
.mg-channel-lines > span { position: relative; display: block; width: 2px; background: #376181; height: 100%; }
.mg-channel-lines i { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #8aafd9; animation: mg-channel-packet 1.7s ease-in-out infinite; animation-play-state: paused; }
.mg-channel-lines .mg-channel-up i { background: #83e4c7; animation-direction: reverse; animation-delay: -.4s; }
.mg-appliance.is-running .mg-channel-lines i { animation-play-state: running; }
@keyframes mg-channel-packet { 0% { top: 0; opacity: .3; } 40%,60% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: .3; } }
.mg-channel-directions { color: #a1bad6; font-size: 9px; }
.mg-channel-directions > span { color: #82e4c8; margin: 0 8px; }
.mg-edge-appliance { background: #113040; border-color: #4c8d96; }
.mg-appliance-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-appliance-heading .mg-architecture-label { color: #a2e4d4; }
.mg-appliance-badge { color: #9df2d9; background: #154337; border: 1px solid #42796d; border-radius: 4px; font-size: 9px; padding: 3px 5px; }
.mg-appliance-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mg-appliance-capabilities > span { padding: 9px; background: #0d2536; border: 1px solid #2e5867; border-radius: 5px; font-size: 10px; line-height: 1.6; color: #bddcd9; }
.mg-appliance-traffic { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding-top: 16px; font-size: 9px; color: #a3c0d6; }
.mg-appliance-traffic strong { color: #9aebd2; }
.mg-provision-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; counter-reset: provision; gap: 6px; padding: 0 24px 24px; }
.mg-provision-stages li { counter-increment: provision; padding: 10px 5px; border-top: 2px solid #365273; color: #a8bedb; text-align: center; font-size: 10px; }
.mg-provision-stages li::before { content: "0" counter(provision); display: block; margin-bottom: 6px; font: 10px ui-monospace, monospace; color: #839abd; }
.mg-appliance[data-stage="0"] [data-mg-control="cloud"], .mg-appliance[data-stage="1"] .mg-edge-appliance,
.mg-appliance[data-stage="2"] [data-mg-control="campaign"], .mg-appliance[data-stage="3"] [data-mg-control="lifecycle"] { border-color: #8cdcc7; }
.mg-appliance[data-stage="0"] .mg-provision-stages li:nth-child(1), .mg-appliance[data-stage="1"] .mg-provision-stages li:nth-child(2),
.mg-appliance[data-stage="2"] .mg-provision-stages li:nth-child(3), .mg-appliance[data-stage="3"] .mg-provision-stages li:nth-child(4) { border-color: #85e7c9; color: #b8f4e1; }
@media (max-width: 960px) {
  .mg-managed .mg-split { grid-template-columns: 1fr; }
  .mg-path-track { gap: 9px; grid-template-columns: minmax(72px, 1fr) minmax(60px, 1fr) minmax(72px, 1fr) minmax(60px, 1fr) minmax(72px, 1fr); }
  .mg-physics-panel { max-width: none; }
  .mg-path-heading { align-items: flex-start; }
  .mg-path-node strong { font-size: 12px; }
}
@media (max-width: 600px) {
  .mg-physics-toolbar { padding: 18px 16px; }
  .mg-physics-legend { font-size: 10px; }
  .mg-path-lanes { padding-inline: 16px; gap: 16px; }
  .mg-path-lane { padding: 18px 16px; }
  .mg-path-heading { flex-direction: column; gap: 7px; margin-bottom: 20px; }
  .mg-path-heading strong { font-size: 14px; }
  .mg-path-heading > span { font-size: 10px; line-height: 1.6; }
  .mg-path-track, .mg-physics-panel[data-route="direct"] .mg-path-track { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .mg-path-node { width: min(100%, 210px); padding: 13px; grid-template-columns: 26px 1fr; gap: 4px 10px; text-align: left; justify-items: start; }
  .mg-path-node .mg-node-icon { grid-row: span 2; align-self: center; }
  .mg-path-node strong { font-size: 13px; }
  .mg-path-node small { font-size: 10px; }
  .mg-path-link { min-height: 74px; width: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: calc(50% + 18px); justify-content: center; text-align: left; }
  .mg-path-link > span { font-size: 11px; }
  .mg-path-link small { font-size: 9px; line-height: 1.5; }
  .mg-path-link i { width: 2px; height: auto; top: 8px; bottom: 8px; left: 50%; right: auto; }
  .mg-path-link i::before, .mg-path-link i::after { left: -2.5px; top: 0; animation-name: mg-network-packet-vertical; }
  @keyframes mg-network-packet-vertical { from { top: 0; transform: translateY(0); } to { top: 100%; transform: translateY(-100%); } }
  .mg-path-lane--tcp .mg-path-browser, .mg-path-lane--tcp .mg-path-hidden-link { display: none; }
  .mg-physics-panel[data-route="direct"] .mg-path-lane--tcp .mg-path-browser { display: grid; }
  .mg-physics-insight { margin-inline: 16px; padding: 18px 16px; }
  .mg-physics-insight p { font-size: 12px; }
  .mg-physics-note { font-size: 11px; text-align: left; }
  .mg-appliance-body { padding: 16px; }
  .mg-control-plane, .mg-edge-appliance { padding: 16px; }
  .mg-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-control-grid > div:last-child { grid-column: 1 / -1; }
  .mg-control-grid strong { font-size: 11px; }
  .mg-control-grid small { margin-top: 4px; }
  .mg-appliance-heading { align-items: flex-start; }
  .mg-architecture-label { font-size: 9px; line-height: 1.6; }
  .mg-appliance h3 { font-size: 19px; }
  .mg-provision-stages { padding-inline: 16px; }
  .mg-provision-stages li { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-path-link i::before, .mg-path-link i::after, .mg-channel-lines i { animation: none !important; }
}
body.mg-motion-paused .mg-path-link i::before, body.mg-motion-paused .mg-path-link i::after { animation-play-state: paused !important; }

/* Readable endpoints and explorable provisioning stages. */
.mg-node-icon svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mg-path-peer .mg-node-icon { color: #e3c183; }
.mg-path-lane--tcp .mg-path-browser, .mg-path-lane--tcp .mg-path-hidden-link { opacity: 1; }
.mg-path-lane--tcp .mg-path-browser { border-style: dashed; border-color: #3b536f; background: #102038; }
.mg-path-lane--tcp .mg-path-browser strong, .mg-path-lane--tcp .mg-path-browser .mg-node-icon { color: #9eb2cf; }
.mg-physics-panel[data-route="direct"] .mg-path-lane--tcp .mg-path-browser { border-style: solid; border-color: #3e5b80; background: #142c49; }
.mg-physics-panel[data-route="direct"] .mg-path-lane--tcp .mg-path-browser strong { color: #e9f2ff; }
.mg-path-sequence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0 28px 20px; }
.mg-path-sequence li { padding: 12px 14px; border: 1px solid #304666; border-radius: 6px; background: #102039; color: #bdcde6; font-size: 12px; line-height: 1.6; }
.mg-path-sequence span { color: #7f9fcb; font: 11px ui-monospace, monospace; margin-right: 10px; }
.mg-physics-panel[data-beat="0"] .mg-path-sequence li:nth-child(1),
.mg-physics-panel[data-beat="1"] .mg-path-sequence li:nth-child(2),
.mg-physics-panel[data-beat="2"] .mg-path-sequence li:nth-child(3) { border-color: #7fddc2; background: #14343e; color: #a9efdb; }
.mg-physics-panel[data-beat="2"] .mg-physics-insight { background: #143640; }
.mg-path-heading > span, .mg-path-node small { font-size: 12px; }
.mg-path-link small { font-size: 11px; }
.mg-control-grid strong { font-size: 12px; }
.mg-control-grid small, .mg-appliance-capabilities > span { font-size: 11px; }
.mg-architecture-label, .mg-channel-copy strong { font-size: 11px; }
.mg-channel-copy small, .mg-channel-directions, .mg-appliance-traffic { font-size: 10px; }
.mg-provision-stages li { position: relative; padding-bottom: 0; }
.mg-provision-stages button { display: block; width: 100%; padding: 8px 3px 12px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: 11px var(--font-body); cursor: pointer; }
.mg-provision-stages button:hover { background: #173645; color: #b7f2df; }
.mg-provision-stages button[aria-pressed="true"] { background: #173b43; color: #a8ecd6; }
.mg-provision-stages li.is-complete::before { content: "✓"; color: #90dfc6; }
.mg-provision-hint { margin: -8px 24px 20px; font-size: 11px; line-height: 1.6; color: #b4c6de; }
.mg-appliance .mg-panel__foot > span { min-height: 38px; flex: 1 1 230px; }
@media (max-width: 600px) {
  .mg-node-icon svg { width: 25px; height: 25px; }
  .mg-path-sequence { padding-inline: 16px; gap: 6px; }
  .mg-path-sequence li { padding: 9px 7px; font-size: 10px; }
  .mg-path-sequence span { display: block; margin: 0 0 5px; }
  .mg-path-node small, .mg-path-heading > span { font-size: 11px; }
  .mg-path-link small { font-size: 10px; }
  .mg-control-grid strong { font-size: 12px; }
  .mg-architecture-label { font-size: 10px; }
  .mg-provision-hint { margin-inline: 16px; }
  .mg-provision-stages button { font-size: 10px; }
}