/* Overclocked — HUD capability chart (js/hud/chart.js). Class prefix: hc-
 * Stacking inside #hud-chart: .hc-field → .hc-plot-layer → #hud-globe (globe module) → .hc-date */

.hud-chart { isolation: isolate; }

/* canvases fill the block; their pixel size is set from JS (DPR-aware) */
.hc-field,
.hc-plot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

.hc-plot-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease);
}
.hc-plot-layer.is-dim { opacity: .12; }   /* globe view: the globe draws over the halftone field */

/* ---------- line-head badges ---------- */
.hc-badge {
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--others);
  box-shadow: 0 0 0 1.5px var(--bg);
  font: 700 7px/1 var(--mono); letter-spacing: -.03em;
  opacity: 0; transition: opacity 250ms var(--ease);
  will-change: transform;
}
.hc-badge.is-on { opacity: 1; }
.hc-badge--ob { background: var(--accent); z-index: 3; }
.hc-badge--dc { background: var(--china); z-index: 2; }
.hc-badge--others { background: var(--others); z-index: 1; }
.hc-badge svg { width: 12px; height: 12px; display: block; }

/* ---------- odometer date pill ---------- */
.hc-date {
  position: absolute; left: 8px; top: 8px; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  pointer-events: none;
}
.hc-pill {
  display: inline-flex; align-items: center;
  background: var(--ink); color: var(--bg);
  border-radius: 5px; padding: 4px 8px;
  font: 700 15px/18px var(--mono);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.hc-odo { display: inline-flex; height: 18px; overflow: hidden; }
.hc-col {
  display: inline-block; width: 1ch; height: 18px;
  overflow: hidden; text-align: center; white-space: pre;
}
.hc-reel { display: block; will-change: transform; }
.hc-reel > span { display: block; height: 18px; line-height: 18px; }

.hc-orig {
  font: 400 9.5px/13px var(--mono); letter-spacing: .02em; white-space: nowrap;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-radius: 3px; padding: 0 4px; margin-left: -1px;
}
.hc-orig-v { color: var(--ink-2); }
.hc-speed { margin-left: 5px; color: var(--accent); font-weight: 700; }

.hc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1100px) {
  .hc-pill { font-size: 14px; padding: 4px 7px; }
}