/* --bg: #f6f5f3; */
:root {
  --transition: 0.12s ease-out;
}

/* :root:not([data-theme="dark"]) {
  --bg: #ffde7a;
  --bg-rgb: 255, 222, 122;
  --text: #433925;
  --text-rgb: 67, 57, 37;
  --gray: #c79343;
  --gray-rgb: 199, 147, 67;
  --icon-gray: #8d7749;
  --icon-gray-rgb: 141, 119, 73;
  --link: #000;
  --link-rgb: 0, 0, 0;
  --link-visited: #5d5d5d;
  --link-visited-rgb: 93, 93, 93;
  --link-hover: #c83700;
  --link-hover-rgb: 200, 55, 0;
} */
:root:not([data-theme="dark"]) {
  --bg: #fff;
  --bg-rgb: 255, 255, 255;
  --text: #000;
  --text-rgb: 0, 0, 0;
  --gray: #bbbbbb;
  --gray-rgb: 187, 187, 187;
  --icon-gray: #888;
  --icon-gray-rgb: 136, 136, 136;
  --link: #3641cc;
  --link-rgb: 54, 65, 204;
  --link-visited: #743787;
  --link-visited-rgb: 116, 55, 135;
  --link-hover: #c83700;
  --link-hover-rgb: 200, 55, 0;
  --chords: #447c1d;
  --chords-rgb: 68, 124, 29;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000;
    --bg-rgb: 0, 0, 0;
    --text: #e2e2e2;
    --text-rgb: 226, 226, 226;
    --gray: #7a7a7a;
    --gray-rgb: 122, 122, 122;
    --icon-gray: #bbb;
    --icon-gray-rgb: 187, 187, 187;
    --link: #61d2ff;
    --link-rgb: 97, 210, 255;
    --link-visited: #f4a8ff;
    --link-visited-rgb: 244, 168, 255;
    --link-hover: #ff6a30;
    --link-hover-rgb: 255, 106, 48;
    --chords: #a6c98f;
    --chords-rgb: 97, 135, 71;
  }
}

:root[data-theme="dark"] {
  --bg: #000;
  --bg-rgb: 0, 0, 0;
  --text: #e2e2e2;
  --text-rgb: 226, 226, 226;
  --gray: #7a7a7a;
  --gray-rgb: 122, 122, 122;
  --icon-gray: #bbb;
  --icon-gray-rgb: 187, 187, 187;
  --link: #61d2ff;
  --link-rgb: 97, 210, 255;
  --link-visited: #f4a8ff;
  --link-visited-rgb: 244, 168, 255;
  --link-hover: #ff6a30;
  --link-hover-rgb: 255, 106, 48;
  --chords: #a6c98f;
  --chords-rgb: 97, 135, 71;
}

@font-face {
  font-family: "FiraCode";
  src: url("./FiraCode-VF.woff2");
}

* {
  -webkit-font-smoothing: subpixel-antialiased;
  box-sizing: border-box;
}

html {
  font-size: 12px;
  scroll-padding: 20px;
  overscroll-behavior-x: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px 40px 60px 30px;
  /* min-width: 730px; */
  margin: 0;
  font-size: 1rem;
  line-height: 1.33333;
  font-family: "FiraCode", monospace;
  background-color: var(--bg);
  color: var(--text);
}

main {
  flex-grow: 1;
}

a {
  color: var(--link);
  text-decoration: none;
  transition:
    color var(--transition),
    border-color var(--transition);
}

a:visited {
  color: var(--link-visited);
}

a:hover,
a.hover {
  color: var(--link-hover);
  transition:
    color 0s,
    border-color 0s;
}

p {
  margin: 0 0 0.75em 0;
}

.hidden {
  display: none;
}
.interpunctum::after {
  content: attr(data-content);
}

/* HEADER */
.header {
  position: relative;
}

.page_title {
  position: relative;
  margin: 5px 0 11px;
  font-size: 2rem;
  line-height: calc(4em / 3);
  font-variation-settings: "wght" 500;
}

.chords_number {
  position: absolute;
  font-size: 0.3em;
  line-height: 1em;
  color: var(--gray);
}

.sorting_toggler {
  margin-right: 0.8em;
}

.randomTrackBtn {
  color: var(--link);
  cursor: pointer;
  font-variation-settings: "wght" 200;
}

/* standalone (others page): not wrapped in the sorting toggler, needs its own gap */
.page_title > .randomTrackBtn {
  margin-right: 0.8em;
}

.randomTrackBtn:hover {
  color: var(--link-hover);
}

.sorting_toggler span:not(.active),
body.searching .sorting_toggler span {
  color: var(--link);
  cursor: pointer;
  font-variation-settings: "wght" 200;
}

.sorting_toggler span:not(.active):hover,
body.searching .sorting_toggler span:hover {
  color: var(--link-hover);
}

body:not(.searching) .sorting_toggler span.active {
  pointer-events: none;
}

.search-input {
  border: 1px solid var(--gray);
  background: var(--bg);
  color: var(--text);
  font-size: 1.25rem;
  border-radius: .25em;
  padding: 0.2em 0.25em 0.1em;
  vertical-align: baseline;
  font-family: inherit;
  width: 11em;
  margin-top: 0.25em;
  outline: none;
}

.search-input::placeholder {
  color: var(--gray);
  opacity: 1;
}

body.searching .search-input {
  outline: 2px solid var(--text);
  outline-offset: -2px;
  font-variation-settings: "wght" 600;
}

.abc_index {
  font-size: 1.25rem;
  font-variation-settings: "wght" 500;
}

.abc_index ul {
  margin: 0 -0.5em -1rem;
  padding: 0;
  list-style-type: none;
}

.abc_index ul li {
  display: inline-block;
  margin-bottom: 1rem;
}

.abc_index ul li a {
  padding: 0.5em;
}

.abc_index ul li a:not(:hover) {
  color: var(--gray);
}

body.searching .abc_index {
  display: none;
}

/* FOOTER */
.footer {
  margin-top: 80px;
  margin-bottom: -40px;

  a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: .15em;
  }
}

/* SEARCH */
span.highlight {
  background-color: #fada6280;
}

ul.content_search {
  display: none;
  padding: 0;
  margin-top: 4em;
  list-style-type: none;
}

ul.content_search ul {
  padding: 0;
  list-style-type: none;
}

ul.content_search > li {
  padding: 5px 0;
}

ul.content_search a {
  font-size: 1.25em;
}

/* LIST */
dl.content_contents {
  margin-top: 4em;
}

dl.content_contents li a {
  padding: 5px 0;
}

dt {
  position: relative;
  font-variation-settings: "wght" 500;
  font-size: 1.25em;
  margin-bottom: 0.2em;
  color: var(--gray);
}

dt > a:not(:hover) {
  color: var(--gray);
}

dd {
  margin-left: 44px;
  margin-bottom: 2em;
}

.track-favicon {
  position: absolute;
  display: none;
  /* margin-top: -.5px; */
  margin-left: 0.406em;
  user-select: none;
}

a[data-favorite] .track-favicon {
  display: inline-block;
}

a[data-favorite] {
  font-variation-settings: "wght" 800 !important;
}

.track-favicon-toggler {
  cursor: pointer;
  transition: color var(--transition);
}

.track-favicon-toggler:hover {
  color: var(--link-hover);
  transition: color 0s;
}

body.sorting-album dl.content_contents {
  margin-top: 4em;
}

body.sorting-album dt {
  margin-left: 140px;
  color: var(--text);
}

body.sorting-album dt .albumyear {
  color: var(--gray);
}

body.sorting-album dt .albumart {
  position: absolute;
  display: block;
  height: 116px;
  margin-left: -140px;
  margin-bottom: 1rem;
  user-select: none;
}

body.sorting-album dd {
  margin-left: 140px;
  min-height: 76px;
  margin-top: 1.5em;
  margin-bottom: 4em;
}

body.sorting-album .tracknum {
  display: inline-block;
  width: 1.2em;
  text-align: right;
  color: var(--gray);
  margin-right: 0.6em;
}

dl.content_contents ul {
  padding: 0;
  margin: 0;
  max-width: 75em;
  column-gap: 3em;
  column-width: 36em;
}

dl.content_contents li {
  padding: 0;
  margin: 0 0 0.5em 0;
  list-style: none;
  break-inside: avoid;
  text-wrap: balance;
}

.day-night-switch {
  position: absolute;
  right: -20px;
  top: 5px;
  width: 20px;
  height: 20px;
  mask-image: url(./day-night-icon.svg);
  -webkit-mask-image: url(./day-night-icon.svg);
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center;
  -webkit-mask-position: center;
  cursor: pointer;
  color: var(--gray);
  background-color: currentColor;

  .modal & {
    right: 20px;
    top: 20px;
  }
}

:root[data-theme="dark"] .day-night-switch {
  mask-position: center right;
  -webkit-mask-position: center right;
  color: var(--text);
}

:root[data-theme="light"] .day-night-switch {
  mask-position: center left;
  -webkit-mask-position: center left;
  color: var(--text);
}

/* MODAL */
body.modal-lock {
  overflow: hidden;
}

body.modal-lock .random-indicator {
  display: block;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(var(--bg-rgb), 0.65);
  overflow: auto;
  backdrop-filter: grayscale(1) contrast(0.25);
  -webkit-backdrop-filter: grayscale(1) contrast(0.25);
}

.modal-content {
  position: relative;
  display: block;
  width: 90vw;
  max-width: 80em;
  margin: 4em auto 6em;
  padding: clamp(2rem, 4dvw, 4em) clamp(1rem, 6dvw, 6em) clamp(3rem, 6dvw, 6em) clamp(2rem, 5dvw, 5em);
  font-size: .9em;
  background: var(--bg);
  outline: none;
  user-select: auto;
  
  opacity: clamp(.5, calc(1 - (var(--random-progress) * .005)), 1);
  /* transform: translateX(clamp(-25px, calc(var(--random-progress) * -.25px), 0px)); */
  transform: translateX(min(calc(var(--random-progress) * -.25px), 0px));
}

.chords_header {
  padding-right: max(10px, calc(32px - 2vw));
}

.chords_text {
  white-space: pre-wrap;
}

.chords_text .line {
  display: flex;
  min-height: 1.33333em;
}
.chords_text .line > div {
  flex-shrink: 0;
}
.chords_text .line.empty + .line.empty + .line.empty {
  display: none;
}
.chords_text .line-chords {
  color: var(--chords);
}

@property --random-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.random-indicator {
  display: none;
  position: fixed;
  top: 20px;
  bottom: 0;
  right: 0;
  width: 100px;
  padding: calc(20px + 3rem) 10px 0;
  background: var(--bg);
  writing-mode: sideways-lr;
  text-align: right;
  font-size: 1.25rem;
  line-height: 2rem;
  color: var(--gray);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;

  opacity: clamp(.5, calc(.5 + var(--random-progress) * .005), 1);
  transform: translateX(clamp(50px, calc(150px - (var(--random-progress) * 1px)), 150px));

  span {
    position: absolute;
    writing-mode: initial;
    font-size: 2rem;
    margin-bottom: .5em;
    font-variation-settings: "wght" 200;
  }

  .random-ready & {
    color: var(--link-hover);
  }
}

.chords-view-switch {
  position: absolute;
  right: 20px;
  top: 50px;
  width: 20px;
  height: 20px;
  mask-image: url(./chords-view-icon.svg);
  -webkit-mask-image: url(./chords-view-icon.svg);
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center left;
  -webkit-mask-position: center left;
  cursor: pointer;
  color: var(--chords);
  background-color: currentColor;
}
:root[data-chords-view="block"] .chords-view-switch {
  mask-position: center;
  -webkit-mask-position: center;
}
:root[data-chords-view="none"] .chords-view-switch {
  mask-position: center right;
  -webkit-mask-position: center right;
}

:root[data-chords-view="block"] .chords_text .line {
  flex-direction: column-reverse;
}
:root[data-chords-view="block"] .chords_text .line-chords {
  line-height: 1;
  margin-top: 0.33333em;
}
:root[data-chords-view="block"] .chords_text .trailing-spaces {
  display: none;
}

:root[data-chords-view="none"] .chords_text .line-chords {
  display: none;
}
:root[data-chords-view="none"] .chords_text .trailing-spaces {
  display: none;
}

:root[data-chords-view="none"] .chords_text {
  .line-lyrics:has(.trailing-spaces:only-child),
  .line:has(.line-chords:only-child) {
    display: none;
  }
}

body.modal-lock > :not(.modal) {
  transition: none !important;
  user-select: none;
}

/* MODAL CONTENT */
.modal-content .track_starred-star {
  display: none;
}

.modal-content ul.albumlist {
  padding: 0;
  margin: 0em 0 2em;
}

.modal-content li.album {
  display: inline;
  margin: 0;
  padding: 0;
}

.modal-content .album a:not(:hover) {
  color: inherit;
}

.modal-content .album a::before,
.modal-content .album span::before {
  content: "◉";
  position: relative;
  font-size: 1.5em;
  margin-right: 0.25em;
  margin-left: -0.2125em;
  bottom: -0.5px;
}

.modal-content .album a:not(:hover)::before,
.modal-content .album span::before {
  color: var(--icon-gray);
}

.modal-content .tracktitle {
  margin-bottom: 0;
}

.modal-content .tracktitle-alt {
  margin-top: 0;
  margin-bottom: 0;
  font-variation-settings: "wght" 400;
}

.modal-content .tracktitle-alt::before {
  content: "=";
  display: inline-block;
  text-align: right;
  width: 0.6em;
  margin-left: -0.9em;
  margin-right: 0.3em;
  color: var(--gray);
}

.modal-content .year {
  margin-top: 2em;
  color: var(--icon-gray);
}

.modal-content .year a:not(:hover) {
  color: var(--icon-gray);
}

#scroll-border {
  position: fixed;
  height: 100dvh;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  box-sizing: border-box;
  background-clip: content-box;
  /* border: 20px solid transparent; */
  background: rgba(var(--link-rgb), 0.15);
}

.signal {
  animation-name: "signal";
  animation-fill-mode: none;
  animation-duration: 1s;
}

@keyframes signal {
  10% {
    color: var(--link-hover);
    text-shadow: 0 0 2px currentColor;
  }
}

@media screen and (max-width: 730px) {
  body {
    -webkit-text-size-adjust: none;
  }

  dd {
    margin-left: 1.8rem;
  }

  body.sorting-album dt {
    margin-left: 0;
  }

  body.sorting-album dt .albumart {
    position: relative;
    margin-left: 0;
  }

  body.sorting-album dd {
    margin-left: 0;
  }
}

@media print {
  @page {
    margin: 12mm;
  }

  .search-input,
  .abc_index,
  .footer,
  .sorting_toggler :not(.active),
  .random-indicator {
    display: none;
  }

  dd a {
    font-variation-settings: "wght" 400 !important;
  }

  body.modal-lock {
    overflow: initial;
    padding: 0;
  }

  body.modal-lock > :not(.modal) {
    display: none;
  }

  body.modal-lock .modal {
    position: relative;
    overflow: initial;
    background: none;
  }

  body.modal-lock .modal-content {
    margin: 0;
    padding: 0;
    width: auto;
    max-width: inherit;
  }

  .chords_text .line-chords {
    color: var(--text);
  }
}