/*
 * The iPod page (ipod.html): a fifth-generation iPod, drawn to scale.
 *
 * --u is one pixel of its 320×240 LCD. The screen UI is written in the
 * device's own pixels and the body is sized from the same unit (the real thing
 * is 61.8 × 103.5mm around a 50.8mm-wide screen, which makes it 390 × 653), so
 * the whole player scales as one object to whatever room the page has.
 *
 * The body follows the site theme — white in light, black in dark, the two
 * colours it shipped in. The LCD does not: a lit screen looks the same in
 * either hand.
 */
:root,
:root[data-theme="light"] {
  --ipod-body: linear-gradient(100deg, #f1f1f3 0%, #ffffff 18%, #fbfbfc 60%, #ececef 100%);
  --ipod-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 0 2px rgba(0, 0, 0, 0.08);
  --ipod-edge: 0 1px 0 #b9bcc2;
  --ipod-shadow: rgba(30, 40, 60, 0.2);
  --ipod-bezel: #1b1c1f;
  --ipod-bezel-ring: #6d7078;
  --ipod-wheel: radial-gradient(circle at 50% 40%, #f7f7f9 0%, #e7e8eb 70%, #dcdde1 100%);
  --ipod-label: #b3b6bd;
  --ipod-line: rgba(0, 0, 0, 0.11);
  --ipod-gloss: rgba(255, 255, 255, 0.9);
  --ipod-button: linear-gradient(120deg, #f3f3f5, #ffffff 45%, #f0f0f2);
  --ipod-button-down: #ececef;
}

:root[data-theme="dark"] {
  --ipod-body: linear-gradient(100deg, #101012 0%, #232326 18%, #17171a 60%, #0b0b0d 100%);
  --ipod-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 2px rgba(0, 0, 0, 0.6);
  --ipod-edge: 0 1px 0 #2c2c30;
  --ipod-shadow: rgba(255, 255, 255, 0.05);
  --ipod-bezel: #050506;
  --ipod-bezel-ring: #3a3a3f;
  --ipod-wheel: radial-gradient(circle at 50% 40%, #3b3b40 0%, #2f2f33 70%, #29292d 100%);
  --ipod-label: #a9acb3;
  --ipod-line: rgba(255, 255, 255, 0.1);
  --ipod-gloss: rgba(255, 255, 255, 0.07);
  --ipod-button: linear-gradient(120deg, #141416, #242427 45%, #121214);
  --ipod-button-down: #0c0c0e;
}

/* Exactly one viewport tall, like the home page, with the player centred in
   what is left under the header. */
body[data-page="ipod"] .page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 88px 24px 40px;
  display: grid;
  place-items: center;
  --u: min(calc((100vh - 152px) / 653), calc((100vw - 48px) / 390));
}

@supports (height: 100dvh) {
  body[data-page="ipod"] .page { --u: min(calc((100dvh - 152px) / 653), calc((100vw - 48px) / 390)); }
}

/* The device carries its own type and palette. */
.device {
  --lcd: #ffffff;
  --ink: #000000;
  --ink-soft: #4a4f57;
  --bar-top: #fbfcfd; --bar-mid: #d5d9df; --bar-low: #b4bac3; --bar-end: #c6ccd4; --bar-edge: #6f7680;
  --sel-top: #6fb4f7; --sel-mid: #3f8ae8; --sel-end: #1c5fd0;
  --battery: #3fbf3a;
  color: var(--ink);
  font-family: "Myriad Pro", "Myriad", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: calc(15 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.device *, .device *::before, .device *::after { box-sizing: border-box; margin: 0; padding: 0; }
.device button { font: inherit; color: inherit; background: none; border: 0; cursor: inherit; text-align: inherit; }
/* The site underlines external links; a menu row is not prose. */
.device a[target="_blank"] { text-decoration: none; opacity: 1; }

/* ---- the body ---- */
.device{
  position:relative; width:calc(390 * var(--u)); height:calc(653 * var(--u)); border-radius:calc(36 * var(--u));
  background:var(--ipod-body);
  box-shadow:var(--ipod-rim), var(--ipod-edge), 0 calc(30 * var(--u)) calc(60 * var(--u)) var(--ipod-shadow), 0 calc(8 * var(--u)) calc(16 * var(--u)) var(--ipod-shadow);
  transition:background .35s ease, box-shadow .35s ease;
}
.device .screen{
  position:absolute; left:calc(35 * var(--u)); top:calc(34 * var(--u)); width:calc(320 * var(--u)); height:calc(240 * var(--u)); overflow:hidden;
  background:var(--lcd); border-radius:calc(3 * var(--u));
  box-shadow:0 0 0 calc(4 * var(--u)) var(--ipod-bezel), 0 0 0 calc(5 * var(--u)) var(--ipod-bezel-ring);
}
.device .ipod{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--lcd)}

/* ---- the click wheel ---- */
.device .wheel{
  position:absolute; left:50%; top:calc(454 * var(--u)); width:calc(238 * var(--u)); height:calc(238 * var(--u)); margin:calc(-119 * var(--u)) 0 0 calc(-119 * var(--u));
  border-radius:50%; touch-action:none; cursor:grab;
  background:var(--ipod-wheel);
  box-shadow:inset 0 0 0 calc(1 * var(--u)) var(--ipod-line), inset 0 calc(2 * var(--u)) calc(3 * var(--u)) var(--ipod-gloss);
  color:var(--ipod-label);
  transition:background .35s ease, color .35s ease;
}
.device .wheel:active{cursor:grabbing}
.device .wl{position:absolute; pointer-events:none; fill:currentColor}
.device .wl-menu{left:0; right:0; top:calc(17 * var(--u)); text-align:center; font-size:calc(14 * var(--u)); letter-spacing:.04em}
.device .wl-prev{left:calc(17 * var(--u)); top:50%; width:calc(22 * var(--u)); height:calc(12 * var(--u)); margin-top:calc(-6 * var(--u))}
.device .wl-next{right:calc(17 * var(--u)); top:50%; width:calc(22 * var(--u)); height:calc(12 * var(--u)); margin-top:calc(-6 * var(--u))}
.device .wl-play{left:50%; bottom:calc(17 * var(--u)); width:calc(22 * var(--u)); height:calc(12 * var(--u)); margin-left:calc(-11 * var(--u))}
.device .wheel-center{
  position:absolute; left:50%; top:50%; width:calc(88 * var(--u)); height:calc(88 * var(--u)); margin:calc(-44 * var(--u)) 0 0 calc(-44 * var(--u)); border-radius:50%; cursor:pointer;
  background:var(--ipod-button);
  box-shadow:inset 0 0 0 calc(1 * var(--u)) var(--ipod-line), 0 calc(1 * var(--u)) calc(1 * var(--u)) var(--ipod-gloss);
  transition:background .35s ease;
}
.device .wheel-center:active{background:var(--ipod-button-down)}

/* ---- status bar ---- */
.device .bar{
  flex:none; height:calc(22 * var(--u)); position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(var(--bar-top) 0%, var(--bar-mid) 48%, var(--bar-low) 52%, var(--bar-end) 100%);
  border-bottom:calc(1 * var(--u)) solid var(--bar-edge);
}
.device .bar-title{font-size:calc(14 * var(--u)); max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3}
.device .bar-play{position:absolute; left:calc(7 * var(--u)); top:50%; width:calc(11 * var(--u)); height:calc(11 * var(--u)); transform:translateY(-50%); fill:var(--sel-end)}
.device .bar-battery{
  position:absolute; right:calc(9 * var(--u)); top:50%; transform:translateY(-50%);
  width:calc(23 * var(--u)); height:calc(11 * var(--u)); border:calc(1 * var(--u)) solid var(--bar-edge); border-radius:calc(1.5 * var(--u)); padding:calc(1 * var(--u));
  background:linear-gradient(#fff,#e3e6ea);
}
.device .bar-battery::after{content:"";position:absolute;right:calc(-3 * var(--u));top:calc(2.5 * var(--u));width:calc(2 * var(--u));height:calc(4 * var(--u));background:var(--bar-edge);border-radius:0 calc(1 * var(--u)) calc(1 * var(--u)) 0}
.device .bar-battery i{display:block;height:100%;width:86%;border-radius:calc(.5 * var(--u));background:linear-gradient(#8fe58a,var(--battery) 55%,#2a9a26)}

/* ---- sliding screens ---- */
.device .stage{flex:1; position:relative; overflow:hidden}
.device .view{
  position:absolute; inset:0; background:var(--lcd); overflow-y:auto; scrollbar-width:none;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.3,.1,.3,1); visibility:hidden;
}
.device .view.is-current{transform:none; visibility:visible}
.device .view.is-behind{transform:translateX(-100%); visibility:hidden; transition:transform .26s cubic-bezier(.3,.1,.3,1), visibility 0s .26s}
.device .view.is-ahead{transition:transform .26s cubic-bezier(.3,.1,.3,1), visibility 0s .26s}

/* ---- menu rows ---- */
.device .row{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  height:calc(22 * var(--u)); padding:0 calc(8 * var(--u)) 0 calc(9 * var(--u)); outline:0; white-space:nowrap;
}
.device .row svg{flex:none; width:calc(7 * var(--u)); height:calc(11 * var(--u)); fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0}
.device .row[data-more] svg{opacity:1}
.device .row.is-selected{
  color:var(--lcd);
  background:linear-gradient(var(--sel-top) 0%, var(--sel-mid) 50%, var(--sel-end) 100%);
  text-shadow:0 calc(-.6 * var(--u)) 0 rgba(0,40,120,.45);
}
.device .row .label{min-width:0; overflow:hidden; text-overflow:ellipsis; line-height:1.3}
.device .note{height:calc(22 * var(--u)); padding:0 calc(9 * var(--u)); display:flex; align-items:center; font-weight:600; color:var(--ink-soft)}

/* ---- now playing ---- */
.device .np{height:100%; display:flex; flex-direction:column; padding:calc(6 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u))}
.device .view::-webkit-scrollbar{display:none}
.device .np-count{font-size:calc(11 * var(--u)); font-weight:600; color:var(--ink-soft)}
.device .np-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Clipping for the ellipsis also clips descenders at the device's line-height of
   1, so these lines get room for them; the gap below gives the space back. */
.device .np-title,.device .np-artist,.device .np-album{overflow:hidden; text-overflow:ellipsis; line-height:1.3}
.device .np-body{flex:1; display:flex; align-items:center; gap:calc(14 * var(--u)); min-height:0}
.device .np-art{
  flex:none; width:calc(96 * var(--u)); height:calc(96 * var(--u)); border:calc(1 * var(--u)) solid var(--bar-edge); position:relative; overflow:hidden;
  background:var(--bar-mid);
  box-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.25);
}
.device .np-art::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 45%)}
.device .np-meta{min-width:0; display:flex; flex-direction:column; gap:calc(3 * var(--u))}
.device .np-title{font-size:calc(17 * var(--u)); white-space:nowrap}
.device .np-artist,.device .np-album{font-size:calc(13 * var(--u)); font-weight:600; color:var(--ink-soft); white-space:nowrap}
.device .np-scrub{
  height:calc(11 * var(--u)); border:calc(1 * var(--u)) solid var(--bar-edge); border-radius:calc(6 * var(--u)); overflow:hidden; position:relative;
  background:linear-gradient(#d9dde2,#ffffff);
}
.device .np-fill{position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(var(--sel-top),var(--sel-mid) 50%,var(--sel-end))}
.device .np-times{display:flex; justify-content:space-between; margin-top:calc(4 * var(--u)); font-size:calc(11 * var(--u)); font-weight:600; font-variant-numeric:tabular-nums}

/* ---- the LCD itself: the backlight falling off at the edges, under the lip of the bezel ---- */
.device .lcd{position:absolute; inset:0; pointer-events:none; z-index:10;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0) 55%, rgba(40,60,90,.14) 100%);
  box-shadow:inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.25);
}

@media (prefers-reduced-motion: reduce) { .device .view, .device .view.is-behind, .device .view.is-ahead { transition: none; } }