/* Radar diagnostic (includes/visuals/radar.php) */
.rd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 900px) { .rd { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 56px; } }
.rd-svg { max-width: 760px; margin-inline: auto; }
.rd-ring { fill: none; stroke: var(--line); stroke-width: 1.2; }
.rd-ring--out { stroke: #b9b3aa; }
.rd-axis { stroke: var(--line); stroke-width: 1.2; }
.rd-l { fill: var(--forest); font-size: 19px; font-weight: 600; }
.rd-target { fill: none; stroke: #7d8a80; stroke-width: 2.4; stroke-dasharray: 7 7; }
.rd-obs-area { fill: rgba(150, 248, 120, .45); stroke: var(--forest); stroke-width: 2.4; stroke-linejoin: round; }
.rd-dot { fill: var(--forest); stroke: var(--green); stroke-width: 3; }
.rd .vz-legend { justify-content: center; }

.rd-gaps { list-style: none; margin: 12px 0 28px; padding: 0; display: grid; gap: 18px; }
.rd-gap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.rd-gap-name { font-weight: 600; color: var(--forest); font-size: 16.5px; }
.rd-gap-val { font-weight: 700; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rd-bar { grid-column: 1 / -1; width: 100%; height: 10px; display: block; }
.rd-bar-bg { fill: var(--line); }
.rd-bar-obs { fill: var(--forest); }
.rd-bar-target { fill: var(--green-text); }
.rd-src-t { margin-top: 0; }
.rd-sources { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* animation: rings, then the expected level, then the observed area grows from the centre; gaps fill in */
.js .vz-figure .rd-target { stroke-dashoffset: 300; opacity: 0; transition: opacity .6s ease .3s; }
.js .vz-figure .rd-obs { transform: scale(0); transform-box: view-box; transform-origin: 300px 250px; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .6s; }
.js .vz-figure .rd-dot { opacity: 0; transition: opacity .4s ease 1.5s; }
.js .vz-figure .rd-bar-obs { transform: scaleX(0); transform-box: fill-box; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .rd-gap--1 .rd-bar-obs { transition-delay: 1.2s; }
.js .vz-figure .rd-gap--2 .rd-bar-obs { transition-delay: 1.4s; }
.js .vz-figure .rd-gap--3 .rd-bar-obs { transition-delay: 1.6s; }
.js .vz-figure.is-visible .rd-target { opacity: 1; animation: rd-dash 1.6s linear 1s infinite; }
.js .vz-figure.is-visible .rd-obs { transform: none; }
.js .vz-figure.is-visible .rd-dot { opacity: 1; }
.js .vz-figure.is-visible .rd-bar-obs { transform: none; }
@keyframes rd-dash { to { stroke-dashoffset: 272; } }

.rd-num, .rd-axes { display: none; }
.rd-num circle { fill: var(--forest); }
.rd-num text { fill: var(--white); font-size: 30px; font-weight: 700; }
@media (max-width: 600px) {
  .rd-l { display: none; }
  .rd-num { display: inline; }
  /* only x = -10…610 of the viewBox is drawn without the labels: crop the sides */
  .rd-chart { overflow: hidden; }
  .rd-svg { width: 140%; max-width: none; margin-left: -22%; }
  .rd-axes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 14px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.35; color: var(--forest); }
  .rd-axes li::marker { font-weight: 700; }
}