/* jukebox.css — the jukebox dialect: black ground, every track in view, the
   song's colour only in its accents. Ktesibios mode adds a wash of the song's
   colour that breathes with the sound (--lvl); strobe is a separate opt-in. */
body.jukebox { background: var(--ground); color: #e8e6e1; font: 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; padding-bottom: 96px; }
body.jukebox header.bar { position: relative; z-index: 2; color: #bdbab3; }
body.jukebox .views a.on { color: #fff; }

.jb-hero { position: absolute; inset: 0 0 auto; height: min(62vh, 560px); z-index: 0;
  background: center / cover no-repeat; background-position: var(--hero-pos);
  -webkit-mask-image: linear-gradient(#000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
          mask-image: linear-gradient(#000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
  opacity: .7; filter: saturate(.9); }
.jb { position: relative; z-index: 1; padding: 0 clamp(16px, 3vw, 40px); }
.jb-head { padding: clamp(80px, 22vh, 220px) 0 8px; }
.jb-head h1 { margin: 0; font: 800 clamp(34px, 5.4vw, 64px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.jb-dek { margin: 8px 0 0; color: #c9c6bf; }
.jb-by { margin: 4px 0 0; font: 12px var(--mono); color: #8c8982; }
.jb-text { max-width: 64ch; color: #c9c6bf; }

.jb-sec h2 { margin: 44px 0 14px; font: 700 17px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.jb-sec h2 small { font: 12px var(--mono); color: #77746d; letter-spacing: 0; margin-left: 6px; }
.jb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.jb-track { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px;
  width: 100%; min-height: 62px; padding: 10px 12px; text-align: left; cursor: pointer;
  background: #121212; color: #f2f0eb; border: 1px solid #222; border-radius: 6px; font: inherit; }
.jb-track:hover { background: #181818; border-color: #333; }
.jb-track:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.jb-track .nm { font-weight: 600; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.jb-track .sub { grid-row: 2; font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c); opacity: .85; }
.jb-track .go { grid-column: 2; grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: var(--c); position: relative;
  box-shadow: 0 0 0 0 transparent; transition: box-shadow .3s; }
.jb-track .go::after { content: ""; position: absolute; left: 11px; top: 9px; border: 6px solid transparent; border-left: 10px solid #000; border-right: 0; }
.jb-track[aria-current] { border-color: var(--c); background: #161616; }
.jb-track[aria-current] .go { box-shadow: 0 0 0 4px rgb(0 0 0), 0 0 0 5px var(--c); }
body.playing .jb-track[aria-current] .go::after { left: 10px; top: 9px; width: 10px; height: 12px; border: 0; border-left: 3px solid #000; border-right: 3px solid #000; box-sizing: border-box; }
.jb-hidden { font: 10px var(--mono); font-style: normal; color: #000; background: #c9c6bf; padding: 0 4px; border-radius: 2px; }
.jb-empty, .jb-foot { color: #8c8982; font-size: 13px; }
.jb-foot { margin: 56px 0 24px; font: 12px var(--mono); }
.jb-foot a { color: #bdbab3; }

/* the bar: the playing song's colour is its only colour */
.jb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: rgb(8 8 8 / .94); backdrop-filter: blur(6px);
  border-top: 1px solid color-mix(in srgb, var(--song) 70%, transparent); box-shadow: 0 -8px 30px color-mix(in srgb, var(--song) 18%, transparent); }
.jb-bar-in { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px clamp(12px, 3vw, 40px); }
.jb-btn { background: none; border: 0; color: #e8e6e1; font-size: 15px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.jb-btn:hover { color: var(--song); }
.jb-play { background: var(--song); color: #000; font-size: 13px; }
.jb-btn:focus-visible, .jb-mode:focus-visible, .jb-seek:focus-visible { outline: 2px solid var(--song); outline-offset: 2px; }
.jb-what { display: flex; flex-direction: column; min-width: 140px; max-width: 30ch; }
.jb-what .lbl { font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--song); }
#np-title { font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-time { font: 11px var(--mono); color: #8c8982; }
.jb-seek { flex: 1 1 160px; accent-color: var(--song); min-width: 120px; }
#np-meter { width: 120px; height: 26px; }
.jb-modes { display: flex; gap: 6px; }
.jb-mode { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: transparent; color: #bdbab3;
  border: 1px solid #333; border-radius: 3px; padding: 5px 9px; cursor: pointer; }
.jb-mode[aria-pressed="true"] { background: var(--song); color: #000; border-color: var(--song); }

/* Ktesibios mode: the room takes the song's colour */
.jb-wash { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s;
  background: radial-gradient(ellipse at 50% 70%, var(--song), transparent 70%), radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--song) 50%, transparent), transparent 55%); }
body.kt .jb-wash { opacity: calc(var(--lvl, .45) * .55); transition: opacity .25s linear; }
body.kt .jb-track { background: rgb(14 14 14 / .82); }
.jb-flash { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: var(--song); opacity: 0; }
body.flash .jb-flash { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  body.kt .jb-wash { transition: none; opacity: .25; }
  .jb-flash { display: none; }
}
@media (max-width: 640px) {
  .jb-bar-in { gap: 6px 8px; }
  #np-meter, .jb-time { display: none; }
  .jb-seek { order: 9; flex-basis: 100%; }
  body.jukebox { padding-bottom: 130px; }
}
body.jukebox header.bar .crumb { color: #e8e6e1; text-shadow: 0 1px 6px rgb(0 0 0 / .8); }
body.jukebox header.bar .views a { text-shadow: 0 1px 6px rgb(0 0 0 / .8); color: #e8e6e1; }
.jb-btn svg { display: block; margin: auto; }