/* KolPaid on top of the original stylesheet.
   The original is a dark sheet with one set of colours in :root. This turns
   the site over to daylight by redefining that set, and then fixes the few
   places the original drew for a dark background: hairlines made of white,
   a gold that needs to be darker to be read on white, and the glow it put
   under things. */
:root {
  color-scheme: light;

  --background: #ffffff;
  --foreground: #0c0f0d;
  --card: #ffffff;
  --panel: #f6f7f6;
  --panel-2: #eceeec;
  --border: #0c0f0d1a;
  --muted-foreground: #5b625e;

  --primary: #12b981;
  --primary-foreground: #ffffff;

  /* Gold has to carry on white, so it is the ink of a coin rather than its
     shine, with the bright one kept for the face of the coin itself. */
  --gold: #a87508;
  --gold-ink: #fff6d8;
  --gold-face: #f5c518;

  --destructive: #d92d20;
  --up: #0f9d58;
  --down: #d92d20;
}

/* The original paints a white sheen over every tile; on white that is
   invisible and the tile loses its edge, so it gets a faint floor instead. */
.tile {
  background-image: none;
  box-shadow: 0 1px 2px rgba(12, 15, 13, 0.04);
}

.card-lift:hover .tile,
.tile.card-lift:hover {
  box-shadow: 0 10px 24px -14px rgba(12, 15, 13, 0.25);
}

/* Gold text glowed in the dark. In daylight it simply reads. */
.gold-text {
  color: var(--gold);
  text-shadow: none;
}
.gold-shimmer {
  background-image: linear-gradient(100deg, var(--gold) 0%, var(--gold) 40%, #d9a520 50%, var(--gold) 60%, var(--gold) 100%);
  filter: none;
}
.bg-gold {
  background-color: var(--gold-face);
}
.text-gold {
  color: var(--gold);
}

.receipt-paper {
  background: #fbf7ec;
  color: #1a1a1a;
  box-shadow: 0 10px 30px -18px rgba(12, 15, 13, 0.4);
}

.focus-ring:focus-visible {
  outline: 2px solid var(--foreground);
  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 daylight as the page. The only bright
   thing on it is the button that launches a coin. */
.sidenav {
  background: var(--background);
  color: var(--foreground);
  border-right: 1px solid var(--border);
}
.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);
}

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

/* The stage behind the picture in the Get paid film. */
.stage {
  background: linear-gradient(180deg, #eef7f2 0%, #dff0e7 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(18, 185, 129, 0.5);
}

/* The one drop shadow the original sized for a black page. */
.shadow-\[0_30px_80px_-20px_rgba\(0\,0\,0\,0\.7\)\] {
  box-shadow: 0 24px 60px -28px rgba(12, 15, 13, 0.28);
}

/* 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=2) 50% / contain no-repeat;
  mask: url(/brand/mark.png?v=2) 50% / contain no-repeat;
}