/*
 * ==========================================================
 * VIBE CHART CORE 1.0
 * ==========================================================
 */

.vb-chart{
  position:relative;

  min-width:0;

  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:
    var(--vb-radius-lg);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.006)
    ),
    var(--vb-surface);

  box-shadow:
    0 14px 40px
    rgba(0,0,0,.11);
}


.vb-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;

  padding:
    18px
    18px
    4px;
}


.vb-chart-heading{
  min-width:0;
}


.vb-chart-title{
  margin:0;

  color:
    var(--vb-text);

  font-size:14px;
  font-weight:800;

  letter-spacing:-.015em;
}


.vb-chart-subtitle{
  margin-top:3px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vb-chart-current{
  flex:0 0 auto;

  text-align:right;
}


.vb-chart-value{
  color:
    var(--vb-text);

  font-size:17px;
  font-weight:850;

  line-height:1.15;

  font-variant-numeric:
    tabular-nums;
}


.vb-chart-unit{
  margin-top:3px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vb-chart-stage{
  position:relative;

  height:190px;

  margin:
    7px
    12px
    0;
}


.vb-chart-svg{
  display:block;

  width:100%;
  height:100%;

  overflow:visible;
}


.vb-chart-grid{
  stroke:
    rgba(255,255,255,.055);

  stroke-width:1;

  vector-effect:
    non-scaling-stroke;
}


.vb-chart-area{
  opacity:.28;

  animation:
    vb-chart-area-in
    420ms
    var(--vb-ease)
    both;
}


.vb-chart-line{
  fill:none;

  stroke:
    var(--vb-accent);

  stroke-width:2.2;

  stroke-linecap:round;
  stroke-linejoin:round;

  vector-effect:
    non-scaling-stroke;

  filter:
    drop-shadow(
      0 0 7px
      var(--vb-accent-soft)
    );

  stroke-dasharray:1600;
  stroke-dashoffset:1600;

  animation:
    vb-chart-line-in
    620ms
    var(--vb-ease)
    forwards;
}


.vb-chart-crosshair{
  stroke:
    rgba(255,255,255,.15);

  stroke-width:1;

  stroke-dasharray:
    3
    4;

  vector-effect:
    non-scaling-stroke;

  opacity:0;
}


.vb-chart-point{
  fill:
    var(--vb-accent);

  stroke:
    var(--vb-surface);

  stroke-width:3;

  vector-effect:
    non-scaling-stroke;

  opacity:0;

  transition:
    opacity
      var(--vb-motion-fast)
      var(--vb-ease);
}


.vb-chart.is-hovering
.vb-chart-crosshair,

.vb-chart.is-hovering
.vb-chart-point{
  opacity:1;
}


.vb-chart-axis{
  display:flex;
  justify-content:space-between;
  gap:12px;

  padding:
    2px
    18px
    14px;

  color:
    var(--vb-muted);

  font-size:13px;
}


.vb-chart-tooltip{
  position:absolute;
  z-index:5;

  min-width:112px;

  padding:
    8px
    10px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    10px;

  background:
    rgba(14,16,22,.96);

  box-shadow:
    0 12px 38px
    rgba(0,0,0,.35);

  backdrop-filter:
    blur(18px);

  pointer-events:none;

  opacity:0;

  transform:
    translate(-50%,-105%);

  transition:
    opacity
      var(--vb-motion-fast)
      var(--vb-ease);
}


.vb-chart.is-hovering
.vb-chart-tooltip{
  opacity:1;
}


.vb-chart-tooltip-label{
  color:
    var(--vb-muted);

  font-size:13px;
}


.vb-chart-tooltip-value{
  margin-top:3px;

  color:
    var(--vb-text);

  font-size:13px;
  font-weight:800;

  font-variant-numeric:
    tabular-nums;
}


.vb-chart-tooltip-value::before{
  content:"";

  display:inline-block;

  width:5px;
  height:5px;

  margin-right:6px;

  border-radius:999px;

  background:
    var(--vb-accent);

  box-shadow:
    0 0 9px
    var(--vb-accent-soft);

  vertical-align:1px;
}


@keyframes vb-chart-line-in{

  to{
    stroke-dashoffset:0;
  }

}


@keyframes vb-chart-area-in{

  from{
    opacity:0;
  }

  to{
    opacity:.28;
  }

}


@media(max-width:720px){

  .vb-chart-stage{
    height:165px;
  }

}


@media(prefers-reduced-motion:reduce){

  .vb-chart-line{
    stroke-dasharray:none;
    stroke-dashoffset:0;
    animation:none;
  }

  .vb-chart-area{
    animation:none;
  }

}