.help-popover {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* the “light ?” button */
.help-popover > summary.help-icon {
  list-style: none; /* hide default triangle */
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #f3f6ff;           /* light */
  border: 1px solid #dbe2ff;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
  cursor: pointer;
  display: grid;
  place-items: center;
  outline: none;
}
.help-popover > summary.help-icon::-webkit-details-marker { display: none; }
.help-popover > summary.help-icon::before {
  content: "?";
  font-weight: 700;
  font-size: 13px;
  color: #3451d1;
  line-height: 1;
}

/* card */
.help-popover .help-card {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 220px;
  max-width: 360px;
}
.help-popover[data-width="sm"] .help-card { width: 240px; }
.help-popover[data-width="md"] .help-card { width: 300px; }
.help-popover[data-width="lg"] .help-card { width: 360px; }

.help-popover[open] .help-card { display: block; }

.help-popover .help-card-body {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  font-size: 14px;
  line-height: 1.35;
  color: #111827;
}

/* arrow */
.help-popover .help-card::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.08);
  border-top: 1px solid rgba(0,0,0,.08);
  transform: rotate(45deg);
}

/* positions */
.help-popover[data-position="right"] .help-card {
  left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
}
.help-popover[data-position="right"] .help-card::after {
  left: -6px; top: 50%; transform: translateY(-50%) rotate(45deg);
}

.help-popover[data-position="left"] .help-card {
  right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
}
.help-popover[data-position="left"] .help-card::after {
  right: -6px; top: 50%; transform: translateY(-50%) rotate(225deg);
}

.help-popover[data-position="top"] .help-card {
  left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
}
.help-popover[data-position="top"] .help-card::after {
  left: 50%; bottom: -6px; transform: translateX(-50%) rotate(135deg);
}

.help-popover[data-position="bottom"] .help-card {
  left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
}
.help-popover[data-position="bottom"] .help-card::after {
  left: 50%; top: -6px; transform: translateX(-50%) rotate(-45deg);
}

/* keyboard/focus states */
.help-popover > summary.help-icon:focus-visible {
  box-shadow: 0 0 0 3px rgba(52,81,209,.25);
}

/* content defaults */
.help-card-body h4 {
  margin: 0 0 6px; font-size: 14px; font-weight: 700;
}
.help-card-body p { margin: 0; }
.help-card-body p + p { margin-top: 6px; }