@layer components {
  .spider-plot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);
    inline-size: 100%;
  }

  .spider-plot__svg {
    inline-size: 100%;
    max-inline-size: var(--spider-plot-size, 360px);
    block-size: auto;
    overflow: hidden;
  }

  .spider-plot__ring {
    fill: var(--color-ink-lightest);
    fill-opacity: 0.45;
    stroke: var(--color-ink-lighter);
    stroke-width: 1;
  }

  .spider-plot__axis-line {
    fill: none;
    stroke: var(--color-ink-lighter);
    stroke-width: 1;
  }

  .spider-plot__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    fill: var(--color-ink-dark);
  }

  .spider-plot__label--new {
    font-weight: 800;
    fill: var(--color-accent);
  }

  .spider-plot__series {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: spider-plot-expand 600ms var(--ease-out-expo) both;
    animation-delay: calc(var(--series-index, 0) * 90ms);
  }

  .spider-plot__series polygon {
    fill: var(--series-color);
    fill-opacity: 0.18;
    stroke: var(--series-color);
    stroke-width: 2;
    stroke-linejoin: round;
  }

  .spider-plot__series circle {
    fill: var(--series-color);
  }

  .spider-plot__series--median polygon {
    fill-opacity: 0.25;
    stroke-dasharray: 4 4;
  }

  /* Decorative marketing mock — see web/shared/_spider_mock */
  .spider-plot--mock {
    --spider-plot-size: 100%;
  }

  .spider-plot--mock .spider-plot__series--median {
    --series-color: var(--color-ink-medium);
    --series-index: 0;
  }

  .spider-plot--mock .spider-plot__series--subject {
    --series-color: var(--color-accent);
    --series-index: 1;
  }

  .spider-plot__title {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxs) var(--space-s);
    font-size: var(--text-medium);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
  }

  .spider-plot__title-name {
    color: var(--series-color);
  }

  .spider-plot__title-vs {
    color: var(--color-ink-medium);
    font-weight: 400;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  @keyframes spider-plot-expand {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .spider-plot__series { animation: none; }
  }
}