---
/**
 * Animated multi-tenant isolation diagram.
 * Shows two tenant cards (A: pink, B: blue) each with QueueGroup,
 * three queue boxes, and isolation features.
 * Shared infrastructure bar at the bottom with dashed connections.
 */
---

<div class="mt-wrap">
  <!-- Desktop layout -->
  <div class="mt-desktop">
    <div class="mt-tenants">
      <!-- Tenant A -->
      <div class="mt-card mt-card-a">
        <div class="mt-card-header">
          <span class="mt-card-title">TENANT A</span>
          <span class="mt-tag mt-tag-pink">isolated</span>
        </div>
        <div class="mt-qg-label">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
            <line x1="8" y1="21" x2="16" y2="21"/>
            <line x1="12" y1="17" x2="12" y2="21"/>
          </svg>
          <code>QueueGroup('tenant-a')</code>
        </div>
        <div class="mt-queues">
          <div class="mt-queue mt-q-pink">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
              <polyline points="22,6 12,13 2,6"/>
            </svg>
            <span>emails</span>
          </div>
          <div class="mt-queue mt-q-pink">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
              <polyline points="14 2 14 8 20 8"/>
            </svg>
            <span>reports</span>
          </div>
          <div class="mt-queue mt-q-pink">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
            </svg>
            <span>webhooks</span>
          </div>
        </div>
        <ul class="mt-features">
          <li>Isolated namespace</li>
          <li>Independent pause/resume</li>
          <li>Separate DLQ</li>
          <li>Own rate limits</li>
        </ul>
        <div class="mt-card-pulse mt-pulse-pink"></div>
      </div>

      <!-- Tenant B -->
      <div class="mt-card mt-card-b">
        <div class="mt-card-header">
          <span class="mt-card-title">TENANT B</span>
          <span class="mt-tag mt-tag-blue">isolated</span>
        </div>
        <div class="mt-qg-label">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
            <line x1="8" y1="21" x2="16" y2="21"/>
            <line x1="12" y1="17" x2="12" y2="21"/>
          </svg>
          <code>QueueGroup('tenant-b')</code>
        </div>
        <div class="mt-queues">
          <div class="mt-queue mt-q-blue">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
              <polyline points="22,6 12,13 2,6"/>
            </svg>
            <span>emails</span>
          </div>
          <div class="mt-queue mt-q-blue">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
              <polyline points="14 2 14 8 20 8"/>
            </svg>
            <span>reports</span>
          </div>
          <div class="mt-queue mt-q-blue">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
            </svg>
            <span>webhooks</span>
          </div>
        </div>
        <ul class="mt-features">
          <li>Isolated namespace</li>
          <li>Independent pause/resume</li>
          <li>Separate DLQ</li>
          <li>Own rate limits</li>
        </ul>
        <div class="mt-card-pulse mt-pulse-blue"></div>
      </div>
    </div>

    <!-- Dashed connectors from tenants to shared infra -->
    <div class="mt-connectors">
      <div class="mt-dashed-line mt-dline-a">
        <div class="mt-conn-dot mt-cd-a"></div>
      </div>
      <div class="mt-dashed-line mt-dline-b">
        <div class="mt-conn-dot mt-cd-b"></div>
      </div>
    </div>

    <!-- Shared infrastructure -->
    <div class="mt-shared">
      <div class="mt-shared-inner">
        <div class="mt-shared-icon">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <ellipse cx="12" cy="5" rx="9" ry="3"/>
            <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
          </svg>
        </div>
        <div class="mt-shared-text">
          <span class="mt-shared-title">SHARED INFRASTRUCTURE</span>
          <span class="mt-shared-sub">SQLite (single DB, prefixed keys)</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile vertical layout -->
  <div class="mt-mobile">
    <div class="mt-mcard mt-mcard-a">
      <div class="mt-card-header">
        <span class="mt-card-title">TENANT A</span>
        <span class="mt-tag mt-tag-pink">isolated</span>
      </div>
      <div class="mt-qg-label">
        <code>QueueGroup('tenant-a')</code>
      </div>
      <div class="mt-queues mt-queues-col">
        <div class="mt-queue mt-q-pink"><span>emails</span></div>
        <div class="mt-queue mt-q-pink"><span>reports</span></div>
        <div class="mt-queue mt-q-pink"><span>webhooks</span></div>
      </div>
    </div>

    <div class="mt-mvconn">
      <div class="mt-mvline"></div>
      <div class="mt-mvdot mt-mvd-a"></div>
    </div>

    <div class="mt-mshared">
      <div class="mt-shared-icon">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <ellipse cx="12" cy="5" rx="9" ry="3"/>
          <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
          <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
        </svg>
      </div>
      <span class="mt-shared-title" style="font-size:0.75rem;">SHARED INFRASTRUCTURE</span>
      <span class="mt-shared-sub">SQLite (prefixed keys)</span>
    </div>

    <div class="mt-mvconn">
      <div class="mt-mvline"></div>
      <div class="mt-mvdot mt-mvd-b"></div>
    </div>

    <div class="mt-mcard mt-mcard-b">
      <div class="mt-card-header">
        <span class="mt-card-title">TENANT B</span>
        <span class="mt-tag mt-tag-blue">isolated</span>
      </div>
      <div class="mt-qg-label">
        <code>QueueGroup('tenant-b')</code>
      </div>
      <div class="mt-queues mt-queues-col">
        <div class="mt-queue mt-q-blue"><span>emails</span></div>
        <div class="mt-queue mt-q-blue"><span>reports</span></div>
        <div class="mt-queue mt-q-blue"><span>webhooks</span></div>
      </div>
    </div>
  </div>
</div>

<style>
  /* ===== Container ===== */
  .mt-wrap {
    margin: 1.5rem 0;
    padding: 2rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--sl-color-hairline);
    background: var(--sl-color-bg-sidebar);
    overflow-x: auto;
  }

  :root[data-theme='dark'] .mt-wrap {
    background: rgba(12, 12, 15, 0.8);
    border-color: rgba(255, 255, 255, 0.06);
  }

  /* ===== Desktop layout ===== */
  .mt-desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .mt-mobile { display: none; }

  .mt-tenants {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    width: 100%;
    max-width: 720px;
  }

  /* ===== Tenant cards ===== */
  .mt-card {
    flex: 1;
    max-width: 320px;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1.5px solid var(--sl-color-hairline);
    background: var(--sl-color-bg);
    position: relative;
    overflow: hidden;
    animation: mtFadeIn 0.5s ease-out both;
  }

  :root[data-theme='dark'] .mt-card {
    background: rgba(17, 17, 22, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .mt-card-a { animation-delay: 0s; }
  .mt-card-b { animation-delay: 0.15s; }

  @keyframes mtFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Animated border pulse overlay */
  .mt-card-pulse {
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    animation: mtPulse 3.5s ease-in-out infinite;
  }

  .mt-pulse-pink {
    border: 2px solid #ec4899;
  }

  :root[data-theme='dark'] .mt-pulse-pink {
    border-color: #f9a8d4;
  }

  .mt-pulse-blue {
    border: 2px solid #3b82f6;
    animation-delay: 1.75s;
  }

  :root[data-theme='dark'] .mt-pulse-blue {
    border-color: #93c5fd;
  }

  @keyframes mtPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1); }
  }

  .mt-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .mt-card-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sl-color-text);
    letter-spacing: 0.05em;
  }

  .mt-tag {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
  }

  .mt-tag-pink {
    color: #ec4899;
    background: rgba(236, 72, 153, 0.1);
  }

  :root[data-theme='dark'] .mt-tag-pink {
    color: #f9a8d4;
    background: rgba(249, 168, 212, 0.1);
  }

  .mt-tag-blue {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
  }

  :root[data-theme='dark'] .mt-tag-blue {
    color: #93c5fd;
    background: rgba(147, 197, 253, 0.1);
  }

  .mt-qg-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    color: var(--sl-color-gray-3);
  }

  .mt-qg-label code {
    font-size: 0.7rem;
    font-family: var(--sl-font-mono);
    color: var(--sl-color-gray-3);
    background: var(--sl-color-bg-sidebar);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--sl-color-hairline);
  }

  :root[data-theme='dark'] .mt-qg-label code {
    background: rgba(9, 9, 11, 0.6);
    border-color: rgba(255, 255, 255, 0.06);
  }

  /* ===== Queue boxes ===== */
  .mt-queues {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
  }

  .mt-queue {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--sl-color-hairline);
    background: var(--sl-color-bg-sidebar);
    flex: 1;
  }

  :root[data-theme='dark'] .mt-queue {
    background: rgba(9, 9, 11, 0.6);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .mt-queue span {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--sl-color-text);
  }

  .mt-q-pink {
    color: #ec4899;
    border-color: rgba(236, 72, 153, 0.15);
  }

  :root[data-theme='dark'] .mt-q-pink {
    color: #f9a8d4;
    border-color: rgba(249, 168, 212, 0.12);
  }

  .mt-q-blue {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.15);
  }

  :root[data-theme='dark'] .mt-q-blue {
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.12);
  }

  /* ===== Feature list ===== */
  .mt-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mt-features li {
    font-size: 0.65rem;
    color: var(--sl-color-gray-3);
    padding-left: 0.9rem;
    position: relative;
  }

  .mt-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sl-color-hairline);
  }

  .mt-card-a .mt-features li::before {
    background: rgba(236, 72, 153, 0.4);
  }

  :root[data-theme='dark'] .mt-card-a .mt-features li::before {
    background: rgba(249, 168, 212, 0.35);
  }

  .mt-card-b .mt-features li::before {
    background: rgba(59, 130, 246, 0.4);
  }

  :root[data-theme='dark'] .mt-card-b .mt-features li::before {
    background: rgba(147, 197, 253, 0.35);
  }

  /* ===== Dashed connectors ===== */
  .mt-connectors {
    display: flex;
    justify-content: center;
    gap: 8rem;
    height: 40px;
    position: relative;
    width: 100%;
    max-width: 720px;
  }

  .mt-dashed-line {
    position: relative;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
      to bottom,
      var(--sl-color-hairline) 0px,
      var(--sl-color-hairline) 4px,
      transparent 4px,
      transparent 8px
    );
  }

  :root[data-theme='dark'] .mt-dashed-line {
    background: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(255, 255, 255, 0.1) 4px,
      transparent 4px,
      transparent 8px
    );
  }

  .mt-conn-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: -3px;
  }

  .mt-cd-a {
    background: #ec4899;
    box-shadow: 0 0 6px rgba(236, 72, 153, 0.5);
    animation: mtConnDot 3.5s ease-in-out infinite;
  }

  :root[data-theme='dark'] .mt-cd-a {
    background: #f9a8d4;
    box-shadow: 0 0 8px rgba(249, 168, 212, 0.5);
  }

  .mt-cd-b {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
    animation: mtConnDot 3.5s ease-in-out infinite 1s;
  }

  :root[data-theme='dark'] .mt-cd-b {
    background: #93c5fd;
    box-shadow: 0 0 8px rgba(147, 197, 253, 0.5);
  }

  @keyframes mtConnDot {
    0% { top: -3px; opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: calc(100% - 3px); opacity: 0; }
  }

  /* ===== Shared infrastructure ===== */
  .mt-shared {
    width: 100%;
    max-width: 720px;
    animation: mtFadeIn 0.5s ease-out both 0.3s;
  }

  .mt-shared-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    border: 1.5px dashed var(--sl-color-hairline);
    background: var(--sl-color-bg);
    justify-content: center;
  }

  :root[data-theme='dark'] .mt-shared-inner {
    background: rgba(17, 17, 22, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .mt-shared-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-color-bg-sidebar);
    color: var(--sl-color-gray-3);
    border: 1px solid var(--sl-color-hairline);
  }

  :root[data-theme='dark'] .mt-shared-icon {
    background: rgba(9, 9, 11, 0.6);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .mt-shared-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .mt-shared-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sl-color-text);
    letter-spacing: 0.04em;
  }

  .mt-shared-sub {
    font-size: 0.65rem;
    color: var(--sl-color-gray-3);
  }

  /* ===== Mobile layout ===== */
  .mt-mobile {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .mt-mcard {
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    border: 1.5px solid var(--sl-color-hairline);
    background: var(--sl-color-bg);
  }

  :root[data-theme='dark'] .mt-mcard {
    background: rgba(17, 17, 22, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .mt-mcard-a { border-color: rgba(236, 72, 153, 0.2); }
  :root[data-theme='dark'] .mt-mcard-a { border-color: rgba(249, 168, 212, 0.15); }
  .mt-mcard-b { border-color: rgba(59, 130, 246, 0.2); }
  :root[data-theme='dark'] .mt-mcard-b { border-color: rgba(147, 197, 253, 0.15); }

  .mt-queues-col {
    flex-direction: column;
  }

  .mt-queues-col .mt-queue {
    flex: none;
  }

  .mt-mshared {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    border: 1.5px dashed var(--sl-color-hairline);
    background: var(--sl-color-bg);
    width: 100%;
    justify-content: center;
  }

  :root[data-theme='dark'] .mt-mshared {
    background: rgba(17, 17, 22, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .mt-mvconn {
    position: relative;
    height: 28px;
    width: 2px;
    margin: 0 auto;
    background: repeating-linear-gradient(
      to bottom,
      var(--sl-color-hairline) 0px,
      var(--sl-color-hairline) 4px,
      transparent 4px,
      transparent 8px
    );
  }

  :root[data-theme='dark'] .mt-mvconn {
    background: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(255, 255, 255, 0.1) 4px,
      transparent 4px,
      transparent 8px
    );
  }

  .mt-mvdot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: -3px;
    animation: mtConnDot 3.5s ease-in-out infinite;
  }

  .mt-mvd-a {
    background: #ec4899;
    box-shadow: 0 0 6px rgba(236, 72, 153, 0.5);
  }

  :root[data-theme='dark'] .mt-mvd-a {
    background: #f9a8d4;
    box-shadow: 0 0 8px rgba(249, 168, 212, 0.5);
  }

  .mt-mvd-b {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
    animation-delay: 1s;
  }

  :root[data-theme='dark'] .mt-mvd-b {
    background: #93c5fd;
    box-shadow: 0 0 8px rgba(147, 197, 253, 0.5);
  }

  /* ===== Responsive ===== */
  @media (max-width: 700px) {
    .mt-desktop { display: none; }
    .mt-mobile { display: flex; }
    .mt-wrap { padding: 1.25rem 1rem; }
  }
</style>
