/* ============================================================================
   virt-stack — layered stack diagram (see assets/virt-stack.js for the data)
   Self-contained dark surface so it renders the same on any mdBook theme.
   ========================================================================== */

.vs {
  --vs-bg:     #0e131b;
  --vs-bg2:    #131a24;
  --vs-line:   #263242;
  --vs-line2:  #35465b;
  --vs-text:   #e6edf3;
  --vs-muted:  #8b9bb0;
  --vs-accent: #5b8def;

  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--vs-text);
  background: var(--vs-bg);
  border: 1px solid var(--vs-line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin: 22px 0;
  overflow: hidden;
}
.vs, .vs * { box-sizing: border-box; }   /* the host is a fullscreen root too */
.vs code { background: rgba(255,255,255,.06); border-radius: 4px; padding: 0 4px; font-size: .92em; color: #cfe0ff; }

.vs-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vs-muted); margin: 0 0 4px; }
.vs-sub   { font-size: 12.5px; color: var(--vs-muted); margin: 0 0 16px; line-height: 1.5; }

/* ---------- toolbar -------------------------------------------------------- */
.vs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vs-bar-hint { font-size: 11px; color: var(--vs-muted); }
.vs-zoom { display: flex; align-items: center; gap: 4px; }
.vs-zoom-val { font: 600 11px/1 ui-monospace, monospace; color: var(--vs-muted); min-width: 38px; text-align: center; }
.vs-btn {
  background: var(--vs-bg2); color: var(--vs-text);
  border: 1px solid var(--vs-line); border-radius: 7px;
  width: 26px; height: 24px; padding: 0; cursor: pointer;
  font: 600 12px/1 system-ui, sans-serif;
}
.vs-btn-wide { width: auto; padding: 0 8px; font-size: 11px; }
.vs-btn:hover { border-color: var(--vs-accent); color: var(--vs-accent); }

/* ---------- viewport / stage ----------------------------------------------- */
.vs-viewport { cursor: grab; }
.vs-viewport {
  overflow: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--vs-line2) transparent;
}
.vs.vs-dragging, .vs.vs-dragging .vs-viewport { cursor: grabbing; user-select: none; }
.vs-stage {
  position: relative; display: flex; flex-direction: column;
  gap: 74px;                       /* vertical room between layers for the arrows */
  width: max-content; min-width: 100%; padding: 4px 4px 8px;
  transform-origin: top left; will-change: transform;
}
.vs-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.vs-wire  { fill: none; stroke: var(--vs-line2); stroke-width: 1.3; opacity: .55; transition: stroke .15s, opacity .15s, stroke-width .15s; }
.vs-wire-dashed { stroke-dasharray: 4 4; }
.vs-wire.vs-dim  { opacity: .08; }
.vs-wire.vs-hot  { stroke: var(--vs-accent); stroke-width: 2; opacity: 1; }
.vs-wires marker#vs-arrow path     { fill: var(--vs-line2); }
.vs-wires marker#vs-arrow-hot path { fill: var(--vs-accent); }

/* ---------- layers --------------------------------------------------------- */
.vs-layer { position: relative; }
.vs-layer-head { margin-bottom: 14px; text-align: center; }
.vs-layer-name { font: 700 11px/1.3 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-accent); }
.vs-layer-sub  { font-size: 11.5px; color: var(--vs-muted); line-height: 1.45; max-width: 82ch; margin: 2px auto 0; }

/* one row per layer: a wrapped layer forces arrows straight through its own
   boxes, which is exactly the confusing case. Width is handled by zoom/Fit. */
.vs-row { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; justify-content: center; gap: 22px; }

/* ---------- nodes ---------------------------------------------------------- */
.vs-node {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--vs-bg2);
  border: 1px solid var(--vs-line);
  border-left: 3px solid var(--c, var(--vs-line2));
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer; outline: none;
  transition: border-color .15s, background .15s, opacity .15s, transform .15s;
}
.vs-node:hover, .vs-node:focus-visible { border-color: var(--vs-line2); transform: translateY(-1px); }
.vs-node-label { font-size: 13px; font-weight: 600; }
.vs-node-tag {
  font: 600 10px/1 ui-monospace, monospace; letter-spacing: .04em;
  color: var(--vs-muted); border: 1px solid var(--vs-line2);
  border-radius: 999px; padding: 3px 6px; white-space: nowrap;
}
.vs-c0 { --c:#5b8def; } .vs-c1 { --c:#4bb3e0; } .vs-c2 { --c:#a78bfa; } .vs-c3 { --c:#8b9bb0; }
.vs-c4 { --c:#37b6a5; } .vs-c5 { --c:#e0a458; } .vs-c6 { --c:#e0679b; }

.vs-node.vs-dim { opacity: .25; }
.vs-node.vs-hot { border-color: var(--c); }
.vs-node.vs-sel { background: color-mix(in srgb, var(--c) 18%, var(--vs-bg2)); border-color: var(--c); }

/* ---------- fullscreen ------------------------------------------------------
   The host element itself goes fullscreen, so it has to become a column that
   fills the screen and hands the leftover height to the viewport.

   NOTE: these are four separate rules on purpose. A browser that does not know
   one selector in a comma-separated list throws away the WHOLE rule, and the
   :fullscreen / :-webkit-full-screen support matrix still varies — grouping
   them meant the layout silently vanished (nothing scrolled, nothing panned)
   wherever one alias was unknown. The .vs-fullscreen class, set from JS, works
   everywhere and is the one that actually carries the layout.                */
.vs.vs-fullscreen        { display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100%;
                           border-radius: 0; border: none; margin: 0; padding: 20px 24px 18px; }
.vs:fullscreen           { display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100%;
                           border-radius: 0; border: none; margin: 0; padding: 20px 24px 18px; }
.vs:-webkit-full-screen  { display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100%;
                           border-radius: 0; border: none; margin: 0; padding: 20px 24px 18px; }
.vs:-moz-full-screen     { display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100%;
                           border-radius: 0; border: none; margin: 0; padding: 20px 24px 18px; }

.vs.vs-fullscreen .vs-viewport { flex: 1 1 auto; min-height: 0; }
.vs.vs-fullscreen .vs-stage    { justify-content: center; }
.vs.vs-fullscreen .vs-detail   { flex: 0 0 auto; margin-top: 14px; }

/* ---------- detail bar ----------------------------------------------------- */
.vs-detail {
  margin-top: 20px; padding: 12px 14px; min-height: 76px;
  background: var(--vs-bg2); border: 1px solid var(--vs-line); border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; color: var(--vs-text);
}
.vs-hint { color: var(--vs-muted); }
.vs-detail-head { font-size: 13px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.vs-detail-body { color: #c9d4e2; }
.vs-detail-rel  { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 11.5px; color: var(--vs-muted); }
.vs-detail-rel b { color: var(--vs-accent); font-weight: 600; }

@media (max-width: 620px) {
  .vs { padding: 14px 12px; }
  .vs-bar-hint { display: none; }
}