@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;700&display=swap');

/* ── Reset ── */
.slw *{ box-sizing: border-box; }

/* ── Container ── */
.slw {
  background:    #0d6e6e;
  border-radius: 18px;
  padding:       30px;
  overflow:      hidden;
  position:      relative;
  width:         100%;
  font-family:   'DM Sans', sans-serif;
  box-shadow:    inset 0 2px 12px rgba(0,0,0,.25), 0 8px 40px rgba(0,0,0,.4);
}

/* ── Fade masks ── */
.slw::before,
.slw::after {
  content:        '';
  position:       absolute;
  left: 0; right: 0;
  height:         54px;
  pointer-events: none;
  z-index:        2;
}
.slw::before {
  top:        0;
  background: linear-gradient( to bottom, #00576C, transparent )!important;
}
.slw::after {
  bottom:     0;
  background: linear-gradient( to top, #00576C, transparent )!important;
}

/* ── Viewport ── */
.slw-vp {
  height:   300px;
  overflow: hidden;
  position: relative;
}

/* ── Scrolling track ── */
.slw-track {
  display:        flex;
  flex-direction: column;
  will-change:    transform;
}

/* ── Row ── */
.slw-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         14px 0;
  border-bottom:   1px solid rgba(255,255,255,.10);
  flex-shrink:     0;
  cursor:          default;
  /* opacity set dynamically by JS */
  transition:      opacity .05s;
}
.slw-row:last-child { border-bottom: none; }

/* ── Name ── */
.slw-name {
  font-size:      15px;
  font-weight:    400;
  color:          #ffffff;
  letter-spacing: .01em;
  max-width:      55%;
  transition:     font-weight .2s;
}

/* ── Meta ── */
.slw-meta {
  font-size:      14px;
  color:          #ffffff;
  letter-spacing: .02em;
  text-align:     right;
}

/* ── Active row: bold ── */
.slw-row.is-active .slw-name {
  font-weight: 700;
}

/* ── Hover: bold + full opacity (JS handles opacity reset) ── */
.slw-row:hover .slw-name {
  font-weight: 700;
}

/* ── Mobile: < 600px ── */
@media (max-width: 600px) {
  .slw {
    padding: 24px;
  }

  .slw-row {
    flex-direction: column;
    align-items:    flex-start;
    gap:            4px;
    padding:        12px 0;
  }

  .slw-name {
    max-width: 100%;
  }

  .slw-meta {
    text-align: left;
    font-size:  12px;
  }
}