/* =============================================================================
   Blue365 — figures: SVG diagrams and photograph treatment
   -----------------------------------------------------------------------------
   Diagrams inherit the page palette through currentColor and the existing
   custom properties, so they work in dark and light without a second copy.
   Photographs get a fixed treatment so anything dropped in cannot clash with
   the dark sheet.
   ========================================================================== */

/* ---------- shared figure shell ---------- */
.b-fig{
  margin: 30px 0 34px;
  padding: 22px 20px 18px;
  border: 1px solid var(--rule, rgba(255,255,255,.13));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sheet, #0d1b2a) 92%, transparent);
  position: relative;
}
.b-fig::before{
  content: attr(data-sheet);
  position: absolute; top: -8px; left: 16px;
  padding: 0 8px;
  background: var(--sheet, #0d1b2a);
  font: 500 10px/1 var(--mono, "IBM Plex Mono", monospace);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim, #8fa6bd);
}
.b-fig svg{ display:block; width:100%; height:auto; overflow:visible }
.b-fig figcaption{
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule, rgba(255,255,255,.1));
  font: 400 13px/1.6 var(--sans, system-ui, sans-serif);
  color: var(--dim, #8fa6bd);
}
.b-fig figcaption b{ color: var(--chalk, #e8eef5); font-weight: 600 }

/* ---------- diagram primitives ---------- */
.b-node       { fill: color-mix(in srgb, var(--sheet,#0d1b2a) 70%, transparent);
                stroke: var(--rule, rgba(255,255,255,.28)); stroke-width: 1 }
.b-node--live { stroke: var(--amber, #ffc24b); stroke-width: 1.4 }
.b-node--ghost{ stroke-dasharray: 3 3; opacity: .55 }
.b-label      { fill: var(--chalk, #e8eef5); font: 500 12px var(--sans, system-ui, sans-serif) }
.b-label--sm  { fill: var(--dim, #8fa6bd); font: 400 10.5px var(--mono, "IBM Plex Mono", monospace);
                letter-spacing: .05em }
.b-label--key { fill: var(--amber, #ffc24b); font: 600 11px var(--mono, "IBM Plex Mono", monospace);
                letter-spacing: .1em; text-transform: uppercase }
.b-flow       { stroke: var(--rule, rgba(255,255,255,.3)); stroke-width: 1.2; fill: none }
.b-flow--live { stroke: var(--amber, #ffc24b); stroke-width: 1.6 }
.b-flow--weak { stroke: var(--rule, rgba(255,255,255,.3)); stroke-width: 1.2;
                stroke-dasharray: 4 4; fill: none; opacity: .5 }
.b-grid       { stroke: var(--rule, rgba(255,255,255,.12)); stroke-width: .5 }
.b-fill-amber { fill: var(--amber, #ffc24b) }
.b-fill-dim   { fill: var(--dim, #8fa6bd) }

@media (prefers-reduced-motion: no-preference){
  .b-fig svg .b-flow--live{ stroke-dasharray: 200; stroke-dashoffset: 200;
                            animation: b-draw 1.1s ease forwards }
  @keyframes b-draw{ to{ stroke-dashoffset: 0 } }
}

/* ---------- photograph treatment ----------
   Add class="b-photo" to any <img>. Desaturated, blue-shifted to sit on the
   dark sheet, bordered like a drawing. Nothing you drop in can clash.        */
.b-photo{
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule, rgba(255,255,255,.15));
  border-radius: 8px;
  filter: saturate(.35) contrast(1.06) brightness(.9);
  background: var(--panel, #12263a);
}
.b-photo-wrap{ position: relative; border-radius: 8px; overflow: hidden }
.b-photo-wrap::after{                     /* the duotone tint */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--sheet,#0d1b2a) 22%, transparent),
              color-mix(in srgb, var(--sheet,#0d1b2a) 48%, transparent));
  mix-blend-mode: multiply;
}
.b-photo-wrap figcaption{
  margin-top: 10px; font: 400 12px/1.55 var(--mono, "IBM Plex Mono", monospace);
  color: var(--dim, #8fa6bd);
}
.b-photo-grid{
  display: grid; gap: 14px; margin: 26px 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Empty slot placeholder — visible only until a real photo is dropped in. */
.b-photo-slot{
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border: 1px dashed var(--rule, rgba(255,255,255,.22));
  border-radius: 8px;
  background: repeating-linear-gradient(45deg,
              transparent, transparent 9px,
              color-mix(in srgb, var(--rule,#22405c) 26%, transparent) 9px,
              color-mix(in srgb, var(--rule,#22405c) 26%, transparent) 10px);
  font: 400 11px/1.5 var(--mono, "IBM Plex Mono", monospace);
  color: var(--dim, #8fa6bd); text-align: center; padding: 12px;
}

@media (max-width: 620px){
  .b-fig{ padding: 18px 14px 14px; margin: 24px 0 26px }
  .b-label{ font-size: 11px } .b-label--sm{ font-size: 9.5px }
}
@media print{ .b-fig{ break-inside: avoid } }