/* Shared diagram stylesheet for every Archify figure in this portal.
   All diagrams use visual_preset "classic"; node colours come from the
   .c-* fill/stroke and .t-* text classes defined below. */
.archify-figure{--bg: #020617;
      --grid: #1e293b;
      --text: #ffffff;
      --text-muted: #94a3b8;
      --text-dim: #475569;
      /* UI chrome and menu hints need more contrast than SVG .t-dim accents */
      --text-faint: #7d8da1;

      --panel: rgba(15, 23, 42, 0.5);
      --panel-border: #1e293b;
      --lane-fill: rgba(15, 23, 42, 0.22);
      --lane-stroke: #334155;

      --arrow: #64748b;
      --arrow-emphasis: #34d399;

      /* Opaque mask color used behind semi-transparent component fills
         so the arrows drawn underneath are properly hidden. */
      --mask: #0f172a;

      --frontend-fill:    rgba(8, 51, 68, 0.4);
      --frontend-stroke:  #22d3ee;
      --backend-fill:     rgba(6, 78, 59, 0.4);
      --backend-stroke:   #34d399;
      --database-fill:    rgba(76, 29, 149, 0.4);
      --database-stroke:  #a78bfa;
      --cloud-fill:       rgba(120, 53, 15, 0.3);
      --cloud-stroke:     #fbbf24;
      --security-fill:    rgba(136, 19, 55, 0.4);
      --security-stroke:  #fb7185;
      --messagebus-fill:  rgba(251, 146, 60, 0.3);
      --messagebus-stroke:#fb923c;
      --external-fill:    rgba(30, 41, 59, 0.5);
      --external-stroke:  #94a3b8;

      --toolbar-bg:       rgba(15, 23, 42, 0.8);
      --toolbar-border:   #334155;
      --toolbar-text:     #e2e8f0;
      --toolbar-hover:    rgba(15, 23, 42, 0.95);
      --toolbar-menu-bg:  #0f172a;}
/* ========================================================== SVG SEMANTIC CLASSES — use these instead of inline fill/stroke ========================================================== */ .c-grid{stroke: var(--grid); fill: none;}
.c-mask{fill: var(--mask); stroke: none;}
.c-backend{fill: var(--backend-fill);    stroke: var(--backend-stroke);}
.c-database{fill: var(--database-fill);   stroke: var(--database-stroke);}
.c-cloud{fill: var(--cloud-fill);      stroke: var(--cloud-stroke);}
.c-frontend{fill: var(--frontend-fill);   stroke: var(--frontend-stroke);}
.c-security{fill: var(--security-fill);   stroke: var(--security-stroke);}
.c-messagebus{fill: var(--messagebus-fill); stroke: var(--messagebus-stroke);}
.c-external{fill: var(--external-fill);   stroke: var(--external-stroke);}
/* Boundary and lane surfaces: region wraps (architecture), security groups, and workflow lanes */ .c-region{fill: rgba(251, 191, 36, 0.05); stroke: var(--cloud-stroke); stroke-dasharray: 8,4;}
.c-security-group{fill: transparent; stroke: var(--security-stroke); stroke-dasharray: 4,4;}
.c-lane{fill: var(--lane-fill); stroke: var(--lane-stroke); stroke-dasharray: 6,6;}
/* Text helpers */ .t-primary{fill: var(--text);}
.t-muted{fill: var(--text-muted);}
.t-backend{fill: var(--backend-stroke);}
.t-cloud{fill: var(--cloud-stroke);}
.t-database{fill: var(--database-stroke);}
.t-frontend{fill: var(--frontend-stroke);}
.t-security{fill: var(--security-stroke);}
.t-messagebus{fill: var(--messagebus-stroke);}
.t-external{fill: var(--external-stroke);}
/* Semantic Sigils are small authored role stamps, not icons from a brand pack and not viewer controls. Prefix selectors with svg so the canonical export's SVG-only stylesheet collector keeps them automatically. */ svg .semantic-sigil{fill: none;
      stroke: currentColor;
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.76;
      pointer-events: none;}
svg .semantic-sigil > *{vector-effect: non-scaling-stroke;}
svg .semantic-sigil .sigil-fill{fill: currentColor; stroke: none;}
svg .s-backend{color: var(--backend-stroke);}
svg .s-database{color: var(--database-stroke);}
svg .s-cloud{color: var(--cloud-stroke);}
svg .s-frontend{color: var(--frontend-stroke);}
svg .s-security{color: var(--security-stroke);}
svg .s-messagebus{color: var(--messagebus-stroke);}
svg .s-external{color: var(--external-stroke);}
/* Arrows */ .a-default{stroke: var(--arrow); fill: none;}
.a-emphasis{stroke: var(--arrow-emphasis); fill: none;}
.a-dashed{stroke: var(--database-stroke); fill: none; stroke-dasharray: 4,4;}
/* Arrowhead markers reference these */ .m-default{fill: var(--arrow);}
.m-emphasis{fill: var(--arrow-emphasis);}
.m-security{fill: var(--security-stroke);}
.m-dashed{fill: var(--database-stroke);}
svg[data-preset="editorial"] .c-grid{stroke-dasharray: 1 4;
      opacity: 0.48;}
svg[data-preset="blueprint"] .c-grid{stroke-dasharray: 1 3;
      opacity: 0.78;}