.article-tech-viz {
  --viz-bg: #f4f4f3;
  --viz-panel: #fafaf9;
  --viz-panel-strong: #ffffff;
  --viz-ink: #25282b;
  --viz-copy: #4b5157;
  --viz-muted: #71777d;
  --viz-line: rgba(37, 40, 43, 0.15);
  --viz-line-strong: rgba(37, 40, 43, 0.27);
  margin: 2.25rem 0 2.75rem;
  padding: 1.1rem;
  overflow: hidden;
  border: 1px solid var(--viz-line);
  border-radius: 0.65rem;
  background: var(--viz-bg);
  color: var(--viz-ink);
  font-family: inherit;
}

.article-tech-viz,
.article-tech-viz * {
  box-sizing: border-box;
}

.article-tech-viz code {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 450 !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Sign-in configuration for both automakers */
.identity-viz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.9rem;
}

.identity-viz-node,
.identity-viz-core {
  min-width: 0;
  border: 1px solid var(--viz-line);
  border-radius: 0.48rem;
  background: var(--viz-panel);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.identity-viz-node {
  padding: 1rem;
}

.identity-viz-node > strong {
  display: block;
  color: var(--viz-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.identity-viz-host {
  display: block;
  margin-top: 0.72rem !important;
  color: var(--viz-copy) !important;
  font-size: 0.875rem !important;
  line-height: 1.5;
}

.identity-viz-route {
  display: block;
  margin-top: 0.35rem !important;
  color: var(--viz-muted) !important;
  font-size: 0.875rem !important;
  line-height: 1.45;
}

.identity-viz-merge {
  height: 2.7rem;
  grid-column: 1 / -1;
  background:
    linear-gradient(var(--viz-line-strong), var(--viz-line-strong)) 25% 0 / 1px 0.9rem no-repeat,
    linear-gradient(var(--viz-line-strong), var(--viz-line-strong)) 75% 0 / 1px 0.9rem no-repeat,
    linear-gradient(var(--viz-line-strong), var(--viz-line-strong)) 50% 0.9rem / 50% 1px no-repeat,
    linear-gradient(var(--viz-line-strong), var(--viz-line-strong)) 50% 0.9rem / 1px 1.8rem no-repeat;
}

.identity-viz-core {
  display: grid;
  width: min(100%, 32rem);
  margin: 0 auto;
  padding: 1rem;
  align-items: center;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  border-color: var(--viz-line-strong);
  background: var(--viz-panel-strong);
}

.identity-viz-core > strong {
  color: var(--viz-ink);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.3;
}

.identity-viz-core-meta {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
}

.identity-viz-core-meta code {
  color: var(--viz-copy) !important;
  font-size: 0.875rem !important;
  line-height: 1.4;
}

/* Request path at each layer */
.request-viz-layers {
  overflow: visible;
}

.request-viz-layer {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0.2rem 0;
  align-items: center;
  grid-template-columns: 5rem minmax(0, 1fr) 6.2rem;
  gap: 0.8rem;
}

.request-viz-layer + .request-viz-layer {
  margin-top: 1.9rem;
}

.request-viz-layer + .request-viz-layer::before {
  position: absolute;
  top: -1.5rem;
  left: 5.8rem;
  color: var(--viz-muted);
  content: '\2193';
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1;
}

.request-viz-layer > strong {
  color: var(--viz-ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.request-viz-layer > code {
  min-width: 0;
  color: var(--viz-copy) !important;
  font-size: 0.875rem !important;
  line-height: 1.5;
}

.request-viz-result {
  color: var(--viz-muted);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: right;
}

/* ConfigMgr form, schedule, script, and servlet */
.schedule-viz-layer {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--viz-line);
  border-radius: 0.48rem;
  background: var(--viz-panel);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.schedule-viz-layer--json {
  margin-top: 0.85rem;
}

.schedule-viz-layer--groovy {
  margin-top: 0.85rem;
  margin-left: 1rem;
}

.schedule-viz-layer.schedule-viz-layer--form {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.schedule-viz-layer--groovy {
  border-color: var(--viz-line-strong);
  background: var(--viz-panel-strong);
}

.schedule-viz-layer-head {
  display: grid;
  min-width: 0;
  align-items: baseline;
  grid-template-columns: minmax(8.5rem, 0.58fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.schedule-viz-layer-head > strong {
  color: var(--viz-ink);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
}

.schedule-viz-layer-head > code {
  min-width: 0;
  color: var(--viz-copy) !important;
  font-size: 0.875rem !important;
  line-height: 1.5;
}

.schedule-viz-actions {
  display: flex;
  margin-top: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.48rem;
}

.schedule-viz-actions span {
  color: var(--viz-copy);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.4;
}

.schedule-viz-actions span + span::before {
  margin-right: 0.48rem;
  color: var(--viz-muted);
  content: '\2192';
}

.schedule-viz-servlet {
  display: grid;
  margin-top: 0.9rem;
  padding: 0.85rem 0.9rem;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  border: 1px solid var(--viz-line-strong);
  border-radius: 0.4rem;
  background: var(--viz-bg);
}

.schedule-viz-servlet strong {
  color: var(--viz-ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.schedule-viz-servlet code {
  color: var(--viz-copy) !important;
  font-size: 0.875rem !important;
  line-height: 1.45;
  text-align: right;
}

@media (hover: hover) {
  .identity-viz-node:hover,
  .identity-viz-core:hover,
  .schedule-viz-layer:not(.schedule-viz-layer--form):hover {
    border-color: var(--viz-line-strong);
    background: var(--viz-panel-strong);
  }

}

@media (max-width: 700px) {
  .article-tech-viz {
    margin: 1.9rem 0 2.35rem;
    padding: 0.8rem;
    border-radius: 0.55rem;
  }

  .identity-viz-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }

  .identity-viz-merge {
    height: 2.1rem;
    grid-column: 1;
    background: linear-gradient(var(--viz-line-strong), var(--viz-line-strong)) 50% 0 / 1px 2.1rem no-repeat;
  }

  .identity-viz-core {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  .identity-viz-core-meta {
    justify-content: flex-start;
  }

  .request-viz-layer {
    padding: 0.1rem 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.42rem 0.75rem;
  }

  .request-viz-layer + .request-viz-layer {
    margin-top: 1.75rem;
  }

  .request-viz-layer + .request-viz-layer::before {
    top: -1.38rem;
    left: 0.15rem;
  }

  .request-viz-layer > code {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .request-viz-result {
    grid-column: 2;
    grid-row: 1;
  }

  .schedule-viz-layer {
    padding: 0.85rem;
  }

  .schedule-viz-layer--groovy {
    margin-left: 0.45rem;
  }

  .schedule-viz-layer-head,
  .schedule-viz-servlet {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .schedule-viz-servlet code {
    text-align: left;
  }
}

@media (prefers-color-scheme: dark) {
  .article-tech-viz {
    --viz-bg: #202225;
    --viz-panel: #25282b;
    --viz-panel-strong: #2a2d31;
    --viz-ink: #eff0f1;
    --viz-copy: #c7cbd0;
    --viz-muted: #999fa6;
    --viz-line: rgba(255, 255, 255, 0.1);
    --viz-line-strong: rgba(255, 255, 255, 0.2);
  }
}

/* Header banner: soften the cream paper against the dark page. */
@media (prefers-color-scheme: dark) { .article-banner img { filter: brightness(0.86) contrast(1.04); } }


/* Tooltip on "Automaker #1 and Automaker #2" (why they are unnamed). The card is
   positioned against the paragraph and opens just below the hovered line, so it
   overlays the text instead of reflowing it. Tap (focus) opens it on touch. */
.prose p:has(.article-tooltip) { position: relative; }
.prose .article-tooltip {
  text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: rgba(115, 115, 115, 0.9); cursor: help; outline: none;
}
.prose .article-tooltip:focus-visible { border-radius: 2px; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.45); }
.prose .article-tooltip-bubble {
  position: absolute; left: 0; right: 0; z-index: 30; display: block; max-width: 30rem;
  margin-top: 0.45rem; padding: 0.7rem 0.85rem; border: 1px solid #e5e5e5; border-radius: 0.5rem;
  background: #fff; color: #525252; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.28);
  font-size: 0.85rem; font-weight: 400; line-height: 1.5; text-decoration: none; cursor: auto;
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.prose .article-tooltip:hover .article-tooltip-bubble,
.prose .article-tooltip:focus .article-tooltip-bubble {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (prefers-color-scheme: dark) {
  .prose .article-tooltip { text-decoration-color: rgba(163, 163, 163, 0.9); }
  .prose .article-tooltip-bubble { border-color: #404040; background: #262626; color: #d4d4d4; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.7); }
}
@media (prefers-reduced-motion: reduce) { .prose .article-tooltip-bubble { transition: none; transform: none; } }