
/* Favorite Things extends the existing lazy, single-player music cards. */
.rail #favorite-things.interest{background:linear-gradient(135deg,#f3f1f9,#f9f5ed);border-color:#d8d2e4}
.rail .essay-map a[href="#favorite-things"],.hybrid-contents a[href="#favorite-things"]{background:#eee9f6;color:#625078}
#favorite-things>h3{margin-bottom:14px}
#favorite-things .favorites-probably{white-space:nowrap;color:#756885}
#favorite-things .favorites-intro{margin:0 0 8px;font:400 18px/1.6 Barlow,sans-serif;color:#4f5266;max-width:65ch}
#favorite-things .favorites-help{margin:0;font:400 14px/1.5 Barlow,sans-serif;color:#646478}
#favorite-things .favorites-jumps{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 30px}
#favorite-things .favorites-jumps a{display:inline-flex;align-items:center;min-height:44px;padding:9px 13px;border:1px solid #d3ccdf;border-radius:24px;background:#fff9;color:#594969;font:600 14px/1.4 Barlow,sans-serif;text-decoration:none}
#favorite-things .favorites-jumps a:hover{background:#e8e2f1}
#favorite-things .favorites-group{margin:32px 0 0;scroll-margin-top:calc(var(--header-height,128px) + var(--reader-height,65px) + 20px)!important}
#favorite-things .favorites-group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid hsl(var(--favorite-h) 25% 80%)}
#favorite-things .favorites-group-heading h4{margin:0;font:600 29px/1.15 "Barlow Condensed",sans-serif;color:hsl(var(--favorite-h) 25% 32%)}
#favorite-things .favorites-group-heading>span{flex:none;font:500 13px/1.4 Barlow,sans-serif;color:#737080}
#favorite-things .favorite-grid{margin-top:14px;gap:14px;align-items:start}
#favorite-things .favorite-card{--song-h:var(--favorite-h);box-shadow:0 3px 10px #34304408}
#favorite-things .favorite-card>summary{height:auto;min-height:0;align-items:flex-start;gap:12px;padding:18px 16px}
#favorite-things .song-play{margin-top:3px;flex-basis:34px;width:34px;height:34px}
#favorite-things .song-play svg{width:15px;height:15px}
#favorite-things .song-copy{flex:1;min-width:0;gap:9px}
#favorite-things .favorite-kind{font:600 12px/1.4 Barlow,sans-serif;letter-spacing:.045em;text-transform:uppercase;color:hsl(var(--favorite-h) 22% 38%)}
#favorite-things .song-title{font:500 24px/1.2 "Barlow Condensed",sans-serif;color:#343342;overflow-wrap:anywhere}
#favorite-things .favorite-category{display:flex;flex-direction:column;gap:4px}
#favorite-things .favorite-aside{font:italic 400 14px/1.45 Barlow,sans-serif;color:#626171}
#favorite-things .song-open-label{align-self:center;color:#625e70}
#favorite-things .song-youtube-link{min-height:44px;color:#514463}
#favorite-things .favorite-card>summary:focus-visible{outline:3px solid #6b5a89;outline-offset:-4px;border-radius:16px}
@media(max-width:760px){
 #favorite-things .favorite-card>summary{min-height:0;padding:16px 13px;gap:10px}
 #favorite-things .song-play{flex-basis:30px;width:30px;height:30px}
 #favorite-things .song-open-label{display:none}
 #favorite-things .song-title{font-size:23px}
 #favorite-things .favorites-group-heading h4{font-size:27px}
 #favorite-things .favorites-jumps{margin-bottom:24px}
}

/* Tinted navigation follows each category palette. */
#favorite-things .favorites-jumps a[href="#favorites-cool"]{--pill-h:225}
#favorite-things .favorites-jumps a[href="#favorites-musicals"]{--pill-h:330}
#favorite-things .favorites-jumps a[href="#favorites-emotional"]{--pill-h:287}
#favorite-things .favorites-jumps a[href="#favorites-nerdy"]{--pill-h:163}
#favorite-things .favorites-jumps a[href="#favorites-serious"]{--pill-h:35}
#favorite-things .favorites-jumps a{background:hsl(var(--pill-h,265) 52% 90%);border-color:hsl(var(--pill-h,265) 34% 75%);color:hsl(var(--pill-h,265) 35% 29%);transition:background-color .15s ease,border-color .15s ease}
#favorite-things .favorites-jumps a:hover,#favorite-things .favorites-jumps a:focus-visible{background:hsl(var(--pill-h,265) 52% 85%);border-color:hsl(var(--pill-h,265) 38% 58%)}
#favorite-things .favorites-jumps a:focus-visible{outline:2px solid hsl(var(--pill-h,265) 35% 38%);outline-offset:3px}
