/* Diagram figures for the marketing pages.
   Deliberately kept out of the compiled style-codebase.css, following the
   cookie-consent.css precedent, so these can be edited without touching a
   50,000-line generated file. */

.gk-figure {
  margin: 0;
  width: 100%;
}

.gk-figure svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Everything inherits currentColor so the figures follow the surrounding
   text colour in both light and dark without a second palette. */
.gk-figure .gk-node {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.42;
}

.gk-figure .gk-node-fill {
  fill: currentColor;
  opacity: 0.06;
}

.gk-figure .gk-label {
  fill: currentColor;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  opacity: 0.88;
}

/* one emphasised label per figure: the thing the diagram is actually about */
.gk-figure .gk-lead {
  fill: currentColor;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 1;
}

.gk-figure .gk-sublabel {
  fill: currentColor;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: -0.02em;
  opacity: 0.55;
}

/* the connector is the thing to follow, so it outweighs the containers */
.gk-figure .gk-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.5;
}

/* Severity is the one place colour is spent, and only where it is earned. */
/* fill:none is load-bearing — SVG's default fill is black, so omitting it
   paints a solid black box over every severity-marked node. */
.gk-figure .gk-critical { fill: none; stroke: #dc2626; stroke-width: 1.9; opacity: 0.95; }
.gk-figure .gk-critical-fill { fill: #dc2626; opacity: 0.10; }
.gk-figure .gk-critical-text { fill: #dc2626; opacity: 1; }

.gk-figure .gk-caption {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.8125rem;
  opacity: 0.6;
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: no-preference) {
  .gk-figure .gk-pulse { animation: gk-pulse 3s ease-in-out infinite; }
  @keyframes gk-pulse {
    0%, 100% { opacity: 0.10; }
    50%      { opacity: 0.20; }
  }
  /* the halo breathes instead of the fill: a tint stepping between two
     opacities reads as a flicker, a soft edge reads as heat */
  .gk-figure .gk-crit-glow { animation: gk-glow 3.4s ease-in-out infinite; }
  @keyframes gk-glow {
    0%, 100% { opacity: 0.34; }
    50%      { opacity: 0.62; }
  }
}

/* On narrow screens, keep the diagram's intrinsic proportions and let it
   scroll rather than shrinking the type into illegibility. Enlarging the
   font instead would overflow the node boxes, which are sized for the type
   scale above. min-width matches the 640-unit viewBox so the figure renders
   at 1:1 and the 9px sublabel stays 9px; any smaller value silently
   downscales every label. */
@media (max-width: 575.98px) {
  .gk-figure     { overflow-x: auto; }
  .gk-figure svg { min-width: 640px; overflow: hidden; }
}


/* ---- material -------------------------------------------------------
   The page around these figures has lit material: gradients, edge
   highlights, shadow. The figures were flat hairlines on a flat ground,
   which read as a wireframe dropped onto a finished page. A node now gets
   a fill that falls off downward and a brighter top edge, so it sits in
   the same light as everything else. */
.gk-figure .gk-edge      { fill: none; stroke: currentColor; stroke-width: 1; opacity: .18; }
.gk-figure .gk-edge-crit { fill: none; stroke: #dc2626; stroke-width: 1; opacity: .5; }
/* the severity node reads as hot rather than merely outlined in red */
.gk-figure .gk-crit-glow { fill: none; stroke: #dc2626; stroke-width: 4; opacity: .45; }

/* ---- time -----------------------------------------------------------
   A timeline needs a connector that carries severity along its whole
   length, not just at the head, because the point is the duration: the
   stretch after the flip is the exposure. The small dots are individual
   scans, so the figure shows the check being evaluated repeatedly rather
   than discovered once. */
.gk-figure .gk-link-crit { stroke: #dc2626; opacity: .8; }
.gk-figure .gk-scan      { fill: currentColor; opacity: .34; }
.gk-figure .gk-scan-crit { fill: #dc2626; opacity: .7; }

/* ---- zones ----------------------------------------------------------
   An attack path is a story about something crossing a boundary, and the
   figure never drew the boundary. The zone is the account; what sits
   outside it is dashed, because it is not yours to configure. */
.gk-figure .gk-zone      { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 6; opacity: .16; }
.gk-figure .gk-zone-fill { fill: currentColor; opacity: .02; }
.gk-figure .gk-zone-label {
  fill: currentColor;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px; letter-spacing: .09em; text-transform: uppercase; opacity: .5;
}
.gk-figure .gk-outside { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 4 4; opacity: .38; }
.gk-figure .gk-caption-rule { stroke: currentColor; stroke-width: 1; opacity: .09; }

/* ---- direction ------------------------------------------------------- */
/* Every connector previously stated that two things were related but not
   which way the relationship ran, which on an attack path is the whole
   point. Markers inherit the figure's colour. */
/* The arrowheads must be opaque. A marker is rendered as part of the
   element that references it, so .gk-link's opacity groups the line and its
   marker and composites them together. Giving the marker path its own
   opacity on top of that made the triangle translucent *within* that group:
   the line showed straight through it, and the overlap composited brighter
   than the triangle alone, so every arrow read as a bar with a faint head.
   Opaque here, the group's .5 then dims line and head equally. */
.gk-figure .gk-arrow { fill: currentColor; opacity: 1; }
.gk-figure .gk-arrow-crit { fill: #dc2626; opacity: 1; }