/* ============================================================================
   net-diagrams — reusable, data-driven diagram engine for the Protocols pages
   Components: .packet-diagram  .handshake-seq  .decomposer
   Self-contained dark surface so it renders consistently on any mdBook theme.
   ========================================================================== */

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

  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--nd-text);
  background: var(--nd-bg);
  border: 1px solid var(--nd-line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin: 22px 0;
  overflow: hidden;
}
.nd * { box-sizing: border-box; }
.nd-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nd-muted); margin: 0 0 4px; }
.nd-sub   { font-size: 12.5px; color: var(--nd-muted); margin: 0 0 14px; line-height: 1.5; }

/* ---------- shared palette (assigned by index) ---------------------------- */
.nd-c0 { --f:#5b8def; } .nd-c1 { --f:#e0679b; } .nd-c2 { --f:#37b6a5; }
.nd-c3 { --f:#e0a458; } .nd-c4 { --f:#a78bfa; } .nd-c5 { --f:#4dbb6c; }
.nd-c6 { --f:#e0655f; } .nd-c7 { --f:#4bb3e0; }

/* ============================================================================
   PacketDiagram
   ========================================================================== */
.packet-diagram .nd-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:12px; font-size:12.5px; }
.packet-diagram .nd-crumb { color: var(--nd-accent); cursor:pointer; padding:2px 8px; border-radius:6px; border:1px solid transparent; }
.packet-diagram .nd-crumb:hover { background: var(--nd-bg2); border-color: var(--nd-line); }
.packet-diagram .nd-crumb.current { color: var(--nd-text); cursor:default; font-weight:600; }
.packet-diagram .nd-crumb.current:hover { background:none; border-color:transparent; }
.packet-diagram .nd-sep { color: var(--nd-line2); }

.packet-diagram .nd-stage { display:flex; flex-direction:column; gap:6px; }
.packet-diagram .nd-row { display:flex; gap:6px; align-items:stretch; }
.packet-diagram .nd-gutter { flex:0 0 34px; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; font:600 10.5px ui-monospace,monospace; color:var(--nd-muted); }

.packet-diagram .nd-field {
  flex: 1 1 0; min-width: 74px;
  position: relative;
  background: color-mix(in srgb, var(--f) 15%, transparent);
  border: 1.5px solid var(--f);
  border-radius: 8px;
  padding: 10px 10px 8px;
  display:flex; flex-direction:column; gap:3px; justify-content:center;
  min-height: 54px;
  animation: nd-fieldin .28s ease both;
}
.packet-diagram .nd-field-name { font-size:12.5px; font-weight:600; line-height:1.25; }
.packet-diagram .nd-field-size { font-size:10.5px; color:var(--nd-muted); font-family:ui-monospace,monospace; }
.packet-diagram .nd-field.variable {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb,var(--f) 16%,transparent) 0 8px, transparent 8px 16px);
  border-style: dashed;
}
.packet-diagram .nd-field.has-children { cursor:pointer; }
.packet-diagram .nd-field.has-children::after {
  content: "⤢"; position:absolute; top:6px; right:8px; font-size:12px; color:var(--f); opacity:.85;
}
.packet-diagram .nd-field.has-children:hover { box-shadow: 0 0 0 3px color-mix(in srgb,var(--f) 30%,transparent); transform: translateY(-1px); }
.packet-diagram .nd-field.has-children:focus-visible { outline:2px solid var(--f); outline-offset:2px; }
.packet-diagram .nd-field-hint { font-size:9.5px; color:var(--f); font-weight:700; letter-spacing:.03em; text-transform:uppercase; margin-top:1px; }

.packet-diagram .nd-detail {
  margin-top:14px; padding:11px 13px; min-height:44px;
  background:var(--nd-bg2); border:1px solid var(--nd-line); border-left:3px solid var(--nd-accent); border-radius:8px;
  font-size:12.5px; line-height:1.55; color:var(--nd-muted);
}
.packet-diagram .nd-detail strong { color:var(--nd-text); }

@keyframes nd-fieldin { from { opacity:0; transform: translateY(6px) scale(.98); } to { opacity:1; transform:none; } }

/* ============================================================================
   HandshakeSequence
   ========================================================================== */
.handshake-seq .hs-toggle { display:inline-flex; gap:3px; padding:3px; background:var(--nd-bg2); border:1px solid var(--nd-line); border-radius:9px; margin-bottom:16px; }
.handshake-seq .hs-tab { border:none; background:none; color:var(--nd-muted); font:600 12px system-ui; padding:6px 14px; border-radius:6px; cursor:pointer; }
.handshake-seq .hs-tab .rtt { display:block; font-size:9.5px; font-weight:600; opacity:.7; }
.handshake-seq .hs-tab.active { background:var(--nd-accent); color:#fff; }

.handshake-seq .hs-stage { position:relative; }
.handshake-seq .hs-actors { display:flex; justify-content:space-between; margin-bottom:6px; }
.handshake-seq .hs-actor { font-size:12px; font-weight:700; padding:5px 12px; border-radius:7px; background:var(--nd-bg2); border:1px solid var(--nd-line2); }
.handshake-seq .hs-body { position:relative; padding:6px 0; }
/* the two vertical lifelines */
.handshake-seq .hs-body::before,
.handshake-seq .hs-body::after {
  content:""; position:absolute; top:0; bottom:0; width:2px; background:var(--nd-line); }
.handshake-seq .hs-body::before { left:15%; }
.handshake-seq .hs-body::after  { right:15%; }

.handshake-seq .hs-step { position:relative; height:52px; opacity:0; transition:opacity .25s; }
.handshake-seq .hs-step.shown { opacity:1; }
.handshake-seq .hs-line { position:absolute; top:50%; height:2px; background:var(--nd-line2); left:15%; right:15%; transform-origin:left; }
.handshake-seq .hs-step.rtl .hs-line { background:var(--nd-line2); }
.handshake-seq .hs-head { position:absolute; top:50%; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; transform:translateY(-50%); }
.handshake-seq .hs-step.ltr .hs-head { right:15%; border-left:8px solid var(--nd-line2); }
.handshake-seq .hs-step.rtl .hs-head { left:15%;  border-right:8px solid var(--nd-line2); }
.handshake-seq .hs-label { position:absolute; top:calc(50% - 22px); left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:11.5px; font-weight:600; padding:3px 10px; background:var(--nd-bg); border:1px solid var(--nd-line2); border-radius:20px; }
.handshake-seq .hs-step.secure .hs-line, .handshake-seq .hs-step.secure .hs-head { }
.handshake-seq .hs-step.secure .hs-label { border-color: color-mix(in srgb,var(--nd-lock) 55%,transparent); }
.handshake-seq .hs-lock { color:var(--nd-lock); margin-right:4px; }
.handshake-seq .hs-step.current .hs-label { background:var(--nd-accent); border-color:var(--nd-accent); color:#fff; box-shadow:0 3px 14px color-mix(in srgb,var(--nd-accent) 45%,transparent); }
.handshake-seq .hs-step.current.secure .hs-label { background:var(--nd-lock); border-color:var(--nd-lock); color:#06251a; box-shadow:0 3px 14px color-mix(in srgb,var(--nd-lock) 45%,transparent); }

.handshake-seq .hs-packet { position:absolute; top:calc(50% - 9px); width:16px; height:16px; border-radius:5px; background:var(--nd-accent); box-shadow:0 0 12px var(--nd-accent); opacity:0; }
.handshake-seq .hs-step.secure .hs-packet { background:var(--nd-lock); box-shadow:0 0 12px var(--nd-lock); }
.handshake-seq .hs-step.animate.ltr .hs-packet { animation: hs-fly-ltr .7s ease both; }
.handshake-seq .hs-step.animate.rtl .hs-packet { animation: hs-fly-rtl .7s ease both; }
@keyframes hs-fly-ltr { 0%{left:15%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:calc(85% - 16px);opacity:0} }
@keyframes hs-fly-rtl { 0%{left:calc(85% - 16px);opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:15%;opacity:0} }

.handshake-seq .hs-divider { position:relative; height:30px; }
.handshake-seq .hs-divider span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--nd-lock); background:var(--nd-bg); padding:3px 12px; border:1px dashed color-mix(in srgb,var(--nd-lock) 55%,transparent); border-radius:20px; }
.handshake-seq .hs-divider::before { content:""; position:absolute; top:50%; left:15%; right:15%; border-top:1px dashed color-mix(in srgb,var(--nd-lock) 40%,transparent); }

.handshake-seq .hs-controls { display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.handshake-seq .hs-btn { border:1px solid var(--nd-line2); background:var(--nd-bg2); color:var(--nd-text); font:600 12px system-ui; padding:7px 13px; border-radius:8px; cursor:pointer; }
.handshake-seq .hs-btn:hover { border-color:var(--nd-accent); }
.handshake-seq .hs-btn.primary { background:var(--nd-accent); border-color:var(--nd-accent); color:#fff; }
.handshake-seq .hs-progress { font:600 11.5px ui-monospace,monospace; color:var(--nd-muted); margin-left:auto; }
.handshake-seq .hs-caption { margin-top:12px; padding:11px 13px; min-height:46px; background:var(--nd-bg2); border:1px solid var(--nd-line); border-left:3px solid var(--nd-accent); border-radius:8px; font-size:12.5px; line-height:1.55; color:var(--nd-muted); }
.handshake-seq .hs-caption strong { color:var(--nd-text); }

/* ============================================================================
   Decomposer
   ========================================================================== */
.decomposer .dc-token { display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; margin-bottom:4px; }
.decomposer .dc-part { position:relative; cursor:pointer; border-radius:8px; padding:9px 12px 8px; border:1.5px solid var(--f); background:color-mix(in srgb,var(--f) 15%,transparent);
  display:flex; flex-direction:column; gap:2px; text-align:center; animation:nd-fieldin .3s ease both; transition:transform .15s, box-shadow .15s; }
.decomposer .dc-part:hover, .decomposer .dc-part.active { transform:translateY(-2px); box-shadow:0 0 0 3px color-mix(in srgb,var(--f) 30%,transparent); }
.decomposer .dc-val   { font:700 13px ui-monospace,monospace; }
.decomposer .dc-role  { font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--f); }
.decomposer .dc-part.muted { --f:#54637a; opacity:.7; cursor:default; }
.decomposer .dc-part.muted:hover { transform:none; box-shadow:none; }
.decomposer .dc-detail { margin-top:14px; padding:11px 13px; min-height:44px; background:var(--nd-bg2); border:1px solid var(--nd-line); border-left:3px solid var(--nd-accent); border-radius:8px; font-size:12.5px; line-height:1.55; color:var(--nd-muted); }
.decomposer .dc-detail strong { color:var(--nd-text); }

/* ============================================================================
   ResolutionFlow
   ========================================================================== */
.resolution-flow .rf-strip { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:16px; }
.resolution-flow .rf-node { font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:8px; background:var(--nd-bg2); border:1px solid var(--nd-line2); color:var(--nd-muted); transition:all .2s; }
.resolution-flow .rf-node.active-from { border-color:var(--nd-accent); color:#fff; box-shadow:0 0 0 2px color-mix(in srgb,var(--nd-accent) 30%,transparent); }
.resolution-flow .rf-node.active-to { border-color:var(--nd-lock); color:#fff; box-shadow:0 0 0 2px color-mix(in srgb,var(--nd-lock) 30%,transparent); }
.resolution-flow .rf-conn { color:var(--nd-line2); font-size:11px; }

.resolution-flow .rf-steps { display:flex; flex-direction:column; gap:6px; }
.resolution-flow .rf-step { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 11px; border-radius:9px;
  background:var(--nd-bg2); border:1px solid var(--nd-line); border-left:3px solid var(--nd-line2);
  opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s, box-shadow .2s; }
.resolution-flow .rf-step.shown { opacity:1; transform:none; }
.resolution-flow .rf-step.current { box-shadow:0 3px 16px rgba(0,0,0,.4); border-color:var(--nd-line2); }
.resolution-flow .rf-badge { flex:0 0 22px; height:22px; border-radius:50%; background:var(--nd-line2); color:#fff; font:700 11px system-ui; display:flex; align-items:center; justify-content:center; }
.resolution-flow .rf-chip { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:6px; background:var(--nd-bg); border:1px solid var(--nd-line2); }
.resolution-flow .rf-arrow { color:var(--nd-muted); }
.resolution-flow .rf-label { font-size:11.5px; color:var(--nd-text); margin-left:4px; font-family:ui-monospace,monospace; }
.resolution-flow .rf-query    { border-left-color:#5b8def; } .resolution-flow .rf-query    .rf-badge { background:#5b8def; }
.resolution-flow .rf-referral { border-left-color:#e0a458; } .resolution-flow .rf-referral .rf-badge { background:#e0a458; }
.resolution-flow .rf-answer   { border-left-color:#4dbb6c; } .resolution-flow .rf-answer   .rf-badge { background:#4dbb6c; }
.resolution-flow .rf-cache    { border-left-color:#37b6a5; } .resolution-flow .rf-cache    .rf-badge { background:#37b6a5; }

/* ---------- small responsive ---------- */
@media (max-width:600px) {
  .packet-diagram .nd-field { min-width:60px; }
  .handshake-seq .hs-label { font-size:10.5px; padding:2px 7px; }
}