/* workflow.ndexr.io — generated from config.json brand.palette.
   Brand primary applies in both themes; the dark surfaces are scoped to
   [data-bs-theme="dark"] so a light-mode toggle falls through to the shared
   light theme (home.css _light.scss) instead of being forced dark. */
:root {
  --bs-primary:                  #6a96c4;
  --bs-primary-rgb:              106, 150, 196;
}
[data-bs-theme="dark"] {
  --bs-body-bg:                  #0f1220;
  --bs-secondary-bg:             #1c1f2b;
  --bs-tertiary-bg:              #1c1f2b;
  --bs-body-color:               #f3eee4;
  --bs-emphasis-color:           #f3eee4;
  --bs-secondary-color:          #8a90a2;
  --bs-tertiary-color:           #8a90a2;
  --bs-border-color:             #1c1f2b;
}

/* The page chrome (hero, sections, cards, headings) is the shared suite
   pattern — Bootstrap utilities + hpc_nav$ui_suite_hero + inputs$section_label.
   Only two things live here: the small note callout, and the diagram system,
   which is this page's reason to exist (see module.r). */

/* ── Note callout ──────────────────────────────────────────────────────── */
.note{display:flex;align-items:flex-start;gap:.5rem;background:rgba(var(--bs-primary-rgb),.08);border:1px solid rgba(var(--bs-primary-rgb),.22);border-radius:8px;padding:.75rem 1rem;margin-top:1rem;font-size:.83rem;line-height:1.6;color:var(--bs-body-color)}
.note .bi{color:var(--bs-primary);margin-top:.1rem}
.note a{color:var(--bs-primary);text-decoration:none;font-weight:500}
.note a:hover{text-decoration:underline}
.note code{color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.1);padding:.05rem .3rem;border-radius:3px;font-size:.9em}

/* ── Diagram theme tokens — flip with data-bs-theme so plots read in both ──
   Every colour in the SVGs resolves to one of these variables (gradient stops
   included, via `style="stop-color:var(--…)"`), so a light/dark toggle repaints
   the whole diagram, not just the page around it. Defaults below are the dark
   set; the [data-bs-theme="light"] block overrides them. */
:root,
:root[data-bs-theme="dark"],
[data-bs-theme="dark"]{
  --dg-panel-1:#171b2b;   --dg-panel-2:#0b0d17;   --dg-border:rgba(106,150,196,.18);
  --dg-node-1:#1e2438;    --dg-node-2:#141826;
  --dg-panelbox-1:#181d2c;--dg-panelbox-2:#111521;
  --dg-stroke:#3e465b;
  --dg-accent-1:rgba(106,150,196,.36); --dg-accent-2:rgba(106,150,196,.10);
  --dg-base-1:rgba(106,150,196,.20);   --dg-base-2:rgba(106,150,196,.04);
  --dg-rail-1:rgba(106,150,196,.06);   --dg-rail-2:rgba(106,150,196,.18);
  --dg-title:#f4f0e7;     --dg-sub:#bcc2d2;        --dg-accent-text:#9dbde0;
  --dg-line:#6a7288;      --dg-line-a:#7ba4cf;     --dg-dash:#525b70;
  --dg-badge:#6a96c4;     --dg-badge-text:#0f1220;
}
[data-bs-theme="light"]{
  --dg-panel-1:#f7f9fd;   --dg-panel-2:#eaeef6;   --dg-border:rgba(45,95,146,.26);
  --dg-node-1:#ffffff;    --dg-node-2:#eef2f9;
  --dg-panelbox-1:#ffffff;--dg-panelbox-2:#f0f4fa;
  --dg-stroke:#c2ccdb;
  --dg-accent-1:rgba(45,95,146,.20);   --dg-accent-2:rgba(45,95,146,.05);
  --dg-base-1:rgba(45,95,146,.16);     --dg-base-2:rgba(45,95,146,.03);
  --dg-rail-1:rgba(45,95,146,.05);     --dg-rail-2:rgba(45,95,146,.16);
  --dg-title:#182131;     --dg-sub:#4d5766;        --dg-accent-text:#2b5f92;
  --dg-line:#9aa4b5;      --dg-line-a:#3f79b0;     --dg-dash:#b4bece;
  --dg-badge:#3f79b0;     --dg-badge-text:#ffffff;
}

/* ── SVG diagrams — the centre of the page ─────────────────────────────── */
.dgm-fig{margin:1.75rem 0 0}
.dgm-scroll{
  overflow-x:auto;
  border:1px solid var(--dg-border);
  border-radius:16px;
  background:radial-gradient(130% 150% at 50% -10%, var(--dg-panel-1) 0%, var(--dg-panel-2) 68%);
  padding:1.75rem 1.5rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -24px rgba(0,0,0,.55);
}
.dgm-svg{display:block;width:100%;height:auto;font-family:inherit}
.dgm-cap{font-size:.84rem;color:var(--bs-secondary-color);line-height:1.65;margin:1rem auto 0;max-width:860px}
.dgm-cap strong{color:var(--bs-body-color);font-weight:600}
.dgm-cap code{color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.1);padding:.05rem .3rem;border-radius:3px;font-size:.88em}

/* Nodes — fills come from the gradient defs (theme-aware stops); CSS sets
   stroke only, so the gradient attribute wins. */
.dg-node{stroke:var(--dg-stroke);stroke-width:1.4}
.dg-node-accent{stroke:var(--dg-line-a);stroke-width:1.7}
.dg-node-base{stroke:var(--dg-stroke);stroke-width:1.3}
.dg-panel{stroke:var(--dg-stroke);stroke-width:1.3}
.dg-rail{stroke:var(--dg-line-a);stroke-width:1.3;stroke-opacity:.55}

/* Text */
.dg-title{fill:var(--dg-title);font-weight:600}
.dg-sub{fill:var(--dg-sub)}
.dg-accent{fill:var(--dg-accent-text);font-weight:600}
.dg-mono{font-family:var(--bs-font-monospace, ui-monospace, monospace)}

/* Connectors + arrowheads (marker paths coloured here so they flip too) */
.dg-link{fill:none;stroke:var(--dg-line);stroke-width:1.8;stroke-linecap:round}
.dg-link-a{fill:none;stroke:var(--dg-line-a);stroke-width:1.9;stroke-linecap:round}
.dg-dash{fill:none;stroke:var(--dg-dash);stroke-width:1.3;stroke-dasharray:4 4}
.dg-axis{stroke:var(--dg-line);stroke-width:1.4}
#dg-ar path{fill:var(--dg-line-a)}
#dg-arm path{fill:var(--dg-line)}

/* Numbered step badges */
.dg-badge{fill:var(--dg-badge)}
.dg-badge-txt{fill:var(--dg-badge-text);font-weight:700}

/* Small glyphs (server stacks, locks, devices) */
.dg-glyph{fill:none;stroke:var(--dg-line-a);stroke-width:1.5}
.dg-glyph-fill{fill:var(--dg-line-a);stroke:none}

/* Moving dashes along the forward arrows — decorative, motion-safe. */
@media (prefers-reduced-motion: no-preference){
  .dg-flow{stroke-dasharray:7 7;animation:dgflow 1.1s linear infinite}
  @keyframes dgflow{to{stroke-dashoffset:-14}}
}