/*!
 * Hive Radar Scope: shared instrument styling.
 * Loaded by the homepage beacon and by /radar/ so both surfaces render the
 * same 360 degree geometry. Brand rule: blue is product and action, green
 * marks live or verified evidence only, no gold anywhere.
 */
.hrs {
  --hrs-blue: #2f80ff;
  --hrs-blue-soft: rgba(47, 128, 255, .55);
  --hrs-blue-faint: rgba(47, 128, 255, .16);
  --hrs-live: #22e27e;
  --hrs-fault: #ff647c;
  --hrs-idle: #6d8598;
  --hrs-ink: #e9f3ff;
  --hrs-muted: #92aac0;
  --hrs-line: rgba(130, 178, 232, .22);
  --hrs-panel: rgba(3, 11, 20, .86);
  --hrs-mono: "IBM Plex Mono", ui-monospace, monospace;
  --hrs-sweep-duration: 14s;
  display: grid;
  gap: 14px;
  color: var(--hrs-ink);
}
.hrs * { box-sizing: border-box; }

.hrs-frame {
  position: relative;
  display: grid;
  place-items: center;
  padding: 10px;
}
.hrs-frame::before {
  position: absolute;
  z-index: -1;
  right: 9%;
  bottom: 3%;
  left: 9%;
  height: 16%;
  content: "";
  border-radius: 50%;
  background: rgba(0, 0, 0, .82);
  filter: blur(28px);
  transform: perspective(700px) rotateX(68deg);
}
.hrs-scope {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  filter:
    drop-shadow(0 26px 34px rgba(0, 0, 0, .54))
    drop-shadow(0 0 32px rgba(47, 128, 255, .1));
}

/* ---- static geometry --------------------------------------------------- */
.hrs-bezel {
  fill: radial-gradient(circle, #041018, #02070c);
  fill: #03101a;
  stroke: rgba(47, 128, 255, .38);
  stroke-width: 2;
}
.hrs-field {
  fill: rgba(4, 16, 27, .72);
  stroke: rgba(47, 128, 255, .28);
  stroke-width: 1.5;
}
.hrs-tick { stroke: rgba(130, 178, 232, .3); stroke-width: 1.5; }
.hrs-tick-major { stroke: rgba(47, 128, 255, .7); stroke-width: 2.5; }
.hrs-bearing {
  fill: #7f9cb8;
  font: 500 19px/1 var(--hrs-mono);
  letter-spacing: .06em;
  dominant-baseline: middle;
  text-anchor: middle;
}
.hrs-spoke { stroke: rgba(130, 178, 232, .16); stroke-width: 1.2; }
.hrs-spoke-major { stroke: rgba(47, 128, 255, .34); stroke-width: 1.8; }
.hrs-ring {
  fill: none;
  stroke: rgba(130, 178, 232, .3);
  stroke-width: 1.4;
  stroke-dasharray: 7 9;
}
.hrs-hub-ring { fill: none; stroke: rgba(47, 128, 255, .5); stroke-width: 2; }
.hrs-cadence {
  fill: none;
  stroke: var(--hrs-blue);
  stroke-width: 5;
  stroke-linecap: butt;
  opacity: .85;
  transform: rotate(-90deg);
  transform-origin: 500px 500px;
  transition: stroke-dasharray .6s linear;
}

/* ---- sweep and trail --------------------------------------------------- */
.hrs-sweep {
  transform-origin: 500px 500px;
  animation: hrs-sweep-rotate var(--hrs-sweep-duration) linear infinite;
}
.hrs-sweep-wedge { fill: rgba(47, 128, 255, .17); }
.hrs-sweep-line { stroke: rgba(102, 170, 255, .85); stroke-width: 3; }
@keyframes hrs-sweep-rotate { to { transform: rotate(360deg); } }

.hrs-trail-mark { stroke: var(--hrs-blue-soft); stroke-width: 3; stroke-linecap: round; }
.hrs-trail-mark[data-verified="true"] { stroke: rgba(34, 226, 126, .8); }
.hrs-ping {
  fill: none;
  stroke: rgba(34, 226, 126, .9);
  stroke-width: 3;
  animation: hrs-ping 2.2s ease-out forwards;
}
@keyframes hrs-ping {
  from { r: 12; opacity: .95; }
  to { r: 74; opacity: 0; }
}

/* ---- blips ------------------------------------------------------------- */
.hrs-blip { cursor: default; }
.hrs-blip-core { fill: var(--hrs-blue); }
.hrs-blip-outline { fill: rgba(47, 128, 255, .06); stroke: rgba(73, 143, 238, .82); stroke-width: 2.2; }
.hrs-blip-dashed { fill: none; stroke-dasharray: 5 5; }
.hrs-blip-bar { stroke: var(--hrs-blue); stroke-width: 2.6; }
.hrs-blip-halo { fill: rgba(34, 226, 126, .1); stroke: rgba(34, 226, 126, .78); stroke-width: 2.5; }
.hrs-live-wave {
  fill: none;
  stroke: var(--hrs-live);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: hrs-live-wave 2.4s cubic-bezier(.16, 1, .3, 1) infinite;
}
.hrs-live-wave-b { animation-delay: 1.2s; }
.hrs-live-index {
  fill: #011109;
  font: 700 26px/1 var(--hrs-mono);
  pointer-events: none;
}

.hrs-blip[data-tone="live"] .hrs-blip-core {
  fill: var(--hrs-live);
  filter: drop-shadow(0 0 8px rgba(34, 226, 126, .95));
}
.hrs-blip[data-tone="live"] .hrs-blip-halo { animation: hrs-halo 1.2s ease-in-out infinite; }
.hrs-blip[data-condition="degraded"] .hrs-live-wave,
.hrs-blip[data-condition="degraded"] .hrs-blip-halo,
.hrs-blip[data-condition="degraded"] .hrs-blip-core {
  stroke: #ffb14e;
  fill: #ffb14e;
}
.hrs-blip[data-condition="outage"] .hrs-live-wave,
.hrs-blip[data-condition="outage"] .hrs-blip-halo,
.hrs-blip[data-condition="outage"] .hrs-blip-core {
  stroke: var(--hrs-fault);
  fill: var(--hrs-fault);
}
.hrs-blip[data-tone="fault"] .hrs-blip-bar,
.hrs-blip[data-tone="fault"] .hrs-blip-outline { stroke: var(--hrs-fault); }
.hrs-blip[data-tone="idle"] .hrs-blip-outline { stroke: var(--hrs-idle); }
.hrs-blip[data-state="archived_verified"] { opacity: .72; }
.hrs-blip[data-state="not_yet_exercised"] { opacity: .34; }
@keyframes hrs-halo {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes hrs-live-wave {
  0% { opacity: .95; transform: scale(.7); }
  80%, 100% { opacity: 0; transform: scale(3.4); }
}

.hrs-interactive .hrs-blip { cursor: pointer; }
.hrs-interactive .hrs-blip:hover .hrs-blip-outline,
.hrs-interactive .hrs-blip:focus-visible .hrs-blip-outline { fill: rgba(47, 128, 255, .3); }
.hrs-interactive .hrs-blip:focus-visible { outline: none; }
.hrs-interactive .hrs-blip:focus-visible .hrs-blip-core,
.hrs-interactive .hrs-blip:focus-visible .hrs-blip-outline {
  stroke: #eaf5ff;
  stroke-width: 4;
}

/* ---- hub --------------------------------------------------------------- */
.hrs-hub-disc { fill: rgba(3, 14, 24, .94); stroke: rgba(47, 128, 255, .4); stroke-width: 1.5; }
.hrs-hub-key { fill: #86a4bf; font: 600 16px/1 var(--hrs-mono); letter-spacing: .1em; }
.hrs-hub-live { fill: var(--hrs-live); font: 600 30px/1 var(--hrs-mono); }
.hrs-hub-checks { fill: #cfe3f7; font: 500 19px/1 var(--hrs-mono); }
.hrs-hub-window { fill: #7d99b3; font: 500 15px/1 var(--hrs-mono); }
.hrs[data-hrs-state="stale"] .hrs-hub-live,
.hrs[data-hrs-state="unavailable"] .hrs-hub-live { fill: #cfe3f7; }

/* ---- readouts ---------------------------------------------------------- */
.hrs-corner {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--hrs-line);
  background: var(--hrs-panel);
  backdrop-filter: blur(10px);
}
.hrs-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.hrs-corner-key { color: #7d99b3; font: 600 11px/1.2 var(--hrs-mono); letter-spacing: .1em; }
.hrs-corner strong { color: var(--hrs-ink); font: 600 15px/1.2 var(--hrs-mono); overflow-wrap: anywhere; }
.hrs-corner span:last-child { color: var(--hrs-muted); font: 400 12px/1.35 var(--hrs-mono); overflow-wrap: anywhere; }
.hrs[data-hrs-state="live"] .hrs-corner-tl strong { color: #7ff2b4; }
.hrs[data-hrs-state="unavailable"] .hrs-corner-tl strong { color: #ffa3b2; }

.hrs-fallback {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 16%;
  width: min(420px, 86%);
  margin: 0;
  padding: 12px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 100, 124, .5);
  background: rgba(6, 12, 20, .94);
  color: #ffc9d2;
  font: 500 12px/1.5 var(--hrs-mono);
}

/* ---- reading key ------------------------------------------------------- */
.hrs-reading-key {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--hrs-line);
  background: rgba(3, 11, 20, .74);
}
.hrs-live-returns-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.hrs-live-returns-head b {
  color: #7ff2b4;
  font: 600 12px/1 var(--hrs-mono);
  letter-spacing: .1em;
}
.hrs-live-returns-head span {
  color: var(--hrs-muted);
  font: 400 12px/1.4 var(--hrs-mono);
  text-align: right;
}
.hrs-live-returns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.hrs-live-return {
  display: grid;
  grid-template-columns: 28px auto 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(34, 226, 126, .3);
  background: rgba(34, 226, 126, .055);
}
.hrs-live-return i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #011109;
  background: var(--hrs-live);
  box-shadow: 0 0 12px rgba(34, 226, 126, .55);
  font: 700 12px/1 var(--hrs-mono);
  font-style: normal;
}
.hrs-live-return b {
  overflow: hidden;
  color: var(--hrs-ink);
  font: 600 12px/1.2 var(--hrs-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hrs-live-return em,
.hrs-live-return-empty {
  color: var(--hrs-muted);
  font: 400 12px/1.3 var(--hrs-mono);
  font-style: normal;
  text-align: right;
}
.hrs-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--hrs-line);
}
.hrs-lane-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.hrs-lane-item i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(47, 128, 255, .7);
  border-radius: 50%;
  color: #9fc8ff;
  font: 600 12px/1 var(--hrs-mono);
  font-style: normal;
}
.hrs-lane-item b {
  overflow: hidden;
  color: #bcd3e8;
  font: 600 12px/1.2 var(--hrs-mono);
  letter-spacing: .05em;
  text-overflow: ellipsis;
}
.hrs-lane-item em {
  overflow: hidden;
  color: var(--hrs-muted);
  font: 400 12px/1.2 var(--hrs-mono);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- legend ------------------------------------------------------------ */
.hrs-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.hrs-legend-item {
  display: grid;
  grid-template-columns: 26px auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hrs-line);
  background: rgba(4, 13, 22, .6);
}
.hrs-legend-glyph { width: 24px; height: 24px; }
.hrs-legend-item b { color: var(--hrs-ink); font: 600 11px/1 var(--hrs-mono); letter-spacing: .07em; }
.hrs-legend-item i { color: var(--hrs-muted); font: 400 11px/1.35 var(--hrs-mono); font-style: normal; }
.hrs-legend-item em { color: #cfe3f7; font: 600 13px/1 var(--hrs-mono); font-style: normal; }
.hrs-legend-item[data-tone="live"] .hrs-blip-core { fill: var(--hrs-live); }
.hrs-legend-item[data-tone="live"] b { color: #7ff2b4; }
.hrs-legend-item[data-tone="fault"] .hrs-blip-bar,
.hrs-legend-item[data-tone="fault"] .hrs-blip-outline { stroke: var(--hrs-fault); }
.hrs-legend-item[data-tone="idle"] .hrs-blip-outline { stroke: var(--hrs-idle); }

.hrs-note {
  margin: 0;
  color: var(--hrs-muted);
  font: 400 12px/1.55 var(--hrs-mono);
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .hrs-status-grid { grid-template-columns: 1fr 1fr; }
  .hrs-fallback { position: static; width: auto; transform: none; }
  .hrs-bearing { font-size: 26px; }
  .hrs-hub-live { font-size: 34px; }
}
@media (max-width: 560px) {
  .hrs-status-grid { grid-template-columns: 1fr 1fr; }
  .hrs-bearing { font-size: 30px; }
  .hrs-live-returns-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .hrs-live-returns-head span { text-align: left; }
  .hrs-live-return { grid-template-columns: 28px 1fr; }
  .hrs-live-return em { grid-column: 2; text-align: left; }
  .hrs-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hrs-legend { grid-template-columns: 1fr 1fr; }
  .hrs-legend-item {
    grid-template-columns: 24px 1fr auto;
    min-width: 0;
    padding: 8px;
  }
  .hrs-legend-item i { display: none; }
  .hrs-note { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hrs-sweep { animation: none; transform: rotate(-32deg); }
  .hrs-blip[data-tone="live"] .hrs-blip-halo { animation: none; }
  .hrs-live-wave { animation: none; opacity: .35; transform: scale(1.7); }
  .hrs-ping { animation: none; opacity: 0; }
  .hrs-cadence { transition: none; }
}