/*
 * Send Listy Core 0.586 — My Lists compact header spacing refinement
 * Visual-only. No drag, persistence, list data, menu, or color behavior lives here.
 */

/* Reserve a dedicated header band inside each My Lists card. */
.send-list-app .sl-my-lists-widget .sl-list-card{
  padding-top:56px!important;
}

/* Soft 10% gray -> white header, with a very fine divider. */
.send-list-app .sl-my-lists-widget .sl-list-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:43px;
  border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,rgba(128,128,128,.10) 0%,rgba(247,248,247,.055) 52%,rgba(255,255,255,.98) 100%);
  border-bottom:1px solid rgba(90,104,95,.14);
  pointer-events:none;
  z-index:2;
}

/* Drag handle: visual affordance only. Keep the touch target, remove the pill/circle chrome. */
.send-list-app .sl-my-lists-widget .sl-card-drag-handle{
  top:7px!important;
  inset-inline-start:9px!important;
  width:28px!important;
  height:29px!important;
  min-width:28px!important;
  min-height:29px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(105,112,108,.58)!important;
  display:grid!important;
  place-items:center!important;
  z-index:13!important;
}

/* Six dots, 2 columns × 3 rows, matching the reference header. */
.send-list-app .sl-my-lists-widget .sl-card-drag-handle>span{
  position:relative!important;
  display:block!important;
  width:10px!important;
  height:14px!important;
}
.send-list-app .sl-my-lists-widget .sl-card-drag-handle>span::before{
  content:""!important;
  position:absolute!important;
  left:1px!important;
  top:1px!important;
  width:3.05px!important;
  height:3.05px!important;
  border-radius:50%!important;
  background:currentColor!important;
  box-shadow:
    5.5px 0 0 currentColor,
    0 5.5px 0 currentColor,
    5.5px 5.5px 0 currentColor,
    0 11px 0 currentColor,
    5.5px 11px 0 currentColor!important;
}
.send-list-app .sl-my-lists-widget .sl-card-drag-handle:focus-visible{
  outline:2px solid rgba(47,158,47,.28)!important;
  outline-offset:2px!important;
  box-shadow:none!important;
}

/* Right-side actions: no outer circles, no card-like margins, one clean baseline. */
.send-list-app .sl-my-lists-widget .sl-card-top-actions{
  top:7px!important;
  inset-inline-end:8px!important;
  right:auto!important;
  left:auto!important;
  height:29px!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  z-index:13!important;
}
.send-list-app[dir="ltr"] .sl-my-lists-widget .sl-card-top-actions{right:8px!important;left:auto!important}
.send-list-app[dir="rtl"] .sl-my-lists-widget .sl-card-top-actions{left:8px!important;right:auto!important}

/* Favorite star: larger, flat, no containing circle. */
.send-list-app .sl-my-lists-widget .sl-list-card-wrap.is-favorite .sl-card-top-actions::before{
  width:20px!important;
  height:26px!important;
  flex:0 0 20px!important;
  margin:0!important;
  font-size:19px!important;
  line-height:1!important;
  color:#ffb000!important;
  text-shadow:0 1px 1px rgba(110,72,0,.10)!important;
}

/* Color control: only the actual color dot remains visible. */
.send-list-app .sl-my-lists-widget .sl-card-color-quick{
  width:24px!important;
  height:26px!important;
  min-width:24px!important;
  min-height:26px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:grid!important;
  place-items:center!important;
}
.send-list-app .sl-my-lists-widget .sl-card-color-quick span{
  width:15px!important;
  height:15px!important;
  border-radius:50%!important;
  background:var(--sl-current,#fff)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08)!important;
}

/* Three-dot action: naked icon, no outer circle/card. */
.send-list-app .sl-my-lists-widget .sl-card-top-actions .sl-card-more{
  position:static!important;
  width:20px!important;
  height:26px!important;
  min-width:20px!important;
  min-height:26px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#101410!important;
  font-size:21px!important;
  font-weight:900!important;
  line-height:1!important;
  display:grid!important;
  place-items:center!important;
}

/* Keep the badge above the header band, as in the reference. */
.send-list-app .sl-my-lists-widget .sl-list-badge{
  z-index:14!important;
}

/* Mobile-first refinement: compact but comfortable touch geometry. */
@media(max-width:650px){
  .send-list-app .sl-my-lists-widget .sl-list-card{
    padding-top:53px!important;
  }
  .send-list-app .sl-my-lists-widget .sl-list-card::before{
    height:41px!important;
    border-radius:15px 15px 0 0!important;
  }
  .send-list-app .sl-my-lists-widget .sl-card-drag-handle{
    top:6px!important;
    inset-inline-start:8px!important;
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    min-height:29px!important;
  }
  .send-list-app .sl-my-lists-widget .sl-card-top-actions{
    top:6px!important;
    inset-inline-end:7px!important;
    gap:0!important;
    height:29px!important;
  }
  .send-list-app[dir="ltr"] .sl-my-lists-widget .sl-card-top-actions{right:7px!important;left:auto!important}
  .send-list-app[dir="rtl"] .sl-my-lists-widget .sl-card-top-actions{left:7px!important;right:auto!important}
  .send-list-app .sl-my-lists-widget .sl-list-card-wrap.is-favorite .sl-card-top-actions::before{
    width:18px!important;
    flex-basis:18px!important;
    font-size:18px!important;
  }
  .send-list-app .sl-my-lists-widget .sl-card-color-quick{
    width:22px!important;
    min-width:22px!important;
  }
  .send-list-app .sl-my-lists-widget .sl-card-color-quick span{
    width:13.5px!important;
    height:13.5px!important;
  }
  .send-list-app .sl-my-lists-widget .sl-card-top-actions .sl-card-more{
    width:18px!important;
    min-width:18px!important;
    font-size:19px!important;
  }
}


/* 0.586 — My Lists hover stability preserved from 0.585.
 * Unified UX historically lifts every list card by -2px on hover. With the
 * badge + dedicated header band this reads as a visible shake. Keep the card
 * geometry fixed and use paint-only feedback instead.
 */
.send-list-app .sl-my-lists-widget .sl-list-card{
  transform:none!important;
  transition:border-color .16s ease,box-shadow .16s ease!important;
}
@media (hover:hover){
  .send-list-app.sl-ux-v0355 .sl-my-lists-widget .sl-list-card:hover{
    transform:none!important;
    border-color:rgba(47,158,47,.22)!important;
    box-shadow:0 5px 16px rgba(30,45,60,.075)!important;
  }
}
.send-list-app.sl-ux-v0355 .sl-my-lists-widget .sl-list-card:active{
  transform:none!important;
}

/* Dark mode keeps the same hierarchy without forcing a white slab. */
.send-list-app.sl-dark-mode .sl-my-lists-widget .sl-list-card::before{
  background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.035) 55%,rgba(24,30,35,.02) 100%);
  border-bottom-color:rgba(255,255,255,.10);
}
.send-list-app.sl-dark-mode .sl-my-lists-widget .sl-card-drag-handle{color:rgba(205,211,207,.58)!important}
.send-list-app.sl-dark-mode .sl-my-lists-widget .sl-card-top-actions .sl-card-more{color:#eef3ef!important}