/* =========================================================
   Reusable help panel
========================================================= */

.help-panel-trigger {
  appearance: none;
  -webkit-appearance: none;

  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.60);

  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 13px;
  text-align: center;

  cursor: help;
}

.help-panel-trigger:hover,
.help-panel-trigger:focus-visible,
.help-panel-host.is-open .help-panel-trigger {
  border-color: rgba(61, 209, 220, 0.60);
  background: rgba(61, 209, 220, 0.11);
  color: #fff;
}

.help-panel-trigger:focus-visible {
  outline: 2px solid rgba(61, 209, 220, 0.40);
  outline-offset: 2px;
}

.help-panel-content {
  box-sizing: border-box;
  padding: 11px 14px 12px;

  border-top: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(7, 16, 18, 0.72);

  text-align: left;
}

.help-panel-content[hidden] {
  display: none;
}

.help-panel-title {
  color: rgba(255, 255, 255, 0.88);

  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.help-panel-copy {
  margin-top: 5px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}