/*
 * DII Radar page presentation (DII Radar System, approved v1.0A baseline:
 * designs/dii/baselines/dii_radar_page_mockup_v1.0A_APPROVED.html), loaded
 * on the Radar page only, after dii-homepage.css (Newsletter panel, tints)
 * and dii-article.css (breadcrumb). Same DII geometry/typography tokens as
 * every other archetype; the signal/direction badge colours below are the
 * approved v1.0A baseline's own additional, Radar-assessment-specific
 * semantic palette (distinct per signal/direction so a reader never needs
 * colour alone to distinguish them -- each badge also carries its own
 * text label), scoped entirely to .dii-radar-page rather than added to the
 * shared DII token set.
 *
 * Geometry: the SAME --dii-home-container token every other DII archetype
 * now uses (82.8125rem/1325px). Single-column, full-width sections
 * throughout -- the approved baseline has no persistent sidebar rail.
 */

/* The Radar page's own dependency chain (dii-homepage.css, dii-article.css)
   never loads dii-library.css, so its .dii-visually-hidden utility is not
   otherwise available here -- defined locally instead of adding an
   unrelated stylesheet dependency just for one utility class. Same
   standard visually-hidden pattern used throughout this codebase. */
.dii-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dii-radar-page {
  --dii-radar-very-high: #d92d20;
  --dii-radar-very-high-bg: #ffe5e3;
  --dii-radar-high: #b54708;
  --dii-radar-high-bg: #fff0df;
  --dii-radar-moderate: #175cd3;
  --dii-radar-moderate-bg: #e8f0ff;
  --dii-radar-watch: #344054;
  --dii-radar-watch-bg: #e8eef7;
  --dii-radar-rising: #16865a;
  --dii-radar-rising-bg: #e4f6ec;
  --dii-radar-stable: #375d8c;
  --dii-radar-stable-bg: #edf2f8;
  --dii-radar-declining: #d92d20;
  --dii-radar-declining-bg: #fff0ef;

  width: min(var(--dii-home-container, 82.8125rem), calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 0 0 var(--cdi-spacing-3xl, 4rem);
}

.dii-radar-page > * + * {
  margin-top: var(--cdi-spacing-2xl, 3rem);
}

.dii-site .dii-radar-page .dii-breadcrumb {
  padding: var(--cdi-spacing-lg, 1.5rem) 0 var(--cdi-spacing-sm, 0.5rem);
}

/* Compact masthead: abstract, CSS-only treatment -- deliberately not the
   shared photographic split-hero every other archetype uses. Programme
   Owner correction: no decorative background image/shape -- a plain
   two-tone gradient only, matching the approved baseline's own
   `linear-gradient(110deg,#fff 48%,#e7f6fa)` treatment. */
.dii-radar-page-hero {
  position: relative;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.5rem;
  padding: var(--cdi-spacing-xl, 2rem);
  background: linear-gradient(110deg, #fff 48%, var(--dii-tint) 100%);
}

.dii-radar-page-hero__eyebrow {
  position: relative;
  margin: 0 0 0.5rem;
  color: var(--dii-color-brand-secondary);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dii-radar-page-hero__title {
  position: relative;
  margin: 0 0 0.8125rem;
  color: var(--dii-color-brand-primary);
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.dii-radar-page-hero__lead {
  position: relative;
  max-width: 49rem;
  margin: 0 0 1.125rem;
  color: var(--dii-color-text-secondary);
  font-size: 1rem;
}

/* A single plain-text line matching the approved baseline's own `.meta`
   treatment exactly: "Current assessment: X · Understanding the DII
   Radar →" as one inline paragraph, not a separate status line plus a
   button-styled CTA. */
.dii-radar-page-hero__status {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--dii-color-text-secondary);
}

/* Radar list head: heading + result count + sort */
.dii-radar-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--cdi-spacing-md, 1rem);
}

.dii-radar-list-head h2 {
  margin: 0;
  color: var(--dii-color-brand-primary);
  font-size: 1.9375rem;
}

.dii-radar-list-head__tools {
  display: flex;
  align-items: center;
  gap: var(--cdi-spacing-md, 1rem);
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--dii-color-text-secondary);
}

.dii-radar-sort {
  display: flex;
  align-items: center;
}

.dii-radar-sort select {
  min-height: 2.375rem;
  padding: 0 var(--cdi-spacing-md, 1rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.25rem;
  color: var(--dii-color-brand-primary);
  background: #fff;
  font: inherit;
  font-weight: 700;
}

/* Topic Discovery */
.dii-radar-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: var(--cdi-spacing-lg, 1.5rem) 0;
  overflow-x: auto;
}

.dii-site .dii-radar-topics__link {
  flex: none;
  border-radius: 62.4375rem;
  padding: 0.6875rem 1.3125rem;
  background: var(--dii-tint);
  color: var(--dii-color-brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.dii-site .dii-radar-topics__link--current {
  background: var(--dii-color-brand-primary);
  color: #fff;
}

/* Radar Entry grid */
.dii-radar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cdi-spacing-lg, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dii-radar-entry-card {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.75rem;
  height: 100%;
  padding: var(--cdi-spacing-lg, 1.5rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.5rem;
  background: #fff;
}

.dii-radar-entry-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 3px solid var(--dii-color-brand-secondary);
  border-radius: 0.75rem;
  color: var(--dii-color-brand-secondary);
}

.dii-radar-entry-card__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.dii-radar-entry-card__body {
  grid-column: 2;
  min-width: 0;
}

.dii-radar-entry-card__title {
  margin: 0 0 0.125rem;
  color: var(--dii-color-brand-primary);
  font-size: 1.1875rem;
}

.dii-radar-entry-card__descriptor {
  margin: 0 0 0.5rem;
  color: var(--dii-color-text-secondary);
  font-size: 0.875rem;
}

.dii-radar-entry-card__signal-label {
  margin: 0.3125rem 0;
  color: var(--dii-color-text-secondary);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dii-radar-entry-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.3125rem 0 0.5625rem;
}

.dii-radar-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.9375rem;
  padding: 0.3125rem 0.6875rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.dii-radar-badge--very-high {
  background: var(--dii-radar-very-high-bg);
  color: var(--dii-radar-very-high);
}

.dii-radar-badge--high {
  background: var(--dii-radar-high-bg);
  color: var(--dii-radar-high);
}

.dii-radar-badge--moderate {
  background: var(--dii-radar-moderate-bg);
  color: var(--dii-radar-moderate);
}

.dii-radar-badge--watch {
  background: var(--dii-radar-watch-bg);
  color: var(--dii-radar-watch);
}

.dii-radar-badge--rising {
  background: var(--dii-radar-rising-bg);
  color: var(--dii-radar-rising);
}

.dii-radar-badge--stable {
  background: var(--dii-radar-stable-bg);
  color: var(--dii-radar-stable);
}

.dii-radar-badge--declining {
  background: var(--dii-radar-declining-bg);
  color: var(--dii-radar-declining);
}

.dii-radar-entry-card__why {
  margin: 0.375rem 0 0;
  color: var(--dii-color-text-secondary);
  font-size: 0.8125rem;
}

.dii-radar-entry-card__why strong {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--dii-color-brand-primary);
}

.dii-radar-entry-card__footer {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--dii-color-border-subtle);
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
}

.dii-site .dii-radar-entry-card__explore {
  color: var(--dii-color-link);
  font-weight: 800;
  text-decoration: none;
}

.dii-radar-empty,
.dii-radar-zero {
  max-width: 34rem;
  margin: var(--cdi-spacing-xl, 2rem) 0 0;
  color: var(--dii-color-text-secondary);
}

.dii-radar-zero {
  padding: var(--cdi-spacing-xl, 2rem) 0;
}

.dii-radar-zero__title {
  margin: 0 0 0.5rem;
  color: var(--dii-color-brand-primary);
  font-size: 1.25rem;
}

.dii-site .dii-radar-zero__clear {
  color: var(--dii-color-link);
  font-weight: 700;
}

/* Pagination / Load More */
.dii-radar-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: var(--cdi-spacing-xl, 2rem) 0 0.25rem;
}

.dii-site .dii-radar-pagination__load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10.625rem;
  min-height: 2.875rem;
  padding: 0 1.5rem;
  border: 1px solid var(--dii-color-brand-secondary);
  border-radius: 0.25rem;
  color: var(--dii-color-brand-secondary);
  font-weight: 700;
  text-decoration: none;
}

.dii-radar-pagination__note {
  margin: 0;
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
}

/* Methodology */
.dii-radar-methodology {
  display: grid;
  grid-template-columns: 1.25fr 0.88fr 0.52fr;
  gap: var(--cdi-spacing-xl, 2rem);
  padding: var(--cdi-spacing-xl, 2rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.5rem;
  background: linear-gradient(
    90deg,
    var(--dii-tint),
    color-mix(in srgb, var(--dii-color-brand-secondary) 6%, white)
  );
}

.dii-radar-methodology h2 {
  margin: 0 0 0.4375rem;
  color: var(--dii-color-brand-primary);
  font-size: 1.4375rem;
}

.dii-radar-methodology__intro p {
  margin: 0 0 0.9375rem;
  color: var(--dii-color-text-secondary);
  font-size: 0.8125rem;
}

.dii-site .dii-radar-methodology__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.6875rem;
  padding: 0 1.375rem;
  border-radius: 0.25rem;
  background: var(--dii-color-brand-secondary);
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
}

.dii-site .dii-radar-methodology__cta--static {
  background: transparent;
  color: var(--dii-color-text-secondary);
  padding-left: 0;
}

.dii-radar-methodology__col {
  border-left: 1px solid var(--dii-color-border-subtle);
  padding-left: 1.4375rem;
}

.dii-radar-methodology__col h3 {
  margin: 0 0 0.3125rem;
  color: var(--dii-color-brand-primary);
  font-size: 0.8125rem;
}

.dii-radar-methodology__col > p {
  margin: 0 0 0.5rem;
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
}

.dii-radar-methodology__row {
  display: grid;
  grid-template-columns: 5.125rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  margin: 0.4375rem 0;
  font-size: 0.6875rem;
  color: var(--dii-color-text-secondary);
}

.dii-radar-methodology__row--direction {
  grid-template-columns: 2.25rem minmax(0, 1fr);
}

.dii-radar-methodology__row strong {
  display: block;
  color: var(--dii-color-brand-primary);
}

.dii-radar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: #fff;
  font-size: 1.25rem;
  font-weight: 800;
}

.dii-radar-arrow--rising {
  color: var(--dii-radar-rising);
}

.dii-radar-arrow--stable {
  color: var(--dii-radar-stable);
}

.dii-radar-arrow--declining {
  color: var(--dii-radar-declining);
}

/* ===================================================================
 * DII Radar v1.1A (designs/dii/baselines/DII_Radar_v1.1_CIRCULAR_BASELINE_v1.1A.html)
 * Radar at a Glance, the Circular Intelligence Radar (Explore panel,
 * circular chart, selected-assessment panels, topic legend, What's
 * Changed) and the structured assessment table. Reuses the existing DII
 * geometry/typography tokens and the --dii-radar-* signal/direction
 * palette above; introduces one further fixed, documented palette for
 * DII Topic colour-encoding (never reused for signal/direction/anything
 * else), scoped to .dii-radar-page like every other Radar colour.
 * =================================================================== */

.dii-radar-page {
  --dii-radar-topic-strategy: #1596a6;
  --dii-radar-topic-governance: #1670b7;
  --dii-radar-topic-architecture: #e5a11c;
  --dii-radar-topic-analytics: #e06b4f;
  --dii-radar-topic-engineering: #16855b;
  --dii-radar-topic-platforms: #8a45b8;
}

/* Radar at a Glance */
.dii-radar-glance {
  padding: var(--cdi-spacing-xl, 2rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.5rem;
  background: var(--dii-tint);
}

.dii-radar-glance h2 {
  margin: 0 0 0.25rem;
  color: var(--dii-color-brand-primary);
  font-size: 1.4375rem;
}

.dii-radar-glance__intro {
  margin: 0 0 1rem;
  color: var(--dii-color-text-secondary);
  font-size: 0.8125rem;
}

.dii-radar-glance__metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.5rem;
}

.dii-radar-glance__metric {
  padding: 1rem 1.125rem;
  border-right: 1px solid var(--dii-color-border-subtle);
}

.dii-radar-glance__metric:last-child {
  border-right: 0;
}

.dii-radar-glance__metric b {
  display: block;
  color: var(--dii-color-brand-primary);
  font-size: 1.4375rem;
  font-weight: 800;
}

.dii-radar-glance__metric span {
  display: block;
  color: var(--dii-color-text-secondary);
  font-size: 0.6875rem;
}

/* Shell: side filter | circular stage | detail column */
.dii-radar-shell {
  display: grid;
  grid-template-columns: 10.3125rem minmax(28.125rem, 1fr) 15.3125rem;
  gap: 1.375rem;
  align-items: start;
}

.dii-radar-side {
  font-size: 0.8125rem;
}

.dii-radar-side h3 {
  margin: 0 0 0.25rem;
  color: var(--dii-color-brand-primary);
  font-size: 1rem;
}

.dii-radar-side__intro {
  margin: 0 0 0.6875rem;
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
}

.dii-radar-side__label {
  margin: 0 0 0.375rem;
  color: var(--dii-color-brand-primary);
}

.dii-radar-side__topics {
  display: flex;
  flex-direction: column;
}

.dii-site .dii-radar-side__topic {
  display: block;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.3125rem;
  padding: 0.5rem 0.625rem;
  margin: 0.4375rem 0;
  color: #334f65;
  background: #fff;
  text-decoration: none;
}

.dii-site .dii-radar-side__topic--current {
  background: var(--dii-color-brand-primary);
  border-color: var(--dii-color-brand-primary);
  color: #fff;
}

.dii-radar-side__direction {
  margin-top: 1.375rem;
}

.dii-radar-side__direction strong {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--dii-color-brand-primary);
}

.dii-radar-side__direction div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5625rem 0;
}

.dii-radar-side__direction .dii-radar-arrow {
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  font-size: 1.0625rem;
}

/* Circular stage */
.dii-radar-stage {
  text-align: center;
  /* CR-05: the left/right axis labels sit 4.0625rem outside the circle's
     own edge (.dii-radar-axis--left/--right). Reserving that same amount
     as real inline padding here means the circle's width calculations
     below are always relative to a content box that already excludes the
     axis labels' footprint, so they can never be pushed past the page's
     own edge regardless of how narrow the shell's stage column becomes.
     Removed once the axis labels are hidden below 43.75rem, where the
     reservation would otherwise shrink the circle for no reason. */
  padding-inline: 4.0625rem;
}

.dii-radar-stage__caption {
  margin: 0 0 0.5625rem;
  color: #506a7e;
  font-size: 0.75rem;
}

.dii-radar-circle {
  /* 15% smaller than the prior 45.9375rem (735px), so the Radar occupies
     less of the Explore section's centre: 45.9375 * 0.85 = 39.046875rem. */
  width: min(100%, 39.0625rem);
  aspect-ratio: 1;
  /* v1.1A strict visual conformance remediation: the top axis label sits
     2.1875rem above the circle's own top edge (.dii-radar-axis--top); the
     stage caption above it needs at least that much clearance or the two
     visibly collide. */
  margin: 2.5rem auto 0;
  position: relative;
  border-radius: 50%;
  border: 1px solid #9bb8c8;
  background:
    radial-gradient(
      circle,
      transparent 24.7%,
      #d5e3ea 25%,
      transparent 25.4%,
      transparent 49.7%,
      #cbdde6 50%,
      transparent 50.4%,
      transparent 74.7%,
      #bfd5df 75%,
      transparent 75.4%
    ),
    linear-gradient(to right, transparent 49.85%, #8faebe 50%, transparent 50.15%),
    linear-gradient(to bottom, transparent 49.85%, #8faebe 50%, transparent 50.15%),
    linear-gradient(135deg, #f7fbfd, #fff);
  box-shadow: inset 0 0 0 1px #edf4f7;
}

.dii-radar-zone {
  position: absolute;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #49677d;
  line-height: 1.15;
  /* Matches the approved baseline's uppercase, two-line-stacked treatment
     exactly (v1.1A strict visual conformance remediation). */
  text-transform: uppercase;
  /* v1.1A strict visual conformance remediation, req. 12: a point close to
     a corner is legitimately allowed there (never moved to avoid a label),
     and the current/selected point's own label must still show there when
     that happens (req. 7). A soft white halo keeps this structural
     caption legible in that rare overlap without a hard-edged background
     box, so the plain-text baseline look is unaffected everywhere else. */
  text-shadow:
    0 0 0.25rem #fff,
    0 0 0.25rem #fff,
    0 0 0.25rem #fff;
}

/* Programme Owner correction: pushed closer to the true corner (was 8-10%)
   -- combined with the wider 7-point band margin in
   cdi_dii_radar_band_positions() (inc/radar-entries.php), no datapoint can
   land this close to a band's outer edge, so these structural captions are
   never covered by a point. */
.dii-radar-zone--emerging {
  left: 3%;
  top: 4%;
}

.dii-radar-zone--strategic {
  right: 3%;
  top: 4%;
  text-align: right;
}

.dii-radar-zone--watch {
  left: 3%;
  bottom: 4%;
}

.dii-radar-zone--established {
  right: 3%;
  bottom: 4%;
  text-align: right;
}

.dii-radar-axis {
  position: absolute;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--dii-color-brand-primary);
}

.dii-radar-axis--top {
  top: -2.1875rem;
  left: 50%;
  transform: translateX(-50%);
}

.dii-radar-axis--bottom {
  bottom: -2.1875rem;
  left: 50%;
  transform: translateX(-50%);
}

.dii-radar-axis--left {
  left: -4.0625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.125rem;
  text-align: right;
}

.dii-radar-axis--right {
  right: -4.0625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.125rem;
  text-align: left;
}

.dii-site .dii-radar-point {
  position: absolute;
  transform: translate(-50%, -50%);
  /* Matches .dii-radar-zone's own halo (req. 12): keeps a point's label
     legible if it ever renders over a structural zone caption. */
  text-shadow:
    0 0 0.25rem #fff,
    0 0 0.25rem #fff,
    0 0 0.25rem #fff;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--dii-color-brand-primary);
  text-decoration: none;
  max-width: 9.375rem;
}

.dii-radar-point__label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.dii-radar-dot {
  display: inline-block;
  width: 0.8125rem;
  height: 0.8125rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #526f80;
  flex: none;
}

.dii-radar-dot--strategy {
  background: var(--dii-radar-topic-strategy);
}

.dii-radar-dot--governance {
  background: var(--dii-radar-topic-governance);
}

.dii-radar-dot--architecture {
  background: var(--dii-radar-topic-architecture);
}

.dii-radar-dot--analytics {
  background: var(--dii-radar-topic-analytics);
}

.dii-radar-dot--engineering {
  background: var(--dii-radar-topic-engineering);
}

.dii-radar-dot--platforms {
  background: var(--dii-radar-topic-platforms);
}

.dii-radar-dot--other {
  background: var(--dii-color-text-secondary);
}

.dii-radar-point:focus-visible,
.dii-radar-side__topic:focus-visible,
.dii-radar-panel__link:focus-visible {
  outline: 2px solid var(--dii-color-focus);
  outline-offset: 2px;
}

.dii-radar-point .dii-radar-dot {
  box-shadow: 0 0 0 1px #526f80;
}

.dii-radar-point[aria-current='true'] .dii-radar-dot,
.dii-radar-point--js-selected .dii-radar-dot {
  box-shadow: 0 0 0 3px var(--dii-color-brand-secondary);
  border-color: #fff;
}

.dii-radar-point__trend {
  font-size: 0.75rem;
  font-weight: 900;
}

/* Points in the circle's right portion render their label to the left of
   the dot instead of the right -- deterministic (based on the point's own
   computed x position, not a hash or random choice), purely to keep labels
   from running off the circle's right edge or overlapping a neighbour
   there (v1.1A visual conformance remediation, req. 8: alternate anchor
   direction). */
.dii-radar-point--flip {
  flex-direction: row-reverse;
}

/* Deterministic persistent-label curation (v1.1A strict visual conformance
   remediation, req. 7-8): a point NOT selected for a permanent on-circle
   label (cdi_dii_radar_curate_persistent_labels()) keeps its dot, its
   trend arrow, its full aria-label and its accessible name, but its
   visible text label is hidden by the same visually-hidden technique the
   700px breakpoint below already uses -- present for assistive
   technology, not a `display: none` removal -- until the point is
   hovered, keyboard-focused, or is the current/selected entry, at which
   point its label appears exactly like an always-labelled point's. This
   is presentation only: it never changes the point's position, colour or
   interactivity, and the entry's full name remains permanently visible in
   the structured table and the selected-assessment panel regardless. */
.dii-radar-point--label-curated .dii-radar-point__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Scoped above the 700px mobile threshold, where labels are intentionally
   omitted from the plot entirely regardless of curation (see the
   @media(max-width:43.75rem) rule below) -- a keyboard focus at that width
   must not override that documented mobile behaviour. */
@media (min-width: 43.75rem) {
  .dii-radar-point--label-curated:hover .dii-radar-point__label,
  .dii-radar-point--label-curated:focus-visible .dii-radar-point__label,
  .dii-radar-point--label-curated[aria-current='true'] .dii-radar-point__label,
  .dii-radar-point--label-curated.dii-radar-point--js-selected .dii-radar-point__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
}

.dii-radar-guide {
  margin-top: 2.125rem;
  color: var(--dii-color-text-secondary);
  font-size: 0.6875rem;
}

.dii-radar-guide strong {
  color: #405c70;
}

.dii-radar-mobile-note {
  display: none;
  margin-top: 0.5rem;
  color: var(--dii-color-text-secondary);
  font-size: 0.6875rem;
}

/* Selected-assessment detail column: a normal block column (the shell
   grid's 3rd track, matching the approved baseline's own unstyled
   `.detailcol` -- no special display value -- exactly) so the panel and
   the topic-colour legend stack inside it, at the baseline's own 245px
   column width, rather than the legend escaping to a full-width row of
   the shell grid (v1.1A strict visual conformance remediation:
   DII-CONF-DEF-003, the "detailcol { display: contents }" desktop
   declaration had made every child, including `.dii-radar-legend`'s own
   `grid-column: 1 / -1`, a direct item of `.dii-radar-shell` itself,
   stranding the legend below the whole shell instead of inside this
   column beneath the panel). The `display: grid` override below
   (<=1024px) deliberately keeps the prior, already-baseline-matching
   flattened two-column behaviour at narrower widths -- only the desktop
   value changes here. */
.dii-radar-detailcol {
  display: block;
}

.dii-radar-panel {
  display: none;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.4375rem;
  background: #fff;
  padding: 1.0625rem;
  font-size: 0.8125rem;
}

.dii-radar-panel--default {
  display: block;
}

.dii-radar-detailcol:has(.dii-radar-panel:target) .dii-radar-panel--default {
  display: none;
}

.dii-radar-panel:target {
  display: block;
}

/* Once JS is running (dii-js-radar-active added by radar-chart.js), it
   alone controls which panel is visible, cleanly superseding the
   no-JS :target/default-panel CSS above rather than fighting it. */
.dii-js-radar-active .dii-radar-panel--default,
.dii-js-radar-active .dii-radar-panel:target {
  display: none;
}

.dii-js-radar-active .dii-radar-panel--js-active {
  display: block;
}

.dii-radar-panel__sel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8125rem;
}

.dii-radar-panel__sel h3 {
  margin: 0;
  color: var(--dii-color-brand-primary);
  font-size: 1rem;
}

.dii-radar-panel__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0;
}

.dii-radar-panel__facts dt {
  color: var(--dii-color-text-secondary);
  font-size: 0.6875rem;
}

.dii-radar-panel__facts dd {
  margin: 0;
  color: var(--dii-color-brand-primary);
  font-weight: 700;
}

.dii-radar-panel__why {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--dii-color-border-subtle);
  color: var(--dii-color-text-secondary);
  font-size: 0.8125rem;
}

.dii-site .dii-radar-panel__link {
  display: inline-block;
  margin-top: 0.625rem;
  color: var(--dii-color-link);
  font-weight: 700;
  font-size: 0.75rem;
}

.dii-radar-legend {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.4375rem;
  padding: 0.875rem;
  font-size: 0.6875rem;
}

.dii-radar-legend > strong {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--dii-color-brand-primary);
}

.dii-radar-legend div {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0.25rem 0;
}

/* What's Changed. CR-01-V: dedicated to this component only -- the exact
   approved-baseline --green/--blue/--red hex values, not the page's shared
   --dii-radar-rising/stable/declining tokens used by the Direction column
   and legend arrows elsewhere on this page (those are frozen, out of this
   correction's scope). */
.dii-radar-changes {
  --dii-radar-change-rising: #16855b;
  --dii-radar-change-stable: #1670b7;
  --dii-radar-change-declining: #c63a3a;
  grid-column: 1 / -1;
  margin-top: 1.5625rem;
  border: 1px solid var(--dii-color-border-subtle);
  background: linear-gradient(90deg, #fff, #eef9fb);
  border-radius: 0.5rem;
  padding: 1.125rem 1.375rem;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 0.65fr);
  gap: 0.625rem;
  align-items: center;
}

.dii-radar-changes__intro h3 {
  margin: 0 0 0.1875rem;
  color: var(--dii-color-brand-primary);
  font-size: 1.0625rem;
}

.dii-radar-changes__muted {
  display: block;
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
}

.dii-radar-change {
  text-align: center;
  background: #fff;
  border-radius: 0.3125rem;
  padding: 0.625rem;
}

.dii-radar-change b {
  display: block;
  color: var(--dii-color-brand-primary);
  font-size: 1.3125rem;
}

/* Colour-coded to match the approved baseline exactly: rising green,
   stable blue, declining red -- "new entry" (no Direction of its own)
   stays the default text colour. CR-01-V: compounded with the `b` tag so
   these beat ".dii-radar-change b" above on specificity (0,2,1 vs 0,1,1)
   -- a class-only selector here was always losing to that rule regardless
   of source order, which is why every figure rendered as the same navy
   default instead of its semantic colour. */
.dii-radar-change b.dii-radar-change__figure--rising {
  color: var(--dii-radar-change-rising);
}

.dii-radar-change b.dii-radar-change__figure--stable {
  color: var(--dii-radar-change-stable);
}

.dii-radar-change b.dii-radar-change__figure--declining {
  color: var(--dii-radar-change-declining);
}

.dii-radar-change small {
  display: block;
  color: var(--dii-color-text-secondary);
  font-size: 0.6875rem;
}

/* Methodology extensions (Strategic Impact / Enterprise Adoption / How
   positioning works / DII Relevance summary + Assessment Semantics),
   both spanning the full existing 3-column methodology grid. */
.dii-radar-methodology__summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
  padding-top: 0.8125rem;
  border-top: 2px solid #cfe0e8;
}

.dii-radar-methodology__summary-item h3 {
  margin: 0 0 0.3125rem;
  color: var(--dii-color-brand-primary);
  font-size: 0.8125rem;
}

.dii-radar-methodology__summary-item p {
  margin: 0;
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
}

.dii-radar-methodology__semantics {
  grid-column: 1 / -1;
  margin-top: 1.25rem;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.4375rem;
  background: #fff;
  padding: 1rem 1.125rem;
  font-size: 0.75rem;
}

.dii-radar-methodology__semantics > h3 {
  margin: 0 0 0.5625rem;
  color: var(--dii-color-brand-primary);
  font-size: 0.8125rem;
}

.dii-radar-methodology__semantics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
}

.dii-radar-methodology__semantics-grid strong {
  display: block;
  color: var(--dii-color-brand-primary);
}

.dii-radar-methodology__semantics-grid p {
  margin: 0.1875rem 0 0;
  color: var(--dii-color-text-secondary);
}

/* Structured assessment dataset table */
.dii-radar-dataset__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 0.8125rem;
}

.dii-radar-dataset__intro {
  margin: 0.125rem 0 0;
  color: var(--dii-color-text-secondary);
  font-size: 0.8125rem;
}

.dii-radar-dataset__search {
  display: flex;
  gap: 0.5rem;
}

.dii-radar-dataset__search input,
.dii-radar-dataset__search select {
  height: 2.5rem;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.25rem;
  background: #fff;
  padding: 0 0.6875rem;
  color: var(--dii-color-text-primary);
  font: inherit;
  font-size: 0.8125rem;
}

.dii-radar-dataset__empty {
  margin: 0.75rem 0 0;
  color: var(--dii-color-text-secondary);
}

.dii-radar-dataset__count {
  margin: 0.625rem 0 0;
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
}

/* CR-06: the technology/trend name's descriptor disclosure. A native
   <details>/<summary> -- no custom JS, no custom ARIA, keyboard- and
   touch-operable by default, never hover-only. */
.dii-radar-dataset__descriptor summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  list-style: none;
}

.dii-radar-dataset__descriptor summary::-webkit-details-marker {
  display: none;
}

.dii-radar-dataset__descriptor-icon {
  color: var(--dii-color-brand-secondary);
  font-size: 0.875rem;
}

.dii-radar-dataset__descriptor[open] summary {
  margin-bottom: 0.25rem;
}

.dii-radar-dataset__descriptor-text {
  margin: 0;
  max-width: 22rem;
  color: var(--dii-color-text-secondary);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* "View all N Radar entries" expand/collapse -- zero-JS-safe via a real
   checkbox + label pair and the same CSS :has() technique already
   established on this page for panel selection. All entries are always
   present in the markup (dii-radar-dataset__row--extra rows are only
   visually collapsed), so the table stays fully crawlable and searchable
   regardless of this control's state. */
.dii-radar-dataset__row--extra {
  display: none;
}

.dii-radar-dataset:has(.dii-radar-dataset__expand-input:checked) .dii-radar-dataset__row--extra {
  display: table-row;
}

.dii-site .dii-radar-dataset__expand-label {
  cursor: pointer;
  color: var(--dii-color-link);
  font-weight: 700;
}

.dii-radar-dataset__expand-label:hover {
  text-decoration: underline;
}

.dii-radar-dataset__expand-label--less {
  display: none;
}

.dii-radar-dataset:has(.dii-radar-dataset__expand-input:checked) .dii-radar-dataset__expand-label--more {
  display: none;
}

.dii-radar-dataset:has(.dii-radar-dataset__expand-input:checked) .dii-radar-dataset__expand-label--less {
  display: inline;
}

/* Matches the approved baseline's own table font-size exactly (12px);
   the shared .dii-table component (dii-article.css) sets no font-size of
   its own, so without this the Radar table would inherit the theme's
   larger base body size. Scoped to this table only -- other pages using
   .dii-table (e.g. Article) are unaffected. */
.dii-radar-dataset__tablewrap table {
  font-size: 0.75rem;
}

.dii-radar-pill {
  display: inline-block;
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
}

.dii-radar-pill--very-high {
  background: var(--dii-radar-very-high-bg);
  color: var(--dii-radar-very-high);
}

.dii-radar-pill--high {
  background: var(--dii-radar-high-bg);
  color: var(--dii-radar-high);
}

.dii-radar-pill--moderate {
  background: var(--dii-radar-moderate-bg);
  color: var(--dii-radar-moderate);
}

.dii-radar-pill--watch {
  background: var(--dii-radar-watch-bg);
  color: var(--dii-radar-watch);
}

/* Related content */
.dii-radar-related__intro {
  margin: 0.125rem 0 0;
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
}

.dii-radar-related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--cdi-spacing-lg, 1.5rem);
  margin: var(--cdi-spacing-md, 1rem) 0 0;
  padding: 0;
  list-style: none;
}

/* CR-03: the <li> grid item already stretches to the row's tallest
   sibling by the grid's own default `align-items: stretch` -- but the
   bordered, visible card (the <a> below) previously only took its own
   content's natural height, leaving uneven-looking empty space below a
   shorter card. Filling the already-equal-height parent with `height:
   100%` is the structural fix, not a fixed pixel height. */
.dii-site .dii-radar-related__link {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: start;
  height: 100%;
  min-height: 5.6875rem;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.375rem;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.dii-radar-related__thumb {
  display: block;
  background: var(--dii-tint);
}

.dii-radar-related__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dii-radar-related__thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dii-color-brand-secondary);
}

.dii-radar-related__thumb--icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.dii-radar-related__copy {
  padding: 0.625rem;
}

.dii-radar-related__type {
  display: block;
  color: var(--dii-color-brand-secondary);
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dii-radar-related__title {
  display: block;
  margin: 0.125rem 0;
  color: var(--dii-color-brand-primary);
  font-size: 0.8125rem;
}

.dii-radar-related__description {
  display: block;
  color: var(--dii-color-text-secondary);
  font-size: 0.6875rem;
  line-height: 1.3;
}

/* Assurance Strip: container-bounded, matching the Topic/Resource Library treatment */
.dii-radar-page > .dii-assurance {
  position: static;
  padding: var(--cdi-spacing-lg, 1.5rem) var(--cdi-spacing-lg, 1.5rem) var(--cdi-spacing-md, 1rem);
  background: var(--dii-tint);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.375rem;
}

.dii-radar-page > .dii-assurance::before {
  content: none;
}

@media (max-width: 85.3rem) {
  .dii-radar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dii-radar-methodology {
    grid-template-columns: 1fr 1fr;
  }

  .dii-radar-methodology__intro {
    grid-column: 1 / -1;
  }

  .dii-radar-methodology__col:nth-child(2) {
    border-left: 0;
    padding-left: 0;
  }

  .dii-radar-related__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dii-radar-related__item:last-child {
    grid-column: 1 / -1;
  }

  .dii-radar-methodology__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dii-radar-methodology__semantics-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
}

/* 1024px: the three-column shell (side / stage / detail) collapses to two
   columns -- side filter above, circular stage and detail column sharing
   a row -- before the 768px tier collapses it fully. Matches the approved
   baseline's own intermediate tier. */
@media (max-width: 64rem) {
  .dii-radar-shell {
    grid-template-columns: 10rem 1fr;
  }

  .dii-radar-detailcol {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9375rem;
  }

  .dii-radar-glance__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .dii-radar-list-head__tools {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .dii-radar-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dii-radar-methodology {
    grid-template-columns: minmax(0, 1fr);
  }

  .dii-radar-methodology__intro {
    grid-column: auto;
  }

  .dii-radar-methodology__col {
    border-left: 0;
    border-top: 1px solid var(--dii-color-border-subtle);
    padding: 1rem 0 0;
    padding-left: 0;
  }

  .dii-radar-related__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .dii-radar-related__item:last-child {
    grid-column: auto;
  }

  .dii-radar-methodology__summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .dii-radar-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .dii-radar-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }

  .dii-radar-detailcol {
    grid-template-columns: minmax(0, 1fr);
  }

  .dii-radar-glance__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dii-radar-changes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dii-radar-changes__intro {
    grid-column: 1 / -1;
  }

  .dii-radar-circle {
    width: min(70vw, 34.5rem);
  }

  .dii-radar-dataset__tools {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* True mobile: technology labels are intentionally omitted from the
   plotted points (matching the approved baseline exactly) -- points
   remain selectable/focusable, and each plotted item's full name and
   assessment remain available through the selected-assessment panel and
   the structured table, never lost. */
@media (max-width: 43.75rem) {
  .dii-radar-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .dii-radar-glance__metrics {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .dii-radar-panel__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .dii-radar-circle {
    width: 66vw;
  }

  .dii-radar-stage {
    /* Axis labels are hidden at this tier (below); the reserved inline
       padding from the base rule no longer protects anything and would
       only shrink the circle unnecessarily. */
    padding-inline: 0;
  }

  .dii-radar-point__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .dii-radar-zone {
    font-size: 0.5625rem;
  }

  .dii-radar-axis {
    display: none;
  }

  .dii-radar-mobile-note {
    display: block;
  }

  .dii-radar-dataset__search {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Radar v2 (accepted design: designs/dii/radar-v2/). Additions only: every
   rule here targets an element that is rendered only when a Radar v2
   catalogue is engaged, so the v1.1A page is unaffected.
   --------------------------------------------------------------------------- */

/* The dot, not the dot-and-label together, sits on the coordinate. The
   v1.1A rule centres the whole point (dot, label and arrow) on it, which
   moves a labelled dot sideways by half the label's width. Here the point is
   shifted by half a dot instead (the dot is 0.8125rem wide), from the left
   when the label follows the dot and from the right when it is flipped to
   precede it. The position itself is unchanged: it is still the one
   cdi_dii_radar_band_positions() returns. */
.dii-site .dii-radar-point--anchored {
  transform: translate(-0.40625rem, -50%);
}

.dii-site .dii-radar-point--anchored.dii-radar-point--flip {
  transform: translate(calc(-100% + 0.40625rem), -50%);
}

/* Topic filter: the number of plotted entries in each Topic. */
.dii-radar-side__count {
  float: right;
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0.75;
}

/* Selected-assessment panel: short description above the facts. */
.dii-radar-panel__descriptor {
  margin: -0.5rem 0 0.75rem;
  color: var(--dii-color-text-secondary);
}

.dii-radar-panel__evidence {
  margin: 0.5rem 0 0;
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
}

.dii-radar-panel__evidence strong {
  color: var(--dii-color-brand-primary);
}

/* Explore Technology: the panel's one primary action. */
.dii-site .dii-radar-panel__explore {
  display: block;
  margin: 0.875rem 0 0;
  padding: 0.6875rem 0.75rem;
  border-radius: 0.25rem;
  color: #fff;
  background: var(--dii-color-brand-secondary);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.dii-site .dii-radar-panel__explore:hover {
  background: #066a75;
  text-decoration: none;
}

.dii-radar-panel__explore:focus-visible {
  outline: 2px solid var(--dii-color-focus);
  outline-offset: 2px;
}

/* No published explainer: plainly not a control. */
.dii-site .dii-radar-panel__explore--unavailable {
  border: 1px dashed var(--dii-color-border-subtle);
  color: var(--dii-color-text-secondary);
  background: transparent;
  font-weight: 600;
  cursor: default;
}

.dii-site .dii-radar-panel__explore--unavailable:hover {
  background: transparent;
}

.dii-site .dii-radar-panel__explore + .dii-radar-panel__link {
  display: block;
  text-align: center;
}

/* The plotted entries as named buttons. Hidden until the plot drops its
   names (the same 43.75rem point as .dii-radar-mobile-note). */
.dii-radar-chips {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.dii-site .dii-radar-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.6875rem;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.875rem;
  color: var(--dii-color-brand-primary);
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.dii-site .dii-radar-chip[aria-current='true'] {
  border-color: var(--dii-color-brand-primary);
  color: #fff;
  background: var(--dii-color-brand-primary);
}

.dii-radar-chip:focus-visible {
  outline: 2px solid var(--dii-color-focus);
  outline-offset: 2px;
}

/* What's changed, first edition: a dash where there is nothing to compare. */
.dii-radar-change--na b {
  color: #9aa9b5;
}

/* Catalogue table: Top 10 tag, short description, unassessed cells. */
.dii-radar-dataset__top10 {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.1875rem;
  color: #0a6b75;
  background: #dff5f5;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}

.dii-radar-dataset__desc {
  display: block;
  margin-top: 0.125rem;
  color: var(--dii-color-text-secondary);
  font-size: 0.75rem;
  font-weight: 400;
}

@media (max-width: 43.75rem) {
  .dii-radar-chips {
    display: flex;
  }
}

/* Radar v2 catalogue table: the control that switches between the Top 10 and
   the whole catalogue. The same checkbox and label as above, shown as a
   button, with a focus outline when the checkbox has keyboard focus. */
.dii-radar-dataset__count:has(.dii-radar-dataset__expand-label--v2) {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
}

.dii-site .dii-radar-dataset__expand-label--v2 {
  padding: 0.5625rem 0.9375rem;
  border: 1px solid var(--dii-color-brand-primary);
  border-radius: 0.375rem;
  color: var(--dii-color-brand-primary);
  background: #fff;
}

.dii-site .dii-radar-dataset__expand-label--v2:hover {
  color: #fff;
  background: var(--dii-color-brand-primary);
  text-decoration: none;
}

.dii-radar-dataset:has(.dii-radar-dataset__expand-input:focus-visible) .dii-radar-dataset__expand-label--v2 {
  outline: 2px solid var(--dii-color-focus);
  outline-offset: 2px;
}

.dii-radar-dataset:has(.dii-radar-dataset__expand-input:checked) .dii-radar-dataset__expand-label--less.dii-radar-dataset__expand-label--v2 {
  display: inline-block;
}

.dii-radar-dataset__expand-label--more.dii-radar-dataset__expand-label--v2 {
  display: inline-block;
}

.dii-radar-dataset:has(.dii-radar-dataset__expand-input:checked) .dii-radar-dataset__expand-label--more.dii-radar-dataset__expand-label--v2 {
  display: none;
}

/* ---------------------------------------------------------------------------
   Radar v2: the plot is 90% of the chart frame.
   The frame (.dii-radar-circle) keeps its size and position, so the four
   area captions and the four axis captions, which are placed against the
   frame, stay exactly where they were and keep their type sizes. The circle
   that is drawn, and that the points are placed in, is the middle 90% of the
   frame (.dii-radar-plot). No element is scaled.
   --------------------------------------------------------------------------- */
.dii-site .dii-radar-circle--v2 {
  border-color: transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.dii-radar-circle--v2 .dii-radar-plot {
  position: absolute;
  /* 5% each side of the frame, less the plot's own 1px border: 90% of the frame's width. */
  inset: calc(5% - 1px);
  border-radius: 50%;
  border: 1px solid #9bb8c8;
  background:
    radial-gradient(
      circle,
      transparent 24.7%,
      #d5e3ea 25%,
      transparent 25.4%,
      transparent 49.7%,
      #cbdde6 50%,
      transparent 50.4%,
      transparent 74.7%,
      #bfd5df 75%,
      transparent 75.4%
    ),
    linear-gradient(to right, transparent 49.85%, #8faebe 50%, transparent 50.15%),
    linear-gradient(to bottom, transparent 49.85%, #8faebe 50%, transparent 50.15%),
    linear-gradient(135deg, #f7fbfd, #fff);
  box-shadow: inset 0 0 0 1px #edf4f7;
}

/* Radar v2: direction arrows 5px larger (0.75rem to 1.0625rem). */
.dii-radar-point--anchored .dii-radar-point__trend {
  /* A fixed box, one em square, so the space an arrow takes does not depend on the font. */
  display: inline-block;
  width: 1em;
  font-size: 1.0625rem;
  line-height: 1;
  text-align: center;
}

/* Radar v2, below the desktop layout: the arrow sits above or below its dot,
   centred on it, so that an arrow never reaches the dot beside it. Which of
   the two is decided on the server (cdi_dii_radar_v2_arrow_sides()). The dot
   stays on its coordinate and the name, where shown, stays beside the dot. */
@media (max-width: 63.99rem) {
  .dii-site .dii-radar-point--anchored .dii-radar-point__trend {
    position: absolute;
    left: 0.40625rem;
    bottom: calc(50% + 0.40625rem + 0.25rem);
    transform: translateX(-50%);
  }

  .dii-site .dii-radar-point--anchored.dii-radar-point--flip .dii-radar-point__trend {
    left: auto;
    right: 0.40625rem;
    transform: translateX(50%);
  }

  .dii-site .dii-radar-point--anchored.dii-radar-point--arrow-below .dii-radar-point__trend {
    bottom: auto;
    top: calc(50% + 0.40625rem + 0.25rem);
  }}

/* ---------------------------------------------------------------------------
   Radar page newsletter panel: the footer's dark blue, on this page only.
   The same shared panel and the same markup; presentation alone differs.
   --------------------------------------------------------------------------- */
.dii-site .dii-radar-page .dii-newsletter--content-column {
  border-color: var(--dii-color-brand-primary);
  border-radius: 0.5rem;
  color: #fff;
  background: var(--dii-color-brand-primary);
}

.dii-site .dii-radar-page .dii-newsletter--content-column .dii-newsletter__heading {
  color: #fff;
}

.dii-site .dii-radar-page .dii-newsletter--content-column .dii-newsletter__copy {
  color: #fff;
}

.dii-site .dii-radar-page .dii-newsletter--content-column .dii-newsletter__icon {
  color: #fff;
}

.dii-site .dii-radar-page .dii-newsletter--content-column .dii-newsletter__input {
  min-height: 2.75rem;
  border: 1px solid #fff;
  color: var(--dii-color-text-primary);
  background: #fff;
}

.dii-site .dii-radar-page .dii-newsletter--content-column .dii-newsletter__input::placeholder {
  color: var(--dii-color-text-secondary);
  opacity: 1;
}

.dii-site .dii-radar-page .dii-newsletter--content-column .dii-newsletter__button {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid #fff;
  color: var(--dii-color-brand-primary);
  background: #fff;
}

.dii-site .dii-radar-page .dii-newsletter--content-column .dii-newsletter__input:focus-visible,
.dii-site .dii-radar-page .dii-newsletter--content-column .dii-newsletter__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.dii-site .dii-radar-page .dii-newsletter--content-column .dii-newsletter__notice {
  border-top-color: color-mix(in srgb, white 30%, var(--dii-color-brand-primary));
  color: #fff;
}