/* ==========================================================================
   diagrams.css — callouts, wire-format byte-field cells, shared legend,
   and figure/caption chrome for Mermaid (sequence/state) SVG.
   Wire diagrams use CSS classes (never inline fills) so this file is the
   single color key for every byte-layout in the book.
   ========================================================================== */

:root {
  /* diagram-only field hues (extend the book palette) */
  --wire-violet: #9a86e6;
  --wire-bg:     #0d131a;
  --wire-cell:   #18222d;
  --wire-stroke: #2b3947;
  --wire-ink:    #d3dde6;
  --wire-muted:  #7f8b98;
}

/* ==========================================================================
   figures & captions (shared by every diagram type)
   ========================================================================== */
.figure { margin: var(--s6) 0; }
.figure__frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s5);
  overflow-x: auto;
}
.figure--diagram .figure__frame { display: flex; justify-content: center; }
.figure--diagram svg { max-width: 100%; height: auto; font-family: var(--font-body); }
.figure__caption {
  display: flex; gap: .6rem; align-items: baseline;
  margin-top: var(--s3);
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.5;
}
.figure__num {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  color: var(--signal); white-space: nowrap; letter-spacing: .03em;
}
.figure__cite { font-family: var(--font-mono); font-size: .74rem; color: var(--muted-2); margin-left: auto;
  white-space: nowrap; }

/* ==========================================================================
   callouts — semantic instrument LEDs
   note = signal/cyan · practice = amber caution · warn = alert/red · spec = ink
   ========================================================================== */
.callout {
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted-2);
  background: var(--surface);
}
.callout__label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: var(--s2);
}
.callout__label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.callout p:last-child { margin-bottom: 0; }
.callout__tag {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .04em;
  color: var(--muted-2); text-transform: uppercase; margin-left: .4rem;
}

.callout--note     { border-left-color: var(--signal); background: color-mix(in srgb, var(--signal-wash) 55%, var(--surface)); }
.callout--note .callout__label { color: var(--signal); }
.callout--practice { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber-wash) 60%, var(--surface)); }
.callout--practice .callout__label { color: var(--amber); }
.callout--warn     { border-left-color: var(--alert); background: color-mix(in srgb, var(--alert-wash) 60%, var(--surface)); }
.callout--warn .callout__label { color: var(--alert); }
.callout--spec     { border-left-color: var(--ink-soft); background: var(--surface); }
.callout--spec .callout__label { color: var(--ink-soft); }

/* editorial vs normative marker used inline in "in practice" notes */
.editorial-tag {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  background: var(--amber-wash); padding: .05rem .35rem; border-radius: 3px; vertical-align: .08em;
}

/* ==========================================================================
   wire-format byte-field component (dark instrument panel)
   The Python generator (build/wire.py) emits these classes; hand-authored
   SVG wire diagrams must use them too.
   ========================================================================== */
.wire {
  margin: var(--s6) 0;
}
.wire__frame {
  background: var(--wire-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-lg);
  padding: var(--s5) var(--s5) var(--s4);
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}
.wire svg { display: block; margin: 0 auto; min-width: 320px; }

/* byte-field cell primitives — filled by class, not inline */
.bf-cell        { fill: var(--wire-cell); stroke: var(--wire-stroke); stroke-width: 1; }
.bf-cell--fixed     { fill: #1a2733; stroke: #33445a; }
.bf-cell--varint    { fill: color-mix(in srgb, var(--amber) 26%, var(--wire-cell)); stroke: var(--amber-bright); }
.bf-cell--len       { fill: color-mix(in srgb, var(--signal) 30%, var(--wire-cell)); stroke: var(--signal-bright); }
.bf-cell--val       { fill: color-mix(in srgb, var(--wire-violet) 26%, var(--wire-cell)); stroke: var(--wire-violet); }
.bf-cell--protected { fill: color-mix(in srgb, var(--ok) 26%, var(--wire-cell)); stroke: #5cc98a; }

.bf-label  { fill: var(--wire-ink); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.bf-sub    { fill: var(--wire-muted); font-family: var(--font-mono); font-size: 10.5px; }
.bf-bits   { fill: var(--signal-bright); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; }
.bf-hex    { fill: var(--amber-bright); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }

/* bit/byte offset ruler (the signature graticule, in-SVG) */
.bf-ruler-tick { stroke: var(--wire-stroke); stroke-width: 1; }
.bf-ruler-tick--major { stroke: var(--signal-bright); }
.bf-ruler-num  { fill: var(--wire-muted); font-family: var(--font-mono); font-size: 10px; }
.bf-ruler-cap  { fill: var(--wire-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }

/* ==========================================================================
   encapsulation stack — nested protocol layers (packet > frame > h3 > qpack)
   ========================================================================== */
.wire--stack .wire__frame { padding-top: var(--s4); }
.wire-stack__layer { margin: 0; }
.wire-stack__tag {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .3rem; font-family: var(--font-mono); font-size: .75rem;
}
.wire-stack__idx {
  color: var(--signal-bright); font-weight: 600; font-size: .66rem;
  border: 1px solid var(--panel-line); border-radius: 3px; padding: 0 .32rem;
  flex: none;
}
.wire-stack__name { color: var(--wire-ink); font-weight: 600; }
.wire-stack__note { color: var(--wire-muted); }

/* protocol ownership badge: which spec defines this layer */
.wire-stack__proto {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .1rem .42rem; border-radius: 3px; flex: none;
  border: 1px solid transparent; color: #0a1016;
}
.wire-stack__proto--net    { background: #8a94a0; color: #0a1016; }
.wire-stack__proto--quic  { background: var(--signal-bright); }
.wire-stack__proto--h3    { background: var(--amber-bright); }
.wire-stack__proto--qpack { background: var(--wire-violet); }
.wire-stack__proto--tls    { background: #5cc98a; }
.wire-stack__proto--masque { background: #e88fb8; }
.wire-stack__proto--app    { background: var(--panel-3); color: var(--wire-ink); border-color: var(--panel-line); }
.wire-stack__strip { overflow-x: auto; }
.wire-stack__strip svg { width: 100%; min-width: 340px; height: auto; }
.wire-stack__link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 3px;
  font-family: var(--font-mono); font-size: .68rem; color: var(--wire-muted);
}
.wire-stack__link::before {
  content: ""; width: 0; height: 14px;
  border-left: 1.5px dashed var(--signal-bright);
}
.wire-stack__link-text::after { content: " \25be"; color: var(--signal-bright); font-size: .8rem; }

/* gallery mode: sibling frame layouts, separated by a divider (no "expands" links) */
.wire--gallery .wire-stack__layer + .wire-stack__layer {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px dashed var(--panel-line);
}

/* ==========================================================================
   packet map — nested UDP datagram > packet > frames, every boundary in colour
   ========================================================================== */
.figure--pmap { margin: var(--s6) 0; }
.pmap { display: flex; flex-direction: column; gap: var(--s5); }

.pmap__flight { display: flex; flex-direction: column; gap: .35rem; }
.pmap__dir {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-soft);
}
.pmap__dir::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
}
.pmap__flight--sc .pmap__dir { flex-direction: row-reverse; align-self: flex-end; }
.pmap__flight--sc .pmap__dir::before { background: var(--amber); }

/* UDP datagram — dashed neutral boundary */
.pmap__datagram {
  border: 1.5px dashed var(--muted-2);
  border-radius: var(--radius-lg);
  padding: 1.5rem .7rem .7rem;
  position: relative;
  display: flex; flex-direction: column; gap: .55rem;
  background: color-mix(in srgb, var(--paper) 50%, var(--surface));
}
.pmap__flight--sc .pmap__datagram { border-color: color-mix(in srgb, var(--amber) 45%, var(--muted-2)); }
.pmap__dg-tag {
  position: absolute; top: -.62rem; left: .8rem;
  background: var(--surface); padding: 0 .4rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em;
  color: var(--muted);
}
.pmap__datagram--multi::after {
  content: "coalesced"; position: absolute; top: -.62rem; right: .8rem;
  background: var(--surface); padding: 0 .4rem;
  font-family: var(--font-mono); font-size: .62rem; color: var(--muted-2);
}

/* QUIC packet — solid boundary coloured by encryption level */
.pmap__packet { border: 1.5px solid var(--line); border-radius: var(--radius); padding: .4rem .5rem .5rem; }
.pmap__pkt-tag {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  margin-bottom: .4rem; display: inline-block;
}
.pmap__pkt-hdr { font-weight: 400; color: var(--muted); }
.pmap__packet--initial   { border-color: #3a6ea5; background: #eaf1f8; }
.pmap__packet--initial   .pmap__pkt-tag { color: #2a5680; }
.pmap__packet--handshake { border-color: #7c5cc4; background: #f1ecfa; }
.pmap__packet--handshake .pmap__pkt-tag { color: #5b3f9c; }
.pmap__packet--0rtt      { border-color: #b5760a; background: #f9f0dd; }
.pmap__packet--0rtt      .pmap__pkt-tag { color: #8a5a06; }
.pmap__packet--1rtt      { border-color: #0b6e7d; background: #e1f0f2; }
.pmap__packet--1rtt      .pmap__pkt-tag { color: #084c57; }
.pmap__packet--retry     { border-color: #bd3c29; background: #f9e7e4; }
.pmap__packet--retry     .pmap__pkt-tag { color: #8f2c1e; }

/* frames — chips coloured by role */
.pmap__frames { display: flex; flex-wrap: wrap; gap: .4rem; }
.pmap__frame {
  display: inline-flex; flex-direction: column; gap: .1rem;
  padding: .3rem .5rem; border-radius: 5px;
  border: 1px solid var(--line); background: var(--surface);
  max-width: 20rem;
}
.pmap__fname { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--ink); }
.pmap__fsub  { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.pmap__frame--crypto  { border-color: #0b6e7d; background: #e5f2f4; }
.pmap__frame--ack     { border-color: #97a1ad; background: #f0f3f5; }
.pmap__frame--stream  { border-color: #7c5cc4; background: #f2edfb; }
.pmap__frame--stream .pmap__fname { color: #5b3f9c; }
.pmap__frame--control { border-color: #b5760a; background: #faf2e0; }
.pmap__frame--close   { border-color: #bd3c29; background: #faeae7; }
.pmap__frame--datagram{ border-color: #2c7a4b; background: #e6f3ec; }
.pmap__frame--padding {
  border-color: #b3bcc6;
  background: repeating-linear-gradient(45deg, #eef1f4, #eef1f4 5px, #e2e7ec 5px, #e2e7ec 10px);
}

/* legend */
.pmap-legend {
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: .3rem;
  font-family: var(--font-mono); font-size: .68rem; color: var(--muted);
}
.pmap-legend__row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.pmap-legend__cap { min-width: 3.8rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; }
.pmap-legend__item { display: inline-flex; align-items: center; gap: .35rem; }
.pmap__swatch, .pmap__fswatch { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid; flex: none; }
.pmap__swatch--initial   { border-color: #3a6ea5; background: #eaf1f8; }
.pmap__swatch--handshake { border-color: #7c5cc4; background: #f1ecfa; }
.pmap__swatch--0rtt      { border-color: #b5760a; background: #f9f0dd; }
.pmap__swatch--1rtt      { border-color: #0b6e7d; background: #e1f0f2; }
.pmap__fswatch--crypto  { border-color: #0b6e7d; background: #e5f2f4; }
.pmap__fswatch--ack     { border-color: #97a1ad; background: #f0f3f5; }
.pmap__fswatch--stream  { border-color: #7c5cc4; background: #f2edfb; }
.pmap__fswatch--control { border-color: #b5760a; background: #faf2e0; }
.pmap__fswatch--padding { border-color: #b3bcc6;
  background: repeating-linear-gradient(45deg, #eef1f4, #eef1f4 3px, #e2e7ec 3px, #e2e7ec 6px); }
.pmap__fswatch--close   { border-color: #bd3c29; background: #faeae7; }
.pmap__fswatch--datagram{ border-color: #2c7a4b; background: #e6f3ec; }

/* ==========================================================================
   shared legend / color key — one key, reused under every wire diagram
   ========================================================================== */
.wire-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--panel-line);
  font-family: var(--font-mono); font-size: .7rem; color: var(--wire-muted);
}
.wire-legend__item { display: inline-flex; align-items: center; gap: .4rem; }
.wire-legend__swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--wire-stroke); flex: none; }
.wire-legend__swatch--fixed     { background: #1a2733; border-color: #33445a; }
.wire-legend__swatch--varint    { background: color-mix(in srgb, var(--amber) 40%, var(--wire-cell)); border-color: var(--amber-bright); }
.wire-legend__swatch--len       { background: color-mix(in srgb, var(--signal) 45%, var(--wire-cell)); border-color: var(--signal-bright); }
.wire-legend__swatch--val       { background: color-mix(in srgb, var(--wire-violet) 40%, var(--wire-cell)); border-color: var(--wire-violet); }
.wire-legend__swatch--protected { background: color-mix(in srgb, var(--ok) 40%, var(--wire-cell)); border-color: #5cc98a; }

/* ==========================================================================
   mermaid (sequence / state) — light frame; palette applied at render time
   via themeVariables. These rules only constrain layout & the caption frame.
   ========================================================================== */
.mermaid { font-family: var(--font-body); }
.figure--diagram .mermaid svg { max-width: 100%; }

/* Mermaid state diagrams: the "base" theme fills state titles with the node
   background colour, rendering them invisible. Force legible ink. */
.figure--diagram svg g.stateGroup .state-title,
.figure--diagram svg g.stateGroup text { fill: var(--ink) !important; }
.figure--diagram svg .statediagram-state .nodeLabel,
.figure--diagram svg g.stateGroup .nodeLabel { color: var(--ink) !important; fill: var(--ink) !important; }
/* keep long sequence diagrams scrollable rather than overflowing */
.figure--diagram .figure__frame { max-width: 100%; }

/* small inline key for state/sequence when needed */
.diagram-note {
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  margin-top: var(--s2); text-align: center;
}