/* /integrations: the hero (shared) and ONE diagram: the qodiqa tile in the middle, seven group cards around it in a 3 x 3 grid, a thin line from the tile to every card, a spine inside each card column and a tick to every member.
   Desktop (>= 78rem): the drawing fits the screen: every size below is a vh-based clamp() (never a transform), so the whole diagram, tile included, is at most one viewport high minus the header minus 48px.
   The lines are SVG paths: the build draws them for a 1440 x 900 viewport (tools/integrations-render.mjs), assets/js/integrations.mjs re-measures the real boxes on load and on resize (assets/js/ig-lines.mjs).
   Below 78rem the cards stack and the lines are plain CSS boxes: two columns joined by a bus (901 to 1231px), one column with one trunk (900px and below); those layouts may scroll.
   Shared parts: .framed (glass card), .lit-border (lit ring, held at low intensity here). No third-party anything: logos are files in assets/logos/ inlined once as symbols.
   The small sizes of the drawing (11 / 13 px, logos 18 px) are local to this file: the --ig-fs-* and --ig-logo tokens below, the only place they are defined. */
#dv[data-page="integrations"] .rm-shell { grid-template-columns: minmax(0, 1fr); }
body:has(#dv[data-page="integrations"]) .bg__n { display: none; }   /* the site background's hollow nodes: one of them sat next to the tile's right line */
.ig-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ig-sec { margin-top: var(--space-block); }
.ig-fig { margin: 0; }
.ig-map {
  --ig-line: #C02E62;
  --ig-fs-title: 11px; --ig-fs-tag: 11px; --ig-fs-name: 13px;                     /* the drawing's own text sizes (owner brief 2026-11-06) */
  --ig-row: clamp(24px, 3.1vh, 28px); --ig-logo: clamp(16px, 2vh, 18px); --ig-pad: clamp(8px, 1.3vh, 12px);
  --ig-th: clamp(16px, 2.2vh, 20px); --ig-tmb: clamp(5px, 1vh, 9px); --ig-hub: clamp(84px, 12vh, 108px); --ig-gap: clamp(40px, 8.6vh, 78px);
  --ig-ty: calc(1px + var(--ig-pad) + var(--ig-th) / 2);                          /* y of a card's title middle, from the card's top edge */
  position: relative; width: 100%;
}

/* the lit ring and glow of the tile and the cards: always on, at low intensity (the shared .lit-border is on/off; here it only sets the level) */
.ig-map .lit-border::before { opacity: .42; transition: none; }
.ig-map .lit-border::after { opacity: .22; transition: none; }

/* the centre tile: the real logo asset of the site header, nothing else */
.ig-core { position: relative; display: grid; place-items: center; width: var(--ig-hub); height: var(--ig-hub); box-sizing: border-box; border-radius: calc(var(--ig-hub) * .22); border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), var(--surface-1); }
.ig-core img { display: block; width: calc(var(--ig-hub) * .72); height: auto; }
.ig-halo { position: absolute; left: 50%; top: 50%; width: calc(var(--ig-hub) * 3.4); height: calc(var(--ig-hub) * 3.4); margin: calc(var(--ig-hub) * -1.7) 0 0 calc(var(--ig-hub) * -1.7); border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--framed-magenta) / .15), rgb(var(--framed-blue) / .07) 55%, transparent); }
.ig-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.ig-line { opacity: .85; --ig-len: 1600px; }
.ig-dot { transform: translate(-50px, -50px) scale(0); }

/* a group card: title, then one or two columns of members, each with its own spine and a tick to every member */
.ig-grp { position: relative; box-sizing: border-box; min-width: 0; padding: var(--ig-pad); border: 1px solid var(--border); border-radius: var(--r-panel); text-align: left; }
.ig-ttl { margin: 0 0 var(--ig-tmb); height: var(--ig-th); font: 500 var(--ig-fs-title)/var(--ig-th) var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.ig-note { margin: 0; font: 400 var(--ig-fs-tag)/1.35 var(--font); color: var(--text-dim); }
.ig-cols { display: flex; gap: 16px; }
.ig-ms { position: relative; list-style: none; margin: 0; padding: 0 0 0 18px; }
.ig-ms::before { content: ''; position: absolute; left: 0; top: calc(var(--ig-row) / 2 - 1px); bottom: calc(var(--ig-row) / 2 - 1px); width: 2px; border-radius: 1px; background: var(--ig-line); opacity: .75; }
.ig-m { position: relative; display: flex; align-items: center; height: var(--ig-row); margin: 0; }
.ig-m::before { content: ''; position: absolute; left: -18px; top: 50%; width: 12px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--ig-line); opacity: .75; }
.ig-stub, .ig-feed { display: none; position: absolute; }

/* a member: logo + name + tag + arrow in one flex line (fixed 8px gap, nothing shrinks, nothing wraps), one link to the source file */
#dv .ig-a { display: flex; align-items: center; gap: 8px; min-width: 0; height: 100%; padding-right: 2px; border-radius: 6px; color: var(--text); text-decoration: none; white-space: nowrap; font: 400 var(--ig-fs-name)/1 var(--font); }
.ig-lg { display: grid; place-items: center; flex: none; width: var(--ig-logo); height: var(--ig-logo); }
.ig-lg svg { display: block; width: 100%; height: 100%; }
.ig-lg--gen { color: var(--text-dim); }
.ig-nm { flex: none; white-space: nowrap; }
.ig-tag { flex: none; margin: 0; font: 400 var(--ig-fs-tag)/1 var(--font); color: var(--text-dim); white-space: nowrap; }
.ig-ar { flex: none; width: 12px; height: 12px; color: var(--text-dim); transition: color var(--t-fast) var(--ease); }
#dv .ig-a:hover { color: #fff; text-decoration: none; }
#dv .ig-a:hover .ig-nm, #dv .ig-a:focus-visible .ig-nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .55); }
.ig-a:hover .ig-ar { color: var(--text); }
.ig-a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* desktop: a 3 x 3 grid around the tile (top: Identity, Key management, Alerting; middle: Applications, tile, AI providers; bottom: Data and deployment, Observability) */
@media (min-width: 78rem) {
  .ig-map { display: grid; width: min(1168px, calc(100vw - 64px)); margin-inline: calc(50% - min(1168px, calc(100vw - 64px)) / 2); grid-template-columns: minmax(0, 316fr) minmax(0, 340fr) minmax(0, 432fr); column-gap: 40px; row-gap: var(--ig-gap); grid-template-areas: "identity keys alert" "apps core ai" "data obs ."; }
  .ig-groups, .ig-col { display: contents; }
  .ig-core { grid-area: core; place-self: center; }
  .ig-grp[data-g="identity"] { grid-area: identity; align-self: end; }
  .ig-grp[data-g="keys"] { grid-area: keys; align-self: end; }
  .ig-grp[data-g="alert"] { grid-area: alert; align-self: end; }
  .ig-grp[data-g="apps"] { grid-area: apps; align-self: center; }
  .ig-grp[data-g="ai"] { grid-area: ai; align-self: center; }
  .ig-grp[data-g="data"] { grid-area: data; align-self: start; }
  .ig-grp[data-g="obs"] { grid-area: obs; align-self: start; }
}
@media (max-width: 77.9375rem) {
  .ig-map { --ig-row: 28px; --ig-logo: 18px; --ig-pad: 12px; --ig-th: 18px; --ig-tmb: 8px; --ig-hub: 96px; }
  .ig-svg { display: none; }
  .ig-halo { display: none; }
  .ig-map { max-width: 680px; margin-inline: auto; }
  .ig-core { margin: 0 auto 44px; }
  .ig-groups { position: relative; }
  .ig-cols { flex-direction: column; gap: 0; }
  .ig-ms + .ig-ms::before { top: 0; }
  .ig-ms:not(:last-child)::before { bottom: 0; }
  .ig-ms:first-child::before { top: calc(-1px - var(--ig-tmb) - var(--ig-th) / 2); }
  .ig-grp--src .ig-ms::before { display: none; }
  .ig-ttl { padding-left: 20px; }
  .ig-grp--src .ig-ttl { padding-left: 0; }
  .ig-stub { display: block; left: -1px; top: calc(var(--ig-ty) - 1px); width: 14px; height: 2px; background: var(--ig-line); opacity: .75; }
  .ig-feed { display: block; background: linear-gradient(var(--ig-line), var(--ig-line)) left top / 2px 100% no-repeat, linear-gradient(var(--ig-line), var(--ig-line)) left calc(16px + var(--ig-ty) - 1px) / 100% 2px no-repeat; opacity: .75; }
}
/* 901 to 1231px: two columns around the tile, each with its own trunk, joined by a bus under the tile */
@media (min-width: 56.3125rem) and (max-width: 77.9375rem) {
  .ig-map { max-width: none; }
  .ig-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .ig-groups::before { content: ''; position: absolute; left: 10px; right: calc(50% - 24px); top: -23px; height: 2px; background: var(--ig-line); opacity: .75; }
  .ig-groups::after { content: ''; position: absolute; left: calc(50% - 1px); top: -44px; width: 2px; height: 22px; background: var(--ig-line); opacity: .75; }
  .ig-col { display: flex; flex-direction: column; gap: 16px; padding-left: 28px; min-width: 0; }
  .ig-feed { left: -19px; width: 19px; top: -16px; height: calc(100% + 16px); }
  .ig-col > .ig-grp:first-child .ig-feed { top: -22px; height: calc(100% + 22px); background-position: left top, left calc(22px + var(--ig-ty) - 1px); }
  .ig-col > .ig-grp:last-child .ig-feed { height: calc(16px + var(--ig-ty) + 1px); }
  .ig-core { margin-bottom: 44px; }
}
/* 900px and below: one column, one trunk down the left, under the tile */
@media (max-width: 56.25rem) {
  .ig-map { max-width: 640px; --ig-hub: 96px; }
  .ig-core { margin: 0 0 24px; }
  .ig-core img { width: 80px; }
  .ig-groups { display: flex; flex-direction: column; gap: 16px; padding-left: 60px; }
  .ig-col { display: contents; }
  .ig-feed { left: -13px; width: 13px; top: -16px; height: calc(100% + 16px); }
  .ig-groups > .ig-col:first-child > .ig-grp:first-child .ig-feed { top: -24px; height: calc(100% + 24px); background-position: left top, left calc(24px + var(--ig-ty) - 1px); }
  .ig-groups > .ig-col:last-child > .ig-grp:last-child .ig-feed { height: calc(16px + var(--ig-ty) + 1px); }
  .ig-col:first-child > .ig-grp:last-child .ig-feed { height: calc(100% + 16px); }
}
@media (max-width: 35rem) {
  .ig-map { --ig-row: 26px; --ig-logo: 16px; }
  .ig-grp { padding: 12px 8px 12px 12px; }
}

/* motion: the lines draw once on first view, the gold dots then travel along the main lines (transform only, started by the page script from the measured paths); nothing blinks; static under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .ig-map.is-js .ig-line { stroke-dasharray: var(--ig-len); stroke-dashoffset: var(--ig-len); }
  .ig-map.is-js.is-in .ig-line { animation: ig-draw 1.4s var(--ease) forwards; }
  @keyframes ig-draw { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) { .ig-dot { display: none; } }