/* Data Meaning diagram kit.
   One visual family for every diagram, architecture view and explanatory visual on the site.
   Source design: dm-service-offerings/.../metadata-enrichment-engine/assets/architecture.html,
   whose tokens come from the homepage journey hero (scripts/build_journey_hero.py). Keep all three in step.

   Every rule is scoped under .dmx and every class is dmx-prefixed, so nothing here can reach a rule in
   styles.css and nothing in styles.css can reach these. Light only. Reference page: /_diagram-kit.html.

   Layout is set from markup through custom properties, so a new diagram needs no new CSS:
     .dmx-diagram / .dmx-boundary   --dmx-cols   grid-template-columns (default one column)
     any direct child               --dmx-col, --dmx-row   grid placement
                                    --dmx-ml, --dmx-mr     side margins (e.g. align a box under another)
   Below 1080px all of that is dropped: one column, document order, short down-arrows between parts. */

/* Layout properties must not inherit: a boundary placed with --dmx-col:1 would otherwise pass that
   placement to every box inside it. Universal syntax with no initial value keeps the var() fallbacks working. */
@property --dmx-cols{syntax:"*";inherits:false}
@property --dmx-col{syntax:"*";inherits:false}
@property --dmx-row{syntax:"*";inherits:false}
@property --dmx-ml{syntax:"*";inherits:false}
@property --dmx-mr{syntax:"*";inherits:false}

.dmx{
  --dmx-ink:#0b0d12; --dmx-text:#2b2f39; --dmx-muted:#565c6b;  /* muted passes AA on the deepest tint */
  --dmx-primary:#2e63c6; --dmx-primary-700:#234fa3;
  --dmx-border:#e6e6ea; --dmx-line:#d6e1f2;
  --dmx-l1:#f1f5fc; --dmx-l2:#e8eff9; --dmx-l3:#dde7f7;      /* tints of the one blue */
  --dmx-shadow-sm:0 1px 2px rgba(11,13,18,.05),0 1px 3px rgba(11,13,18,.05);
  --dmx-head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --dmx-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --dmx-radius:10px; --dmx-radius-sm:8px; --dmx-radius-lg:16px;
  --dmx-gap:72px;   /* column gap: room between boxes for a connector and its pill */
  --dmx-vgap:40px;  /* row gap */
  color:var(--dmx-text);font-family:var(--dmx-body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.dmx *,.dmx *::before,.dmx *::after{box-sizing:border-box}
.dmx h3,.dmx h4{font-family:var(--dmx-head);color:var(--dmx-ink);letter-spacing:-.02em;margin:0;font-weight:600;line-height:1.25}
.dmx p{margin:0}
.dmx svg{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}

/* ---------- Diagram canvas: the positioned grid the connectors are drawn over ---------- */
.dmx-diagram{position:relative;display:grid;grid-template-columns:var(--dmx-cols,minmax(0,1fr));column-gap:var(--dmx-gap);row-gap:var(--dmx-vgap)}
.dmx-diagram>*,.dmx-boundary>:not(.dmx-tag){grid-column:var(--dmx-col,auto);grid-row:var(--dmx-row,auto);margin-left:var(--dmx-ml,0);margin-right:var(--dmx-mr,0);min-width:0}
.dmx-self-center{align-self:center}
.dmx-self-start{align-self:start}

/* ---------- Tile: Heroicon outline in a white tile, optional numbered badge ---------- */
.dmx-tile{position:relative;flex:none;width:32px;height:32px;border-radius:var(--dmx-radius-sm);background:#fff;border:1px solid var(--dmx-line);display:grid;place-items:center}
.dmx-tile svg{width:18px;height:18px;stroke:var(--dmx-primary)}
.dmx-tile b{position:absolute;top:-8px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--dmx-primary-700);color:#fff;font:600 11px/16px var(--dmx-head);text-align:center;box-shadow:0 0 0 2px var(--dmx-ring,#fff)}
.dmx-tile--sm{width:28px;height:28px}
.dmx-tile--sm svg{width:16px;height:16px}
.dmx-tile--lg{width:34px;height:34px}

/* ---------- Label: uppercase, letter-spaced ---------- */
.dmx-label{display:block;font:600 11px var(--dmx-head);letter-spacing:.16em;text-transform:uppercase;color:var(--dmx-primary-700)}

/* ---------- Box: tinted panel, 2px blue rule on top ---------- */
.dmx-box{position:relative;border-radius:var(--dmx-radius);padding:12px 14px 14px;background:var(--dmx-tint,#fff);box-shadow:inset 0 2px 0 var(--dmx-primary)}
.dmx-box>.dmx-label{margin-bottom:10px}
.dmx-box--white{--dmx-tint:#fff;border:1px solid var(--dmx-line);box-shadow:inset 0 2px 0 var(--dmx-primary),var(--dmx-shadow-sm)}
.dmx-box--l1{--dmx-tint:var(--dmx-l1)}
.dmx-box--l2{--dmx-tint:var(--dmx-l2)}
.dmx-box--l3{--dmx-tint:var(--dmx-l3)}
.dmx-box--split{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
.dmx-box--split>.dmx-chips{margin-top:0}

/* ---------- Boundary: dashed zone with a pill tag on its top edge ---------- */
.dmx-boundary{position:relative;display:grid;grid-template-columns:var(--dmx-cols,minmax(0,1fr));column-gap:var(--dmx-gap);row-gap:var(--dmx-vgap);padding:22px 16px 16px;border:1.5px dashed color-mix(in srgb,var(--dmx-primary) 45%,transparent);border-radius:var(--dmx-radius-lg);background:linear-gradient(180deg,#fbfcfe,#fff)}
.dmx-tag{position:absolute;top:-13px;left:18px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 40px);padding:4px 12px 4px 8px;background:#fff;border:1px solid var(--dmx-line);border-radius:999px;font:600 11px var(--dmx-head);letter-spacing:.14em;text-transform:uppercase;color:var(--dmx-ink);white-space:nowrap}
.dmx-tag svg{width:15px;height:15px;stroke:var(--dmx-primary);flex:none}
.dmx-tag span{font:500 12px var(--dmx-body);letter-spacing:0;text-transform:none;color:var(--dmx-muted);overflow:hidden;text-overflow:ellipsis}

/* ---------- Node: tile + title + one muted line ---------- */
.dmx-node{display:flex;align-items:flex-start;gap:12px}
.dmx-node h4{font-size:15px}
.dmx-node p{font-size:13px;line-height:1.4;color:var(--dmx-muted);margin-top:3px}

/* ---------- Chips ---------- */
.dmx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dmx-chips--stack{flex-direction:column}
.dmx-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 9px 4px 7px;border:1px solid var(--dmx-line);border-radius:6px;background:#fff;font-size:12px;font-weight:500;line-height:1.3;color:var(--dmx-ink);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.dmx-chip svg{width:13px;height:13px;stroke:var(--dmx-primary);flex:none}
.dmx-chip--soft{background:rgba(255,255,255,.55);border-color:color-mix(in srgb,var(--dmx-primary) 22%,transparent);color:var(--dmx-text);box-shadow:none}
.dmx-chip--soft svg{stroke:var(--dmx-muted)}
.dmx-chip--dot::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--dmx-primary)}

/* ---------- Title: a component's name inside a box, with an optional inline note ---------- */
.dmx-title{font-size:16px;margin-bottom:10px}
.dmx-title small{font:500 12px var(--dmx-body);color:var(--dmx-muted);letter-spacing:0;margin-left:8px}

/* ---------- Panel: white component panel inside a box (e.g. the engine) ---------- */
.dmx-panel{background:#fff;border:1px solid var(--dmx-line);border-radius:var(--dmx-radius);padding:14px 14px 16px;box-shadow:var(--dmx-shadow-sm)}
.dmx-panel-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:14px}
.dmx-panel-head h4{font-size:16px}
.dmx-panel-head small{font-size:12px;color:var(--dmx-muted)}

/* ---------- Pipeline: numbered steps side by side, joined by small blue arrows ---------- */
.dmx-pipe{display:grid;grid-template-columns:repeat(var(--dmx-steps,4),minmax(0,1fr));gap:14px}
.dmx-step{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--dmx-radius-sm);background:#fff;border:1px solid var(--dmx-line);box-shadow:var(--dmx-shadow-sm)}
.dmx-step h4{display:flex;align-items:center;gap:10px;font-size:14px}
.dmx-step p{font-size:12.5px;line-height:1.4;color:var(--dmx-text)}
.dmx-step+.dmx-step::before{content:"";position:absolute;left:-14px;top:27px;width:13px;height:2px;background:var(--dmx-primary)}
.dmx-step+.dmx-step::after{content:"";position:absolute;left:-7px;top:24px;width:6px;height:6px;border-top:2px solid var(--dmx-primary);border-right:2px solid var(--dmx-primary);transform:rotate(45deg)}

/* ---------- Scale: a short graded list with blue swatches (e.g. sensitivity levels) ---------- */
.dmx-scale{display:flex;flex-direction:column;gap:3px}
.dmx-scale span{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11.5px;font-weight:500;color:var(--dmx-ink);line-height:1.3}
.dmx-scale span::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--dmx-sw,var(--dmx-l3))}
.dmx-scale i{font-style:normal;font-weight:400;color:var(--dmx-muted)}
.dmx-scale .dmx-sw1{--dmx-sw:var(--dmx-primary-700)}
.dmx-scale .dmx-sw2{--dmx-sw:#6890d8}
.dmx-scale .dmx-sw3{--dmx-sw:#d5e0f4}

/* ---------- Part cards: small supporting components under a main box ---------- */
.dmx-parts{display:grid;grid-template-columns:repeat(var(--dmx-parts,3),minmax(0,1fr));gap:10px;margin-top:12px}
.dmx-part{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--dmx-radius-sm);background:rgba(255,255,255,.6);border:1px solid color-mix(in srgb,var(--dmx-primary) 18%,transparent)}
.dmx-part .dmx-tile{width:28px;height:28px}
.dmx-part .dmx-tile svg{width:16px;height:16px;stroke:var(--dmx-muted)}
.dmx-part strong{display:block;font:600 13px/1.2 var(--dmx-head);color:var(--dmx-ink)}
.dmx-part small{display:block;font-size:11.5px;line-height:1.3;color:var(--dmx-muted)}

/* Compact form: one chip per part, name in bold, for when the box must stay short */
.dmx-parts--compact{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* inline-block, not flex: the name and its note are separate text runs, and flex would split them into columns when they wrap */
.dmx-parts--compact .dmx-chip{display:inline-block;padding:5px 9px 5px 7px;background:rgba(255,255,255,.6);border-color:color-mix(in srgb,var(--dmx-primary) 20%,transparent);box-shadow:none;color:var(--dmx-text)}
.dmx-parts--compact .dmx-chip b{font-weight:600;color:var(--dmx-ink)}
.dmx-parts--compact .dmx-chip svg{stroke:var(--dmx-muted);vertical-align:-2px;margin-right:6px}

/* ---------- Output cards: tile, bold title, muted line ---------- */
.dmx-outs{display:flex;flex-direction:column;gap:8px}
.dmx-outs>.dmx-label{margin-bottom:2px}
.dmx-card{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border:1px solid var(--dmx-border);border-radius:var(--dmx-radius);background:#fff;box-shadow:var(--dmx-shadow-sm)}
.dmx-card .dmx-tile{width:34px;height:34px}
.dmx-card strong{display:block;font:600 14px/1.25 var(--dmx-head);color:var(--dmx-ink)}
.dmx-card small{display:block;font-size:12.5px;line-height:1.35;color:var(--dmx-muted)}

/* Item list: the same tile, title and line, compact, inside a box (e.g. "What you get") */
.dmx-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dmx-items li{display:flex;align-items:center;gap:10px}
.dmx-items .dmx-tile{width:28px;height:28px}
.dmx-items .dmx-tile svg{width:16px;height:16px}
.dmx-items strong{display:block;font:600 13.5px/1.25 var(--dmx-head);color:var(--dmx-ink)}
.dmx-items small{display:block;font-size:12px;line-height:1.3;color:var(--dmx-muted)}

/* ---------- Connectors: drawn by assets/diagrams.js from the boxes' live positions ---------- */
.dmx-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dmx-wires path{stroke:var(--dmx-primary);stroke-width:1.75;fill:none}
.dmx-wires path.dmx-dash{stroke-dasharray:4 4}
.dmx-wl{position:absolute;transform:translate(var(--dmx-tx,-50%),-50%);padding:2px 8px;border-radius:999px;background:#fff;border:1px solid var(--dmx-line);font:500 11px/1.4 var(--dmx-body);color:var(--dmx-primary-700);white-space:nowrap;pointer-events:none;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.dmx-wl--wrap{white-space:pre-line;text-align:center;border-radius:8px}
.dmx-wire{display:none}   /* connector declarations: data only, never rendered */

/* ---------- Hand-off row: dashed top rule with link chips ---------- */
.dmx-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--dmx-primary) 30%,transparent)}
.dmx-next p{font-size:14px;color:var(--dmx-muted);margin-right:4px}
.dmx-next a{display:inline-block;padding:7px 12px 7px 8px;border:1px solid var(--dmx-line);border-radius:6px;background:#fff;color:var(--dmx-ink);font-size:13px;font-weight:500;line-height:1.3;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .2s,box-shadow .2s}
.dmx-next a svg{width:14px;height:14px;stroke:var(--dmx-primary);vertical-align:-2px;margin-right:8px}
.dmx-next a small{margin-left:4px;color:var(--dmx-muted);font-size:12px;font-weight:400}
.dmx-next a:hover{border-color:var(--dmx-primary);box-shadow:0 2px 6px rgba(46,99,198,.14)}
.dmx a:focus-visible{outline:2px solid var(--dmx-primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.dmx-next a{transition:none}}

/* ---------- Narrow screens: one column, connectors become short down-arrows ---------- */
@media (max-width:1079px){
  .dmx-diagram,.dmx-boundary{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .dmx-diagram>*,.dmx-boundary>:not(.dmx-tag){grid-column:1;grid-row:auto;margin-left:0;margin-right:0;position:relative}
  .dmx-boundary{padding:28px 14px 14px}
  .dmx-box--split{grid-template-columns:minmax(0,1fr)}
  .dmx-box--split>.dmx-chips{margin-top:0}
  .dmx-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dmx-step+.dmx-step::before,.dmx-step+.dmx-step::after{display:none}
  .dmx-parts{grid-template-columns:minmax(0,1fr)}
  .dmx-wires,.dmx-wl{display:none}
  /* A short blue down-arrow above every stacked part except the first */
  .dmx-diagram>*+*::before,.dmx-boundary>*+*::before{content:"";position:absolute;left:50%;top:-26px;width:12px;height:20px;margin-left:-6px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' fill='none' stroke='%232e63c6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1v17M1.5 13.5 6 18l4.5-4.5'/%3E%3C/svg%3E") center/12px 20px no-repeat}
  .dmx-boundary>.dmx-tag+*::before,.dmx-noarrow::before{display:none}
  /* A boundary's pill tag sits on its top edge, where the arrow would land: give it more room and lift the arrow clear */
  .dmx-diagram>.dmx-boundary:not(:first-child){margin-top:14px}
  .dmx-diagram>.dmx-boundary::before{top:-42px}
}
@media (max-width:560px){
  .dmx-pipe{grid-template-columns:minmax(0,1fr)}
  .dmx-tag span{display:none}
}