/* Micro-frontends diagram (js/viz/mfe-shell.js). Every colour comes from the theme tokens. */
.mfe-svg { display: block; width: 100%; height: auto; max-width: 900px; margin: 0 auto; overflow: visible; }
.mfe-svg text { font-size: 14px; fill: var(--ink); }
.mfe-svg .mfe-h { font: 700 18px var(--font-display); }
.mfe-svg .mfe-b { font-weight: 700; font-size: 15px; }
.mfe-svg .mfe-lg { font-size: 17px; }
.mfe-svg .mfe-s { font-size: 13px; fill: var(--muted); }
.mfe-svg .mfe-m { font-family: var(--font-mono); font-size: 13px; white-space: pre; }
.mfe-svg .mfe-muted { fill: var(--muted); }
.mfe-svg .mfe-strong { font-weight: 700; fill: var(--ink); }
.mfe-svg .mfe-bad { fill: var(--bad); }
.mfe-svg .mfe-pro { fill: var(--ok); font-weight: 600; }
.mfe-svg .mfe-con { fill: var(--bad); font-weight: 600; }
.mfe-svg .mfe-x { font-size: 30px; font-weight: 800; fill: var(--bad); }
.mfe-svg .mfe-url-hl { fill: var(--focus); }
.mfe-svg .mfe-code-hl { fill: color-mix(in srgb, var(--microfrontends) 80%, var(--ink)); font-weight: 700; }

/* boxes: --t is the owning team's colour */
.mfe-box > rect { fill: color-mix(in srgb, var(--t, var(--muted)) 9%, var(--surface)); stroke: var(--t, var(--muted)); stroke-width: 2; transition: stroke-width .2s, fill .2s; }
.mfe-box.solid > rect { fill: color-mix(in srgb, var(--t, var(--muted)) 20%, var(--surface)); }
.mfe-box.plain > rect { fill: var(--surface); stroke: var(--rule); }
.mfe-box.ghost > rect { fill: none; stroke-dasharray: 7 5; }
.mfe-box.bad > rect { stroke: var(--bad); fill: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.mfe-box.dim { opacity: .45; }
.mfe-box.dsbtn > rect { fill: var(--ink); stroke: var(--ink); }
.mfe-box.dsbtn text { fill: var(--surface); }
.mfe-box.hl > rect { stroke-width: 3; animation: mfe-pulse 1.4s ease-in-out .3s 2; }
@keyframes mfe-pulse { 50% { stroke-width: 6; } }

/* clickable parts */
.mfe-svg [data-term] { cursor: pointer; outline: none; }
@media (hover: hover) and (pointer: fine) { .mfe-svg [data-term]:hover > rect { stroke-width: 3.5; } .mfe-svg text[data-term]:hover { text-decoration: underline; } }
.mfe-svg [data-term]:focus-visible > rect, .mfe-svg .sel > rect { stroke: var(--focus); stroke-width: 4; }
.mfe-svg text[data-term]:focus-visible, .mfe-svg text.sel { text-decoration: underline; fill: var(--focus); }

/* browser chrome */
.mfe-bar > rect { fill: var(--surface-2); stroke: var(--rule); }
.mfe-bar > rect.mfe-url { fill: var(--surface); }
.mfe-bar circle { fill: var(--rule); }

/* small tags on lines */
.mfe-tag > rect { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
.mfe-tag text { font-size: 13px; font-weight: 700; }
.mfe-tag.mf > rect { stroke: var(--microfrontends); fill: color-mix(in srgb, var(--microfrontends) 12%, var(--surface)); }
.mfe-tag.ok > rect { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.mfe-tag.plain > rect { stroke: var(--rule); }

/* arrows */
.mfe-arrow { fill: none; stroke: var(--muted); stroke-width: 2; }
.mfe-arrow.hl { stroke: var(--focus); stroke-width: 2.5; }
.mfe-arrow.ok { stroke: var(--ok); stroke-width: 2.5; }
.mfe-arrow.bad { stroke: var(--bad); stroke-width: 2.5; stroke-dasharray: 7 5; }
.mfe-arrow.mf { stroke: var(--microfrontends); stroke-width: 2.5; }
.mfe-arrow.dash { stroke-dasharray: 7 5; }
.mfe-arrow.dim { opacity: .45; }
.mfe-arrow.flow { stroke-dasharray: 9 6; animation: mfe-flow .9s linear infinite; }
@keyframes mfe-flow { to { stroke-dashoffset: -15; } }
.mfe-ah { fill: var(--muted); }
.mfe-ah.hl { fill: var(--focus); }
.mfe-ah.ok { fill: var(--ok); }
.mfe-ah.bad { fill: var(--bad); }
.mfe-ah.mf { fill: var(--microfrontends); }

/* travelling request dots */
.mfe-dot { fill: var(--focus); stroke: var(--surface); stroke-width: 2.5; }
.mfe-dot.ok { fill: var(--ok); }
.mfe-dot.bad { fill: var(--bad); }
.mfe-dot.mf { fill: var(--microfrontends); }

/* spinner and cart badge */
.mfe-spin-track { fill: none; stroke: var(--rule); stroke-width: 5; }
.mfe-spin { fill: none; stroke: var(--focus); stroke-width: 5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: mfe-rot .9s linear infinite; }
@keyframes mfe-rot { to { transform: rotate(360deg); } }
.mfe-badge { fill: var(--ok); }
.mfe-svg .mfe-badge-t { fill: var(--surface); font-weight: 800; font-size: 14px; }
.mfe-ring { fill: none; stroke: var(--ok); stroke-width: 2.5; opacity: 0; }
.mfe-ring.mfe-late { animation-name: mfe-ping; animation-duration: 1s; }
@keyframes mfe-ping { from { opacity: 1; } to { opacity: 0; } }

/* entrance and timed appearance. The resting state is always the final picture. */
.mfe-new { animation: mfe-in .45s var(--ease-out) var(--d, 0s) backwards; transform-box: fill-box; }
@keyframes mfe-in { from { opacity: 0; transform: translateY(10px); } }
.mfe-late { animation: mfe-fade .4s ease-out var(--at, 0s) backwards; }
@keyframes mfe-fade { from { opacity: 0; } }
.mfe-window { opacity: 0; animation: mfe-vis var(--len, 1s) linear var(--at, 0s); }
@keyframes mfe-vis { from, to { opacity: 1; } }

/* waiting to scroll into view: hold every animation at its first moment */
.mfe-paused, .mfe-paused * { animation-play-state: paused !important; }
/* reduced motion: show the final state, no motion */
@media (prefers-reduced-motion: reduce) {
  .mfe-svg, .mfe-svg * { animation: none !important; }
}

/* definition panel under the picture */
.mfe-info { max-width: 900px; margin: 10px auto 0; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--surface); color: var(--muted); font-size: .95rem; line-height: 1.5; min-height: 3.2em; }
.mfe-info b { color: var(--ink); }
.mfe-info.on { border-color: var(--focus); color: var(--ink); }
.mfe-info.on b { color: var(--focus); }
.mfe-info.on b::after { content: ':'; }

/* portrait layout for narrow stages: a 340-unit-wide viewBox drawn at about 270-300px
   on a phone, so these sizes land at 12px or more on screen */
.mfe-svg.mfe-narrow { max-width: 520px; }
.mfe-narrow text { font-size: 16.5px; }
.mfe-narrow .mfe-h { font-size: 19px; }
.mfe-narrow .mfe-b { font-size: 16.5px; }
.mfe-narrow .mfe-lg { font-size: 17.5px; }
.mfe-narrow .mfe-s { font-size: 16px; }
.mfe-narrow .mfe-m { font-size: 15.5px; }
.mfe-narrow .mfe-tag text { font-size: 15.5px; }
.mfe-narrow .mfe-badge-t { font-size: 15.5px; }