/*
 * Figma implementation layer
 *
 * The application remains deliberately framework-free. This final stylesheet
 * owns the visual system while the existing markup and app.js keep the Archive,
 * queue, likes, playback, and Slop Slip contracts intact.
 */
:root {
  --bg: #000;
  --panel: #141311;
  --line: #827e75;
  --ink: #f1eadc;
  --muted: #c0b8aa;
  --lime: #e4d6ba;
  --slop-sidebar: 220px;
  --slop-content: 100%;
  --slop-player: 95px;
  --slop-gutter: 56px;
  --slop-radius: 6px;
  --slop-sans: Arial, Helvetica, sans-serif;
  --slop-serif: Lora, Georgia, "Times New Roman", serif;
  --sidebar-width: var(--slop-sidebar);
  color-scheme: dark;
}

html {
  background: var(--bg);
}

body,
button,
input,
select,
textarea {
  font-family: var(--slop-serif);
}

body {
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  border-radius: var(--slop-radius);
}

button {
  min-height: 44px;
  border-color: var(--line);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

button:hover:not(:disabled) {
  border-color: var(--lime);
  color: var(--lime);
}

button.primary,
.primary {
  background: var(--lime);
  border-color: var(--lime);
  color: #000;
}

button.primary:hover:not(:disabled),
.primary:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: #000;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}

.controlIcon {
  width: 20px;
  height: 20px;
}

.shell {
  display: grid;
  grid-template-columns: var(--slop-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

aside {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
  width: auto;
  height: 100vh;
  height: 100dvh;
  padding: 36px 32px calc(var(--slop-player) + 28px);
  overflow-y: auto;
  background: var(--bg);
  border-right: 1px solid var(--line);
}

.sidebarBrand {
  margin: 0 0 34px;
  color: var(--ink);
  font-size: 32px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .85;
}

nav {
  display: grid;
  gap: 4px;
}

nav button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  font-size: 15px;
  text-align: left;
}

nav button:hover:not(:disabled) {
  color: var(--ink);
  border-color: transparent;
  background: #ffffff0a;
}

nav button.active {
  color: var(--ink);
  background: var(--panel);
  border-color: transparent;
  border-left-color: var(--lime);
}

nav .sidebarIcon {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  min-width: 0;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  color: currentColor;
}

nav .sidebarIcon .controlIcon {
  width: 19px;
  height: 19px;
}

nav .navLabel {
  margin: 0;
  line-height: 1.2;
}

.sidebarNow {
  display: grid;
  gap: 7px;
  margin-top: auto;
  padding-top: 32px;
}

.sidebarNow img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  object-fit: cover;
}

.sidebarNowLabel,
.eyebrow,
.cardKicker,
.pathMeta,
.meta,
.handbookEyebrow,
.entryKicker {
  color: var(--lime);
  font-family: var(--slop-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.sidebarNow b {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.sidebarNow small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

main {
  min-width: 0;
  padding: 36px var(--slop-gutter) calc(var(--slop-player) + 56px);
}

main > section {
  width: min(100%, var(--slop-content));
}

h1,
h2,
h3 {
  color: var(--ink);
}

h1 {
  margin: 0;
  font-size: clamp(42px, 4.8vw, 62px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .96;
}

h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.02;
}

.search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
}

.searchScope {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 56px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--slop-radius);
  font-family: var(--slop-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.searchScope .controlIcon {
  width: 16px;
  height: 16px;
}

.search input {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border-color: var(--line);
  background: var(--panel);
}

.search button {
  min-height: 56px;
  padding: 0 20px;
}

.discoverIntro {
  display: block;
  height: auto;
  gap: 0;
  align-items: initial;
  justify-content: initial;
  max-width: 720px;
  padding: 54px 0 46px;
  border-bottom: 1px solid var(--line);
}

.discoverIntro .eyebrow {
  margin: 0 0 13px;
}

.discoverIntro h1 {
  margin: 0 0 17px;
}

.discoverIntro > p:last-child {
  max-width: 53ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
}

.discoverSection {
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.sectionHeading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.sectionHeading .eyebrow {
  margin: 0 0 8px;
}

.sectionHeading h2 {
  margin: 0;
}

.sectionHeading > button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 6px 12px;
  color: var(--ink);
  font-size: 14px;
}

.sectionHint {
  max-width: 32ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  text-align: right;
}

.trails {
  gap: 8px;
  margin: 20px 0 0;
}

.trails button {
  min-height: 36px;
  padding: 6px 13px;
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--slop-sans);
  font-size: 12px;
}

.trails button.active {
  color: #000;
  background: var(--lime);
  border-color: var(--lime);
}

.pathGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 21px;
}

.pathCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 224px;
  padding: 23px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--slop-radius);
}

.pathCard .pathMeta {
  margin: 0 0 18px;
  color: var(--muted);
}

.pathCard h3 {
  margin: 0;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.pathCard > p:not(.pathMeta) {
  max-width: 36ch;
  margin: 12px 0 20px;
  color: var(--muted);
  line-height: 1.45;
}

.pathCard button {
  min-height: 40px;
  margin-top: auto;
  padding: 7px 12px;
  font-size: 14px;
}

.clapSection {
  padding-bottom: 42px;
}

.clapGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.clapGrid > .dim {
  grid-column: 1 / -1;
}

.clapCard {
  min-width: 0;
}

.clapCover {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--panel);
  border-radius: 0;
}

.clapCover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clapCopy {
  padding-top: 13px;
}

.clapCopy .cardKicker {
  margin: 0 0 7px;
  color: var(--muted);
}

.clapCopy h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.26;
}

.clapCopy > p:not(.cardKicker) {
  margin: 5px 0 12px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.clapCopy .relatedButton {
  min-height: 36px;
  padding: 5px 10px;
}

.discoverFooter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.discoverFooter p {
  max-width: 58ch;
  margin: 0;
}

.discoverFooter a {
  flex: 0 0 auto;
  color: var(--ink);
}

#searchResults {
  padding-top: 42px;
}

.heading {
  align-items: baseline;
  margin-bottom: 20px;
}

.heading h2 {
  font-size: clamp(27px, 3vw, 38px);
}

.heading span,
#resultCount {
  color: var(--muted);
  font-family: var(--slop-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#status {
  min-height: 24px;
  margin-bottom: 14px;
  color: var(--muted);
}

#resetShelf {
  min-height: 38px;
  margin: 0 0 22px;
  padding: 5px 11px;
  font-size: 14px;
}

.grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 18px;
}

.card {
  min-width: 0;
}

.cover {
  border-radius: 0;
}

.cover::after {
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.card h3 {
  margin: 12px 0 4px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.28;
}

.releaseTitle {
  color: inherit;
}

.card p {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.34;
}

.card .meta,
.cardTags {
  color: var(--muted);
  font-family: var(--slop-sans);
  font-size: 10px;
  letter-spacing: .07em;
  line-height: 1.35;
  text-transform: uppercase;
}

.card .meta {
  margin-top: 10px;
}

.cardTags {
  min-height: 2.7em;
  margin: 9px 0 11px;
  letter-spacing: .01em;
  text-transform: none;
}

.relatedButton {
  min-height: 36px;
  padding: 5px 10px;
  color: var(--ink);
  font-size: 13px;
}

.pager {
  margin-top: 34px;
}

.pager button {
  min-height: 42px;
}

.notice {
  padding: 24px;
  border-radius: var(--slop-radius);
}

#saved > h1,
#queue > h1,
#about > h1 {
  margin-bottom: 18px;
}

.libraryTools {
  gap: 8px;
  margin: 24px 0 15px;
}

.libraryTools button,
.backupDownload {
  min-height: 42px;
  padding: 8px 13px;
}

.track,
.tracks .track {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.track > span,
.trackCopy {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.28;
}

.trackCopy small {
  display: inline-block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
}

.trackPlay,
.trackActions > button,
.removeTrack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

.trackActions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.trackActions .saveTrack {
  font-family: inherit;
  font-size: inherit;
}

.trackActions .is-saved,
#saveCurrent.is-saved {
  color: #000;
  background: var(--lime);
  border-color: var(--lime);
}

.savedLinks {
  gap: 12px;
  padding: 0 0 17px 54px;
  color: var(--muted);
}

.savedLinks button {
  min-height: 34px;
  padding: 5px 10px;
}

.player {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 44px auto minmax(126px, 180px) auto 44px 44px;
  gap: 14px;
  align-items: center;
  min-height: var(--slop-player);
  padding: 21px var(--slop-gutter) 13px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  z-index: 20;
}

.player .playingInfo {
  display: flex;
  gap: 12px;
  min-width: 0;
  align-items: center;
}

.playingInfo img {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.playingInfo > div {
  min-width: 0;
}

.playingInfo b {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playingInfo small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player button,
.transport button,
#mute,
#queueToggle,
#shareCurrent,
#saveCurrent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--slop-radius);
}

.player .saveTrack {
  font-family: inherit;
  font-size: inherit;
}

.transport {
  display: flex;
  gap: 4px;
}

.transport button {
  border-color: transparent;
}

.transport button:hover:not(:disabled) {
  background: #ffffff0a;
  border-color: transparent;
}

.transport #togglePlay {
  border-color: var(--line);
}

.volume {
  display: flex;
  align-items: center;
  gap: 8px;
}

.volume input {
  width: 100%;
  min-width: 0;
  padding: 0;
  accent-color: var(--ink);
}

.timing {
  color: var(--muted);
  font-family: var(--slop-sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.seekline {
  top: 0;
  height: 5px;
}

.seekline input {
  height: 5px;
}

.seekline input::-webkit-slider-runnable-track {
  height: 5px;
}

.seekline input::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -4px;
}

.seekline input::-moz-range-thumb {
  width: 12px;
  height: 12px;
}

.seekline output {
  bottom: 22px;
}

.player button:disabled {
  opacity: .42;
}

.shareTrack {
  font-family: inherit;
  font-size: inherit;
}

#message {
  bottom: calc(var(--slop-player) + 16px);
  z-index: 30;
  border-radius: var(--slop-radius);
}

.sullyDialog {
  width: min(880px, calc(100vw - 32px));
  max-height: min(85vh, 850px);
  margin: auto;
  padding: 32px;
  overflow: auto;
  background: var(--bg);
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: 0 30px 90px #000a;
}

.uiBackdrop {
  background: rgb(0 0 0 / .733);
}

.sullyDialog .close {
  min-height: 38px;
  padding: 5px 11px;
  font-size: 13px;
}

.detailtop {
  gap: 24px;
}

.detailtop img {
  border: 1px solid var(--line);
  border-radius: 0;
}

#shareDialog {
  width: min(550px, calc(100vw - 32px));
  min-height: 392px;
}

#shareDialog h2 {
  margin-top: 8px;
  font-size: 31px;
}

#shareDialog .shareCheck {
  min-height: 44px;
  margin-top: 8px;
}

#shareDialog .shareActions {
  gap: 8px;
}

#shareDialog .shareActions > button {
  min-height: 44px;
}

#shareDialog .sharePrinciple {
  line-height: 1.48;
}

.about {
  max-width: var(--slop-content);
}

.about > p {
  max-width: 72ch;
  color: var(--muted);
}

.about h2 {
  margin-top: 34px;
  font-size: 28px;
}

.handbook {
  width: min(100%, var(--slop-content));
  margin: 0;
  padding: 0 0 calc(var(--slop-player) + 22px);
}

.handbook h1 {
  font-size: clamp(54px, 7vw, 74px);
}

.handbookHero {
  padding: 24px 0 32px;
}

.handbookMeta {
  max-width: 720px;
}

.handbook h2 {
  font-size: clamp(25px, 2.8vw, 34px);
}

.logEntry {
  grid-template-columns: 118px minmax(0, 1fr);
}

.docsSection summary {
  font-family: var(--slop-serif);
}

@media (max-width: 1180px) {
  :root {
    --slop-gutter: 36px;
  }

  .player {
    grid-template-columns: minmax(180px, 1fr) 44px auto minmax(110px, 150px) auto 44px 44px;
    gap: 10px;
  }

  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 930px) {
  :root {
    --slop-gutter: 28px;
  }

  aside {
    padding-right: 18px;
    padding-left: 18px;
  }

  .sidebarBrand {
    font-size: 28px;
  }

  .player {
    grid-template-columns: minmax(170px, 1fr) 44px auto auto 44px 44px;
  }

  .volume {
    display: none;
  }

  .sectionHint {
    display: none;
  }
}

@media (max-width: 720px) {
  :root {
    --slop-gutter: 20px;
    --slop-player: 208px;
  }

  .shell {
    display: block;
  }

  aside {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 18px var(--slop-gutter) 16px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebarBrand {
    margin-bottom: 16px;
    font-size: 27px;
  }

  nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  nav button {
    justify-content: flex-start;
    min-width: 0;
    padding: 8px 7px;
    font-size: 13px;
  }

  nav .sidebarIcon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
  }

  nav .sidebarIcon .controlIcon {
    width: 17px;
    height: 17px;
  }

  .sidebarNow {
    display: none !important;
  }

  main {
    padding: 24px var(--slop-gutter) calc(var(--slop-player) + 28px);
  }

  .search {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

  .searchScope,
  .search input,
  .search button {
    min-height: 50px;
  }

  .searchScope {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 11px;
  }

  .search input {
    padding: 0 11px;
  }

  .search button {
    padding: 0 13px;
  }

  .discoverIntro {
    padding: 38px 0 32px;
  }

  .discoverSection {
    padding: 28px 0;
  }

  .pathGrid,
  .clapGrid {
    grid-template-columns: 1fr;
  }

  .pathCard {
    min-height: 0;
  }

  .clapCard {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
  }

  .clapCover {
    width: 120px;
  }

  .clapCopy {
    padding-top: 0;
  }

  .discoverFooter {
    display: grid;
    gap: 12px;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 12px;
  }

  .track,
  .tracks .track {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .trackActions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .savedLinks {
    padding-left: 54px;
  }

  .player {
    grid-template-columns: 44px 44px 44px minmax(0, 1fr);
    gap: 7px 8px;
    min-height: var(--slop-player);
    padding: 18px var(--slop-gutter) 12px;
  }

  .player .playingInfo {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .player .saveTrack {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  .player .transport {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  .volume {
    display: none;
  }

  .player .timing {
    grid-column: 4;
    grid-row: 3;
    justify-self: end;
  }

  .player #queueToggle {
    grid-column: 2;
    grid-row: 3;
  }

  .player #shareCurrent {
    grid-column: 3;
    grid-row: 3;
  }

  #message {
    bottom: calc(var(--slop-player) + 12px);
  }

  .sullyDialog {
    padding: 24px;
  }

  .handbook {
    padding-bottom: calc(var(--slop-player) + 18px);
  }

  .logEntry {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  :root {
    --slop-gutter: 14px;
    --slop-player: 220px;
  }

  nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  nav button {
    padding: 8px 5px;
  }

  .search {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .searchScope {
    grid-column: 1 / -1;
    min-height: 34px;
    width: fit-content;
    padding: 4px 9px;
  }

  .search input,
  .search button {
    min-height: 46px;
  }

  .sectionHeading {
    align-items: flex-start;
  }

  .sectionHeading h2 {
    font-size: 25px;
  }

  .sectionHeading > button {
    min-height: 36px;
  }

  .grid {
    gap: 22px 10px;
  }

  .card h3 {
    font-size: 15px;
  }

  .clapCard {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .clapCover {
    width: 94px;
  }

  .player {
    grid-template-columns: 44px 44px 44px minmax(0, 1fr);
  }

  .playingInfo img {
    width: 42px;
    height: 42px;
  }

  .transport {
    gap: 2px;
  }

  .transport button {
    width: 40px;
    min-width: 40px;
  }

  #shareDialog {
    min-height: 0;
  }

  #shareDialog .shareActions > button {
    flex: 1 1 100%;
  }
}

/* One shared listening rail, bounded by the viewport above the player. */
@media (min-width: 721px) {
  aside {height: calc(100dvh - var(--slop-player)); padding: 10px 24px 30px 10px; overflow: clip; gap: 28px;}
  .sidebarBrand {margin: 0; flex: 0 0 41px; line-height: 41px;}
  nav {gap: 0; flex: 0 0 auto;}
  nav button {height: 48px; padding: 9px 10px;}
  #navGenres {height: 36px; min-height: 36px;}
  .sidebarNow {display: flex; flex: 1 1 0; min-height: 0; margin: 0; padding: 0;}
  .sidebarNow img {width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: contain; border: 0; background: transparent;}
  .playingInfo img {display: none;}
}
nav button.active {background: var(--lime); color: #000; border-radius: 6px; border-color: transparent;}
.sidebarIcon img {width: auto; height: auto;}
nav button.active .sidebarIcon img {filter: brightness(0);}
@media (min-width: 721px) and (max-height: 800px) {
  aside {gap: 12px; padding-bottom: 12px;}
  nav {grid-template-columns: minmax(0,1fr);}
  nav button, #navGenres {height: 36px; min-height: 36px; padding: 6px 10px; font-size: 15px;}
}
@media (min-width: 721px) and (max-height: 420px) {
  aside {gap: 4px; padding-top: 4px; padding-bottom: 4px;}
  .sidebarBrand {flex-basis: 26px; line-height: 26px; font-size: 24px;}
  nav button, #navGenres {height: 28px; min-height: 28px; padding-block: 3px;}
}
.searchScope {max-width: none; min-width: 174px; cursor: pointer;}

#navigationToggle {display: none;}
@media (max-width: 720px) {
  aside {display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;}
  .sidebarBrand {margin: 0;}
  #navigationToggle {display: block; padding: 8px 14px;}
  aside nav {display: none; grid-column: 1 / -1; grid-template-columns: minmax(0,1fr); gap: 0;}
  aside.navigationOpen nav {display: grid;}
  aside nav button, aside #navGenres {height: 44px; min-height: 44px; font-size: 15px; padding: 8px 10px;}
}

.developmentBanner {padding: 8px 16px; background: #e4d6ba; color: #000; font: 13px/1.4 Arial,sans-serif;}
.personalPanel {display: block; margin: 24px 0; padding: 18px; border: 1px solid var(--line); border-radius: 6px;}
.personalPanel summary {cursor: pointer; font-size: 18px;}
.personalPanel form {margin: 18px 0;}
.personalPanel label {display: block; margin: 10px 0;}
.personalPanel textarea {display: block; width: 100%; padding: 10px; background: var(--panel); color: var(--ink);}
.personalPanel input[type=checkbox] {width: auto; min-height: 0; margin-right: 8px;}
.personalPanel select {padding: 10px; max-width: 100%;}
.personalRow {display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0;}
.personalRow input {flex: 1; min-width: 120px; max-width: 100%;}
.personalTrack {display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line);}
.personalTrack>button:first-child {flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere;}
.personalTrack small {display: block; color: var(--muted);}
@media(max-width:480px){.personalPanel{padding:12px}.personalTrack{flex-wrap:wrap}.personalTrack>button:first-child{flex-basis:100%}}

/* Shared Figma components: vkLYFKei7GBAjzke9cvcSt, 10 October 2026.
   Native inputs keep their interactions; responsive adaptations retain one rail. */
@font-face{font-family:Lora;src:url('assets/fonts/Lora-Regular.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:Lora;src:url('assets/fonts/Lora-Italic.ttf') format('truetype');font-style:italic;font-weight:400 700;font-display:swap}
.previewBadge{font:11px/1.2 var(--slop-serif);font-style:normal;letter-spacing:0;color:var(--muted);margin-left:10px;vertical-align:middle}
h1{font-size:54px;font-style:italic;letter-spacing:-1.35px;line-height:1.3;font-weight:400}
h2,.sectionHeading h2{font-size:23px;font-weight:700;letter-spacing:0;line-height:1.5}
.search{display:flex;align-items:center;gap:16px;height:56px;padding:0 16px;background:var(--panel);border:1px solid var(--line);border-radius:6px;flex-wrap:nowrap}
.search>img{flex-shrink:0;width:18px;height:18px}
.search .searchScope,.search .localScope{font:400 14px/1.5 var(--slop-serif);letter-spacing:0;color:var(--ink);border:0;border-right:1px solid #393630;border-radius:0;min-width:0;min-height:24px;height:24px;padding:0 12px 0 0;flex:0 0 150px;width:150px}
.search .localScope{flex-basis:112px;width:112px}
.search input{border:0;border-radius:0;padding:0;background:transparent;min-height:30px;height:40px;font-size:16px;flex:1;min-width:0;width:auto}
.search button{display:grid;place-items:center;min-height:32px;height:32px;min-width:32px;padding:0;border:0;background:transparent;flex:0 0 32px}
.search button img{width:24px;height:24px}
.contextualSearch{margin-bottom:24px}
.discoverIntro{padding:24px 0 0;max-width:none;border:0}
.discoverIntro h1{margin:0 0 8px}
.discoverIntro>p:last-child{font-size:16px;line-height:1.5;max-width:none}
#discover>.personalPanel{margin:12px 0 0;padding:0;border:0;font-size:14px}
#discover>.personalPanel summary{font-size:13px;color:var(--muted);width:fit-content;margin-left:auto}
#discover>.personalPanel[open]{padding:16px;border:1px solid var(--line)}
.discoverSection{padding:28px 0 0;border:0}
#genre-title{font-size:14px;font-weight:400}
.sectionHeading{align-items:center;gap:16px}
.sectionHeading>button{padding:0;border:0;font-size:16px;min-height:24px}
.trails{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:12px 0 0}
.trails button{font:400 14px/1.3 var(--slop-serif);padding:8px 6px;min-height:38px;border-radius:999px;color:var(--ink)}
.pathGrid{gap:20px;margin-top:16px}
.pathCard{padding:20px;border-radius:8px;min-height:200px;gap:16px}
.pathCard .pathMeta{font:400 12px/1.5 var(--slop-serif);letter-spacing:0;text-transform:none;margin:0}
.pathCard h3{font-size:23px;line-height:1.5;font-style:italic;letter-spacing:0;overflow-wrap:anywhere}
.pathCard>p:not(.pathMeta),.pathIdentity p{font-size:14px;color:var(--muted);margin:0}
.pathIdentity{display:grid;grid-template-columns:minmax(80px,172px) minmax(0,1fr);gap:16px;width:100%}
.pathIdentity>img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.pathIdentity>div{display:flex;flex-direction:column;gap:9px;align-items:start;min-width:0}
.pathTracks{width:100%}.pathTracks p{margin:0;padding:9px 0;border-top:1px solid #393630;font-size:14px;overflow-wrap:anywhere}.pathTracks small{display:block;color:var(--muted);font-size:12px}
.sectionHint{font-size:12px;line-height:1.5;max-width:35ch}
.clapGrid{gap:18px;margin-top:16px}.clapCover{border-radius:4px}.clapCopy h3{font-size:18px;font-weight:700;line-height:1.5}
.viewDescription{margin:8px 0 24px;color:var(--muted);font-size:16px}
.libraryTools{margin:16px 0 12px;gap:10px}.libraryHint{margin:12px 0 24px;font-size:13px}
.personalPanel{border-radius:8px;background:var(--panel);font-size:14px}
.personalPanel summary{font-size:16px}.playlistEditor{margin:16px 0;padding:14px 18px}
.likedAlbum{border:1px solid var(--line);border-radius:8px;background:var(--panel);margin:0 0 20px;overflow:hidden}
.likedAlbumHeader{display:flex;gap:16px;padding:20px;align-items:start}
.likedAlbumHeader>img{width:80px;height:80px;object-fit:cover;border-radius:4px;flex-shrink:0}
.likedAlbumHeader>div{min-width:0;flex:1}.likedAlbumHeader h2{font-size:20px;line-height:1.3;overflow-wrap:anywhere}.likedAlbumHeader p{font-size:14px;color:var(--muted);margin:6px 0}
.albumActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}.albumActions button{font-size:13px;min-height:30px;padding:5px 10px}
.likedTrack{display:flex;align-items:center;gap:12px;border-top:1px solid #393630;padding:12px 16px 12px 20px}
.trackNumber{width:28px;flex-shrink:0;font-size:13px;color:var(--line)}.likedTrack .trackCopy{flex:1;min-width:0;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.likedTrack .trackActions{display:flex;gap:4px;flex-shrink:0}.likedTrack .trackActions button{display:grid;place-items:center;padding:0!important;min-height:28px;min-width:28px;width:28px;height:28px;border-radius:50%}.likedTrack .saveTrack svg{width:16px;height:16px}
.genreGuidance{display:flex;justify-content:space-between;gap:20px;border-block:1px solid #393630;margin:28px 0;padding:14px 0;font-size:14px;color:var(--muted)}.genreGuidance p{margin:0}.genreGuidance output{flex-shrink:0;color:var(--lime)}
.genreWorkspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}.genreVocabulary,.genreSelection{border:1px solid var(--line);border-radius:8px;padding:20px;min-width:0}.genreWorkspace .dim{font-size:13px}
#genreOptions{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.genreOption{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #393630;font-size:16px;cursor:pointer}.genreOption input{flex:0 0 18px;width:18px;height:18px;accent-color:var(--lime);padding:0;margin:0}.genreOption span{min-width:0;overflow-wrap:anywhere}.genreOption small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.genreOption:has(:checked){background:var(--panel)}
#selectedGenres{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}#selectedGenres button{min-height:32px;padding:4px 8px;font-size:13px}.genreSelection>button{width:100%;margin-top:8px;font-size:14px}
#shareDialog{width:min(550px,94vw);padding:28px;min-height:0}#shareDialog h2{font-size:23px;line-height:1.5}#shareDialog .shareActions button{font-family:var(--slop-serif);font-size:16px}
@media(min-width:721px){.playingInfo img{display:block;width:48px;height:48px}.sidebarBrand{font-weight:700;letter-spacing:0}}
@media(max-width:1200px){.trails{grid-template-columns:repeat(3,minmax(0,1fr))}.genreWorkspace{grid-template-columns:1fr}.pathIdentity{grid-template-columns:100px minmax(0,1fr)}}
@media(max-width:900px){.pathGrid{grid-template-columns:1fr}.search .searchScope{flex-basis:125px;width:125px}.search{gap:10px;padding-inline:12px}.search .localScope{flex-basis:80px;width:80px}}
@media(max-width:720px){h1{font-size:42px;letter-spacing:-1px}.contextualSearch{margin-bottom:24px}.genreGuidance{flex-direction:column;gap:8px}.genreWorkspace{gap:16px}.genreVocabulary,.genreSelection{padding:16px}.sectionHeading{flex-wrap:wrap}.sectionHint{text-align:left;max-width:none}.discoverFooter{display:block}.likedAlbumHeader{padding:16px}.likedTrack{padding:12px;gap:6px}.trackNumber{width:18px}.pathIdentity{grid-template-columns:120px minmax(0,1fr)}}
@media(max-width:480px){.search>img{display:none}.search .searchScope{flex-basis:112px;width:112px;font-size:12px}.search .localScope{flex-basis:52px;width:52px;font-size:12px}.search input{font-size:14px}.search{gap:8px}.trails button{font-size:12px}.likedAlbumHeader{gap:12px}.likedAlbumHeader>img{width:60px;height:60px}.albumActions{gap:6px}.likedAlbumHeader h2{font-size:18px}#genreOptions{grid-template-columns:1fr}.pathIdentity{grid-template-columns:84px minmax(0,1fr)}.pathCard{padding:16px}.likedTrack .trackCopy{font-size:13px}}
#discover>.personalPanel:not([open]){background:transparent}
.pathCard:has(.collectionArt){display:grid;grid-template-columns:minmax(90px,40%) minmax(0,1fr);gap:9px 16px;align-content:start}.collectionArt{grid-column:1;grid-row:1/5;width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}.pathCard:has(.collectionArt)>:not(img){grid-column:2;margin:0}.pathCard:has(.collectionArt)>button{justify-self:start}
#searchResults{margin-top:24px}#results:not(:empty){padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.activeFilters{margin:22px 0}.activeFilters h3{font-size:14px;margin:0 0 12px}.activeFilters button{display:inline-flex;align-items:center;gap:8px;margin:0 8px 8px 0;border-radius:30px;padding:8px 12px;font-size:14px}.activeFilters img{width:20px;height:20px}
@media(max-width:720px){:root{--slop-player:160px}.player{min-height:160px;gap:4px 8px;padding-top:12px;padding-bottom:10px}.player .playingInfo{grid-column:1/4;grid-row:1}.player .timing{grid-column:4;grid-row:1;font-size:10px}.player .transport{grid-column:1/3;grid-row:2;justify-self:start}.player .saveTrack{grid-column:3;grid-row:2}.player #queueToggle{grid-column:4;grid-row:2;justify-self:start}.player #shareCurrent{grid-column:4;grid-row:3;justify-self:start}.player .transport{grid-row:2/4}.player .playingInfo img{width:38px;height:38px}#results:not(:empty){padding:12px}}
@media(max-width:480px){.search .searchScope{flex-basis:130px;width:130px}.search input{font-size:13px}}
@media(max-width:720px){:root{--slop-player:128px}.player{grid-template-columns:repeat(6,minmax(0,1fr));min-height:128px;gap:8px 0;padding:12px var(--slop-gutter)}.player .playingInfo{grid-column:1/5;grid-row:1}.player .timing{grid-column:5/7;grid-row:1}.player .transport{grid-column:1/4;grid-row:2;justify-self:start}.player .saveTrack{grid-column:4;grid-row:2;justify-self:center}.player #queueToggle{grid-column:5;grid-row:2;justify-self:center}.player #shareCurrent{grid-column:6;grid-row:2;justify-self:end}}
nav button.active:hover:not(:disabled){background:var(--lime);color:#000;border-color:transparent}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.libraryOrder{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 20px;font-size:14px;color:var(--muted)}
.libraryOrder select{max-width:100%;min-height:44px;padding:8px 12px;font-size:14px}
/* Dense genre routes share the existing type, palette and fixed listening shell. */
#genres .atlasToolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 12px;font-size:14px}
#genres .atlasToolbar select{max-width:100%;padding:8px;min-height:40px;font-size:14px}
#genres .atlasToolbar button{font-size:14px;padding:8px 12px}
#atlasStatus{color:var(--muted);font-size:12px}
#genres .atlasNote{font-size:13px;line-height:1.6;color:var(--muted);max-width:85ch}
.atlasSelection{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-block:1px solid #393630;padding:14px 0;margin:18px 0;font-size:13px}
.atlasSelection #selectedGenres{margin:0;flex:1;min-width:120px}.atlasSelection button{font-size:13px;padding:7px 10px;min-height:36px}.atlasSelection small{flex-basis:100%;color:var(--muted)}
#genreOptions.genreAtlas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:22px 24px;align-items:start}
.atlasFamily{min-width:0;border-top:1px solid var(--line);padding-top:10px}.atlasFamily h2{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:20px}.atlasFamily h2>button:first-child{flex:1;text-align:left;font-size:20px}
#genres .genreName,.atlasFamily h2>button:first-child{border:0;background:none;padding:4px 0;color:var(--ink);font-family:inherit;line-height:1.4;border-radius:0}
#genres .genreName:hover,.atlasFamily h2>button:first-child:hover{text-decoration:underline;color:var(--lime)}
#genres .atlasRow{display:flex;gap:6px;align-items:center;min-height:34px;font-size:14px}
#genres .atlasRow>.genreName,#genres .atlasRow>span:first-child{flex:1;min-width:0;text-align:left;overflow-wrap:anywhere;font-size:14px}
#genres .genreAdd{flex:0 0 30px;width:30px;min-height:30px;padding:0;border:1px solid #514d43;font-size:18px;line-height:1;border-radius:4px}
#genres .genreAdd[aria-pressed=true]{background:var(--lime);color:#000}
.tagSeen{color:var(--lime);font-size:12px}.genreBranch{border-left:1px solid #514d43;padding-left:10px;margin:0 0 4px 4px}.genreBranch summary,.familyRest summary{cursor:pointer;font-size:12px;color:var(--muted);padding:5px 0}.familyRest{margin-top:9px;border-top:1px solid #393630}
.genreFocus{border:1px solid var(--line);border-radius:6px;padding:18px;margin:18px 0;scroll-margin-top:20px}.genreFocus>button:first-child{float:right;font-size:12px}.genreFocus h2{font-size:24px}.genreFocus p{font-size:14px}.genreRelations{margin-top:12px}.genreRelations h3{font-size:13px;margin:0 0 6px;color:var(--muted)}.genreRelations button{font-size:13px;min-height:34px;padding:5px 9px;margin:0 5px 5px 0}
.atlasAlphabet{grid-column:1/-1;min-width:0}.atlasAlphabet h2{font-size:20px}.atlasAlphabet>div{columns:220px;column-gap:24px}.atlasAlphabet .atlasNode{break-inside:avoid}
.sourceTagPanel,.atlasMethod{border-top:1px solid #514d43;margin-top:28px;padding-top:14px;font-size:13px;line-height:1.6}.sourceTagPanel summary,.atlasMethod summary{cursor:pointer;font-size:16px}.sourceTagPanel form{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;align-items:center}.sourceTagPanel input{min-width:0;max-width:100%;flex:1;font-size:14px}.sourceTagPanel button,.atlasMethod button{font-size:13px}.sourceTagPanel #sourceGenres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:4px 24px}#genreSeed{overflow-wrap:anywhere}
@media(pointer:coarse){#genres .genreAdd{min-width:44px;min-height:44px}#genres .atlasRow{min-height:44px}}
@media(max-width:480px){#genreOptions.genreAtlas{grid-template-columns:1fr}.atlasSelection{gap:8px}.atlasSelection #selectedGenres{flex-basis:100%}.genreFocus{padding:12px}.sourceTagPanel form label{flex-basis:100%}}
#genres .genreName{min-height:30px}#genres .atlasSelection{margin:12px 0;padding:10px 0}#genres .atlasToolbar{margin-top:12px}
@media(max-width:720px){#genres h1{font-size:38px;margin-bottom:10px}#genres .viewDescription{font-size:15px;margin-bottom:12px}#genres .contextualSearch{margin-bottom:18px}#genres .atlasNote{margin:8px 0}}
@media(pointer:coarse){#genres .genreName{min-height:44px}}

/* Queue controls belong alongside the title; preferences stay collapsed. */
.queueHeader {display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.queueHeader h1 {margin:0}
#queue .contextualSearch[hidden], #queueFilterStatus[hidden] {display:none}
#queue .queueEmpty {margin:0}