/* =========================
   ROW CONTAINER (MOBILE FIRST)
========================= */

.hw-row2{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;

  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;

  margin:8px 0;

  scrollbar-width:none;
}

.hw-row2::-webkit-scrollbar{
  display:none;
}

/* =========================
   CARD
========================= */

.hw-ship2{
  flex:0 0 60%;
  scroll-snap-align:start;

  border-radius:12px;
  padding:10px 12px;
  color:#fff;

  display:flex;
  flex-direction:column;
  gap:6px;

  min-height:80px;

  position:relative;
  overflow:hidden;
}

/* subtle glow */
.hw-ship2:before{
  content:"";
  position:absolute;
  top:-40px;
  left:-60px;
  width:200px;
  height:200px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
}

/* =========================
   TOP ROW
========================= */

.hw-ship2-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:4px;
}

/* =========================
   TEXT
========================= */

.hw-ship2-label{
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.9;
}

.hw-ship2-big{
  font-size:15px;
  font-weight:900;
  line-height:1;
}

.hw-ship2-sub{
  font-size:10px;
  opacity:.9;
  line-height:1.2;
}

/* =========================
   PROGRESS BAR
========================= */

.hw-bar{
  height:6px;
  background:rgba(255,255,255,.28);
  border-radius:999px;
  overflow:hidden;
}

.hw-bar > div{
  height:100%;
  width:0%;
  background:#fff;
  border-radius:999px;
  transition:width 1s ease;
}

/* =========================
   BOTTOM ROW
========================= */

.hw-hint-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:10px;
  opacity:.95;
}

/* =========================
   TOOLTIP
========================= */

.hw-tooltip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  font-size:10px;
  font-weight:900;
  cursor:help;
}

/* =========================
   MOMENTUM CARD
========================= */

.hw-momentum-grid{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:2px;
}

.hw-momentum-right{
  text-align:right;
}

.hw-momentum2 .hw-ship2-big{
  margin:2px 0;
}

/* =========================
   COLORS
========================= */

.hw-ship2.ssignment {
    background: linear-gradient(175deg, #f602ff, #4b0f8d);
}

.hw-progress2{
  background:linear-gradient(35deg,#9a0da6,#07b346);
}

.hw-money2{
  background:linear-gradient(175deg,#5e9d11,#018c31);
}

.hw-goal2{
  background:linear-gradient(135deg,#db0a00,#ffb300);
}

.hw-momentum2{
  background:linear-gradient(135deg,#058b00,#42018b);
}

/* =========================
   DESKTOP
========================= */

@media(min-width:980px){

  .hw-row2{
    gap:12px;
    padding-bottom:8px;
  }

  .hw-ship2{
    flex:0 0 230px; /* 🔥 fixed card width */
    min-height:85px;
    max-width: 230px;
  }

  .hw-row2{
  cursor: grab;
}

.hw-row2:active{
  cursor: grabbing;
}

.hw-row2.dragging{
  cursor: grabbing;
}

}