/**
 * Risk Framework spider graph — WakeUp Capital styling.
 *
 * UNITS: the source component was authored against a 16px root. This site sets
 * `html { font-size: 62.5% }` (Advanced Themer), so 1rem = 10px here. Source
 * rem lengths were multiplied by 1.6 to preserve the designed size; anything
 * expressed with a site token (--space-*, --text-*) is already in site units.
 *
 * THEMING: every colour, font and rule below resolves through the --rg-*
 * custom properties, which in turn point at the site's design tokens. Override
 * the --rg-* block alone to re-theme; nothing downstream hard-codes a value.
 */
.rg {
  /* ---- theme tokens ---- */
  --rg-ink: var(--navy-700);                 /* base hue for grid + marks   */
  --rg-accent: var(--lime-500);              /* active node / badge — the site
                                                marks emphasis in lime (see
                                                .btn--brand: lime bg, navy text) */
  --rg-on-accent: var(--navy-700);           /* numeral/label on the accent   */
  --rg-node-fill: var(--white);
  --rg-node-line: rgba(16, 63, 106, .38);    /* resting node ring           */
  --rg-chord: var(--navy-700);
  --rg-chord-fill: rgba(16, 63, 106, .08);   /* navy tint: lime at low alpha
                                                goes mustard over the section
                                                gradient */
  --rg-text: var(--text);
  --rg-text-muted: var(--text-muted);
  --rg-rule: var(--border);                  /* accordion hairlines         */
  --rg-rule-active: var(--navy-700);
  --rg-font: var(--font-sans);
  --rg-ease: cubic-bezier(.4, 0, .2, 1);

  --rg-grid: rgba(16, 63, 106, .38);         /* every ring and spoke, one value */

  font-family: var(--rg-font);
  color: var(--rg-text);

  /* Side-by-side from tablet up; the graph reads as the figure and the
     accordion as its legend, so they belong on one line wherever there is
     room for both.

     Flex rather than grid: the accordion is sized by its own content
     (fit-content) instead of a track fraction, so the pair has to be centred
     as a group — `justify-content: center` on a flex row does that, whereas a
     fr-based grid would just stretch the tracks back out. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* the graph + accordion pair, centred as a unit */
  /* flex-start, not the `top` that reads naturally here: `top` is not a valid
     align-items value, so the declaration is dropped and the property falls
     back to `normal` (= stretch). That happens to LOOK top-aligned, because a
     stretched .rg-acc packs its items at the top — but it also makes the
     accordion box as tall as the graph, so any background, border or
     bottom-anchored child on .rg-acc would size to the graph, not the copy. */
  align-items: flex-start;   /* accordion top-aligned against the graph */
  gap: var(--space-64);
  /* Bricks containers are flex columns with align-items:flex-start, so a child
     without an explicit width shrinks to its content instead of filling. */
  width: 100%;
}

/* ---------- graph ---------- */
/* Sized off the accordion: JS measures the accordion's TALLEST state once per
   width and publishes it as --rg-size (see risk-graph.js); the square viewBox
   scales to match and then holds still as items open and close.
   `36rem` is the no-JS fallback — the viewBox at 1:1, 360px at this root size.
   `56rem` is a backstop so a freak accordion height can't blow the layout up.
 *
 * Why not pure CSS? `align-self: stretch` + `aspect-ratio: 1` looks like it
 * should transfer the line's cross size into a width, but an inline <svg> is a
 * replaced element whose `width` attribute defaults to 100%, so `width: auto`
 * resolves to the container width (measured: 1777px) rather than to the
 * transferred height — and the graph then *defines* the line instead of
 * following it. An explicit width sidesteps that, and "tallest state" is not
 * expressible in CSS anyway. */
.rg-graph {
  display: block;
  align-self: center;
  flex: 0 0 auto;
  width: min(var(--rg-size, 36rem), 72rem, 100%);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  /* NO `margin-inline: auto` here — an auto margin on a flex item swallows all
     the line's free space before `justify-content: center` gets a look in, which
     pins the accordion to the right edge instead of centring the pair. */
}
/* The Impact hero's balance-scale SVG carries an inline <style> using bare
   element selectors — `circle, ellipse { opacity: 0 }` plus keyframes. Inline
   SVG styles are NOT scoped to their SVG, so that rule applies to every circle
   in the document and hid this grid's outer rings. Opt out explicitly; bare
   `circle` is (0,0,1) so this easily outranks it. */
.rg .rg-graph circle,
.rg .rg-graph ellipse,
.rg .rg-graph rect,
.rg .rg-graph polygon {
  opacity: 1;
  animation: none;
}

/* Every ring and spoke shares one stroke. The `stroke` MUST be set on .grid
   itself: SVG's initial stroke is `none`, so a ring left unmatched by a more
   specific rule renders invisible rather than defaulting to a colour. */
.rg-graph .grid { fill: none; stroke: var(--rg-grid); stroke-width: 1; }

.rg-graph .chord {
  fill: var(--rg-chord-fill);
  stroke: var(--rg-chord);
  stroke-width: 6;
  stroke-linejoin: round;
}

.rg-node { cursor: pointer; outline: none; }
.rg-node circle {
  fill: var(--rg-node-fill);
  stroke: var(--rg-node-line);
  stroke-width: 1.5;
}
.rg-node text {
  font-family: var(--rg-font);
  font-size: 15px;               /* SVG user units — not affected by root size */
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  fill: var(--rg-text);
}
.rg-node.is-active circle,
.rg-node:hover circle,
.rg-node:focus-visible circle { stroke: var(--rg-ink); fill: var(--rg-accent); }
.rg-node.is-active text,
.rg-node:hover text,
.rg-node:focus-visible text { fill: var(--rg-on-accent); }
.rg-node:focus-visible circle { stroke-width: 3; }

/* ---------- accordion ---------- */
/* Shrink-wrapped: the widest of a one-line head and the 55ch body paragraph
   sets the width, so the hairline rules stop at the copy instead of running out
   to a track edge. `fit-content` resolves to max-content while there is room
   and falls back to the available width when there is not. */
/* `flex: 0 0 auto` is load-bearing, not tidiness: if the accordion could shrink,
   a wider graph would narrow it, the narrower accordion would wrap taller, the
   taller accordion would feed a bigger --rg-size back in, and the two would
   ratchet each other. Fixed at fit-content, its height is independent of the
   graph and the loop cannot start — the line wraps instead. */
.rg-acc {
  margin-top: 0;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}
.rg-item {
  border-top: 3px solid var(--rg-rule);
}
.rg-item:last-child { border-bottom: 3px solid var(--rg-rule); }
.rg-item.is-active { border-top-color: var(--rg-rule-active); }

.rg-head {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-16) 0;
  cursor: pointer;
  font-family: var(--rg-font);
  font-weight: 700;
  font-size: var(--text-m);
  line-height: 1.25;
  color: var(--rg-text);
}
.rg-head:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }

.rg-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--rg-node-line);
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--rg-node-fill);
}
.rg-item.is-active .rg-badge {
  background: var(--rg-accent);
  border-color: var(--rg-accent);
  color: var(--rg-on-accent);
}

/* CSS-only expand/collapse — no Alpine collapse plugin needed */
.rg-body {
  display: grid;
  grid-template-rows: 0fr;
}

/* Applied for the duration of one synchronous measurement in measureTallest()
   and removed before anything can paint — it forces the accordion into its
   fully collapsed state so its floor can be read. `!important` because it has
   to beat `.rg-item.is-active .rg-body` below. */
.rg--measure .rg-body {
  grid-template-rows: 0fr !important;
  transition: none !important;
}
.rg-item.is-active .rg-body { grid-template-rows: 1fr; }
.rg-body > div { overflow: hidden; }
.rg-body p {
  margin: 0 0 var(--space-20);
  padding-left: calc(2.8rem + var(--space-12));   /* aligns under the title, past the badge */
  font-size: var(--text-s);
  line-height: 1.6;
  color: var(--rg-text);
  max-width: 65ch;
}

/* Transitions are armed only once the component has painted its resting state
   (JS adds .is-ready on the second frame). Without this the first render tweens
   from empty to open, which reads as an entrance animation. */
.rg.is-ready .rg-body { transition: grid-template-rows .35s var(--rg-ease); }
.rg.is-ready .rg-node circle { transition: stroke .2s var(--rg-ease), fill .2s var(--rg-ease); }
.rg.is-ready .rg-node text { transition: fill .2s var(--rg-ease); }
.rg.is-ready .rg-item { transition: border-color .2s var(--rg-ease); }
.rg.is-ready .rg-badge {
  transition: background .2s var(--rg-ease), border-color .2s var(--rg-ease), color .2s var(--rg-ease);
}

/* ---------- mobile: stack ---------- */
@media (max-width: 767px) {
  .rg {
    flex-direction: column;
    align-items: center;
    gap: var(--space-32);
  }
  /* Stacked: nothing to match heights with, so opt back out of the stretch and
     fall back to a fixed comfortable size. */
  .rg-graph { align-self: center; width: 34rem; max-width: 100%; }
  .rg-acc { width: 100%; }
  .rg-body p { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rg-body, .rg-node circle, .rg-node text, .rg-badge, .rg-item { transition: none; }
}