/* Paxel-style re-skin: light mode, Space Grotesk, black ink + greens, sharp edges.
   Palette: #ffffff / #000000 / #02ff9a (bright green) / #0c492c (dark green).
   Loaded after each page's inline styles so these declarations win the cascade. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* How far the dithered rails below push <body>'s content in from each edge.
     Published as a variable because anything absolutely positioned inside the
     page has to subtract it to know where the viewport edge actually is — the
     chart menu budgets its max-width from this. A literal here is invisible to
     those callers, which is exactly how the menu ended up overflowing the page
     by a full rail width. 0 until the rails appear at 1100px. */
  --page-inset: 0px;
  --bg: #ffffff;
  --surface: #f5f5f3;
  --surface-hover: #ccffe9;
  --surface-active: #a8ffdc;
  --border: rgba(12, 73, 44, 0.5);
  --border-accent: #0c492c;
  --text: #000000;
  --text-muted: #333333;
  --text-dim: #6b6b6b;
  --accent: #0c492c;
  --accent-dim: rgba(2, 255, 154, 0.18);
  --green: #0c492c;
  --green-dim: rgba(2, 255, 154, 0.25);
  --red: #dc2626;
  --red-dim: rgba(220, 38, 38, 0.12);
  --yellow: #0c492c;
}

* {
  border-radius: 0 !important;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif !important;
}

/* No motion anywhere: kill all CSS animations and transitions */
*, *::before, *::after {
  animation: none !important;
  transition: none !important;
}

html, body {
  background: #ffffff !important;
  color: #000000 !important;
}

a { color: inherit; }

::selection {
  background: #02ff9a;
  color: #000000;
}

/* Crisp ink lines instead of soft dark shadows */
button, input, select, textarea {
  color: #000000 !important;
}

/* Custom dropdown chevron, inset from the box edge */
select {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 2.25rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.875rem center !important;
  background-size: 10px 6px !important;
  background-color: var(--surface-hover) !important;
}

img {
  border-radius: 0 !important;
}

/* Scrollbars inside elements (modals, wide tables) stay hidden — scrolling
   still works, no visible bar. */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* The page scrollbar is the exception: visible, and drawn as the last column of
   the dithered rail it sits against rather than a control bolted to the edge.
   Same #0fbf74 as the rail's ink, a white gutter, a hairline
   against the rail, and the square corners the rest of the site uses.
   Firefox has no scrollbar pseudo-elements, so it gets the nearest thing its
   two standard properties can express. */
html {
  scrollbar-width: thin !important;
  scrollbar-color: #0fbf74 #ffffff;
}

/* Chrome and Safari can draw it properly — but only once scrollbar-color is
   handed back to `auto`. While that property is set, Chrome renders its own
   rounded pill from it and ignores every pseudo-element below, which is how the
   bar ended up a dark rounded lozenge against a square-edged site. */
@supports selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
  }
  html::-webkit-scrollbar { display: block; width: 12px; height: 12px; background: #ffffff; }
  html::-webkit-scrollbar-track {
    /* Hairline as a gradient stop, not a border: Chrome ignores borders here. */
    background: linear-gradient(to right, rgba(15, 191, 116, 0.35) 0 1px, #ffffff 1px);
  }
  html::-webkit-scrollbar-thumb {
    /* padding-box turns the border into a gutter rather than a green edge, so
       the thumb reads as a 6px bar with air around it. The border is transparent
       rather than white so the track's hairline runs behind it unbroken. The
       universal border-radius reset does not reach pseudo-elements — hence the
       explicit 0. */
    background: #0fbf74;
    border: 3px solid transparent;
    border-radius: 0;
    background-clip: padding-box;
  }
  html::-webkit-scrollbar-thumb:hover { background: #0c492c; background-clip: padding-box; }
  html::-webkit-scrollbar-corner { background: #ffffff; }
}

/* Dithered side rails — fixed columns at each screen edge, dense at the
   outer edge fading inward, with a 1px dark-green inner rule. */
@media (min-width: 1100px) {
  :root { --page-inset: 200px; }
  body {
    padding-left: var(--page-inset) !important;
    padding-right: var(--page-inset) !important;
  }
  body::before,
  body::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 180px;
    z-index: 1; /* below modal backdrops so overlays cover the rails */
    pointer-events: none;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: 180px auto;
    image-rendering: pixelated;
  }
  /* The rails carried a 1px #0fbf74 inner rule. Removed 2026-08-13 — against
     the dense outer edge of the dither it read as one thick dark-green bar
     rather than a hairline. The dithered texture itself is unchanged. */
  body::before {
    left: 0;
    background-image: url('/static/dither-left.png');
  }
  body::after {
    right: 0;
    background-image: url('/static/dither-right.png');
  }
}

/* NEW badge: solid ink so it reads distinctly from the green gain badge */
.badge-new {
  background: #111111;
  color: #ffffff;
}