/* Sinewave: the approved brown, emerald and mint player. */

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: optional;
}

:root {
  --board: #0c0403;
  --night: #1d0c08;
  --plum: #19372a;
  --amber: #e7b643;
  --coral: #df6446;
  --cream: #eee4cf;
  --dusk: #c5b3a4;
  --brass: #70cba4;
  --line: rgba(112, 203, 164, 0.28);
  --hairline: rgba(238, 228, 207, 0.10);
  --house-sleeve: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww\
.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F\
%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20\
1000%201000%22%3E%3Crect%20width%3D%221000%22%20height%\
3D%221000%22%20fill%3D%22%231d0c08%22%2F%3E%3Cg%20trans\
form%3D%22scale(0.83333%200.83333)%20translate(-0.0%20-\
0.0)%22%3E%3Cpath%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%\
2F2000%2Fsvg%22%20d%3D%22m1200%20600c0%20214.36-114.36%\
20412.44-300%20519.62-185.64%20107.18-414.36%20107.18-6\
00%200-185.64-107.18-300-305.26-300-519.62s114.36-412.4\
4%20300-519.62c185.64-107.18%20414.36-107.18%20600%200%\
20185.64%20107.18%20300%20305.26%20300%20519.62z%22%20f\
ill%3D%22%231d0c08%22%20%2F%3E%3C%2Fg%3E%3Cg%20xmlns%3D\
%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22\
%2370cba4%22%20transform%3D%22translate(-79.904%20-82.2\
10)%20scale(0.96074)%22%3E%3Cpath%20d%3D%22m537.39%2063\
3.09c-6.7617-2.4219-241-3.7188-241-3.7188-13.02%200-23.\
586-10.539-23.586-23.559v-0.17578c0-13.02%2010.566-23.5\
59%2023.586-23.559%200%200%20234.24-1.3281%20241-3.7188\
-3.0703-6.4648-167.79-173.02-167.79-173.02-9.2109-9.210\
9-9.2109-24.117%200-33.359l0.11719-0.11719c9.2109-9.179\
7%2024.117-9.1797%2033.328%200%200%200%20166.55%20164.7\
5%20173.02%20167.79%202.3906-6.6992%203.7188-241%203.71\
88-241%200-13.02%2010.566-23.559%2023.559-23.559h0.2070\
3c12.988%200%2023.527%2010.539%2023.527%2023.559%200%20\
0%201.3281%20234.3%203.7188%20241%206.4648-3.0391%20173\
.04-167.79%20173.04-167.79%209.2109-9.1797%2024.117-9.1\
797%2033.328%200l0.11719%200.11719c9.2109%209.2383%209.\
2109%2024.148%200%2033.359%200%200-164.75%20166.55-167.\
79%20173.02%206.7305%202.3906%20241%203.7188%20241%203.\
7188%2013.02%200%2023.586%2010.539%2023.586%2023.559v0.\
17578c0%2013.02-10.566%2023.559-23.586%2023.559%200%200\
-234.27%201.3008-241%203.7188%203.0391%206.4648%20100.1\
9%20105.48%20167.79%20173.04%209.2109%209.1797%209.2109\
%2024.117%200%2033.297l-0.11719%200.11719c-9.2109%209.2\
383-24.117%209.2383-33.328%200%200%200-166.58-164.72-17\
3.04-167.76-2.3906%206.6992-3.7188%20241-3.7188%20241%2\
00%2013.02-10.539%2023.559-23.527%2023.559h-0.20703c-12\
.988%200-23.559-10.539-23.559-23.559%200%200-1.3281-234\
.3-3.7188-241-6.4648%203.0391-173.02%20167.76-173.02%20\
167.76-9.2109%209.2383-24.117%209.2383-33.328%200l-0.11\
719-0.11719c-9.2109-9.1797-9.2109-24.117%200-33.297l155\
.19-155.19c5.3438-5.3438%209.5352-11.395%2012.605-17.85\
9z%22%20fill%3D%22%2370cba4%22%20fill-rule%3D%22evenodd\
%22%20%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E%20");
  --sans: "DM Sans", Arial, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: radial-gradient(ellipse at 15% 10%, #46201466, transparent 48%),
    radial-gradient(ellipse at 90% 65%, #19372a55, transparent 50%),
    var(--board);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.player {
  width: min(26rem, 100%);
  padding: 1.4rem;
  border-radius: 16px;
  background: radial-gradient(120% 30% at 80% 0%, var(--plum), transparent 75%),
    var(--night);
  box-shadow: 0 0 0 1px var(--hairline),
    0 30px 80px -20px #000;
  border: 1px solid #e7b64344;
  border-color: #70cba444;
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.badge, .spec, .status, .section-heading {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--brass);
}

.badge::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 8px #70cba488;
  vertical-align: 0.05em;
}

.badge.off {
  color: var(--dusk);
}

.badge.off::before {
  background: var(--dusk);
  box-shadow: none;
}

.name {
  margin: 0.65rem 0 1.15rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.05;
  letter-spacing: -0.065em;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.name em {
  color: var(--cream);
  font-style: normal;
  font-weight: 400;
}

.art {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--night) var(--house-sleeve) center / cover no-repeat;
  box-shadow: 0 0 0 1px #70cba455;
}

.meta {
  margin-top: 1.15rem;
}

.title {
  margin: 0;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  text-wrap: balance;
  letter-spacing: -0.035em;
}

.artist {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--amber);
}

.album {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--dusk);
}

.toggle {
  display: block;
  margin-top: 1.4rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #087047, #004d35);
  color: #eee4cf;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  cursor: pointer;
}

.toggle:hover {
  filter: brightness(1.08);
}

.toggle:focus-visible,
.stream-copy:focus-visible,
.stream-url:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  outline-color: var(--brass);
}

.status {
  margin-top: 0.7rem;
  text-align: center;
  color: var(--cream);
}

.hidden {
  display: none;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
}

@keyframes glow-in {
  from {
    opacity: 0.35;
  }
}

.meta.enter {
  animation: settle 0.45s ease-out both;
}

.art.enter {
  animation: glow-in 0.6s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .meta.enter,
  .art.enter {
    animation: none;
  }
}

.history, .streams {
  margin-top: 1.6rem;
}

.section-heading {
  margin-bottom: 0.3rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.history-list, .stream-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-list {
  min-height: calc(5 * 6rem);
}

.history-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-content: center;
  height: 6rem;
  padding: 0.45rem 0;
}

.history-row + .history-row, .stream-row + .stream-row {
  border-top: 1px solid var(--hairline);
}

.history-art {
  grid-row: span 5;
  align-self: center;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 7px;
  background: var(--night) var(--house-sleeve) center / cover no-repeat;
}

.history-title, .history-artist, .history-album, .history-time {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.history-title {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.25;
}

.history-artist, .history-album {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--dusk);
}

.history-album {
  font-style: italic;
}

.history-time {
  font-size: 0.66rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--dusk);
}

.stream-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.65rem;
  align-items: center;
  padding: 0.45rem 0;
}

.stream-format {
  grid-column: 1;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stream-note {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dusk);
}

.stream-url {
  grid-column: 1;
  font-size: 0.7rem;
  color: var(--dusk);
  overflow-wrap: anywhere;
}

.stream-url:hover {
  color: var(--brass);
}

.stream-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(232, 163, 61, 0.55);
  border-radius: 999px;
  background: transparent;
  color: var(--brass);
  font: inherit;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  border-color: #70cba477;
}

.stream-copy:hover {
  background: var(--brass);
  color: var(--night);
}

@media (max-width: 450px) {
  body { padding: 1rem 0.75rem; }
  .player { padding: 1.2rem; }
}

.wordmark {
  display: inline-block;
}

.station-star {
  width: 2.2rem;
  height: 2.2rem;
}

.track-details {
  margin: 0.65rem 0 0;
  color: var(--brass);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
}

.history-details {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--brass);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
}