/* Groovy album-detail enhancements */

/* Logged-out landing owns the area below the main header. */
body.logged-out-home .library-overview{display:none!important}
.detail-social-context[hidden]{display:none!important}
.detail-artwork-source{display:none}
.detail-artwork-tidal-chip{display:inline-flex;align-items:center;padding:3px 5px;border-radius:2px;background:#000;line-height:0}
.detail-artwork-source img{position:static!important;width:auto!important;height:13px!important;max-width:none!important;border-radius:0!important;object-fit:contain!important;filter:brightness(0) invert(1);opacity:.88}
.detail-artwork-source:hover img{opacity:1}
.copy-summary-artwork{display:none}

@media screen and (min-width:1121px){
  .album-detail-cover{overflow:visible!important}
  .detail-artwork-source:not([hidden]){position:absolute;z-index:7;left:0;top:calc(100% + 6px);display:inline-flex;align-items:center;gap:6px;color:#68686f;font-size:8px;font-weight:650;line-height:13px;text-decoration:none;white-space:nowrap}
}

/* Match the vertical rhythm between My Pressing -> Tracklist and Tracklist -> Marketplace. */
.album-tracks .copy-details{margin-bottom:0!important}
.album-tracks .tracks-title{margin-top:14px!important}

/* COLLECTION MATCH belongs in the same social-context slot as Also collected by. */
@media screen and (min-width:1121px){
  .detail-social-context.own-match{grid-column:1/-1!important;grid-row:8!important;margin:8px 0 0!important}
}

@media screen and (min-width:761px){
  /* Desktop streaming spacing used to be injected by route-runtime.js. */
  .detail-streaming-row{margin-top:28px!important}
  .detail-streaming-row:after{content:""!important;position:absolute!important;left:4px!important;right:4px!important;top:-14px!important;height:1px!important;background:rgba(255,255,255,.09)!important;pointer-events:none!important}
  .detail-shelf-actions:not([hidden]) + .detail-streaming-row:after{top:-14px!important}
}

@media screen and (max-width:760px){
  .album-detail-cover{overflow:visible!important}
  .detail-artwork-source:not([hidden]){position:absolute;z-index:7;left:0;top:calc(100% + 6px);display:inline-flex;align-items:center;gap:5px;color:#68686f;font-size:7px;font-weight:650;line-height:13px;text-decoration:none;white-space:nowrap}

  /* app.js writes this card the exact same height as the square cover. Every
     visible row shares the available height; no auto-margin can create a large
     dead zone above the artist or below the shelf pill. A two-line title simply
     consumes more of the same space and the inter-row gaps contract naturally. */
  .detail-info-card{position:relative!important;box-sizing:border-box;min-height:0!important;align-self:stretch!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;padding:9px 10px!important;overflow:hidden!important}
  .detail-info-card:has(>.detail-library-remove-button:not([hidden])) .detail-shelf-status{max-width:calc(100% - 42px)!important}
  .detail-info-card .detail-artist{flex:0 0 auto;margin:0!important;font-size:15px!important;font-weight:500!important;line-height:1.08!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .detail-info-card .detail-album{display:-webkit-box!important;flex:0 0 auto;margin:0!important;padding:0!important;font-size:clamp(18px,5.35vw,22px)!important;font-weight:760!important;line-height:1.02!important;letter-spacing:-.35px!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden!important}

  /* Mobile always shows the primary genre only. app.js already stores that
     value in data-mobile-genre, while desktop keeps the full genre string. */
  .detail-info-card .detail-meta{display:flex!important;flex:0 0 auto;flex-wrap:nowrap!important;align-items:center!important;min-width:0;margin:0!important;gap:0!important;font-size:10px!important;line-height:1.15!important;white-space:nowrap;overflow:hidden}
  .detail-info-card .detail-meta>span{display:block!important;min-width:0;margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .detail-info-card .detail-meta #detailGenre{font-size:0!important;line-height:1.15!important;letter-spacing:0!important}
  .detail-info-card .detail-meta #detailGenre:after{content:attr(data-mobile-genre)!important;display:inline!important;font-size:10px!important;line-height:1.15!important}
  .detail-info-card .detail-meta>span+span{position:relative!important;margin-left:5px!important;padding-left:6px!important}
  .detail-info-card .detail-meta>span+span:before{content:''!important;position:absolute!important;left:0!important;top:50%!important;width:1px!important;height:13px!important;margin:0!important;background:rgba(255,255,255,.18)!important;transform:translateY(-50%)!important}

  .detail-shelf-status{flex:0 0 auto!important;align-self:flex-start!important;min-height:22px!important;max-height:24px!important;margin:0!important;padding:3px 8px!important;gap:4px!important;font-size:9px!important;line-height:1!important}
  .detail-shelf-status-icon{width:14px!important;height:14px!important;flex-basis:14px!important}
  .detail-shelf-status strong{max-width:min(27vw,100px)!important;font-size:9px!important;line-height:1!important}

  .detail-streaming-row{display:none!important}
  .groovy-mobile-streaming{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:39px;margin:0!important;padding:7px 0 0!important;border-top:1px solid rgba(255,255,255,.09);overflow:hidden}
  .groovy-mobile-streaming-link{display:flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:0;height:31px;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .groovy-mobile-streaming-link:active{transform:scale(.97)}
  .groovy-mobile-tidal{padding:0 12px;border:1px solid rgba(255,255,255,.18);border-radius:7px;background:#111113;color:#f4f4f5;font-size:10px;font-weight:800;letter-spacing:.03em;white-space:nowrap}
  .groovy-mobile-tidal:hover{border-color:rgba(255,255,255,.32);background:#171719}

  /* Rating is a full-width row below cover + album info. */
  /* Mobile collector labels hug avatar + username rather than stretching. */
  .detail-social-context:not(.own-match) .detail-social-people{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important}
  .detail-social-context:not(.own-match) .detail-social-people>.detail-social-person{width:auto!important;min-width:0!important;max-width:160px!important;flex:0 0 auto!important;padding:3px 9px 3px 4px!important}
  .detail-social-context:not(.own-match) .detail-social-people>.detail-social-person .detail-social-person-name{display:block!important;min-width:0!important;max-width:116px!important;flex:0 1 auto!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .detail-social-context:not(.own-match) .detail-social-more{width:30px!important;min-width:30px!important;flex:0 0 30px!important}

  .detail-shelf-actions{grid-row:3!important}
  .detail-social-context,.detail-social-context:not(.own-match),.detail-social-context.own-match{grid-row:4!important}
  .album-tracks{grid-row:5!important}
  .album-about{grid-row:6!important}
  .marketplace-panel{grid-row:7!important}

  .album-tracks .copy-details{margin-bottom:0!important}
  .album-tracks .tracks-title{margin-top:12px!important}
}

@media screen and (max-width:380px){
  .detail-info-card{padding:7px 8px!important}
  .detail-info-card .detail-artist{font-size:13px!important}
  .detail-info-card .detail-album{font-size:clamp(15px,4.8vw,18px)!important;line-height:1.02!important;letter-spacing:-.2px!important}
  .detail-info-card .detail-meta{font-size:9px!important}
  .detail-info-card .detail-meta #detailGenre{font-size:0!important}
  .detail-info-card .detail-meta #detailGenre:after{font-size:9px!important}
  .detail-info-card .detail-meta>span+span{margin-left:4px!important;padding-left:5px!important}
  .detail-info-card .detail-meta>span+span:before{height:11px!important}
  .detail-shelf-status{padding:2px 6px!important;min-height:20px!important;max-height:22px!important}
  .detail-shelf-status-icon{width:12px!important;height:12px!important;flex-basis:12px!important}
  .detail-shelf-status strong{font-size:8px!important;max-width:82px!important}
  .groovy-mobile-streaming{gap:7px;min-height:35px;padding-top:5px!important}
  .groovy-mobile-streaming-link{height:28px}

  .detail-social-context:not(.own-match) .detail-social-people>.detail-social-person{max-width:145px!important;padding-right:8px!important}
  .detail-social-context:not(.own-match) .detail-social-people>.detail-social-person .detail-social-person-name{max-width:104px!important}
}

/* Desktop album view: rebalance the cover/info columns and make My Pressing
   read like a clear, self-contained card without changing the mobile layout. */
@media screen and (min-width:1121px){
  .album-detail{grid-template-columns:minmax(285px,.86fr) minmax(280px,1.14fr) minmax(390px,1.2fr);column-gap:20px;row-gap:20px}
  .album-detail-main{padding:15px 8px 0}
  .detail-info-card{min-width:0}
  .album-detail-main .detail-info-card .detail-artist{margin:0 0 10px!important;color:#9a9aa1;font-size:13px!important;font-weight:760!important;line-height:1.2!important;letter-spacing:.18em!important;text-transform:uppercase!important}
  .album-detail-main .detail-info-card .detail-album{max-width:100%;font-size:clamp(40px,3.2vw,50px)!important;font-weight:780!important;line-height:1.02!important;letter-spacing:-1.25px!important}
  .detail-meta{gap:8px;margin-top:13px;font-size:14px;line-height:1.35}
  .detail-meta>span+span:before{margin-right:8px}
  .detail-discogs-credit{margin-top:7px}

  .copy-details{padding:0 14px 14px;border-color:rgba(255,255,255,.11);border-radius:12px;background:linear-gradient(150deg,#131416,#0f1012);box-shadow:none}
  .copy-details.expanded{border-color:rgba(255,255,255,.16);box-shadow:none}
  .copy-details-heading{position:relative;display:block;margin:0;transition:margin-bottom .4s cubic-bezier(.2,.8,.2,1)}
  .copy-details.expanded .copy-details-heading{margin-bottom:10px}
  .copy-details-toggle{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:52px auto;width:100%;gap:0 9px;padding:0}
  .copy-details-toggle:before{grid-column:1;grid-row:1;align-self:center;width:24px;height:24px;flex:none;border:2px solid #ff6418;border-radius:50%;background:radial-gradient(circle,#ff6418 0 2px,#111214 2.5px 6px,#ff6418 6.5px 7.5px,#111214 8px 100%);box-shadow:0 0 0 4px rgba(255,100,24,.08)}
  .copy-details-title{grid-column:2;grid-row:1;align-self:center;color:#f3f3f5;font-size:18px;font-weight:760;letter-spacing:-.02em}
  .copy-details:has(#identifyPressingButton) .copy-details-toggle:after{content:"✎  Edit";grid-column:3;grid-row:1;align-self:center;justify-self:end;display:inline-flex;min-height:34px;align-items:center;justify-content:center;padding:0 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#17181b;color:#d8d8dc;font-size:11px;font-weight:700;line-height:1;letter-spacing:0;box-shadow:inset 0 1px rgba(255,255,255,.025)}
  .copy-details.expanded:has(#identifyPressingButton) .copy-details-toggle:after{content:"Done"}
  .copy-details-saved{position:absolute;right:82px;top:17px;min-height:0;color:#85858c;font-size:9px;line-height:18px}
  .copy-details-saved:empty{display:none}
  .copy-details .copy-details-compact-summary{position:relative;grid-column:1/-1;grid-row:2;display:flex;min-width:0;min-height:72px;max-height:72px;align-items:center;gap:8px;margin:0;padding:12px 48px 12px 72px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:linear-gradient(145deg,#111214,#151619);overflow:hidden;color:#a9a9b0;font-size:12px;font-weight:500;line-height:1.35;text-overflow:clip;white-space:normal;transition:min-height .4s cubic-bezier(.2,.8,.2,1),max-height .4s cubic-bezier(.2,.8,.2,1),padding .4s cubic-bezier(.2,.8,.2,1),border-width .4s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
  .copy-details .copy-summary-artwork{position:absolute;left:8px;top:50%;display:block;width:54px;height:54px;margin:0;border:1px solid rgba(255,100,24,.28);border-radius:6px;background:#0c0d0f;box-shadow:inset 0 1px rgba(255,255,255,.04),0 5px 14px rgba(0,0,0,.25);overflow:hidden;transform:translateY(-50%)}
  .copy-details .copy-summary-artwork img{position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;border:0!important;border-radius:0!important;object-fit:cover!important;opacity:1!important;filter:none!important}
  .copy-details .copy-summary-artwork.is-empty{background:radial-gradient(circle at 50% 50%,#08090a 0 3px,#ff6418 3.5px 5px,#121315 5.5px 12px,#45464a 12.5px 13.5px,#111214 14px 22px,#08090a 22.5px 100%)}
  .copy-details .copy-summary-artwork.is-empty img{display:none!important}
  .copy-details .copy-summary-text{display:block;min-width:0;overflow:hidden;color:#b7b7be;font-size:13px;font-weight:520;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
  .copy-details .copy-summary-text:after{content:"Pressing details";display:block;margin-top:4px;color:#f1f1f3;font-size:12px;font-weight:720;line-height:1.2}
  .copy-details .copy-condition-chip{flex:0 0 auto;margin-left:3px}
  .copy-details:not(.expanded) .copy-details-chevron{position:absolute;right:18px;bottom:30px;width:8px;height:8px;margin:0;border-right:1.5px solid #9a9aa0;border-bottom:1.5px solid #9a9aa0;transform:rotate(-45deg);transition:border-color .15s ease,transform .15s ease}
  .copy-details:not(.expanded) .copy-details-toggle:hover .copy-details-chevron{border-color:#ff762e;transform:translateX(2px) rotate(-45deg)}
  .copy-details.expanded .copy-details-chevron{display:none}
  .copy-details.expanded .copy-details-compact-summary{display:flex;min-height:0;max-height:0;padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0;opacity:0}
  /* Animate intrinsic content height rather than a guessed max-height. */
  .copy-details-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
  .copy-details.expanded .copy-details-reveal{grid-template-rows:1fr}
  .copy-details .copy-details-reveal>.copy-details-content{min-height:0;max-height:none;padding:0 1px;transform:none;transition:opacity .25s ease,visibility 0s linear .4s}
  .copy-details.expanded .copy-details-reveal>.copy-details-content{transition:opacity .25s ease,visibility 0s}

  .copy-details:not(.expanded) .copy-details-toggle:hover .copy-details-compact-summary{border-color:rgba(255,100,24,.38);background:linear-gradient(145deg,#151519,#18181b)}
}

/* Desktop left-column balance: deliberately give the album description more
   vertical room and make the no-review state noticeably tighter. */
@media screen and (min-width:1121px){
  .album-about:not([hidden]){min-height:176px}
  .album-about:not([hidden]) .album-about-body:not(.expanded){max-height:106px!important}
  .album-reviews:has(.album-reviews-empty){padding-top:12px;padding-bottom:8px}
  .album-reviews:has(.album-reviews-empty) .album-reviews-heading{min-height:28px;margin-bottom:4px}
  .album-reviews .album-reviews-empty{min-height:44px!important;flex:0 0 auto;padding:7px 2px 4px!important}
}
@media screen and (min-width:1121px) and (prefers-reduced-motion:reduce){
  .copy-details-heading,.copy-details .copy-details-compact-summary,.copy-details-reveal,.copy-details .copy-details-reveal>.copy-details-content{transition:none}
}