/* JB Underline Styles */
.jb-ul{
  position: relative;
  display: inline-block;
  line-height: 1.1;
}

/* Oval outline around the text */
.jb-ul--oval{
  padding: var(--jb-oval-pad-y, 8px) var(--jb-oval-pad-x, 16px);
  border: var(--jb-oval-thick, 4px) solid var(--jb-oval-color, #b7d11e);
  border-radius: 9999px;
}

/* Oval tail (small line at bottom-right) */
.jb-ul--oval-tail::after{
  content:"";
  position:absolute;
  right: calc(var(--jb-oval-thick, 4px) * -0.2);
  bottom: calc(var(--jb-oval-thick, 4px) * -0.6);
  width: var(--jb-oval-tail-len, 18px);
  height: var(--jb-oval-thick, 4px);
  background: var(--jb-oval-color, #b7d11e);
  border-radius: 9999px;
  transform: rotate(-6deg);
}

/* Keep text above underline */
.jb-ul__text{ position: relative; z-index: 2; }

/* underline sizing */
.jb-ul{ --jb-ul-size-mult: calc(1.1 + (var(--jb-ul-size, 3) * 0.6)); }

.jb-ul__svg{
  position:absolute;
  left:0; right:0;
  width:100%;
  height: calc(var(--jb-ul-thickness, 8px) * var(--jb-ul-size-mult));
  bottom: calc(var(--jb-ul-offset, 8px) * -1);
  z-index:1;
  pointer-events:none;
}

.jb-ul__path{
  fill:none;
  stroke: var(--jb-ul-color, #10a9c9);
  stroke-width: var(--jb-ul-thickness, 8px);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--jb-ul-opacity, 1);
}

/* Marker “filled” look: multiple thick strokes stacked */
.jb-ul__marker{
  fill:none;
  stroke: var(--jb-ul-color, #000);
  stroke-width: var(--jb-ul-thickness, 10px);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--jb-ul-opacity, 1);
}
.jb-ul__marker--a{ opacity: calc(var(--jb-ul-opacity, 1) * 0.95); }
.jb-ul__marker--b{ opacity: calc(var(--jb-ul-opacity, 1) * 0.85); }
.jb-ul__marker--c{ opacity: calc(var(--jb-ul-opacity, 1) * 0.85); }

/* Small tuning by style */
.jb-ul--straight .jb-ul__svg{ height: calc(var(--jb-ul-thickness, 8px) * (var(--jb-ul-size-mult) * 0.75)); }
.jb-ul--curve .jb-ul__svg{ height: calc(var(--jb-ul-thickness, 8px) * (var(--jb-ul-size-mult) * 0.9)); }
.jb-ul--swoosh .jb-ul__svg{ height: calc(var(--jb-ul-thickness, 8px) * (var(--jb-ul-size-mult) * 1.0)); }
.jb-ul--marker .jb-ul__svg{ height: calc(var(--jb-ul-thickness, 10px) * (var(--jb-ul-size-mult) * 0.95)); }