/* ============================================================================
 * v2-singlehost.css: the v2 single-host orchestrator figure (.v2fig), real size.
 *
 * ONE stylesheet for both copies of the figure: the gate fixture
 * (web/figures/tsvetok-v2-singlehost.html) and the in-page embed (the v2
 * figure on the Tsvetok case-study page). Each copy links this file from
 * inside its .v2fig root, so check-figure-parity.mjs can assert both use it.
 *
 * Nothing here is transform-scaled. The figure lays itself out for the width
 * its container gives it (a CSS container query on the .v2fig root):
 *   stack  < 560px   one column: daemons above the layered stack, clients
 *                    below it; their wires run in side gutters (rails)
 *   mid    560-899   the same column, with daemons and clients two-by-two
 *   wide   ≥ 900     the desktop composition: daemons on the left, the
 *                    layered stack in the centre, clients on the right
 * The driver (v2-singlehost.js) measures node boxes for every endpoint and
 * routes each wire on its own lane; no coordinate is typed here.
 *
 * Everything is scoped under .v2fig, and the root pins its own font-family,
 * size, line-height, letter-spacing and text-wrap style so page styles cannot
 * leak in, and the fixture wraps its lines exactly as the page does. The
 * panel is dark in both site themes (figure-local tokens, never page tokens).
 * ==========================================================================*/

.v2fig {
  --v2f-deep-void: #05080A; --v2f-panel-dark: #0B1219; --v2f-code-bg: #0F1620;
  --v2f-neon-gold: #FFD700; --v2f-neon-gold-warm: #F2C24A; --v2f-neon-cyan: #00F0FF;
  --v2f-text-primary: #FFFFFF; --v2f-text-secondary: #A0AAB5; --v2f-text-muted: #7A848F;
  --v2f-cyber-border: rgba(255,215,0,0.50); --v2f-cyber-border-hairline: rgba(255,215,0,0.24);
  --v2f-font-display: "Orbitron", ui-sans-serif, system-ui, sans-serif;
  --v2f-font-mono: "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
  container: v2fig / inline-size;
  display: block;
  width: 100%;
  color: var(--v2f-text-primary);
  font-family: var(--v2f-font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  overflow-wrap: normal;
  hyphens: manual;
  text-wrap-mode: wrap;
  text-wrap-style: pretty;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.v2fig *, .v2fig *::before, .v2fig *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* a token that must never split across lines (denied-by-default …).
   Set balance / pretty with the text-wrap-style longhand only: the text-wrap
   shorthand also resets text-wrap-mode to wrap, undoing this on any element
   it matches */
.v2fig .v2f-nw { white-space: nowrap; }

/* ---- the dark canvas: faint gold grid, hairline rim, chamfered corners ---- */
.v2fig .v2f-canvas {
  --v2f-cut: 14px;
  position: relative;
  padding: 20px 8px 18px;
  background:
    radial-gradient(120% 90% at 50% 92%, rgba(255,215,0,0.05), rgba(255,215,0,0) 60%),
    linear-gradient(180deg, rgba(11,18,25,0.45) 0%, rgba(5,8,10,0.65) 100%),
    repeating-linear-gradient(0deg, rgba(255,215,0,0.04) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(90deg, rgba(255,215,0,0.04) 0 1px, transparent 1px 100px),
    var(--v2f-deep-void);
  border: 1px solid var(--v2f-cyber-border-hairline);
  clip-path: polygon(var(--v2f-cut) 0%, calc(100% - var(--v2f-cut)) 0%, 100% var(--v2f-cut),
    100% calc(100% - var(--v2f-cut)), calc(100% - var(--v2f-cut)) 100%, var(--v2f-cut) 100%,
    0% calc(100% - var(--v2f-cut)), 0% var(--v2f-cut));
}
.v2fig .v2f-figmeta {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--v2f-text-muted); margin: 0 2px 18px;
}

/* L-shaped frame brackets (decor) */
.v2fig .v2f-bracket { position: absolute; z-index: 0; width: 26px; height: 26px; pointer-events: none;
  border: 1.4px solid rgba(242,194,74,0.34); }
.v2fig .v2f-bracket.v2f-tl { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.v2fig .v2f-bracket.v2f-tr { right: 6px; top: 6px; border-left: 0; border-bottom: 0; }
.v2fig .v2f-bracket.v2f-bl { left: 6px; bottom: 6px; border-right: 0; border-top: 0; }
.v2fig .v2f-bracket.v2f-br { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }

/* ---- the flow: a grid of nodes; the wire layer floats above it ----
   Stack and mid keep one node column between two wire gutters (rails). Each
   gutter carries four wires on four lanes, so it widens with the figure. */
.v2fig .v2f-flow {
  position: relative;
  display: grid;
  grid-template-columns: clamp(28px, 8cqi, 40px) minmax(0, 1fr) clamp(28px, 8cqi, 40px);
  grid-template-areas:
    ". capl   ."
    ". dl     ."
    ". apple  ."
    ". mcp    ."
    ". broker ."
    ". orch   ."
    ". host   ."
    ". foot   ."
    ". capr   ."
    ". cr     .";
  row-gap: 28px;
}
.v2fig .v2f-cap-l   { grid-area: capl; margin-bottom: -14px; }
.v2fig .v2f-cap-r   { grid-area: capr; margin-bottom: -14px; }
.v2fig .v2f-rail-l  { grid-area: dl; }
.v2fig .v2f-rail-r  { grid-area: cr; }
.v2fig #v2-apple    { grid-area: apple; }
.v2fig #v2-mcp      { grid-area: mcp; }
.v2fig #v2-broker   { grid-area: broker; }
.v2fig #v2-orch     { grid-area: orch; }
.v2fig #v2-host     { grid-area: host; }
.v2fig .v2f-hostfoot { grid-area: foot; }
.v2fig .v2f-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* SVG wire layer: out of flow, same origin as the flow box, so the driver
   draws in the flow's own CSS-pixel space (no scale factor). */
.v2fig .v2f-flow .v2f-wires {
  position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; max-width: none;
  overflow: visible; pointer-events: none; display: block; z-index: 1;
}

/* ambient light pools (decor), placed on grid areas so they follow the nodes */
.v2fig .v2f-ambient { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
.v2fig .v2f-halo {
  grid-area: host; inset: -60px -30px;
  background: radial-gradient(closest-side, rgba(255,215,0,0.20), rgba(255,215,0,0.06) 48%, rgba(255,215,0,0) 76%);
}
.v2fig .v2f-pool {
  grid-row: apple-start / mcp-end; grid-column: apple; inset: -30px -20px;
  background: radial-gradient(closest-side, rgba(255,215,0,0.05), rgba(255,215,0,0) 72%);
}

/* rail captions; one that wraps (phones) is balanced, so no word is left
   alone on its second line */
.v2fig .v2f-rail-cap {
  position: relative; z-index: 3; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--v2f-neon-gold-warm); text-wrap-style: balance;
}
.v2fig .v2f-rail-cap.v2f-cyan { color: var(--v2f-neon-cyan); }

/* ---- NODE: the un-clipped wrapper carries the glow (drop-shadow survives
        because clip-path lives on the inner panel; clip-path clips after filter) */
.v2fig .v2f-node {
  position: relative; z-index: 3; min-width: 0;
  display: flex; flex-direction: column;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.72)) drop-shadow(0 0 12px rgba(242,194,74,0.10));
}
.v2fig .v2f-node .v2f-panel {
  --ch: 13px;
  --chamfer: polygon(var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch));
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 16px;
  /* solid background-COLOR so the verify-figure gate recognises the panel as a box */
  background-color: var(--v2f-panel-dark);
  background-image: linear-gradient(168deg, rgba(22,31,42,0.55), rgba(11,18,25,0) 60%);
  clip-path: var(--chamfer);
}
/* the chamfered gold rim: a 1.3px ring that follows the bevel (mask exclude) */
.v2fig .v2f-node .v2f-panel::before {
  content: ''; position: absolute; inset: 0; padding: 1.3px; pointer-events: none;
  background: linear-gradient(150deg, var(--v2f-neon-gold-warm), rgba(242,194,74,0.30) 52%, var(--v2f-neon-gold-warm));
  clip-path: var(--chamfer);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* the inner parallel stroke ~6px inside the rim: the double-stroke panel */
.v2fig .v2f-node .v2f-panel::after {
  content: ''; position: absolute; inset: 6px; padding: 0.9px; pointer-events: none;
  --ch2: 6px; background: var(--v2f-neon-gold); opacity: 0.30;
  clip-path: polygon(var(--ch2) 0, calc(100% - var(--ch2)) 0, 100% var(--ch2), 100% calc(100% - var(--ch2)),
    calc(100% - var(--ch2)) 100%, var(--ch2) 100%, 0 calc(100% - var(--ch2)), 0 var(--ch2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* corner accents: a fixed L-bracket re-stroking each accented chamfer */
.v2fig .v2f-node .v2f-acc { position: absolute; width: 25px; height: 25px; overflow: visible; pointer-events: none; }
.v2fig .v2f-node .v2f-acc path { fill: none; stroke: var(--v2f-neon-gold); stroke-width: 1; stroke-opacity: 0.45;
  stroke-linecap: round; stroke-linejoin: round; }
.v2fig .v2f-node .v2f-acc.v2f-tl { left: 0; top: 0; }
.v2fig .v2f-node .v2f-acc.v2f-tr { right: 0; top: 0; transform: scaleX(-1); }
.v2fig .v2f-node .v2f-acc.v2f-bl { left: 0; bottom: 0; transform: scaleY(-1); }
.v2fig .v2f-node .v2f-acc.v2f-br { right: 0; bottom: 0; transform: scale(-1, -1); }

/* STRONG: the broker and the orchestrator, a heavier rim */
.v2fig .v2f-node.v2f-strong .v2f-panel {
  padding: 22px 18px;
  background-image: linear-gradient(168deg, rgba(40,32,8,0.40), rgba(11,18,25,0) 62%);
}
.v2fig .v2f-node.v2f-strong .v2f-panel::before {
  padding: 2.1px; background: linear-gradient(150deg, var(--v2f-neon-gold), var(--v2f-neon-gold-warm) 50%, var(--v2f-neon-gold));
}
.v2fig .v2f-node.v2f-strong .v2f-panel::after { opacity: 0.5; }
.v2fig .v2f-node.v2f-strong .v2f-acc path { stroke: var(--v2f-neon-gold-warm); stroke-width: 1.4; stroke-opacity: 0.9; }
/* the orchestrator takes eight wires on its two sides: keep room for them */
.v2fig #v2-orch { min-height: 120px; }
.v2fig #v2-orch .v2f-panel { justify-content: center; }

/* HOST: the M4 Mac mini, the apex foundation, with the brightest glow */
.v2fig .v2f-node.v2f-host {
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.70)) drop-shadow(0 0 30px rgba(255,215,0,0.20)) drop-shadow(0 0 10px rgba(255,215,0,0.28));
}
.v2fig .v2f-node.v2f-host .v2f-panel {
  --ch: 15px; padding: 20px 13px;
  background-color: #0B1219; background-image: linear-gradient(170deg, rgba(40,32,8,0.55), rgba(11,18,25,0) 62%);
}
.v2fig .v2f-node.v2f-host .v2f-panel::before {
  padding: 1.8px; background: linear-gradient(150deg, var(--v2f-neon-gold), var(--v2f-neon-gold-warm) 55%, var(--v2f-neon-gold));
}
.v2fig .v2f-node.v2f-host .v2f-acc path { stroke: var(--v2f-neon-gold-warm); stroke-width: 1.2; stroke-opacity: 0.85; }
.v2fig .v2f-node .v2f-hosthead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; margin-bottom: 4px; }

/* NET: a Tailscale client, cyan rim */
.v2fig .v2f-node.v2f-net { filter: drop-shadow(0 12px 20px rgba(0,0,0,0.7)) drop-shadow(0 0 10px rgba(0,240,255,0.10)); }
.v2fig .v2f-node.v2f-net .v2f-panel::before {
  background: linear-gradient(150deg, var(--v2f-neon-cyan), rgba(0,240,255,0.28) 55%, var(--v2f-neon-cyan));
}
.v2fig .v2f-node.v2f-net .v2f-panel::after { background: var(--v2f-neon-cyan); opacity: 0.16; }
.v2fig .v2f-node.v2f-net .v2f-acc path { stroke: var(--v2f-neon-cyan); stroke-opacity: 0.5; }

/* ---- type ---- */
.v2fig .v2f-node .v2f-tag {
  font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--v2f-neon-gold-warm);
}
.v2fig .v2f-node .v2f-tag.v2f-cyan { color: var(--v2f-neon-cyan); }
.v2fig .v2f-node .v2f-title {
  font-family: var(--v2f-font-display); font-weight: 600; font-size: 16px; line-height: 1.2;
  letter-spacing: 0.02em; color: var(--v2f-text-primary); white-space: nowrap;
}
.v2fig .v2f-node .v2f-title.v2f-lg { font-size: 26px; text-align: center; margin: 2px 0; }
.v2fig .v2f-node .v2f-sub { font-size: 14px; line-height: 1.45; color: var(--v2f-text-secondary); }
.v2fig .v2f-node .v2f-sub.v2f-primary { color: var(--v2f-text-primary); }
.v2fig .v2f-node .v2f-sub.v2f-center { text-align: center; }
/* the host line: "always-on ·" and "N LaunchAgents ·" are separate nowrap
   units (refresh-stats rewrites N in place), so a phone may break between
   them and a three-digit count still fits; on a phone it sits at the 13px
   floor. Balanced, so a wrapped line never leaves a short head over a long
   tail */
.v2fig .v2f-node.v2f-host .v2f-sub { font-size: 13px; text-wrap-style: balance; }
.v2fig .v2f-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.v2fig .v2f-chip {
  font-size: 13px; line-height: 1.3; color: var(--v2f-text-secondary); white-space: nowrap;
  background: var(--v2f-code-bg); border: 1px solid var(--v2f-cyber-border-hairline); padding: 5px 9px;
}
.v2fig .v2f-chip.v2f-cyan { color: var(--v2f-neon-cyan); border-color: rgba(0,240,255,0.24); }

/* the host's meta-foot: the hardware-arc mark sits against the APPS / BUILD
   lines as one left-aligned group, centred under the host */
.v2fig .v2f-hostfoot {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 13px; line-height: 1.5; letter-spacing: 0.04em; color: var(--v2f-text-muted); text-align: left;
}
.v2fig .v2f-hostfoot .v2f-k { color: var(--v2f-neon-gold-warm); white-space: nowrap; }
.v2fig .v2f-archarc {
  flex: none; font-size: 24px; line-height: 1; color: var(--v2f-neon-gold-warm);
  filter: drop-shadow(0 0 8px rgba(242,194,74,0.6));
}

/* ---- legend ---- */
.v2fig .v2f-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: 24px 2px 0;
  font-size: 13px; letter-spacing: 0.04em; color: var(--v2f-text-muted);
}
.v2fig .v2f-legend .v2f-item { display: inline-flex; align-items: center; gap: 8px; }
.v2fig .v2f-legend .v2f-swatch { display: inline-block; flex: none; width: 24px; height: 0; border-top: 2px solid var(--v2f-neon-gold-warm); }
.v2fig .v2f-legend .v2f-swatch.v2f-cyan { border-top: 2px dashed var(--v2f-neon-cyan); }
.v2fig .v2f-legend .v2f-lbl,
.v2fig .v2f-legend .v2f-strong { color: var(--v2f-text-secondary); }

/* ---- mid: daemons and clients two-by-two around the same column ---- */
@container v2fig (min-width: 560px) {
  .v2fig .v2f-canvas { --v2f-cut: 18px; padding: 26px 16px 22px; }
  .v2fig .v2f-figmeta { margin: 0 6px 22px; }
  .v2fig .v2f-legend { margin: 26px 6px 0; }
  .v2fig .v2f-flow { grid-template-columns: clamp(48px, 8.5cqi, 64px) minmax(0, 1fr) clamp(48px, 8.5cqi, 64px); row-gap: 30px; }
  .v2fig .v2f-rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .v2fig .v2f-node .v2f-panel { padding: 16px 18px; }
  .v2fig .v2f-node.v2f-strong .v2f-panel { padding: 22px 20px; }
  .v2fig .v2f-node.v2f-host .v2f-panel { padding: 20px 20px; }
  .v2fig .v2f-node.v2f-host .v2f-sub { font-size: 14px; }
}

/* ---- wide: daemons left, the layered stack centre, clients right ---- */
@container v2fig (min-width: 900px) {
  .v2fig .v2f-canvas { --v2f-cut: 22px; padding: 30px 26px 26px; }
  .v2fig .v2f-figmeta { margin: 0 0 22px; }
  .v2fig .v2f-legend { margin: 28px 0 0; }
  .v2fig .v2f-flow {
    /* the two wire gutters: 56px, widened by the driver (--v2f-gutter) when
       nested wires need it, so parallel lanes stay at least 16px apart */
    grid-template-columns: minmax(0, 1fr) var(--v2f-gutter, 56px) minmax(0, 1.85fr) var(--v2f-gutter, 56px) minmax(0, 1fr);
    grid-template-areas:
      "capl capl capl   capr capr"
      "dl   .    apple  .    cr"
      "dl   .    mcp    .    cr"
      "dl   .    broker .    cr"
      "dl   .    orch   .    cr"
      "dl   .    host   .    cr"
      "foot foot foot   foot foot";
  }
  .v2fig .v2f-cap-l { justify-self: start; margin-bottom: -8px; }
  .v2fig .v2f-cap-r { justify-self: end; margin-bottom: -8px; text-align: right; }
  .v2fig .v2f-rail { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
  /* four slots a side, at least SLOT (24px) apart and 30px clear of the corners */
  .v2fig #v2-orch { min-height: 156px; }
  .v2fig .v2f-node .v2f-panel { padding: 16px 16px; }
  /* an even column: every rail card holds room for a two-line sub-line (the
     briefing card's wraps at this width), its content top-aligned so tags and
     titles line up row for row across the two columns */
  .v2fig .v2f-rail .v2f-node .v2f-panel {
    justify-content: flex-start;
    min-height: calc(2 * 16px + 13px * 1.3 + 16px * 1.2 + 2 * 14px * 1.45 + 2 * 5px);
  }
  .v2fig .v2f-node.v2f-strong .v2f-panel { padding: 24px 18px; }
  .v2fig .v2f-node.v2f-host .v2f-panel { padding: 20px 18px; }
  .v2fig .v2f-halo { inset: -70px -60px; }
  /* the legend in two rows: the keys, then the hardware-arc note with the
     summary stamp closing the row on the right */
  .v2fig .v2f-legend { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 10px 26px; }
  .v2fig .v2f-legend .v2f-note { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  .v2fig .v2f-legend .v2f-strong { grid-row: 2; grid-column: 1 / -1; justify-self: end; }
}