/* =====================================================================
   DISCOGRAPHY — expandable album cards.

   Loaded after music.css and only on the music page. The album card was a
   link straight to Spotify; it is now a disclosure that opens a track list
   with a player, so the rules here replace the .album block in music.css
   rather than sitting beside it.
   ===================================================================== */

.disco-note{color:var(--muted);font-size:.92rem;margin:-1.2rem 0 1.6rem;max-width:62ch}
.disco-foot{color:var(--muted);font-size:.82rem;margin-top:1.6rem;max-width:74ch;line-height:1.6}

/* Cards size to their own content, so opening one does not stretch its row. */
.disco-grid{align-items:start}

.album{display:block;position:relative;border-radius:14px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  transition:border-color .25s,box-shadow .25s}
.album:hover{transform:none;border-color:var(--blue)}
.album.is-open,
.album:has(.album-head[aria-expanded="true"]){border-color:var(--blue);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.8)}

/* ---- The head is a real button, so it is focusable and announces state -- */
.album-h{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.album-head{display:block;width:100%;padding:0;text-align:left;background:none;
  border:0;cursor:pointer;color:inherit;font:inherit}
.album-head:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.album .art{position:relative;display:block}
.album img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.album .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:rgba(7,12,24,.55);transition:opacity .25s}
.album-head:hover .play,.album-head:focus-visible .play{opacity:1}
.album .play span{width:54px;height:54px;border-radius:50%;background:var(--blue);color:#06101e;
  display:grid;place-items:center;font-size:1.3rem;padding-left:3px;transition:transform .25s}
.album-head[aria-expanded="true"] .play{opacity:1;background:rgba(7,12,24,.34)}
.album-head[aria-expanded="true"] .play span{transform:rotate(90deg) scale(.86)}

.album .meta{display:block;padding:.7rem .85rem .9rem}
.album .an{display:block;font-size:.92rem;font-weight:700;line-height:1.25;color:var(--ink,#eef3ff)}
.album .ad{display:block;font-size:.74rem;color:var(--muted);margin-top:.15rem}

/* ---- The panel ------------------------------------------------------- */
.album-panel{padding:0 .85rem 1rem;border-top:1px solid var(--line)}
.album-panel[hidden]{display:none}
.album-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding:.9rem 0 .2rem}
.btn-play,.btn-spotify{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-size:.78rem;font-weight:700;padding:.62em 1em;border-radius:10px;
  white-space:nowrap;cursor:pointer;transition:.18s;border:1px solid transparent}
.btn-play{background:var(--blue);color:#06101e}
.btn-play:hover{filter:brightness(1.08)}
.btn-play[disabled]{opacity:.55;cursor:default}
.btn-spotify{border-color:var(--line);color:var(--muted);text-decoration:none}
.btn-spotify:hover{border-color:var(--blue);color:var(--blue)}

.album-len{font-size:.72rem;color:var(--muted);margin:.7rem 0 .2rem}

.album-player{margin-top:.8rem;border-radius:12px;overflow:hidden;background:#0a1220}
.album-player[hidden]{display:none}
.album-player iframe{display:block;width:100%;height:352px;border:0}

/* ---- Track list ------------------------------------------------------ */
.tracks{list-style:none;margin:.5rem 0 0;padding:0;max-height:19rem;overflow-y:auto;overscroll-behavior:contain}
.tracks li+li{border-top:1px solid rgba(255,255,255,.05)}
.tracks a{display:grid;grid-template-columns:1.6rem 1fr auto;align-items:center;gap:.55rem;
  padding:.45em .3em;border-radius:7px;text-decoration:none;color:inherit;transition:background .15s,color .15s}
.tracks a:hover{background:rgba(255,255,255,.05);color:var(--blue)}
.tracks a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tracks .tn{font-size:.7rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.tracks .tt{font-size:.8rem;line-height:1.35;min-width:0}
.tracks .td{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* An open card has to be wide enough to read a track list in. Half of a
   four-across grid is comfortable; below that the card takes the full row,
   because a third or a half of a phone screen is not.
   The class and the :has() selector say the same thing — the class is set by
   the script, the selector covers the moment before it runs. */
@media (min-width:901px){
  .album.is-open,
  .album:has(.album-head[aria-expanded="true"]){grid-column:span 2}
}
@media (max-width:900px){
  .album.is-open,
  .album:has(.album-head[aria-expanded="true"]){grid-column:1 / -1}
  /* Full width means the cover no longer needs to dominate the card. */
  .album.is-open .album-head,
  .album:has(.album-head[aria-expanded="true"]) .album-head{display:grid;
    grid-template-columns:96px 1fr;align-items:center;gap:.9rem}
  .album.is-open .meta,
  .album:has(.album-head[aria-expanded="true"]) .meta{padding:.6rem .9rem .6rem 0}
}
@media (max-width:560px){
  .album-actions{flex-direction:column}
  .btn-play,.btn-spotify{width:100%}
  .tracks{max-height:none}
}