/* Illustrated shelves at the end of Library Home. Size to the center pane,
   which may be phone-width even on a wide display with both sidebars open. */
[data-music-discovery-browse]:not([hidden]){display:grid;gap:clamp(24px,4vw,40px);min-width:0}
.discovery-shelf{min-width:0;container-type:inline-size}
.discovery-shelf h2{margin:0 0 12px;color:#f5f6fa;font:inherit;font-size:clamp(1.28rem,2vw,1.55rem);font-weight:750;line-height:1.2;letter-spacing:-.025em}
.discovery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));grid-auto-flow:row dense;gap:14px;align-items:stretch}
.discovery-grid [data-tone]{--deep:#245065;--mid:#387d8b;--light:#98ded9}
.discovery-grid [data-tone="jade"]{--deep:#205a55;--mid:#379080;--light:#b8edc8}
.discovery-grid [data-tone="cobalt"]{--deep:#29477f;--mid:#5276b6;--light:#b4d6ff}
.discovery-grid [data-tone="dusk"]{--deep:#4b3b72;--mid:#8064a5;--light:#efc5e8}
.discovery-grid [data-tone="ember"]{--deep:#862e48;--mid:#b64b5b;--light:#ffb493}
.discovery-grid [data-tone="apricot"]{--deep:#824329;--mid:#ae6841;--light:#ffd9a8}
.discovery-grid [data-tone="orchid"]{--deep:#663d80;--mid:#995d9f;--light:#f0bae9}
.discovery-tile{
  position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  box-sizing:border-box;width:100%;min-width:0;min-height:126px;gap:30px;overflow:hidden;
  margin:0;padding:16px 18px;border:1px solid #ffffff32;border-radius:20px;appearance:none;
  background:radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--light) 66%,transparent),transparent 61%),linear-gradient(122deg,var(--deep),var(--mid) 72%,var(--light) 145%);
  color:white;font:inherit;text-align:left;cursor:pointer;box-shadow:0 8px 22px #0003;
}
.discovery-tile[aria-expanded="true"]{border-color:var(--light);box-shadow:inset 0 0 0 1px var(--light)}
.discovery-title,.discovery-count{position:relative;z-index:1;overflow-wrap:anywhere;text-shadow:0 1px 5px #0004}
.discovery-title{max-width:74%;font-size:clamp(1.22rem,6.2cqw,1.45rem);line-height:1.12;font-weight:750;letter-spacing:-.025em}
.discovery-count{font-size:.81rem;line-height:1.3;font-weight:650}
.discovery-art{position:absolute;z-index:0;right:2%;bottom:2%;width:47%;height:79%;color:#fff;opacity:.76;pointer-events:none}
.discovery-art svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.discovery-art img,.discovery-custom-icon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}
.discovery-art img{opacity:0}.discovery-art img.is-ready{opacity:1}
.discovery-art:has(img.is-ready) svg,.discovery-art:has(img.is-ready) .discovery-custom-icon{visibility:hidden}
.discovery-custom-icon{display:grid;place-content:center;font-size:2.4rem;line-height:1}
.discovery-chevron,.discovery-close{display:grid;place-items:center;border-radius:50%;color:#fff}
.discovery-chevron{position:absolute;right:12px;top:10px;width:23px;height:23px;background:#10162630}
.discovery-chevron::after,.discovery-close::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-1.5px) rotate(45deg)}
.discovery-tile[aria-expanded="true"] .discovery-chevron::after,.discovery-close::after{transform:translateY(1.5px) rotate(225deg)}
.discovery-panel:not([hidden]){grid-column:1/-1;display:block;min-width:0;border:1px solid #ffffff25;border-radius:20px;overflow:hidden;color:#f5f6fb;background:#13141d}
.discovery-panel[hidden]{display:none}
.discovery-panel-head{position:relative;padding:17px 60px 15px 18px;background:linear-gradient(112deg,color-mix(in srgb,var(--deep) 59%,#161722),#171822 88%)}
.discovery-kicker{display:block;color:var(--light);font-size:.64rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
.discovery-panel h3{margin:5px 0 0;color:#fff;font-size:1.18rem;font-weight:720;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.discovery-panel-head p{margin:6px 0 0;color:#d4d8e3;font-size:.82rem;line-height:1.4;overflow-wrap:anywhere}
.discovery-close{position:absolute;right:7px;top:7px;width:44px;height:44px;margin:0;border:0;background:transparent;color:var(--light);cursor:pointer}
.discovery-close::before{content:"";position:absolute;inset:8px;border:1px solid #ffffff38;border-radius:50%}
.discovery-tracks{display:block;list-style:none;margin:0;padding:0 6px}
.discovery-track{display:block;margin:0;padding:0}
.discovery-track+.discovery-track{border-top:1px solid #ffffff13}
.discovery-track-play{appearance:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:58px;margin:0;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.discovery-number,.discovery-duration{color:#b3bacb;font-size:.76rem;font-variant-numeric:tabular-nums}
.discovery-number{min-width:2ch;text-align:right}
.discovery-track-copy{display:grid;min-width:0;gap:3px;overflow-wrap:anywhere;line-height:1.25}
.discovery-track-copy strong{font-size:.94rem;font-weight:660}
.discovery-artist,.discovery-credit,.discovery-track-status{font-size:.77rem;font-weight:450}
.discovery-artist{color:#c4c8d3}.discovery-credit{color:var(--light)}
.discovery-track-tail{display:flex;align-items:center;gap:12px}
.discovery-play-icon{display:grid;place-items:center;width:29px;height:29px;border:1px solid #ffffff23;border-radius:50%;background:#ffffff09;color:var(--light)}
.discovery-play-icon::after{content:"";width:0;height:0;margin-left:2px;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent currentColor}
.discovery-track-status:not(:empty){display:block;margin:-3px 12px 10px 40px;color:var(--light)}
.discovery-track-play[aria-disabled="true"]{opacity:.65;cursor:progress}
.discovery-more{min-height:44px;margin:5px 14px 12px;padding:6px 12px;border:1px solid #ffffff30;border-radius:10px;color:var(--light);background:#ffffff08;font:inherit;cursor:pointer}
.discovery-grid button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media(hover:hover){
  .discovery-tile:hover{border-color:#ffffffad}.discovery-tile:hover .discovery-art{opacity:.92}
  .discovery-track-play:hover,.discovery-close:hover,.discovery-more:hover{background:#ffffff0e}
}
@container(max-width:380px){
  .discovery-grid{gap:12px}
  .discovery-track-play{gap:9px;padding-inline:8px}
  .discovery-track-tail{gap:7px}
}
@container(max-width:270px){.discovery-duration{display:none}.discovery-art{width:39%}.discovery-title{max-width:80%}}
@media(forced-colors:active){.discovery-tile,.discovery-panel,.discovery-play-icon{border:1px solid ButtonText}.discovery-tile[aria-expanded=true]{outline:2px solid Highlight}}