/* Toolset bundle flow diagram (src/blocks/bundles/BundleDiagram.astro). Linked by the bundle page through Base styles. */
.bd-wrap { padding: 5rem 0; }
.bd { container-type: inline-size; margin: 0; max-width: 960px; margin-inline: auto; color: var(--text--primary, #fff); font-family: Ibmplexmono, ui-monospace, monospace; }
.bd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bd-stage { position: relative; aspect-ratio: var(--w) / var(--h); }
.bd-tiers { list-style: none; margin: 0; padding: 0; }
.bd-tier, .bd-col { display: contents; }
.bd-h, .bd-gap, .bd-after { display: none; }

.bd-halo, .bd-frame, .bd-node, .bd-photo { position: absolute; }
.bd-halo { background: radial-gradient(closest-side, rgba(14,39,243,.85), rgba(14,39,243,.35) 60%, rgba(14,39,243,0)); border-radius: 50%; transform: scale(1.35); z-index: 1; pointer-events: none; }
.bd-frame { border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 1.25rem; z-index: 1; }
.bd-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
/* Two weights: the main path down the middle is heavy, every other arrow is clearly lighter (Ben, 9 Nov 2026). */
.bd-link { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bd-link-thin { stroke-width: 2.4; }
.bd-link-side { stroke-width: 3.3; }
.bd-link-line { stroke-width: 1.6; }
.bd-link-dotted { stroke-width: 1.5; stroke-dasharray: 2 5; }
.bd-link-main { stroke-width: 5.5; filter: drop-shadow(0 0 6px var(--brand--blue, #0e27f3)); }

.bd-node {
  z-index: 3; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 0 0.4em; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 0.45rem; font-weight: 500; line-height: 1.3;
  font-size: max(14px, calc(var(--fs) / var(--w) * 100cqw));
  background: var(--brand--background, #050409); overflow-wrap: anywhere; text-wrap: balance;
}
.bd-sub { font-weight: 400; }
.bd-k-tool { background: linear-gradient(180deg, color-mix(in srgb, var(--brand--blue, #0e27f3), white 8%), color-mix(in srgb, var(--brand--blue, #0e27f3), black 20%)); border-color: #fff; }
.bd-k-source { background: linear-gradient(180deg, var(--brand--accent, #3a9bf5), color-mix(in srgb, var(--brand--accent, #3a9bf5) 60%, var(--brand--blue, #0e27f3))); border-color: #fff; }
.bd-k-pill { background: linear-gradient(180deg, color-mix(in srgb, var(--brand--blue, #0e27f3), white 8%), color-mix(in srgb, var(--brand--blue, #0e27f3), black 20%)); border-color: #fff; border-radius: 999px; }
.bd-k-db { background: linear-gradient(180deg, color-mix(in srgb, var(--brand--blue, #0e27f3), white 4%), color-mix(in srgb, var(--brand--blue, #0e27f3), black 30%)); border-color: rgba(255, 255, 255, 0.55); border-radius: 0.5rem / 0.9rem; }
.bd-k-db::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 24%; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.bd-k-db > * { position: relative; margin-top: 12%; }
.bd-k-rdb { background: #fff; color: var(--brand--blue, #0e27f3); border-color: #050409; font-family: "Noto Sans", sans-serif; font-weight: 700; border-radius: 0.5rem / 0.9rem; }
.bd-k-rdb::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 24%; border: 1px solid #050409; border-radius: 50%; }
.bd-k-rdb > * { position: relative; margin-top: 12%; }
.bd-photo { z-index: 3; height: auto; }

/* Narrow screens: the same diagram at a readable size with every arrow kept; the visitor swipes sideways
   (Ben, 9 Nov 2026: the stacked layout dropped most of the connectors). It opens centred on the main path. */
.bd-hint { display: none; }
@media (max-width: 900px) {
  .bd-wrap { padding: 3rem 0; }
  .bd-hint { display: block; margin: 0 0 0.75rem; text-align: center; font-size: 14px; color: var(--text--alternate, #aaaaaa); font-family: Ibmplexmono, ui-monospace, monospace; }
  .bd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 0.5rem; }
  .bd-scroll:focus-visible { outline: 2px solid var(--brand--secondary, #a0faef); outline-offset: 4px; }
  /* 900px keeps the labels at their designed size (a narrower canvas would hit the 14px floor and overflow the boxes). */
  .bd { width: 900px; max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bd-link { stroke-dasharray: 1; animation: bd-draw linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
    @keyframes bd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    /* In the sideways-scrolling box the lines are simply there: no draw-on-scroll. */
    @media (max-width: 900px) { .bd-link { animation: none; stroke-dasharray: none; } }
  }
}

/* A diagram in the slot of an image (hero column, card, detail hero): fills its positioned parent and scales to fit.
   The 11px floor keeps labels legible at card width; the draw-on-scroll animation is off here. */
.bdi { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.bdi .bd { width: min(100cqw, calc(100cqh * var(--w) / var(--h))); max-width: none; margin: 0; }
.bdi .bd-node { font-size: max(11px, calc(var(--fs) / var(--w) * 100cqw)); }
.bdi .bd-link { stroke-dasharray: none; animation: none; }
.bdi .bd-link-dotted { stroke-dasharray: 2 5; }
/* The wrapper of the image the diagram replaces takes the diagram's own shape (data-ar), so a card or hero is as tall as
   the diagram needs to keep its type size. Cards in one row stay level because the grid stretches them. */
:is(.media_image-wrapper, .content_image-wrapper, .migration-toolset_image-wrapper, .resource-blog_image-wrapper):has(> .bdi) { padding-top: 0; }
:is(.media_image-wrapper, .content_image-wrapper, .migration-toolset_image-wrapper, .resource-blog_image-wrapper):has(> .bdi[data-ar="472/396"]) { aspect-ratio: 472 / 396; }
:is(.media_image-wrapper, .content_image-wrapper, .migration-toolset_image-wrapper, .resource-blog_image-wrapper):has(> .bdi[data-ar="560/600"]) { aspect-ratio: 560 / 600; }
:is(.media_image-wrapper, .content_image-wrapper, .migration-toolset_image-wrapper, .resource-blog_image-wrapper):has(> .bdi[data-ar="472/480"]) { aspect-ratio: 472 / 480; }
:is(.media_image-wrapper, .content_image-wrapper, .migration-toolset_image-wrapper, .resource-blog_image-wrapper):has(> .bdi[data-ar="472/520"]) { aspect-ratio: 472 / 520; }
/* Kinds used by the engagement process and thumbnails. */
.bd-k-white { background: #fff; color: var(--brand--background, #050409); border-color: #fff; border-radius: 0; font-weight: 700; }
.bd-k-text { background: none; border: 0; font-weight: 400; color: var(--text--alternate, #aaaaaa); }
.bd-k-chip { background: var(--brand--lines, #1b1b1d); border-color: rgba(255, 255, 255, 0.25); border-radius: 0.3rem; font-weight: 400; }
/* doxygen is drawn underlined in Jon's original LegacyMap diagrams. */
.bd-k-doxy .bd-label { text-decoration: underline; text-underline-offset: 0.2em; }

/* A diagram inside rich text, in place of the image: sized by its own shape. */
.bdi-body { position: relative; width: min(640px, calc(100vw - 2rem)); margin-inline: auto; aspect-ratio: 472 / 480; }
.bdi-body:has(> .bdi[data-ar="472/520"]) { aspect-ratio: 472 / 520; }
.bdi-body:has(> .bdi[data-ar="472/396"]) { aspect-ratio: 472 / 396; }
/* Wide banners (blog hero): the wide layout beside text, the narrow layout on phones. */
.bdi-narrow { display: none; }
@media (max-width: 767px) {
  .bdi-wide { display: none; }
  .bdi-narrow { display: flex; }
  .code_block-wrapper:has(> .bdi-narrow) { aspect-ratio: 472 / 704; }
}
/* Inside rich text, span rules (gradient text) must not reach the labels. */
.bd-node > span { color: inherit; background: none; -webkit-text-fill-color: currentColor; -webkit-background-clip: border-box; background-clip: border-box; }