/*
 * Level tab switcher — paired with level-switcher.js. The active/inactive look (teal
 * "Level N" wide pill vs light number circle, including the "Level" word visibility
 * and the background/text colours) is reproduced by SWAPPING Framer's own per-variant
 * classes + inline styles on both the pill and its flex-slot container (see the JS),
 * so this stylesheet only adds the affordances Framer's runtime can't: the pointer
 * cursor and a subtle hover lift. Scoped to .ht-lvl-pill so untouched DOM is safe.
 */
.ht-lvl-pill {
  cursor: pointer;
  transition: transform 0.18s ease;
}
.ht-lvl-pill:hover {
  transform: translateY(-1px);
}

/* Pill text colour follows active/inactive. The per-variant text colour is inline on
   the pill's RichText children and is NOT moved by the class/style swap, so we drive
   it here: active = light on teal, inactive = teal on light. Without this an active
   Level 2–4 pill renders teal-on-teal (invisible) and the inactive Level-1 pill keeps
   its light text on the light circle. */
.ht-lvl-pill.ht-lvl-pill--active p {
  color: rgb(214, 240, 245) !important;
}
.ht-lvl-pill:not(.ht-lvl-pill--active) p {
  color: rgb(48, 180, 207) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ht-lvl-pill {
    transition: none;
  }
  .ht-lvl-pill:hover {
    transform: none;
  }
}