/* ===================================================================
   BlueLock diagrams
   Flat AccuKnox look: white cards, navy for AccuKnox components and
   one blue for data flow. No tinted fills, no gradients. Inline SVG
   inside .bl-dia reads the tokens below and repaints with the
   light and dark toggle.
   =================================================================== */

.bl-dia {
  --bl-ink: #0b1437;
  --bl-mute: #5a637d;
  --bl-line: #c9d0e0;
  --bl-card: #ffffff;
  --bl-panel: #f6f7fb;
  --bl-navy: #0b1f6b;
  --bl-on-navy: #ffffff;
  --bl-accent: #0046ff;

  margin: 1.6rem 0;
  overflow-x: auto;
}

[data-md-color-scheme="slate"] .bl-dia {
  --bl-ink: #e6eaf5;
  --bl-mute: #98a2b8;
  --bl-line: #2c3550;
  --bl-card: #141a2b;
  --bl-panel: #0e1322;
  --bl-navy: #22318a;
  --bl-on-navy: #ffffff;
  --bl-accent: #6c9bff;
}

.bl-dia svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 820px;
  margin: 0 auto;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shapes */
.bl-dia .card  { fill: var(--bl-card);  stroke: var(--bl-line); stroke-width: 1.2; }
.bl-dia .panel { fill: var(--bl-panel); stroke: var(--bl-line); stroke-width: 1.2; }
.bl-dia .row   { fill: var(--bl-panel); stroke: var(--bl-line); stroke-width: 1; }
.bl-dia .navy  { fill: var(--bl-navy);  stroke: none; }
.bl-dia .ghost { fill: none; stroke: var(--bl-accent); stroke-width: 1.4; }

/* Text */
.bl-dia text { fill: var(--bl-ink); }
.bl-dia .h  { font-size: 15px; font-weight: 700; }
.bl-dia .b  { font-size: 13px; font-weight: 600; }
.bl-dia .s  { font-size: 12px; fill: var(--bl-mute); }
.bl-dia .m  { font-family: "Fira Code", ui-monospace, monospace; font-size: 12px; }
.bl-dia .w  { fill: var(--bl-on-navy); }
.bl-dia .wh { fill: var(--bl-on-navy); font-size: 15px; font-weight: 700; }
.bl-dia .ws { fill: var(--bl-on-navy); font-size: 12px; opacity: .78; }
.bl-dia .wm { fill: var(--bl-on-navy); font-family: "Fira Code", ui-monospace, monospace; font-size: 12px; }
.bl-dia .ms { font-family: "Fira Code", ui-monospace, monospace; font-size: 11.5px; fill: var(--bl-mute); }
.bl-dia .wb { fill: var(--bl-on-navy); font-size: 12.5px; font-weight: 700; }
.bl-dia .num { fill: var(--bl-on-navy); font-size: 12px; font-weight: 700; }

/* Connectors and icons */
.bl-dia .ln   { stroke: var(--bl-accent); stroke-width: 1.8; fill: none; }
.bl-dia .rail { stroke: var(--bl-line); stroke-width: 2; fill: none; }
.bl-dia .head { fill: var(--bl-accent); }
.bl-dia .ic   { stroke: var(--bl-ink); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bl-dia .ic-w { stroke: var(--bl-on-navy); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bl-dia .dot  { fill: var(--bl-ink); }
.bl-dia .dot-w { fill: var(--bl-on-navy); }

@media screen and (max-width: 55em) {
  .bl-dia svg { min-width: 600px; }
}

/* Centre the card titles on the BlueLock overview, as on the AI Security cards. */
.md-content__inner:has(.bl-dia) .nt-card-title { text-align: center; }