/* <mv-arch> styles. Tokens come from ../styles.css (--ink, --muted, --moss, --text, --mono, --ease).
   Text on frost glass: ink #1C1F1C and muted #57554E only (gated >= 4.5:1 on #E9E5DD, see report). */
mv-arch { display: block; width: 720px; max-width: 100%; color: var(--ink, #1C1F1C); font-family: var(--text, system-ui, sans-serif);
  --mva-line: rgba(28, 31, 28, .18); --mva-on: var(--moss, #3F5A30);
  --mva-slab-line: rgba(28, 31, 28, .13); --mva-slab-fill: linear-gradient(165deg, rgba(255,255,255,.30), rgba(255,255,255,.10)); }
.mva { position: relative; }
.mva ul, .mva ol { list-style: none; margin: 0; padding: 0; }
.mva h3, .mva h4, .mva p { margin: 0; }
.mva__sr, .mva__why, .mva__steps, .mva__group--path > .mva__gh, .mva__group--tools > .mva__gh {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- desktop diagram ---------- */
.mva__fig { position: relative; display: grid; grid-template-columns: 92px 1fr; column-gap: 18px; align-items: start; }
.mva__wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.mva__wire { fill: none; stroke: var(--mva-line); stroke-width: 1.25; stroke-linecap: round;
  transition: stroke .45s var(--ease, ease), stroke-width .45s var(--ease, ease); }
.mva__wire.is-on { stroke: var(--mva-on); stroke-width: 2; }
.mva__joint { fill: rgba(28, 31, 28, .30); transition: fill .45s; }
.mva__joint.is-on { fill: var(--mva-on); }
.mva__out { position: relative; padding-top: var(--mva-app-top, 92px); }
.mva__slab { position: relative; border-radius: 28px; padding: 14px 14px 14px;
  border: 1px solid var(--mva-slab-line); background: var(--mva-slab-fill); }
.mva__acct { display: flex; align-items: center; gap: 8px; height: 22px; margin-bottom: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink, #1C1F1C); }
.mva__acct .mva__icon { width: 20px; height: 20px; }
.mva__icon { display: block; width: 26px; height: 26px; flex: none; }

.mva__row { display: flex; gap: 10px; align-items: stretch; }
.mva__item { display: flex; flex: 1 1 auto; }
.mva__item > .mva__node { flex: 1 1 auto; }
.mva__group--path { padding-bottom: 58px; }
.mva__row--path { align-items: center; gap: 12px; }
.mva__group--tools { padding-top: 0; }
.mva__group--watch { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--mva-slab-line); transition: border-color .45s; }
.mva__group--watch > .mva__gh { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0;
  color: var(--muted, #57554E); transition: color .45s; }
.mva.is-band .mva__group--watch { border-top-color: var(--mva-on); }
.mva.is-band .mva__group--watch > .mva__gh { color: var(--mva-on); }

/* node pill: frost glass. WebGL draws the glass when body.gl; CSS glass is the fallback */
.mva__node { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 5px;
  align-items: center; align-content: center; padding: 10px 10px 10px 9px; border-radius: 16px; min-height: 62px; cursor: default;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  background: linear-gradient(160deg, rgba(255,255,255,.68), rgba(255,255,255,.36));
  box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(255,255,255,.45), 0 10px 26px -16px rgba(48,40,26,.38);
  transition: transform .42s var(--ease, ease), box-shadow .42s var(--ease, ease); }
.mva__icons { grid-column: 1; grid-row: 1; display: flex; gap: 4px; }
.mva__text { display: contents; }
.mva__label { grid-column: 2; grid-row: 1; font-size: 14.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; }
.mva__aws, .mva__sub { grid-column: 1 / -1; grid-row: 2; font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px;
  line-height: 1.32; letter-spacing: -0.01em; color: var(--muted, #57554E); }
.mva__svc { display: block; white-space: nowrap; }
.mva__aws--wrap .mva__svc { white-space: normal; }
.mva__sub { font-family: var(--text, system-ui, sans-serif); font-size: 12px; letter-spacing: -0.005em; line-height: 1.3; }
.mva__node--app { grid-template-columns: 1fr; padding: 12px 12px; }
.mva__node--app .mva__label { grid-column: 1; }
.mva__node.is-lift { transform: translateY(-5px); }
body:not(.gl) .mva__node.is-lift {
  box-shadow: inset 1.5px 1.5px 0 #fff, inset -1px -1px 0 rgba(255,255,255,.55), 0 18px 30px -12px rgba(48,40,26,.45); }
body.gl .mva__node:not(.mva__socket) { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* the agent: an empty round socket; the page places the lens on agentRect() */
.mva__item--agent { flex: 0 0 auto; width: 110px; justify-content: center; }
.mva__node.mva__socket { display: block; flex: none; width: 76px; height: 76px; min-height: 0; padding: 0; border-radius: 50%;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(circle at 50% 40%, rgba(28,31,28,.05), rgba(28,31,28,0) 72%);
  box-shadow: inset 0 1.5px 3px rgba(48,40,26,.24), inset 0 -1px 0 rgba(255,255,255,.75), 0 0 0 1px rgba(28,31,28,.10); }
.mva__agentlab { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.mva__agentlab .mva__icon { width: 24px; height: 24px; }
.mva__agentlab .mva__icons { display: flex; }
.mva__agentlab .mva__label, .mva__agentlab .mva__aws { display: block; }

/* request bead: a small lens; hidden (data-present="0") when not playing */
.mva__bead { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.55) 45%, rgba(63,90,48,.35));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 3px 8px -2px rgba(48,40,26,.45);
  transition: transform .32s var(--ease, ease), opacity .3s; }
.mva__bead[data-present="0"] { opacity: 0; }
.mva__bead.is-instant { transition: none; }
body.gl .mva__bead { background: none; box-shadow: none; transition: none; }

/* caption bar */
.mva__bar { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; margin-top: 12px; min-height: 40px; }
.mva__play { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 17px 0 14px; border-radius: 19px;
  border: 1px solid rgba(63, 90, 48, .55); color: var(--moss, #3F5A30); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; transition: background-color .25s, border-color .25s; }
.mva__play:hover { background-color: rgba(63, 90, 48, .07); border-color: var(--moss, #3F5A30); }
.mva__tri { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.mva.is-playing .mva__tri { width: 8px; height: 8px; border: 0; background: currentColor; border-radius: 1.5px; }
.mva__play[hidden] { display: none; }
.mva__capbox { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mva__eyebrow { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; line-height: 1.3; letter-spacing: 0;
  text-transform: none; color: var(--muted, #57554E); }
.mva__cap { font-size: 14.5px; line-height: 1.38; font-weight: 500; letter-spacing: -0.01em; color: var(--ink, #1C1F1C); text-wrap: pretty; }
.mva:not([data-cap]) .mva__cap { color: var(--muted, #57554E); font-weight: 400; }
.mva[data-cap="node"] .mva__eyebrow { text-transform: none; letter-spacing: -0.01em; font-size: 11.5px; }

/* ---------- phone and reduced motion: a vertical list ---------- */
.mva[data-mode="list"] { max-width: 358px; }
.mva[data-mode="list"] .mva__fig { display: block; }
.mva[data-mode="list"] .mva__wires, .mva[data-mode="list"] .mva__bead, .mva[data-mode="list"] .mva__bar { display: none; }
.mva[data-mode="list"] .mva__out { padding-top: 0; margin-bottom: 10px; }
.mva[data-mode="list"] .mva__slab { padding: 14px 12px 12px; border-radius: 24px; }
.mva[data-mode="list"] .mva__acct { margin-bottom: 4px; }
.mva[data-mode="list"] .mva__row { flex-direction: column; gap: 8px; align-items: stretch; }
.mva[data-mode="list"] .mva__group { padding: 0; margin: 0; border: 0; }
.mva[data-mode="list"] .mva__group > .mva__gh { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
  white-space: normal; display: block; margin: 14px 2px 8px; font-size: 12px; font-weight: 600; color: var(--muted, #57554E); }
.mva[data-mode="list"] .mva__node:not(.mva__socket) { grid-template-columns: auto 1fr; align-items: start; row-gap: 2px; min-height: 0;
  padding: 11px 12px 11px 11px; }
.mva[data-mode="list"] .mva__icons { grid-row: 1 / span 3; padding-top: 1px; }
.mva[data-mode="list"] .mva__label { grid-column: 2; grid-row: 1; }
.mva[data-mode="list"] .mva__aws, .mva[data-mode="list"] .mva__sub { grid-column: 2; grid-row: 2; }
.mva[data-mode="list"] .mva__why { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
  white-space: normal; grid-column: 2; grid-row: 3; margin-top: 3px; font-size: 13px; line-height: 1.38; color: var(--muted, #57554E); }
.mva[data-mode="list"] .mva__node--app .mva__label, .mva[data-mode="list"] .mva__node--app .mva__sub,
.mva[data-mode="list"] .mva__node--app .mva__why { grid-column: 1 / -1; }
.mva[data-mode="list"] .mva__item--agent { width: auto; display: block; position: relative; min-height: 84px; padding: 4px 0 4px 6px; }
.mva[data-mode="list"] .mva__node.mva__socket { width: 56px; height: 56px; margin-top: 10px; }
.mva[data-mode="list"] .mva__agentlab { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); width: 252px;
  white-space: normal; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: start; }
.mva[data-mode="list"] .mva__agentlab .mva__label { grid-column: 2; grid-row: 1; }
.mva[data-mode="list"] .mva__agentlab .mva__icons { grid-column: 1; grid-row: 1 / span 3; }
.mva[data-mode="list"] .mva__node.is-lift { transform: none; }
.mva[data-mode="list"] .mva__agentlab .mva__aws { grid-column: 2; grid-row: 2; }
.mva[data-mode="list"] .mva__agentlab .mva__why { grid-column: 2; grid-row: 3; }
.mva[data-mode="list"] .mva__steps { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
  white-space: normal; margin-top: 18px; }
.mva[data-mode="list"] .mva__steps > .mva__gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 2px 6px; font-size: 13px; font-weight: 600; color: var(--ink, #1C1F1C); }
.mva__simtag { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--muted, #57554E); }
.mva__stepi { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 7px 2px; font-size: 14.5px; line-height: 1.4;
  border-top: 1px solid rgba(28, 31, 28, .10); }
.mva__stepn { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.75; color: var(--moss, #3F5A30); }