/* AllPaid on top of the original stylesheet.

   The original is KolPaid's compiled sheet: one palette in its :root, dark,
   with an orange running through it. This puts the site in the tones of
   spotipaid.fun instead, which is black with a single green on it, by
   redefining that set. Everything below is the handful of places that palette
   wants drawn differently: the rail down the left, the stage in the claim
   film, the selection, and the shadows. */
:root {
  color-scheme: dark;

  /* Read off spotipaid.fun itself: black under everything, a near black for
     what sits on it, a hairline between them, one green and nothing else. */
  --background: #000000;
  --foreground: #ffffff;
  --card: #0b0b0b;
  --panel: #111111;
  --panel-2: #1a1a1a;
  --border: #242424;
  --muted-foreground: #8b8b8b;

  --primary: #1db954;
  --primary-foreground: #0a0a0a;

  /* Gold is a bright thing on a black page, so it keeps its shine and takes
     dark ink when something is written on the face of it. */
  --gold: #f5c518;
  --gold-ink: #1a1200;
  --gold-face: #f5c518;

  --destructive: #ef4444;
  --up: #22c55e;
  --down: #ef4444;
}

/* A tile lifts towards the green rather than casting a shadow nothing can
   see on black. */
.card-lift:hover .tile,
.tile.card-lift:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: 0 18px 40px -24px #000, 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
}

.bg-gold {
  background-color: var(--gold-face);
}
.text-gold {
  color: var(--gold);
}

/* The receipt stays paper. It is the one white thing on the site, and that is
   the point of it. */
.receipt-paper {
  background: #fbf7ec;
  color: #1a1610;
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.9);
}

.focus-ring:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

input[type='range'].accent-primary {
  accent-color: var(--primary);
}

/* Lightweight Charts draws into a canvas that must fill its box. */
.chart-box > div {
  position: absolute;
  inset: 0;
}

/* The rail down the left, in the same black as the page. The only bright
   thing on it is the button that launches a coin. */
.sidenav {
  background: var(--background);
  color: var(--foreground);
}
.sidenav-toggle {
  color: var(--muted-foreground);
}
.sidenav-toggle:hover {
  background: var(--panel);
  color: var(--foreground);
}
.sidenav-link {
  color: var(--muted-foreground);
}
.sidenav-link:hover {
  background: var(--panel);
  color: var(--foreground);
}
.sidenav-link.is-active {
  background: var(--panel);
  color: var(--foreground);
  font-weight: 550;
}
.sidenav-foot {
  border-top: 1px solid var(--border);
}
.sidenav-note {
  color: var(--muted-foreground);
}
.sidenav-x {
  color: var(--muted-foreground);
}
.sidenav-x:hover {
  color: var(--foreground);
}

/* The rail scrolls when the sixteen do not fit on the screen, but it does it
   without drawing a bar down the side of the page. The wheel, the trackpad,
   the arrow keys and the focus ring all still move it; there is just nothing
   sitting there to look at. */
.sidenav {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidenav::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Selection and focus in the site's own green. */
::selection {
  background: color-mix(in oklab, var(--primary) 34%, transparent);
}

/* The stage behind the picture in the Get paid film. */
.stage {
  background: linear-gradient(180deg, #0f1b14 0%, #060806 100%);
  border: 1px solid var(--border);
}

/* utilities used here that the original page set never used */
.bg-black\/60 {
  background-color: rgba(0, 0, 0, 0.6);
}
.text-white\/80 {
  color: rgba(255, 255, 255, 0.8);
}
.border-up {
  border-color: var(--up);
}
.duration-150 {
  transition-duration: 0.15s;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.overflow-auto {
  overflow: auto;
}
.p-10 {
  padding: 2.5rem;
}
.top-12 {
  top: 3rem;
}
.right-0 {
  right: 0;
}
.z-\[60\] {
  z-index: 60;
}
.\[\&_\.text-muted-foreground\]\:text-background\/70 .text-muted-foreground {
  color: color-mix(in oklab, var(--background) 70%, transparent);
}
.hover\:shadow-primary:hover {
  box-shadow: 0 12px 26px -12px rgba(29, 185, 84, 0.55);
}

/* The one drop shadow the markup asks for by name. */
.shadow-\[0_30px_80px_-20px_rgba\(0\,0\,0\,0\.7\)\] {
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}

/* The figures under the headline. The rules between them are drawn here
   rather than with utility classes, so the band closes on every screen. */
.statband {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.statband > div {
  padding: 1.25rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.statband > div:nth-child(n + 3) {
  border-bottom: 0;
}
@media (min-width: 640px) {
  .statband {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .statband > div {
    border-bottom: 0;
    border-left: 1px solid var(--border);
  }
  .statband > div:first-child {
    border-left: 0;
  }
}

/* The brand glyph is painted through a mask. The file behind it changed when
   the mark did, and browsers hold these for a week, so it is asked for by a
   name that changes with it. */
.brand-glyph {
  -webkit-mask: url(/brand/mark.png?v=3) 50% / contain no-repeat;
  mask: url(/brand/mark.png?v=3) 50% / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   AllPaid.

   site.css was compiled for KolPaid's markup, so a utility this rebuild
   introduced is not in it and would do nothing at all. Those are written out
   here, in the same spelling Tailwind would have produced, plus the few
   pieces of the original that were never defined anywhere (the live dot, the
   rail the docs page animates along).
   --------------------------------------------------------------------------- */

:root {
  /* On the air right now. The original markup asked for this colour and the
     sheet never defined it, so the pill was drawn in nothing. */
  --live: #e0245e;
}

.text-live { color: var(--live); }

/* The topic headings in the rail sit a shade under the links they head. */
.text-muted-foreground\/80 { color: color-mix(in srgb, var(--muted-foreground) 80%, transparent); }
.bg-live\/10 { background-color: color-mix(in srgb, var(--live) 10%, transparent); }
.border-live\/40 { border-color: color-mix(in srgb, var(--live) 40%, transparent); }

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--live);
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* The rail the docs page sends its packets along. */
.fee-rail { padding-top: 4px; }

/* The mark again, big and faint behind a tile, running off the right edge.
   It is a watermark, not a picture: dark enough that the words on top of it
   are the only thing being read, and just there enough that a tile is
   recognisable from across the page. */
.card-mark {
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
  opacity: 0.08;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.card-lift:hover .card-mark {
  opacity: 0.14;
  transform: translateY(-50%) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .card-lift:hover .card-mark {
    transform: translateY(-50%);
  }
}

/* The marks going round under the headline. */
.mark-window {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8rem, #000 calc(100% - 8rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8rem, #000 calc(100% - 8rem), transparent);
}

.mark-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 1.75rem;
  animation: mark-slide 44s linear infinite;
}

.mark-window:hover .mark-track {
  animation-play-state: paused;
}

@keyframes mark-slide {
  from {
    transform: translateX(0);
  }
  to {
    /* half, because the list is drawn twice */
    transform: translateX(calc(-50% - 0.875rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark-track {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* A network's mark, as a link. Dimmed until it is wanted, then its own
   colour: sixteen marks all shouting at once is a wall, and one lighting up
   under the pointer is an answer. */
.mark-link {
  opacity: 0.55;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease;
}
.mark-link:hover,
.mark-link:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  background: var(--panel);
}

/* The green the page sits in, behind the headline. Black is not flat, and one
   soft light under the first thing read is what stops it looking like a
   terminal. */
.hero-glow {
  position: absolute;
  inset-inline: 0;
  top: -6rem;
  z-index: -10;
  height: 30rem;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 45%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%);
  filter: blur(18px);
}


.sidenav-brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Positioning */
.right-3 { right: 0.75rem; }
.right-4 { right: 1rem; }
.top-3 { top: 0.75rem; }
.top-\[52px\] { top: 52px; }

/* Sizing */
.h-1\.5 { height: 0.375rem; }
.rounded-\[8px\] { border-radius: 8px; }
.w-\[196px\] { width: 196px; }
.w-0 { width: 0; }
.w-1 { width: 0.25rem; }
.w-7 { width: 1.75rem; }
.w-28 { width: 7rem; }
.h-4 { height: 1rem; }
.max-h-\[60vh\] { max-height: 60vh; }

/* Spacing */
.gap-y-1 { row-gap: 0.25rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.max-w-\[26ch\] { max-width: 26ch; }
.last\:mb-0:last-child { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.pb-0\.5 { padding-bottom: 0.125rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pt-5 { padding-top: 1.25rem; }
.py-\[7px\] { padding-top: 7px; padding-bottom: 7px; }
.py-[7px] { padding-top: 7px; padding-bottom: 7px; }

/* The table of collections: a thumbnail, the name, and the numbers right
   aligned so they read down the column. */
.grid-cols-\[2\.25rem_minmax\(0\,1fr\)_5\.5rem_auto\] {
  grid-template-columns: 2.25rem minmax(0, 1fr) 5.5rem auto;
}
@media (min-width: 40rem) {
  .sm\:grid-cols-\[2\.25rem_minmax\(0\,1fr\)_6\.5rem_4\.5rem_4\.5rem_auto\] {
    grid-template-columns: 2.25rem minmax(0, 1fr) 6.5rem 4.5rem 4.5rem auto;
  }
}

/* Text */
.capitalize { text-transform: capitalize; }
.tracking-\[0\.1em\] { letter-spacing: 0.1em; }
.normal-case { text-transform: none; }
.tracking-normal { letter-spacing: 0; }
.text-\[13\.5px\] { font-size: 13.5px; }
.tracking-\[0\.08em\] { letter-spacing: 0.08em; }
.object-contain { object-fit: contain; }

/* Boxes */
.bg-transparent { background-color: transparent; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; }
.cursor-default { cursor: default; }
.overflow-y-auto { overflow-y: auto; }
.rounded-\[10px\] { border-radius: 10px; }
.ring-border { --tw-ring-color: var(--border); }
.accent-\[var\(--primary\)\] { accent-color: var(--primary); }
.shadow-\[0_30px_80px_-20px_rgba\(0\,0\,0\,0\.35\)\] { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35); }
.shadow-\[0_20px_50px_-30px_rgba\(12\,15\,13\,0\.35\)\] { box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.85); }

/* States */
.opacity-50 { opacity: 0.5; }
.disabled\:opacity-60:disabled { opacity: 0.6; }
.hover\:bg-foreground:hover { background-color: var(--foreground); }
.hover\:text-background:hover { color: var(--background); }

/* Breakpoints, in the sheet's own order */
@media (min-width: 40rem) {
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sm\:flex-1 { flex: 1 1 0%; }
  .sm\:w-auto { width: auto; }
  .sm\:grid-cols-\[180px_minmax\(0\,1fr\)\] { grid-template-columns: 180px minmax(0, 1fr); }
}

@media (min-width: 48rem) {
  .md\:block { display: block; }
  /* The rail is wider than KolPaid's, so the page starts further in. */
  .md\:pl-\[196px\] { padding-left: 196px; }
}

@media (min-width: 64rem) {
  .lg\:justify-between { justify-content: space-between; }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_320px\] { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* The vote panel on a coin that pays itself. */
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }