/* Website audit radar (widgets/spider/spider.js) */
.sp { --sp-base: #9a9a9a; --sp-rival: #f4ea2a; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4px 18px; padding: 16px 22px 16px 10px; background: var(--tile-bg); }
[data-theme=dark] .sp { --sp-base: #6b6b6b; }
.sp__chart { display: grid; place-items: center; min-height: 0; }
.sp__chart svg { width: 100%; height: 100%; overflow: visible; }
.sp__ring { fill: none; stroke: color-mix(in srgb, var(--ink) 24%, transparent); }
.sp__spoke { stroke: color-mix(in srgb, var(--ink) 24%, transparent); }
.sp__axis { font: 500 11.5px var(--font); fill: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; cursor: default; }
.sp__axis:hover { fill: var(--ink); }
.sp__base { fill: var(--sp-base); fill-opacity: .38; stroke: var(--sp-base); stroke-width: 1.5; }
.sp__rival { fill: var(--sp-rival); fill-opacity: .5; stroke: #8a8414; stroke-width: 1.5; stroke-linejoin: round; }
[data-theme=dark] .sp__rival { fill-opacity: .45; stroke: var(--sp-rival); }
.sp__tip { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.sp__tip.is-on { opacity: 1; }
.sp__tip rect { fill: var(--ink); }
.sp__tip text { font: 500 12px var(--font); fill: var(--bg); }
.sp__side { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
.sp__eyebrow { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sp__logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp__logos button { display: grid; place-items: center; height: 46px; padding: 6px 10px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; opacity: .55; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease, box-shadow .25s ease; }
.sp__logos button:hover, .sp__logos button:focus-visible { opacity: .9; filter: none; outline: none; }
.sp__logos button.is-on { opacity: 1; filter: none; box-shadow: inset 0 0 0 2px var(--ink); }
.sp__logos img { max-width: 100%; max-height: 32px; object-fit: contain; }
.sp__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink); }
.sp__key { display: inline-flex; align-items: center; gap: 7px; }
.sp__key::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--sp-base); }
.sp__key--rival::before { background: var(--sp-rival); box-shadow: inset 0 0 0 1px #8a8414; }
.sp__nav { font-size: 13px; color: var(--muted); }
.sp__nav b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.sp__notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.sp__notes li { padding-left: 14px; position: relative; }
.sp__notes li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--mark); }
@container (max-width: 620px) {
  .sp > * { grid-column: 1 / -1; }
}
/* Stacked page: chart above, notes under it, the chart at its own shape. */
.is-vertical .sp { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; }
.is-vertical .sp > * { grid-column: 1 / -1; }
.is-vertical .sp__chart { aspect-ratio: 500 / 396; min-height: auto; }