/* Learn With Yuna 8.10.2 — Story Time library polish
   Keeps the reader untouched. Refines the public library hero, rows, cards,
   favorites, badges, desktop arrows, and mobile swipe cues. */

.story-time-main #story-list-view{
  overflow:clip;
  background:#fffdf8;
}

/* A shorter, fully visible introduction with no large dead zone below it. */
.story-time-main #story-list-view .story-library-hero{
  min-height:244px!important;
  padding:38px 24px 34px!important;
}
.story-time-main #story-list-view .story-library-hero .story-page-kicker{
  margin-bottom:11px!important;
}
.story-time-main #story-list-view .story-library-hero h1{
  max-width:940px!important;
  margin-bottom:12px!important;
  font-size:clamp(42px,4.55vw,60px)!important;
  line-height:1.02!important;
}
.story-time-main #story-list-view .story-library-hero>p:last-of-type{
  max-width:680px!important;
  font-size:clamp(15.5px,1.35vw,18px)!important;
  line-height:1.55!important;
}
.story-time-main #story-list-view .story-library-hero .story-library-quick{
  margin-top:15px!important;
}

/* Library width and vertical rhythm. */
.story-time-main #story-list-view .story-category-library{
  width:min(1240px,calc(100% - 34px))!important;
  padding:24px 0 64px!important;
}
.story-time-main #story-list-view .story-category-rows{
  gap:46px!important;
  margin-top:0!important;
}
.story-time-main #story-list-view .story-category-row{
  overflow:hidden!important;
  padding:0 2px 2px!important;
}
.story-time-main #story-list-view .story-category-heading{
  margin:0 4px 14px!important;
}
.story-time-main #story-list-view .story-category-heading h3{
  font-size:clamp(1.08rem,.98rem + .38vw,1.34rem)!important;
  letter-spacing:-.025em!important;
}

/* Desktop uses only the clean arrow pair. Mobile keeps the swipe cue. */
@media(min-width:768px){
  .story-time-main #story-list-view .story-category-hint{display:none!important}
}
.story-time-main #story-list-view .story-category-controls{gap:7px!important}
.story-time-main #story-list-view .story-row-btn{
  width:38px!important;
  height:38px!important;
  border-color:#e3dcc5!important;
  color:#594714!important;
  font-size:24px!important;
  box-shadow:0 7px 18px rgba(85,65,15,.09)!important;
}
.story-time-main #story-list-view .story-row-btn:hover{
  box-shadow:0 10px 22px rgba(85,65,15,.13)!important;
}

/* Controlled horizontal reveal: four useful cards and a clear next-card peek. */
.story-time-main #story-list-view .story-category-track{
  grid-auto-columns:clamp(224px,calc((100% - 64px)/4.4),258px)!important;
  gap:18px!important;
  padding:3px 62px 10px 4px!important;
  scroll-padding-left:4px!important;
}
.story-time-main #story-list-view .story-category-row::before,
.story-time-main #story-list-view .story-category-row::after{
  top:52px!important;
  bottom:0!important;
  width:64px!important;
  opacity:0!important;
  transition:opacity .16s ease!important;
}
.story-time-main #story-list-view .story-category-row::before{
  left:0!important;
  background:linear-gradient(90deg,#fffdf8 8%,rgba(255,253,248,0) 100%)!important;
}
.story-time-main #story-list-view .story-category-row::after{
  right:0!important;
  background:linear-gradient(270deg,#fffdf8 8%,rgba(255,253,248,0) 100%)!important;
}
.story-time-main #story-list-view .story-category-row.can-scroll-left::before,
.story-time-main #story-list-view .story-category-row.can-scroll-right::after{
  opacity:1!important;
}

/* Compact picture-book cards: 16:9 art, two title lines, and one author line. */
.story-time-main #story-list-view .story-category-track .story-card{
  aspect-ratio:auto!important;
  height:auto!important;
  align-self:start!important;
}
.story-time-main #story-list-view .story-category-track .story-card-bg{
  display:grid!important;
  grid-template-rows:auto 88px!important;
  height:auto!important;
  min-height:0!important;
  border-color:#e5e8ee!important;
  border-radius:18px!important;
  box-shadow:0 8px 22px rgba(31,36,56,.065)!important;
}
.story-time-main #story-list-view .story-category-track .story-card:hover .story-card-bg{
  transform:translateY(-2px)!important;
  border-color:#d9dde6!important;
  box-shadow:0 13px 28px rgba(31,36,56,.095)!important;
}
.story-time-main #story-list-view .story-category-track .story-card-image-wrap{
  height:auto!important;
  aspect-ratio:16/9!important;
  border-radius:17px 17px 0 0!important;
}
.story-time-main #story-list-view .story-category-track .story-meta{
  min-height:88px!important;
  padding:10px 11px 11px!important;
  justify-content:flex-start!important;
}
.story-time-main #story-list-view .story-category-track .story-title{
  font-size:clamp(.89rem,.84rem + .16vw,.99rem)!important;
  line-height:1.18!important;
}
.story-time-main #story-list-view .story-category-track .story-author{
  margin-top:6px!important;
  font-size:10.5px!important;
}

/* One tidy badge group in the artwork instead of badges crowding the title. */
.story-time-main #story-list-view .story-card-badges{
  position:absolute;
  z-index:4;
  top:8px;
  right:8px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  max-width:calc(100% - 16px);
}
.story-time-main #story-list-view .story-card-badges:empty{display:none}
.story-time-main #story-list-view .story-category-track .story-card-badge{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:22px!important;
  padding:0 7px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.93)!important;
  color:#495267!important;
  font-size:8.5px!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:0 4px 12px rgba(31,36,56,.13)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.story-time-main #story-list-view .story-category-track .story-plus-badge{
  color:#6b5109!important;
  background:rgba(255,248,219,.95)!important;
}
.story-time-main #story-list-view .story-category-track .story-new-badge{
  color:#276044!important;
  background:rgba(239,251,244,.95)!important;
}
.story-time-main #story-list-view .story-card.is-plus-story .story-card-image-wrap::after{
  content:none!important;
  display:none!important;
}

/* Favorites use a small heart marker, never a pink selected-card outline. */
.story-time-main #story-list-view .story-card.is-favorite-story .story-card-bg{
  border-color:#e5e8ee!important;
  box-shadow:0 8px 22px rgba(31,36,56,.065)!important;
}
.story-time-main #story-list-view .story-favorite-marker{
  position:absolute;
  z-index:5;
  left:8px;
  top:8px;
  width:27px;
  height:27px;
  display:none;
  place-items:center;
  border:1px solid rgba(255,255,255,.84);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#b83851;
  font-size:13px;
  line-height:1;
  box-shadow:0 4px 12px rgba(31,36,56,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.story-time-main #story-list-view .story-card.is-favorite-story .story-favorite-marker{display:grid}

/* Keep the lock strip clear of the new compact badges. */
.story-time-main #story-list-view .story-category-track .story-lock-overlay{
  left:8px!important;
  right:8px!important;
  bottom:8px!important;
}

@media(min-width:768px) and (max-width:1040px){
  .story-time-main #story-list-view .story-category-track{
    grid-auto-columns:clamp(210px,29vw,236px)!important;
    padding-right:52px!important;
  }
}

@media(max-width:767px){
  .story-time-main #story-list-view .story-library-hero{
    min-height:214px!important;
    padding:31px 18px 30px!important;
  }
  .story-time-main #story-list-view .story-library-hero h1{
    margin-bottom:10px!important;
    font-size:clamp(36px,10.4vw,48px)!important;
  }
  .story-time-main #story-list-view .story-library-hero>p:last-of-type{
    font-size:15px!important;
    line-height:1.5!important;
  }
  .story-time-main #story-list-view .story-category-library{
    width:min(100% - 18px,1240px)!important;
    padding:20px 0 46px!important;
  }
  .story-time-main #story-list-view .story-category-rows{gap:30px!important}
  .story-time-main #story-list-view .story-category-heading{margin-bottom:10px!important}
  .story-time-main #story-list-view .story-category-hint{
    min-height:32px!important;
    padding:0 9px!important;
    background:#fff8df!important;
    box-shadow:none!important;
    font-size:9.5px!important;
  }
  .story-time-main #story-list-view .story-category-track{
    grid-auto-columns:clamp(166px,46vw,188px)!important;
    gap:11px!important;
    padding:3px 28px 8px 2px!important;
  }
  .story-time-main #story-list-view .story-category-row::before,
  .story-time-main #story-list-view .story-category-row::after{
    top:46px!important;
    width:30px!important;
  }
  .story-time-main #story-list-view .story-category-track .story-card-bg{
    grid-template-rows:auto 84px!important;
  }
  .story-time-main #story-list-view .story-category-track .story-card-image-wrap{
    aspect-ratio:16/10!important;
  }
  .story-time-main #story-list-view .story-category-track .story-meta{
    min-height:84px!important;
    padding:9px 10px 10px!important;
  }
  .story-time-main #story-list-view .story-card-badges{
    top:6px;
    right:6px;
    gap:4px;
  }
  .story-time-main #story-list-view .story-category-track .story-card-badge{
    min-height:20px!important;
    padding-inline:6px!important;
    font-size:8px!important;
  }
  .story-time-main #story-list-view .story-favorite-marker{
    left:6px;
    top:6px;
    width:25px;
    height:25px;
  }
}

@media(prefers-reduced-motion:reduce){
  .story-time-main #story-list-view .story-category-row::before,
  .story-time-main #story-list-view .story-category-row::after{transition:none!important}
}


/* Learn With Yuna 8.10.18 — Plus bedtime queue + offline favorites */
.story-library-quick{flex-wrap:wrap!important}.story-queue-view,.story-offline-view{white-space:nowrap}.story-offline-status{margin:8px auto 0;max-width:760px;color:#718096;font-size:12px;line-height:1.4;text-align:center}.story-offline-status.is-working{color:#526d7c}.story-offline-status.is-ready{color:#3f6d5a}.story-offline-status.is-error{color:#9a5964}.story-card{position:relative}.story-queue-card-btn{position:absolute;right:10px;bottom:10px;z-index:8;min-width:38px;height:34px;padding:0 10px;border:1px solid rgba(111,128,147,.2);border-radius:999px;background:rgba(255,255,255,.94);color:#65778b;box-shadow:0 5px 15px rgba(30,49,68,.12);font:700 12px/1 var(--font-sans,"Inter",sans-serif);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.story-queue-card-btn:hover{transform:translateY(-1px)}.story-queue-card-btn.is-queued{background:#f4f8ff;border-color:#cbd9e8;color:#527191}.story-queue-card-btn.is-queued span{font-size:0}.story-queue-card-btn.is-queued span::after{content:"☾ ✓";font-size:12px}.story-card.is-queued-story .story-card-bg{box-shadow:0 0 0 2px rgba(111,143,174,.18),var(--story-card-shadow,0 10px 24px rgba(31,45,61,.08))}.story-queue-empty span{color:#6f88a2}.story-offline-view.is-working{pointer-events:none;opacity:.7}
@media(max-width:600px){.story-library-quick{gap:7px!important}.story-library-view{font-size:12px!important;padding:8px 10px!important}.story-offline-view{flex:1 1 100%}.story-offline-status{font-size:11px;padding:0 10px}.story-queue-card-btn{right:8px;bottom:8px;height:32px;min-width:36px;padding:0 9px}}


/* 8.10.66 — direct favorite removal in My Favorites. */
.story-time-main #story-list-view .story-card{position:relative}
.story-time-main #story-list-view .story-favorite-remove{position:absolute;z-index:8;left:9px;top:9px;display:flex;align-items:center;gap:5px;min-height:31px;padding:0 10px;border:1px solid #efb7c1;border-radius:999px;background:rgba(255,244,246,.97);color:#a62f47;font:inherit;font-size:11px;font-weight:900;box-shadow:0 4px 12px rgba(31,36,56,.13);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.story-time-main #story-list-view .story-favorite-remove[hidden]{display:none!important}
.story-time-main #story-list-view .story-favorite-remove span:first-child{color:#c43e57;font-size:14px}
.story-time-main #story-list-view .story-card:has(.story-favorite-remove:not([hidden])) .story-favorite-marker{display:none!important}