/* Interval number line drawn by b5-intervals.js: bars in lanes over an axis, a sweep line, point marks. */
.iv{
  --lane:30px;--gut:0px;--top:24px;--glide:calc(var(--dur) * .5) cubic-bezier(.2,.8,.2,1);
  display:grid;grid-template-columns:var(--gut) minmax(0,1fr);font-family:var(--mono);font-variant-ligatures:none
}
.iv.gut{--gut:60px}
.iv-g{padding-top:var(--top)}
.iv-gl{
  height:var(--lane);display:flex;align-items:center;font-size:var(--fs-label);font-stretch:condensed;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px
}
.iv-t{position:relative;margin:0 16px 0 14px;padding-top:var(--top)}
.iv-lanes{position:relative;height:calc(var(--n, 1) * var(--lane))}
.iv-grid{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--rule)}
.iv-ax{position:relative;height:24px;border-top:1.5px solid var(--ink-4)}
.iv-tk{position:absolute;top:-1px;width:0;height:6px;border-left:1.5px solid var(--ink-4)}
.iv-tk span{position:absolute;top:7px;left:0;transform:translateX(-50%);font-size:var(--fs-label);line-height:1;color:var(--ink-3)}

.iv-bar{
  position:absolute;top:calc(var(--i, 0) * var(--lane) + 4px);height:calc(var(--lane) - 8px);
  border:1.5px solid var(--ink-4);border-radius:5px;background:var(--paper);color:var(--ink);
  transition:left var(--glide), width var(--glide), top var(--glide), background-color .25s, border-color .25s, color .25s, opacity .3s, box-shadow .25s
}
.iv-bar span{
  position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:var(--fs-label);font-weight:700;line-height:1;white-space:nowrap
}
.iv-bar.out-r span{left:calc(100% + 5px);transform:translateY(-50%)}
.iv-bar.out-l span{left:auto;right:calc(100% + 5px);transform:translateY(-50%)}
.iv-bar.out-r span,.iv-bar.out-l span{color:var(--ink-2)}
.iv-bar.mute span{display:none}
.iv-bar.cur{background:var(--probe-tint);border:2px solid var(--ink);box-shadow:0 8px 14px -8px var(--shadow);z-index:2}
.iv-bar.probe{background:var(--probe-tint);border-color:var(--probe)}
.iv-bar.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.iv-bar.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark);z-index:2}
.iv-bar.merged{background:var(--grid);border-color:var(--grid);color:var(--ink-3)}
.iv-bar.removed{opacity:.45;border-style:dashed;background:var(--paper)}
.iv-bar.removed span{text-decoration:line-through}
.iv-bar.skip{opacity:.35}

/* sweep line: a vertical marker over the lanes, its label in the strip above them */
.iv-sw{
  position:absolute;top:2px;left:0;width:0;height:calc(var(--top) - 2px + var(--n, 1) * var(--lane));z-index:1;
  border-left:2px solid var(--mark);pointer-events:none;transition:left var(--glide), opacity .25s
}
.iv-sw.off{opacity:0}
.iv-sw span{
  position:absolute;top:0;left:-1px;transform:translateX(-50%);padding:1px 5px;border-radius:4px;background:var(--mark);
  color:var(--on-mark);font-size:var(--fs-label);font-weight:700;line-height:1.35;white-space:nowrap
}
.iv-sw.al span{transform:translateX(-4px)}
.iv-sw.ar span{transform:translateX(calc(-100% + 4px))}
.iv-sw.probe{border-left-color:var(--probe)}
.iv-sw.probe span{background:var(--probe);color:var(--paper)}
.iv-sw.ok{border-left-color:var(--ok)}
.iv-sw.ok span{background:var(--ok);color:var(--paper)}

/* point marks (queries) in their own row under the axis */
.iv-mk{position:relative;height:0}
.iv.marks .iv-mk{height:46px}
.iv-m{
  position:absolute;top:2px;width:0;display:flex;flex-direction:column;align-items:center;
  transition:left var(--glide), opacity .3s
}
.iv-m::before{
  content:"";width:10px;height:10px;margin-left:0;border:1.5px solid var(--ink-3);border-radius:50%;background:var(--paper);
  flex:none;transition:background-color .25s, border-color .25s
}
.iv-mt,.iv-ms{font-size:var(--fs-label);line-height:1.25;white-space:nowrap;color:var(--ink-2)}
.iv-mt{margin-top:2px;font-weight:700}
.iv-ms{color:var(--ink-3)}
.iv-m.cur::before{background:var(--probe-tint);border:2px solid var(--ink)}
.iv-m.cur .iv-mt{color:var(--ink)}
.iv-m.ok::before{background:var(--ok-tint);border-color:var(--ok)}
.iv-m.ok .iv-ms{color:var(--ok);font-weight:700}
.iv-m.hit::before{background:var(--mark);border-color:var(--mark)}
.iv-m.hit .iv-ms{color:var(--mark);font-weight:700}
.iv-m.skip{opacity:.4}

@media (max-width:520px){
  .iv{--lane:26px}
  .iv.gut{--gut:50px}
  .iv-t{margin:0 12px 0 10px}
  .iv-bar span{font-size:var(--fs-label)}
  .iv-gl{font-size:var(--fs-label);padding-right:3px}
}
@media (prefers-reduced-motion: reduce){
  .iv-bar,.iv-sw,.iv-m{transition:background-color .25s, border-color .25s, color .25s, opacity .3s}
}