/* ---------- lanes: shared frame, song rows and Explore's three doors ---------- */
/* a lane fills the screen between the header and the player */
.lane{position:relative;display:flex;flex-direction:column;height:calc(100vh - var(--hdr, 56px) - var(--bar) - var(--tabs) - env(safe-area-inset-bottom));height:calc(100dvh - var(--hdr, 56px) - var(--bar) - var(--tabs) - env(safe-area-inset-bottom));min-height:420px;overflow:hidden}
body:has(.lane){padding-bottom:calc(var(--bar) + var(--tabs) + env(safe-area-inset-bottom))}
.lanetop{flex:none;display:flex;gap:20px;align-items:baseline;padding:12px var(--pad) 10px;font-size:14px;border-bottom:1px solid var(--rule)}
.lanetop a{color:var(--mute)}
.lanetop a.on{color:#fff}
.lanetop a.back{margin-right:auto;color:var(--mute)}
.lanetop a.back::before{content:"‹ "}
.lanetop a:hover{color:#fff;text-decoration:none}

/* a song as a row: number, sleeve, title and act, length, heart; the line under it is the app's progress */
.lsong{position:relative;display:grid;grid-template-columns:22px 40px minmax(0,1fr) auto 32px;gap:12px;align-items:center;min-height:52px;padding:6px 0;border-bottom:1px solid var(--rule);cursor:pointer;color:var(--mute)}
.lsong .n{font-size:13px;font-variant-numeric:tabular-nums;text-align:right}
.lsong img{width:40px;height:40px;object-fit:cover;background:#111;opacity:.7}
.lsong .tx{min-width:0}
.lsong .tx b,.lsong .tx small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsong .tx b{font-weight:500;color:#cfcfcf}
.lsong .tx small{font-size:13px}
.lsong .len{font-size:13px;font-variant-numeric:tabular-nums}
.lsong .keep{width:32px;height:32px;color:var(--dim);font-size:15px;display:flex;align-items:center;justify-content:center}
.lsong .keep[aria-pressed=true]{color:#fff}
.lsong .prog{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.lsong.playing{color:#fff}
.lsong.playing img{opacity:1}
.lsong.playing .tx b{color:#fff}
.lsong.playing .prog{transform:scaleX(var(--p, 0))}
@media (hover:hover){.lsong:hover{color:#fff;text-decoration:none}.lsong:hover .tx b{color:#fff}.lsong:hover img{opacity:1}.lsong .keep:hover{color:#fff}}

/* Explore's three doors: three tall lanes side by side */
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:'flip pad kin';gap:12px;margin:8px 0 6px}
.lcard{--glow:255 255 255;position:relative;display:flex;flex-direction:column;background:#0a0a0a;color:#fff;min-width:0;transition:background .35s,box-shadow .45s}
.lcard:hover{text-decoration:none}
/* Resting, each door's picture sits a little dimmed. Pointed at (or, on a
   phone, scrolled to), it lights in the colour of its own picture and moves
   the way its lane does: Flip's record comes toward you, Pad's trail lights
   up, Kin's web draws its lines. */
.lcard .lpic > *{filter:brightness(.78) saturate(.85);transition:filter .4s,transform .55s cubic-bezier(.2,.8,.2,1)}
.lcard b,.lcard span{transition:color .3s}
.lcard:is(:hover,:focus-visible,.lit){z-index:1;background:rgb(var(--glow) / .1);box-shadow:0 0 0 1px rgb(var(--glow) / .6),0 30px 90px -26px rgb(var(--glow) / .6)} /* slop-ok: Sean asked for the doors to glow on hover; the light is the colour of each door's own album art */
.lcard:is(:hover,:focus-visible,.lit) .lpic > *{filter:none}
.lcard:is(:hover,:focus-visible,.lit) span{color:#cfcfcf}
.lcard.k-flip .lpic canvas{transform-origin:50% 100%}
.lcard.k-flip:is(:hover,:focus-visible,.lit) .lpic canvas{transform:scale(1.035)}
.lcard.k-pad:is(:hover,:focus-visible,.lit) .lpic canvas{filter:brightness(1.3) contrast(1.08)}
@media (prefers-reduced-motion:reduce){.lcard .lpic > *{transition:filter .4s}.lcard.k-flip:is(:hover,:focus-visible,.lit) .lpic canvas{transform:none}}
.lcard .lpic{overflow:hidden;position:relative;background:#050505;aspect-ratio:4/5}
.lcard b{font-size:26px;font-weight:600;letter-spacing:-.025em;padding:16px 20px 2px}
.lcard span{color:var(--mute);font-size:14px;padding:0 20px 18px}
.lcard.k-flip{grid-area:flip}
.lcard.k-pad{grid-area:pad}
.lcard.k-kin{grid-area:kin}
/* a phone: three doors of one size, one above the other, a little apart */
@media (max-width:700px){
  .lanes{grid-template-columns:1fr;grid-template-areas:'flip' 'pad' 'kin';gap:12px}
  .lcard,.lcard.k-kin{display:flex;flex-direction:column}
  .lcard .lpic,.lcard.k-pad .lpic,.lcard.k-flip .lpic,.lcard.k-kin .lpic{aspect-ratio:16/9;flex:none;min-height:0}
  .lcard b,.lcard.k-kin b{padding:14px 16px 2px;font-size:22px}
  .lcard span{padding:0 16px 16px}
}
}