/* "Build the ShopEasy architecture" diagram (js/viz/ms-journey.js). Classes prefixed ms-. */

.ms-root { position: relative; }
.ms-stage { padding: clamp(6px, 1.2vw, 12px); }
.ms-svg { display: block; width: 100%; height: auto; max-width: 1000px; margin: 0 auto; overflow: visible; }
.ms-hint { font-size: .85rem; color: var(--muted); }
.ms-jump { display: inline-flex; align-items: center; gap: 8px; }

/* text */
.ms-svg text { font-size: 13px; fill: var(--ink); }
.ms-svg .ms-name { font-size: 14px; font-weight: 700; }
.ms-svg .ms-small { font-size: 13px; }
.ms-svg .ms-sub { font-size: 13px; fill: var(--muted); }
.ms-svg .ms-title { font-size: 15px; font-weight: 800; }
.ms-svg .ms-tag { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; fill: var(--muted); }
.ms-svg .ms-tagline { font-size: 13px; font-weight: 700; fill: var(--microservices); }
.ms-svg .ms-lbl { font-size: 13px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; stroke-linejoin: round; }
.ms-svg .ms-lbl-on-panel { stroke: var(--surface); }
.ms-svg .ms-chipt { font-size: 13px; font-weight: 600; }
.ms-svg .ms-pillt { font-size: 13px; font-weight: 700; fill: var(--java); }
.ms-svg .ms-cbt { font-size: 13px; font-weight: 800; fill: var(--bad); }

/* portrait layout (narrow stages): drawn at roughly 1:1, so bump sizes a little */
.ms-svg.ms-portrait { max-width: 520px; }
.ms-portrait text, .ms-portrait .ms-sub, .ms-portrait .ms-lbl, .ms-portrait .ms-chipt, .ms-portrait .ms-pillt, .ms-portrait .ms-tag, .ms-portrait .ms-tagline, .ms-portrait .ms-cbt, .ms-portrait .ms-small { font-size: 15.5px; }
.ms-portrait .ms-name { font-size: 16px; }
.ms-portrait .ms-title { font-size: 17px; }

/* boxes */
.ms-box { fill: var(--surface); stroke: var(--rule); stroke-width: 1.5; transition: stroke .25s, fill .25s, stroke-width .25s; }
.ms-client .ms-box { stroke: var(--ink); }
.ms-svc .ms-box { stroke: var(--microservices); fill: color-mix(in srgb, var(--microservices) 9%, var(--surface)); }
.ms-edge .ms-box { stroke: var(--spring); fill: color-mix(in srgb, var(--spring) 12%, var(--surface)); }
.ms-infra .ms-box, .ms-obs .ms-box { stroke: var(--arch); fill: color-mix(in srgb, var(--arch) 10%, var(--surface)); }
.ms-auth .ms-box { stroke: var(--signal); fill: color-mix(in srgb, var(--signal) 16%, var(--surface)); }
.ms-kafka .ms-box { stroke: var(--java); fill: color-mix(in srgb, var(--java) 12%, var(--surface)); }
.ms-tests .ms-box, .ms-pipe .ms-box { stroke: var(--focus); fill: color-mix(in srgb, var(--focus) 7%, var(--surface)); }
.ms-box.ms-app { stroke: var(--java); stroke-width: 2; fill: color-mix(in srgb, var(--java) 6%, var(--surface)); }
.ms-box.ms-mod { fill: var(--surface); stroke: color-mix(in srgb, var(--java) 45%, var(--rule)); }
.ms-box.ms-layer { stroke: var(--microservices); fill: color-mix(in srgb, var(--microservices) 9%, var(--surface)); }
.ms-cyl path { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1.3; }
.ms-cyl .ms-cyl-rim { fill: none; }
.ms-cyl-rep path { stroke-dasharray: 2 2; }
.ms-bigdb path, .ms-layer-db path { stroke-width: 1.8; }

.ms-region { fill: color-mix(in srgb, var(--microservices) 14%, transparent); stroke: var(--microservices); stroke-width: 1.5; stroke-dasharray: 6 4; }
.ms-frame { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 8 6; }
.ms-ctr { fill: none; stroke: var(--focus); stroke-width: 1.6; stroke-dasharray: 5 4; }
.ms-pod { fill: var(--surface); stroke: var(--microservices); stroke-width: 1.4; }
.ms-ghost { fill: var(--surface); stroke: var(--microservices); stroke-width: 1.2; }
.ms-cluster { fill: color-mix(in srgb, var(--microservices) 4%, transparent); stroke: var(--microservices); stroke-width: 2; stroke-dasharray: 10 6; }
.ms-panel { fill: var(--surface); stroke: var(--microservices); stroke-width: 2; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .16)); }
.ms-panel.ms-saga { stroke: var(--bad); }
.ms-chip { fill: var(--surface-2); stroke: var(--rule); stroke-width: 1.2; }
.ms-chip.ok { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 15%, var(--surface)); }
.ms-chip.bad { stroke: var(--bad); fill: color-mix(in srgb, var(--bad) 13%, var(--surface)); }
.ms-chip.sig { stroke: color-mix(in srgb, var(--signal) 80%, var(--ink)); fill: color-mix(in srgb, var(--signal) 26%, var(--surface)); }
.ms-pill { fill: var(--surface); stroke: var(--java); stroke-width: 1.5; }
.ms-cb circle { fill: var(--surface); stroke: var(--bad); stroke-width: 2; }
.ms-dim { opacity: .42; }

/* links */
.ms-line { fill: none; stroke: var(--muted); stroke-width: 2; }
.ms-line.rest { stroke: var(--focus); }
.ms-line.evt { stroke: var(--java); stroke-dasharray: 6 4; }
.ms-line.bad { stroke: var(--bad); }
.ms-line.ok { stroke: var(--ok); }
.ms-line.sig { stroke: color-mix(in srgb, var(--signal) 75%, var(--ink)); stroke-dasharray: 5 3; }
.ms-line.arch { stroke: var(--arch); stroke-dasharray: 4 4; }
.ms-hit { fill: none; stroke: transparent; stroke-width: 14; }
.ms-mk { fill: var(--muted); }
.ms-mk-rest { fill: var(--focus); }
.ms-mk-evt { fill: var(--java); }
.ms-mk-bad { fill: var(--bad); }
.ms-mk-ok { fill: var(--ok); }
.ms-mk-sig { fill: color-mix(in srgb, var(--signal) 75%, var(--ink)); }
.ms-mk-arch { fill: var(--arch); }

/* packets */
.ms-dot { stroke: var(--surface); stroke-width: 2.5; }
.ms-dot.req { fill: var(--focus); }
.ms-dot.evt { fill: var(--java); }
.ms-dot.ok { fill: var(--ok); }
.ms-dot.bad { fill: var(--bad); }
.ms-dot.sig { fill: var(--signal); }

/* interaction */
.ms-item[data-tt] { cursor: pointer; }
.ms-item[data-tt]:focus { outline: none; }
.ms-item[data-tt]:focus-visible .ms-box, .ms-picked .ms-box { stroke: var(--focus); stroke-width: 3; }
.ms-picked .ms-line { stroke-width: 3.5; }
@media (hover: hover) { .ms-item[data-tt]:hover .ms-box { stroke-width: 2.5; } .ms-link:hover .ms-line { stroke-width: 3; } }

/* what changed in this step */
.ms-hl .ms-box, .ms-hl .ms-region, .ms-hl .ms-cluster, .ms-hl.ms-zoom .ms-panel { stroke: var(--signal); stroke-width: 3; }
.ms-hl .ms-line { stroke-width: 3.5; }
.ms-hl .ms-cb circle { stroke-width: 3; }
.ms-hl { animation: ms-pulse 1.3s ease-in-out .35s 2; }
@keyframes ms-pulse { 50% { filter: drop-shadow(0 0 5px var(--signal)); } }

/* motion: new parts slide in, old parts fade out */
.ms-in { animation: ms-in .5s var(--ease-out) both; }
.ms-in.ms-hl { animation: ms-in .5s var(--ease-out) both, ms-pulse 1.3s ease-in-out .45s 2; }
@keyframes ms-in { from { opacity: 0; transform: translate(0, 10px); } }
.ms-out { animation: ms-out .22s ease both; pointer-events: none; }
@keyframes ms-out { to { opacity: 0; } }
.ms-zoom, .ms-zoom.ms-in, .ms-zoom.ms-in.ms-hl { transform-box: view-box; transform-origin: 494px 232px; animation: ms-zoom .55s var(--ease-out) both; }
@keyframes ms-zoom { from { opacity: 0; transform: scale(.32); } }

/* tooltip */
.ms-tip { position: absolute; z-index: 6; width: max-content; max-width: min(300px, calc(100% - 8px)); padding: 10px 34px 11px 13px; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-left: 4px solid var(--microservices); border-radius: 10px; box-shadow: 0 10px 28px rgb(0 0 0 / .2); font-size: .93rem; line-height: 1.45; }
.ms-tip[hidden] { display: none; }
.ms-tip b { display: block; margin-bottom: 3px; }
.ms-tip p { margin: 0; color: var(--ink); }
.ms-tip-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.ms-tip-x:hover { background: var(--surface-2); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .ms-in, .ms-out, .ms-zoom, .ms-hl, .ms-in.ms-hl { animation: none !important; }
  .ms-box { transition: none; }
}
@media (max-width: 600px) { .ms-hint { display: none; } }