/*
 * ==========================================================
 * VIBE HOME + ACTIVITIES 2.0
 * ==========================================================
 */

/* VIBE_ACTIVITIES_UI_V20 */

.va{
  display:flex;
  flex-direction:column;
  gap:18px;
}


.va-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;

  gap:16px;
}


.va-kicker{
  color:var(--vb-accent);

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

  letter-spacing:.11em;
  text-transform:uppercase;
}


.va-title{
  margin-top:5px;

  color:var(--vb-text);

  font-size:
    clamp(
      27px,
      2.4vw,
      36px
    );

  font-weight:950;
  line-height:1.08;

  letter-spacing:-.045em;
}


.va-description{
  max-width:720px;

  margin-top:8px;

  color:var(--vb-muted);

  font-size:14px;
  line-height:1.55;
}


.va-balance{
  min-width:180px;

  padding:14px 16px;

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

  border-radius:14px;

  background:
    var(--vb-surface-1);
}


.va-balance-label{
  color:var(--vb-muted);

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

  letter-spacing:.06em;
  text-transform:uppercase;
}


.va-balance-value{
  margin-top:5px;

  color:var(--vb-text);

  font-size:21px;
  font-weight:950;

  font-variant-numeric:
    tabular-nums;
}


.va-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:12px;
}


.va-card{
  position:relative;

  overflow:hidden;
}


.va-card[data-kind="daily"]{
  --vb-accent:#5db7ff;
  --vb-accent-soft:rgba(93,183,255,.12);
}


.va-card[data-kind="work"]{
  --vb-accent:#53e6ad;
  --vb-accent-soft:rgba(83,230,173,.12);
}


.va-card[data-kind="boss"]{
  --vb-accent:#ff685f;
  --vb-accent-soft:rgba(255,104,95,.12);
}


.va-card::after{
  content:"";

  position:absolute;

  width:150px;
  height:150px;

  right:-70px;
  bottom:-80px;

  border-radius:50%;

  background:
    var(--vb-accent-soft);

  filter:
    blur(8px);

  pointer-events:none;
}


.va-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:10px;
}


.va-card-icon{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--vb-accent) 30%,
      transparent
    );

  border-radius:10px;

  color:var(--vb-accent);

  background:
    var(--vb-accent-soft);
}


.va-card-icon svg{
  width:17px;
  height:17px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.8;

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


.va-state{
  display:inline-flex;
  align-items:center;

  min-height:25px;

  padding:
    4px
    8px;

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

  border-radius:999px;

  color:var(--vb-muted);

  font-size:11px;
  font-weight:800;
}


.va-state.is-ready{
  color:var(--vb-success);

  background:
    var(--vb-success-soft);
}


.va-card-title{
  margin-top:14px;

  color:var(--vb-text);

  font-size:18px;
  font-weight:900;
}


.va-card-sub{
  min-height:42px;

  margin-top:5px;

  color:var(--vb-muted);

  font-size:13px;
  line-height:1.5;
}


.va-card-value{
  margin-top:14px;

  color:var(--vb-text);

  font-size:22px;
  font-weight:950;

  font-variant-numeric:
    tabular-nums;
}


.va-card-caption{
  margin-top:3px;

  color:var(--vb-muted);

  font-size:12px;
}


.va-card-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  margin-top:15px;
}


.va-overview-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.4fr)
    minmax(280px,.6fr);

  gap:12px;
}


.va-panel-title{
  color:var(--vb-text);

  font-size:17px;
  font-weight:900;
}


.va-panel-sub{
  margin-top:4px;

  color:var(--vb-muted);

  font-size:12px;
}


.va-recent{
  margin-top:14px;

  display:flex;
  flex-direction:column;

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

  border-radius:12px;

  overflow:hidden;
}


.va-recent-row{
  display:grid;

  grid-template-columns:
    115px
    minmax(0,1fr)
    120px;

  align-items:center;

  gap:12px;

  min-height:48px;

  padding:
    8px
    11px;

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


.va-recent-row:last-child{
  border-bottom:0;
}


.va-recent-kind{
  color:var(--vb-text);

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


.va-recent-time{
  color:var(--vb-muted);

  font-size:11px;
}


.va-recent-delta{
  color:var(--vb-success);

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

  text-align:right;

  font-variant-numeric:
    tabular-nums;
}


.va-links{
  display:grid;

  grid-template-columns:
    1fr;

  gap:7px;

  margin-top:14px;
}


.va-link{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  min-height:44px;

  padding:
    8px
    10px;

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

  border-radius:10px;

  color:var(--vb-text);

  background:
    rgba(255,255,255,.012);

  text-decoration:none;

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

  transition:
    border-color
    var(--vb-motion-fast)
    var(--vb-ease),
    background
    var(--vb-motion-fast)
    var(--vb-ease);
}


.va-link:hover{
  border-color:
    var(--vb-border-hover);

  background:
    var(--vb-surface-hover);
}


.va-detail{
  display:grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(280px,.8fr);

  gap:12px;
}


.va-main-action{
  min-height:250px;

  display:flex;
  flex-direction:column;

  justify-content:space-between;
}


.va-big-value{
  margin-top:18px;

  color:var(--vb-text);

  font-size:
    clamp(
      30px,
      4vw,
      52px
    );

  line-height:1;

  font-weight:950;

  letter-spacing:-.05em;

  font-variant-numeric:
    tabular-nums;
}


.va-big-label{
  margin-top:6px;

  color:var(--vb-muted);

  font-size:13px;
}


.va-info-list{
  display:flex;
  flex-direction:column;

  margin-top:12px;
}


.va-info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:12px;

  min-height:42px;

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

  color:var(--vb-muted);

  font-size:13px;
}


.va-info-row:last-child{
  border-bottom:0;
}


.va-info-row strong{
  color:var(--vb-text);

  font-weight:850;

  text-align:right;
}


.va-progress{
  height:9px;

  overflow:hidden;

  margin-top:12px;

  border-radius:999px;

  background:
    rgba(255,255,255,.055);
}


.va-progress-fill{
  height:100%;

  border-radius:inherit;

  background:
    var(--vb-accent);

  transition:
    width
    var(--vb-motion-normal)
    var(--vb-ease);
}


.va-streak{
  display:grid;

  grid-template-columns:
    repeat(7,1fr);

  gap:5px;

  margin-top:15px;
}


.va-streak-cell{
  height:7px;

  border-radius:999px;

  background:
    rgba(255,255,255,.06);
}


.va-streak-cell.is-active{
  background:
    var(--vb-accent);
}


.va-empty{
  padding:
    28px
    12px;

  color:var(--vb-muted);

  text-align:center;

  font-size:13px;
}


@media(max-width:980px){

  .va-grid{
    grid-template-columns:1fr;
  }


  .va-overview-grid,
  .va-detail{
    grid-template-columns:1fr;
  }

}


@media(max-width:620px){

  .va-hero{
    display:block;
  }


  .va-balance{
    margin-top:14px;
  }


  .va-recent-row{
    grid-template-columns:
      minmax(0,1fr)
      auto;
  }


  .va-recent-time{
    display:none;
  }

}