/* hud feature — the minimal corner HUD. See hudScreen.js. */

/*
 * The stats sit exactly where the old "synced" status label lived: the
 * top-right corner of the 600x600 screen (inside the standard screen padding),
 * at the same 16px label size. Everything else on this screen is empty.
 */
.hud__corner {
  position: absolute;
  top: var(--hud-pad);
  right: var(--hud-pad);
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.hud__value {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* `.hud__corner` is flex, so re-assert the UA hidden rule for collapsed slots. */
.hud__value[hidden] {
  display: none;
}

/* Stale values (PRD freshness) read as secondary, not primary. */
.hud__value--stale {
  color: var(--hud-muted);
}

/* The slot that swipe up/down controls. An accent underline keeps the
   selection glanceable without changing the value's color semantics. */
.hud__value--active {
  text-decoration: underline;
  text-decoration-color: var(--hud-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}