/* ============================================================
   ION Whitepaper — figures & diagrams
   ============================================================ */

/* ---------- Flow diagram (Virtual Video Engine) ---------- */
.vv-diagram{
  position:relative;
  width:640px; max-width:100%;
  height:552px;
  margin:6pt auto 0;
  font-family:var(--f-body);
}
.vv-diagram svg.wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* generic node */
.vv-node{ position:absolute; }

/* user node */
.vv-user{
  left:34px; top:34px; width:76px; height:76px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #C9B8FF, #7C6BEB);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(94,73,214,.28);
}
.vv-user svg{ width:34px; height:34px; fill:#fff; }
.vv-caption{
  position:absolute; text-align:center; width:120px;
  font-family:var(--f-mono); font-size:8px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}

/* dashed "no video data" chip */
.vv-empty{
  left:22px; top:150px; width:110px; height:66px; border-radius:8px;
  border:1.5px dashed #C4CFC9; background:#F7FAF8;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.vv-empty .q{
  width:26px; height:26px; border-radius:50%; background:#E7ECE9;
  color:#9AA8A1; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:13px; font-weight:600;
}
.vv-empty span{ font-family:var(--f-mono); font-size:7.5px; letter-spacing:.06em; color:var(--ink-3); }

/* engine pill (the hub) */
.vv-engine{
  left:200px; top:250px; width:200px; height:52px; border-radius:26px;
  background:linear-gradient(180deg,#EFFBF4,#DFF3E8);
  border:1.5px solid var(--green);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(31,178,104,.18);
}
.vv-engine b{
  font-family:var(--f-display); font-size:15px; font-weight:600;
  color:var(--forest-deep); letter-spacing:-.01em;
}

/* generic output card */
.vv-card{
  border-radius:9px; border:1px solid var(--hair); background:#fff;
  box-shadow:0 3px 9px rgba(16,32,26,.05);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:9px;
}
.vv-card .cap{ font-family:var(--f-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.vv-card .cap.done{ color:var(--green); }

/* placed output nodes — right-side vertical assembly pipeline */
.vv-samples{ left:500px; top:246px; width:118px; height:88px; }
.vv-virtual{ left:500px; top:138px; width:118px; height:84px; background:#F7FAF8; border-style:dashed; }
.vv-custom { left:500px; top:24px;  width:118px; height:90px; }

/* mini frame grid of cells */
.cells{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; width:100%; }
.cells i{ display:block; aspect-ratio:1/1; border-radius:1.5px; background:#E3E9E6; }
.cells.dense{ grid-template-columns:repeat(7,1fr); }
/* palettes */
.cells.teal   i:nth-child(3n){ background:#6FD0C4; } .cells.teal   i{ background:#BFE7E1; }
.cells.amber  i:nth-child(3n){ background:#E7C36B; } .cells.amber  i{ background:#F0DFAF; }
.cells.pink   i:nth-child(3n){ background:#E29AB8; } .cells.pink   i{ background:#F1CFDD; }
.cells.grn    i:nth-child(3n){ background:#8FD79B; } .cells.grn    i{ background:#CDE9D2; }
.cells.violet i:nth-child(3n){ background:#B7A6EA; } .cells.violet i{ background:#DDD4F3; }
/* mixed (assembled/organized sample blocks + custom video) */
.cells.mix i:nth-child(6n+1){ background:#BFE7E1; }
.cells.mix i:nth-child(6n+2){ background:#F0DFAF; }
.cells.mix i:nth-child(6n+3){ background:#F1CFDD; }
.cells.mix i:nth-child(6n+4){ background:#CDE9D2; }
.cells.mix i:nth-child(6n+5){ background:#DDD4F3; }
.cells.mix i:nth-child(6n+6){ background:#BFE7E1; }

/* bottom source-file cards */
.vv-sources{
  position:absolute; left:0; bottom:0; width:100%;
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
}
.vv-file{
  border-radius:9px; border:1px solid var(--hair); background:#fff;
  box-shadow:0 3px 9px rgba(16,32,26,.05); padding:9px 9px 8px;
  display:flex; flex-direction:column; gap:7px;
}
.vv-file .cells{ grid-template-columns:repeat(5,1fr); }
.vv-file .fmeta{ text-align:left; }
.vv-file .fname{ font-family:var(--f-body); font-size:8.5px; font-weight:600; color:var(--ink); }
.vv-file .fsize{ font-family:var(--f-mono); font-size:7px; color:var(--ink-3); letter-spacing:.02em; }

/* numbered step dots (on connectors) */
.vv-step{
  position:absolute; width:20px; height:20px; border-radius:50%;
  background:var(--green); color:#fff;
  font-family:var(--f-mono); font-size:9px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(31,178,104,.4); z-index:5;
}

/* ---------- Legend ---------- */
.vv-legend{
  margin-top:14pt; display:grid; grid-template-columns:1fr 1fr;
  gap:9pt 26pt;
}
.vv-legend .li{ display:flex; gap:9pt; align-items:flex-start; }
.vv-legend .n{
  flex:none; width:17pt; height:17pt; border-radius:50%;
  background:var(--forest); color:#fff; font-family:var(--f-mono);
  font-size:8pt; font-weight:600; display:flex; align-items:center; justify-content:center;
  margin-top:1pt;
}
.vv-legend .t{ font-size:9.5pt; color:var(--ink-2); line-height:1.4; }

/* ---------- mdat / moov storage diagram ---------- */
.mm{ display:grid; grid-template-columns:1fr; gap:12pt; margin:4pt 0 0; }
.mm-mdat, .mm-moov{ border-radius:5pt; overflow:hidden; border:1px solid var(--hair); }
.mm-head{
  display:flex; align-items:baseline; gap:10pt; padding:9pt 14pt;
  background:var(--forest); color:#fff;
}
.mm-head code{ font-family:var(--f-mono); font-size:12pt; font-weight:600; }
.mm-head span{ font-family:var(--f-mono); font-size:7.5pt; letter-spacing:.16em; text-transform:uppercase; color:var(--green-mark); }
.mm-body{ padding:12pt 14pt; background:#F7FAF8; }
/* mdat sample strip */
.samplestrip{ display:flex; gap:3px; }
.samplestrip i{
  flex:1; height:30px; border-radius:2px;
  background:linear-gradient(180deg,#DDE9E3,#C9DBD2);
  position:relative;
}
.samplestrip i::after{
  content:attr(data-n); position:absolute; bottom:-14px; left:0; right:0;
  text-align:center; font-family:var(--f-mono); font-size:6.5px; color:var(--ink-3);
}
.strip-cap{ margin-top:18px; font-family:var(--f-mono); font-size:8pt; color:var(--ink-3); }
/* moov table rows mapping */
.maprow{ display:grid; grid-template-columns:60pt 1fr; gap:8pt; align-items:center; margin:5pt 0; }
.maprow code{ font-family:var(--f-mono); font-size:9pt; color:var(--forest); font-weight:600; }
.maprow .bar{ height:9px; border-radius:2px; background:var(--mint-2); position:relative; }
.maprow .bar b{ position:absolute; top:0; height:100%; border-radius:2px; background:var(--green); }

/* ---------- timescale clock diagram ---------- */
.ts{ display:flex; align-items:center; gap:16pt; margin:4pt 0; flex-wrap:wrap; }
.ts-dial{
  flex:none; width:120px; height:120px; border-radius:50%;
  border:8px solid var(--mint-2); position:relative;
  display:flex; align-items:center; justify-content:center;
}
.ts-dial::before{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:8px solid transparent; border-top-color:var(--green);
  border-right-color:var(--green);
}
.ts-dial .mid{ text-align:center; }
.ts-dial .mid b{ display:block; font-family:var(--f-mono); font-size:15px; color:var(--forest-deep); font-weight:600; }
.ts-dial .mid span{ font-family:var(--f-mono); font-size:7px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.ts-math{ flex:1; min-width:220px; }
.ts-math .row{ display:flex; align-items:center; gap:10pt; margin:5pt 0; font-family:var(--f-mono); font-size:10pt; color:var(--ink-2); }
.ts-math .row .op{ color:var(--green); font-weight:600; }
.ts-math .row .res{ color:var(--forest-deep); font-weight:600; }
.ts-ticks{ display:flex; gap:2px; margin-top:8pt; }
.ts-ticks i{ width:100%; height:16px; border-radius:2px; background:var(--mint-2); }
.ts-ticks i:first-child{ background:var(--green); }