/* Playground + gear presentation shells (retro / record-store) */

/* —— Record store bins —— */
.record-bins{
  padding:clamp(1rem,3vw,1.75rem);
  border-radius:22px;
  background:linear-gradient(180deg,#1a120c,#0c0a08);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 32px 80px rgba(0,0,0,.45);
}
.record-bins__years{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.25rem;
  max-height:140px;overflow-y:auto;padding-bottom:.25rem;
}
.record-bins__year{
  padding:.4rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);color:#f5ecd7;font-size:.78rem;font-weight:600;cursor:pointer;
  font-family:var(--as-font-mono,IBM Plex Mono,monospace);
}
.record-bins__year:hover{border-color:var(--as-accent)}
.record-bins__year.is-active{
  background:var(--as-accent);color:var(--as-bg);border-color:transparent;
}
.record-bins__bin-label{
  font-family:var(--as-font-display,Syne,system-ui,sans-serif);
  font-size:1.1rem;margin:0 0 .65rem;display:flex;justify-content:space-between;align-items:baseline;
}
.record-bins__bin-label span{opacity:.55;font-size:.82rem;font-weight:400}
.record-bins__bin{
  position:relative;padding:1rem .75rem 1.25rem;border-radius:14px;
  background:
    repeating-linear-gradient(90deg,#3d2817,#3d2817 4px,#352215 4px,#352215 5px),
    linear-gradient(180deg,#4a3222,#2a1810);
  box-shadow:inset 0 10px 28px rgba(0,0,0,.45);
  min-height:220px;
}
.record-bins__bin-inner{
  display:flex;flex-wrap:wrap;align-content:flex-end;gap:4px;
  min-height:190px;padding:.5rem;
  background:rgba(0,0,0,.2);border-radius:8px;
}
.record-bins__spine{
  width:42px;height:178px;flex:0 0 42px;padding:0;border:none;cursor:pointer;
  border-radius:2px 3px 3px 2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--spine-color,#555) 80%,#000),var(--spine-color,#555));
  box-shadow:2px 2px 6px rgba(0,0,0,.45);
  transition:transform .18s ease;
}
.record-bins__spine:hover{transform:translateY(-8px)}
.record-bins__spine.is-active{outline:2px solid var(--as-accent);outline-offset:2px;transform:translateY(-10px)}
.record-bins__spine-text{
  writing-mode:vertical-rl;text-orientation:mixed;
  display:flex;height:100%;justify-content:space-between;padding:.35rem .15rem;
  font-size:.58rem;line-height:1.1;color:rgba(255,255,255,.92);
  overflow:hidden;
}
.record-bins__detail{
  margin-top:1.25rem;padding:1.25rem;border-radius:16px;
  background:color-mix(in srgb,var(--as-bg) 75%,#000);
  border:1px solid rgba(255,255,255,.08);
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:center;
}
@container (max-width:640px){.record-bins__detail{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* —— Timeline deck —— */
.timeline-deck{
  padding:1.5rem;border-radius:20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--as-text) 8%,transparent),transparent);
  border:1px solid color-mix(in srgb,var(--as-text) 10%,transparent);
}
.timeline-deck__rail{
  position:relative;height:56px;margin:1.5rem 0 1rem;
  background:linear-gradient(180deg,#2a2a2a,#111);
  border-radius:12px;box-shadow:inset 0 4px 12px rgba(0,0,0,.5);
  touch-action:none;
}
.timeline-deck__fill{
  position:absolute;left:0;top:0;bottom:0;border-radius:12px 0 0 12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--as-accent) 40%,transparent),color-mix(in srgb,var(--as-accent) 15%,transparent));
  pointer-events:none;width:50%;
}
.timeline-deck__orb{
  position:absolute;top:50%;width:28px;height:28px;border-radius:50%;
  transform:translate(-50%,-50%);cursor:grab;
  background:radial-gradient(circle at 35% 30%,#fff,var(--as-accent) 45%,#333);
  box-shadow:0 0 20px color-mix(in srgb,var(--as-accent) 50%,transparent);
  border:2px solid rgba(255,255,255,.35);
}
.timeline-deck__orb:active{cursor:grabbing}
.timeline-deck__ticks{
  display:flex;justify-content:space-between;font-size:.72rem;opacity:.65;
  font-family:var(--as-font-mono,IBM Plex Mono,monospace);
}
.timeline-deck__now{
  font-family:var(--as-font-display,Syne,system-ui,sans-serif);
  font-size:1.15rem;margin:.75rem 0 0;
}
.timeline-deck__now span{opacity:.6;font-size:.85rem;margin-left:.5rem}

/* —— Night dial —— */
.dial-stage{
  min-height:420px;display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  padding:1.5rem;border-radius:20px;
  background:radial-gradient(circle at 50% 40%,#12121a,#030308);
  border:1px solid rgba(255,255,255,.06);
}
.dial-ring{
  position:relative;width:min(340px,88vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#0a0a0f 55%,#1a1a22 100%);
  border:3px solid color-mix(in srgb,var(--as-accent) 35%,transparent);
  box-shadow:0 0 60px color-mix(in srgb,var(--as-accent) 15%,transparent), inset 0 0 40px rgba(0,0,0,.8);
}
.dial-ring__hub{
  position:absolute;inset:38%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#444,#111);
  border:2px solid #333;display:grid;place-items:center;
  font-size:.65rem;text-align:center;padding:.5rem;color:var(--as-accent);
}
.dial-pick{
  position:absolute;width:2.25rem;height:2.25rem;border-radius:50%;padding:0;border:2px solid rgba(255,255,255,.2);
  background:var(--as-accent);color:var(--as-bg);font-size:.55rem;font-weight:700;cursor:pointer;
  transform:translate(-50%,-50%);box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.dial-pick.is-active{outline:2px solid #fff;outline-offset:2px;transform:translate(-50%,-50%) scale(1.12)}
.dial-readout{
  text-align:center;max-width:28rem;padding:1rem 1.25rem;border-radius:14px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
}

/* —— Gear spotlight —— */
.gear-spotlight{margin:2rem 0}
/* The whole instrument is always visible: the stage takes the image's own shape, only the corners are rounded. */
.gear-spotlight__stage{position:relative}
.gear-spotlight__slide{margin:0;display:flex;flex-direction:column;align-items:center}
.gear-spotlight__slide[hidden]{display:none}
.gear-spotlight__slide img{
  display:block;width:auto;height:auto;max-width:100%;max-height:min(72vh,760px);
  border-radius:18px;box-shadow:0 28px 70px rgba(0,0,0,.4);
}
.gear-spotlight__slide figcaption{padding:.8rem 1rem 0;text-align:center;font-size:1rem;max-width:60ch}
.gear-spotlight__nav{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 .75rem;pointer-events:none;
}
.gear-spotlight__nav button{
  pointer-events:auto;width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#fff;font-size:1.4rem;cursor:pointer;
}
.gear-spotlight__thumbs{
  display:flex;gap:.5rem;margin-top:.75rem;overflow-x:auto;padding:.25rem 0;
}
.gear-spotlight__thumb{
  flex:0 0 auto;width:104px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;opacity:.65;
}
.gear-spotlight__thumb.is-active,.gear-spotlight__thumb:hover{opacity:1;border-color:var(--as-accent)}
.gear-spotlight__thumb img{width:100%;height:100%;object-fit:cover}

/* —— Gear editorial grid —— */
.gear-editorial{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.85rem;margin:2rem 0;
}
.gear-editorial__cell{
  grid-column:span 4;position:relative;padding:0;border:none;cursor:pointer;
  border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#111;
  transition:transform .2s, box-shadow .2s;
}
.gear-editorial__cell:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.gear-editorial__cell:nth-child(1){grid-column:span 8;grid-row:span 2;aspect-ratio:auto;min-height:280px}
.gear-editorial__cell:nth-child(4){grid-column:span 6}
.gear-editorial__cell:nth-child(5){grid-column:span 6}
.gear-editorial__cell img{width:100%;height:100%;object-fit:cover;display:block}
.gear-editorial__label{
  position:absolute;left:0;right:0;bottom:0;padding:.5rem .65rem;
  font-size:.75rem;font-weight:600;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
}

@container (max-width:720px){
  .gear-editorial__cell,.gear-editorial__cell:nth-child(1),.gear-editorial__cell:nth-child(4),.gear-editorial__cell:nth-child(5){
    grid-column:span 12;grid-row:span 1;aspect-ratio:4/3;min-height:0;
  }
}

/* Uniform spines in vinyl-store shelf too */
.vinyl-store .vinyl-spine{width:42px;height:178px;flex:0 0 42px}
.vinyl-store .vinyl-spine.cassette{width:56px;height:140px;flex:0 0 56px}