/* === Systems Radar Section === */

:root {
  --op-bg-top: #071b2b;
  --op-bg-bottom: #020811;
  --op-border-blue: #27496a;
  --op-text-main: #e4edf7;
  --op-text-muted: #a7b9cf;
  --op-accent: #ffffff;
  --op-highlight: #3ba4ff;
}

.systems-radar{
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--op-text-main);
  background:radial-gradient(circle at top,#18283b 0,#05070b 55%);
}

/* Layout: mobile column, desktop side-by-side */
.systems-radar .radar-main{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

.systems-radar .radar-main-chart,
.systems-radar .radar-main-pane{
  flex:1 1 0;
}

@media (min-width: 992px){
  .systems-radar .radar-main{
    flex-direction:row;
    align-items:flex-start;
  }
}

/* Typography / header */
.systems-radar .radar-header{text-align:left;}

.systems-radar .radar-kicker{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:.8;
  margin-bottom:.4rem;
}

.systems-radar .radar-title{
  color: var(--op-text-main);
  font-size:1.7rem;
  font-weight:800;
  margin:0 0 .4rem;
}

.systems-radar .radar-subtitle{
  font-size:.95rem;
  color: var(--op-text-muted);
  margin-bottom:0;
}

/* Radar shell */
.systems-radar .radar-shell{
  margin-top:3rem;
  position:relative;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}

.systems-radar .radar-chart{
  width:100%;
  height:auto;
  display:block;
}

.systems-radar .radar-labels{
  pointer-events:none;
  position:absolute;
  inset:0;
}

.systems-radar .radar-label-btn{
  all:unset;
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#cbd5f5;
  padding:.18rem .5rem;
  border-radius:999px;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(148,163,184,.5);
  cursor:pointer;
  white-space:nowrap;
}

.systems-radar .radar-label-btn.is-active{
  border-color:#f9fafb;
  color:#f9fafb;
  box-shadow:0 0 16px rgba(148,163,184,.6);
}

.systems-radar{
  font-size:.78rem;
  color:#9ca3af;
  text-align:center;
}

/* Radar SVG styling */
.systems-radar .radar-ring{
  fill:none;
  stroke:rgba(148,163,184,.25);
  stroke-width:.6;
}

.systems-radar .radar-ring--major{
  stroke:rgba(148,163,184,.45);
  stroke-width:.8;
}

.systems-radar .radar-axis{
  stroke:rgba(148,163,184,.45);
  stroke-width:.8;
}

.systems-radar .radar-area-current{
  fill:url(#radarFill);
  stroke:#93c5fd;
  stroke-width:1.4;
  stroke-linejoin:round;
  opacity:.9;
}

.systems-radar .radar-area-plan{
  fill:none;
  stroke:#fbbf24;
  stroke-width:1.2;
  stroke-linejoin:round;
  stroke-dasharray:4 4;
  opacity:.9;
}

.systems-radar .radar-area-outline{
  fill:none;
  stroke:rgba(148,163,184,.4);
  stroke-width:.75;
  stroke-dasharray:3 5;
}

.systems-radar .radar-point{
  fill:#0ea5e9;
  stroke:#0b1120;
  stroke-width:1;
  cursor:pointer;
}

.systems-radar .radar-point.is-active{
  fill:#22c55e;
  stroke:#f9fafb;
  stroke-width:1.4;
}

.systems-radar .radar-point:hover{
  filter:drop-shadow(0 0 4px rgba(148,163,184,.9));
}

/* Glass info pane */
.systems-radar .radar-pane{
  position:relative;
  margin-top:.75rem;
}

.systems-radar .radar-pane-inner{
  position:relative;
  border-radius:1rem;
  background:linear-gradient(135deg,rgba(15,23,42,.97),rgba(15,23,42,.93));
  border:1px solid rgba(148,163,184,.45);
  box-shadow:0 18px 45px rgba(15,23,42,.85);
  padding:1.25rem 1.25rem 1.1rem;
}

.systems-radar .radar-pane-close{
  position:absolute;
  right:.8rem;
  top:.6rem;
  background:transparent;
  border:none;
  color:#9ca3af;
  font-size:1.6rem;
  line-height:1;
}

.systems-radar .radar-pane-close:focus-visible{
  outline:2px solid #e5e7eb;
  outline-offset:2px;
}

.systems-radar .radar-pane-kicker{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#9ca3af;
  margin-bottom:.2rem;
}

.systems-radar .radar-pane-title{
  font-size:1.25rem;
  font-weight:700;
  margin:0 0 .25rem;
}

.systems-radar .radar-pane-coverage{
  font-size:.9rem;
  color:#cbd5f5;
  margin-bottom:.5rem;
}

.systems-radar .radar-pane-body{
  font-size:.9rem;
  color:#e5ecf7;
  margin-bottom:.7rem;
}

/* Feature bars */
.systems-radar .radar-features-title{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#9ca3af;
  margin-bottom:.25rem;
}

.systems-radar .radar-feature{
  margin-bottom:.35rem;
}

.systems-radar .radar-feature-label{
  display:flex;
  justify-content:space-between;
  font-size:.78rem;
  color:#cbd5f5;
  margin-bottom:.15rem;
}

.systems-radar .radar-feature-bar{
  position:relative;
  width:100%;
  height:.45rem;
  border-radius:999px;
  background:rgba(15,23,42,.9);
  overflow:hidden;
}

.systems-radar .radar-feature-bar-fill{
  position:absolute;
  inset:0;
  width:0;
  background:linear-gradient(90deg,#22c55e,#38bdf8);
  border-radius:999px;
  transition:width .25s ease-out;
}

/* Announcements */
.systems-radar .radar-announcements-title{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#9ca3af;
  margin-bottom:.2rem;
}

.systems-radar .radar-announcement-item{
  font-size:.8rem;
  margin-bottom:.2rem;
  color:#e5ecf7;
}

.systems-radar .radar-announcement-date{
  color:#9ca3af;
  margin-right:.35rem;
}

/* Meta info */
.systems-radar .radar-pane-meta{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  font-size:.8rem;
  color:#9ca3af;
  margin:0 0 .7rem;
  text-align: center !important;
}

.systems-radar .radar-pane-meta dt{
  font-weight:600;
  margin-bottom:.1rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  text-align: center;
}

.systems-radar .radar-pane-meta dd{
  margin:0;
  color:#e5ecf7;
}

.systems-radar .radar-pane-meta .full-width{
  width: 100%;
}

.systems-radar .radar-pane-link{
  font-size:.85rem;
  color:#93c5fd;
  text-decoration:none;
}

.systems-radar .radar-pane-link:hover{
  text-decoration:underline;
}

/* Timeline */
.systems-radar .radar-timeline-wrap{
  margin-top:2.25rem;
}

.systems-radar .radar-timeline{
  max-width:480px;
  margin:0 auto;
}

.systems-radar .radar-timeline-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.25rem;
}

.systems-radar .radar-timeline-label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#9ca3af;
}

.systems-radar .radar-timeline-current{
  font-size:.8rem;
  color:#cbd5f5;
}

.systems-radar .radar-timeline-range{
  width:100%;
  -webkit-appearance:none;
  height:4px;
  border-radius:999px;
  background:rgba(15,23,42,.9);
  outline:none;
  margin:.25rem 0;
}

.systems-radar .radar-timeline-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#38bdf8;
  border:2px solid #f9fafb;
  box-shadow:0 0 8px rgba(59,130,246,.8);
  cursor:pointer;
}

.systems-radar .radar-timeline-range::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#38bdf8;
  border:2px solid #f9fafb;
  box-shadow:0 0 8px rgba(59,130,246,.8);
  cursor:pointer;
}

.systems-radar .radar-timeline-markers{
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  color:#9ca3af;
}

@media (min-width: 992px){
  .systems-radar .radar-title{font-size:2rem;}
  .systems-radar .radar-pane-inner{height:100%;}
}