/* GESDA Radar canvas: copied from experiences-page/radar-canvas/gesda-radar-canvas.html.
   Reproduces the published Radar figure, so its own colours are kept (the
   recorded exception for existing GESDA figures). Only the font changes. */
  .shp--svg-canvas__canvas {
    --radar-font: var(--font-body);   /* v4: system face (§4.1) in place of Open Sans */
    --radar-ink: #3b3b3b;
    --radar-ring: #e9e9e9;
    --radar-shape: #bdbdbd;
    --p-ahp: var(--radar-ahp);  /* Augmenting Human Potential (v4: values now in tokens.css) */
    --p-ebs: var(--radar-ebs);  /* Engineering Biological Systems */
    --p-cpf: var(--radar-cpf);  /* Charting Planetary Frontiers */
    --p-esw: var(--radar-esw);  /* Exploring Social Worlds */
    --p-dmr: var(--radar-dmr);  /* Designing Machine Realities */
    width: 100%;
    max-width: 820px;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    font-family: var(--radar-font);
  }
  .shp--svg-canvas__canvas svg { display: block; width: 100%; height: 100%; }

  .shp--svg-canvas__canvas .rd-ring   { fill: none; stroke: var(--radar-ring); stroke-width: 1; }
  .shp--svg-canvas__canvas .rd-band   { fill: none; stroke: #dcdcdc; stroke-width: 9; opacity: .55; }
  .shp--svg-canvas__canvas .rd-shape  { fill: var(--radar-shape); fill-opacity: .38; stroke: none; }
  .shp--svg-canvas__canvas .rd-rim-text { fill: #fff; font-size: 15.5px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }

  .shp--svg-canvas__canvas .rd-btn         { cursor: pointer; }
  .shp--svg-canvas__canvas .rd-btn circle  { transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
  .shp--svg-canvas__canvas .rd-btn:hover circle,
  .shp--svg-canvas__canvas .rd-btn:focus-visible circle { transform: scale(1.12); }
  .shp--svg-canvas__canvas .rd-btn:focus { outline: none; }
  .shp--svg-canvas__canvas .rd-btn:focus-visible circle { stroke: #333; stroke-width: 2; }
  .shp--svg-canvas__canvas .rd-chev { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

  .shp--svg-canvas__canvas .rd-topic       { cursor: pointer; transition: opacity .25s ease; }
  .shp--svg-canvas__canvas .rd-topic:focus { outline: none; }
  .shp--svg-canvas__canvas .rd-dot         { fill: var(--c); transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
  .shp--svg-canvas__canvas .rd-label       { fill: var(--radar-ink); font-size: 11.5px; }
  .shp--svg-canvas__canvas .rd-topic:hover .rd-dot,
  .shp--svg-canvas__canvas .rd-topic:focus-visible .rd-dot { transform: scale(1.25); }
  .shp--svg-canvas__canvas .rd-topic:focus-visible .rd-dot { stroke: #333; stroke-width: 2; }
  .shp--svg-canvas__canvas .rd-topic.is-active .rd-dot     { stroke: #fff; stroke-width: 3; }
  .shp--svg-canvas__canvas .rd-topic.is-active .rd-label   { font-weight: 700; }
  .shp--svg-canvas__canvas .rd-topic.is-dim { opacity: .2; }

  .shp--svg-canvas__canvas .rd-anim { animation: rd-in .6s ease both; }
  @keyframes rd-in { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .shp--svg-canvas__canvas .rd-anim { animation: none; } }