/* Page: radar.html */

.radar-shell{
  border:1px solid var(--ink);
  background:var(--paper);
  box-shadow:8px 8px 0 0 var(--ink);
  border-radius:2px;
  overflow:hidden;
}
.radar-map{
  width:100%;
  height:clamp(420px, 62vh, 640px);
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.radar-controls{
  display:flex;align-items:center;gap:1rem;
  padding:.9rem 1.2rem;
  background:var(--ink);color:var(--paper);
  border-bottom:1px solid var(--ink);
}
.radar-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--paper);color:var(--ink);
  border:0;padding:.55rem .9rem;border-radius:2px;
  font-family:var(--mono);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  cursor:pointer;transition:background .15s;
}
.radar-btn:hover{background:var(--gold)}
.radar-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.radar-btn--play{min-width:100px;justify-content:center}
.radar-btn--play.is-playing{background:var(--rust);color:var(--paper)}
.radar-slider{
  flex:1;min-width:0;
  accent-color:var(--gold);height:4px;
}
.radar-time{
  font-family:var(--mono);font-size:.78rem;
  font-variant-numeric:tabular-nums;
  background:var(--paper);color:var(--ink);
  padding:.4rem .7rem;border-radius:2px;
  min-width:90px;text-align:center;font-weight:500;
}
.radar-options{
  display:flex;gap:1.4rem;flex-wrap:wrap;
  padding:1rem 1.2rem;background:var(--paper-warm);
  border-bottom:1px solid var(--rule);
  align-items:center;
}
.radar-options label{
  display:flex;flex-direction:column;gap:.3rem;
}
.radar-options label.checkbox{
  flex-direction:row;align-items:center;gap:.5rem;
}
.radar-options input[type=range]{width:140px;accent-color:var(--rust)}
.radar-options select{
  font-family:var(--body);font-size:.9rem;padding:.35rem .6rem;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:2px;
}

.radar-legend{
  display:flex;align-items:center;gap:1rem;
  padding:.7rem 1.2rem;background:var(--paper);
  font-family:var(--mono);font-size:.7rem;
  color:var(--slate);
}
.legend-label{text-transform:uppercase;letter-spacing:.15em;font-weight:700;color:var(--ink)}
.legend-bar{display:flex;flex:1;max-width:360px;height:12px;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.legend-bar i{flex:1;display:block}
.legend-end{display:flex;gap:1rem;text-transform:uppercase;letter-spacing:.12em}
.legend-end span:first-child{color:#00c5ff;font-weight:600}
.legend-end span:last-child{color:#8b00b8;font-weight:600}

@media (max-width:720px){
  .radar-controls{flex-wrap:wrap;gap:.6rem}
  .radar-slider{order:5;flex-basis:100%;margin-top:.4rem}
  .radar-options{gap:.8rem}
  .radar-options input[type=range]{width:110px}
}