/* ---------- Pad: play a mood with your finger ---------- */
/* the pad sets the grid: square, as tall as the lane allows; beside it a column of exactly its
   height, the cover on its top edge and the mood's songs on its bottom edge */
.lane-pad .pd-body{flex:1;min-height:0;container:pad / size;overflow-y:auto;overscroll-behavior:contain;padding:18px var(--pad) 16px;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.lane-pad .pd-grid{--gap:44px;--kh:50px;--s:min(calc(100cqh - var(--kh)), calc(100cqw - var(--gap) - 300px), 720px);display:grid;grid-template-columns:var(--s) minmax(0,400px);justify-content:center;column-gap:var(--gap);align-items:start}
.lane-pad .pd-deck{width:var(--s)}
.lane-pad .pd-pad{display:block;width:var(--s);height:var(--s);touch-action:none;cursor:crosshair;outline:0;background:#050505;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.lane-pad .pd-pad:focus-visible{outline:1px solid #fff;outline-offset:3px}
/* the moments: the pad's program keys, the pad's width */
.lane-pad .pd-keys{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:10px}
.lane-pad .pd-keys button{height:40px;padding:0;border:1px solid var(--rule);background:#080808;color:var(--mute);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane-pad .pd-keys button.on{color:#000;background:#fff;border-color:#fff}
.lane-pad .pd-keys button:disabled{color:var(--dim);cursor:default}
.lane-pad .pd-keys button:focus-visible{outline:1px solid #fff;outline-offset:2px}
@media (hover:hover){.lane-pad .pd-keys button:not(.on):not(:disabled):hover{color:#fff}}

/* what plays */
.lane-pad .pd-now{height:var(--s);display:flex;flex-direction:column;min-width:0}
.lane-pad .pd-head{--cv:clamp(96px, calc(var(--s) - 452px), 200px);flex:none;display:grid;grid-template-columns:var(--cv) minmax(0,1fr);column-gap:16px;align-items:end}
.lane-pad .pd-cover{width:var(--cv);height:var(--cv);object-fit:cover;background:#111;display:block}
.lane-pad .pd-info{min-width:0}
.lane-pad .pd-mood{display:block;padding:0;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.05;color:#fff;overflow-wrap:anywhere}
.lane-pad .pd-t{font-weight:500;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-pad .pd-a{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-pad .pd-list{margin-top:auto;padding-top:16px;min-height:0;display:flex;flex-direction:column}
.lane-pad .pd-lh{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--rule);color:var(--mute);font-size:13px}
.lane-pad .pd-lh a{color:var(--mute)}
.lane-pad .pd-lh a:hover{color:#fff}
.lane-pad .pd-rows{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
/* a song still being found on Deezer, or one it has no preview of */
.lane-pad .pd-ghost,.lane-pad .pd-ghost:hover{cursor:default;color:var(--mute)}
.lane-pad .pd-ghost img,.lane-pad .pd-ghost:hover img{opacity:.35}
.lane-pad .pd-ghost .tx b,.lane-pad .pd-ghost:hover .tx b{color:var(--mute)}
.lane-pad .pd-ghost.gone,.lane-pad .pd-ghost.gone .tx b{color:var(--dim)}
.lane-pad .pd-ghost.gone img{opacity:.2}

/* too narrow for the column beside it (a phone, a tablet): the pad takes the width and the
   songs follow under it, scrolling inside the lane */
@container pad (max-width: 763px){
  .lane-pad .pd-grid{--s:min(100cqw, 640px);grid-template-columns:var(--s)}
  .lane-pad .pd-now{height:auto;margin-top:20px}
  .lane-pad .pd-head{display:block}
  .lane-pad .pd-cover,.lane-pad .pd-t,.lane-pad .pd-a{display:none}
  .lane-pad .pd-list{margin-top:0;padding-top:4px}
  .lane-pad .pd-rows{overflow:visible}
}
@container pad (max-width: 500px){
  .lane-pad .pd-keys{gap:4px;margin-top:8px}
  .lane-pad .pd-keys button{height:38px;font-size:12px}
  .lane-pad .pd-mood{font-size:22px}
}
@media (max-width:700px){.lane-pad .pd-body{padding:12px var(--pad) 20px}}

/* the door: a still of the pad */
.lcard .lpadpic{position:absolute;inset:0;width:100%;height:100%;display:block}