:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #202020;
  background: #fff;
}

body {
  max-width: 42rem;
  margin: 3rem auto 4rem;
  padding: 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

header { margin-bottom: 2rem; }
header p { margin: .25rem 0 0; }
article { margin: 0; }
h1 { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.25rem; }
.juicebox-logo { width: 1.25rem; height: auto; flex-shrink: 0; margin-left: clamp(-2rem, calc((100% - 100vw) / 2 + 2rem), 0rem); transform: translateY(-.125rem); }
h2 { margin: 0 0 1.25rem; font-size: 1em; font-weight: 600; }
p { margin: 0 0 1.25rem; }
section + section { margin-top: 3rem; }
strong { font-weight: 600; }
a { color: #0000b8; text-underline-offset: .15em; }
a:visited { color: #551a8b; }
a:focus-visible, summary:focus-visible, .holders-scroll:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
ol { margin: 0; padding-left: 1.5rem; }
li { padding-left: .25rem; }
li + li { margin-top: 2rem; }
li p:last-child { margin-bottom: 0; }

.bannys { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 1.5rem 0 2rem; }
.bannys img { display: block; width: 25%; height: auto; aspect-ratio: 1 / 2; object-fit: cover; object-position: 40% center; image-rendering: pixelated; }

details { margin-top: 3rem; }
summary { cursor: pointer; padding: .5rem 0; text-decoration: underline; text-underline-offset: .15em; }
details[open] > summary { margin-bottom: 1.5rem; }
details h2 { margin-top: 2rem; }
dl { margin: 0 0 1.5rem; }
dt { font-weight: 600; }
dd { margin: 0 0 .75rem; }
footer { margin-top: 3rem; }
footer p { margin: 0 0 .5rem; }

.snapshot-date, .snapshot-source { font-size: .9375rem; }
.jbx-facts > div { margin-bottom: 1rem; }
.jbx-facts dt { font-weight: 400; }
.jbx-facts dd { font-size: 1.25rem; font-weight: 600; margin: 0; }
#current-jbx details, #liquidity-pools { margin: 1.25rem 0; }
.holders-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .9375rem; }
.holders-scroll { overflow-x: auto; }
.holders-table th, .holders-table td { padding: .5rem .25rem; text-align: right; vertical-align: top; }
.holders-table th:first-child { text-align: left; width: 55%; }
.holders-table th[scope="row"] { font-weight: 400; }
.holders-table tbody tr { border-top: 1px solid #ddd; }
.holders-table .holder-details { border-top: 0; padding-top: 0; }
.holders-table .holder-details > td { text-align: left; padding-top: 0; }
.holders-scroll + p { margin-top: 1rem; }
.holder-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.holder-note { display: block; font-size: .875rem; }
.holder-address { font-size: .8125rem; white-space: nowrap; }
.rank { color: #555; font-weight: 400; }
.mobile-label { display: none; }
.pool { padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid #ddd; }
.pool h3 { font-size: 1em; margin: 0 0 .25rem; }
.pool-meta { font-size: .9375rem; margin-bottom: .75rem; }
.pool-balances > div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.pool-balances dt { font-weight: 400; }
.pool-balances dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
#liquidity-method { margin-top: 1rem; }

@media (max-width: 600px) {
  .holders-table, .holders-table tbody, .holders-table tr, .holders-table th[scope="row"], .holders-table td { display: block; width: auto; }
  .holders-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .holders-table tr { padding: .75rem 0; }
  .holders-table th[scope="row"], .holders-table td { text-align: left; padding: .15rem .25rem; }
  .mobile-label { display: inline; font-weight: 600; }
  .pool-balances > div { display: block; margin-bottom: .75rem; }
}

@media (min-width: 600px) {
  .jbx-facts > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
}

.skip-link { position: absolute; top: -10rem; left: 1rem; padding: .5rem; background: #fff; }
.skip-link:focus { top: .5rem; }

@media (max-width: 480px) {
  body { margin-top: 1.5rem; }
  .bannys img { width: 50%; }
}

#refresh-jbx { font: inherit; margin: .3rem 0 .3rem .3rem; padding: .25rem .65rem; color: #111; background: #f5f5f5; border: 1px solid #aaa; border-radius: 3px; cursor: pointer; }
#refresh-jbx:disabled { cursor: wait; opacity: .65; }
#refresh-status { margin: .1rem 0; }
#refresh-status:empty { display: none; }

header .bannys { margin: 1rem 0; }
.page-section { margin: 0; border-top: 1px solid #ddd; }
.page-section:last-child { border-bottom: 1px solid #ddd; }
.page-section > summary { padding: 1rem 0; text-decoration: none; }
.page-section > summary h2 { display: inline; margin: 0; font-size: 1em; }
.page-section[open] > summary { margin-bottom: 1rem; }
.section-content { padding-bottom: .5rem; }
.section-content h2:first-child { margin-top: 0; }

.jbx-subsection { margin: 0; }
.jbx-subsection > summary { padding: .65rem 0; text-decoration: none; color: #555; font-size: .9em; }
.jbx-subsection > summary h2 { display: inline; margin: 0; font-size: 1em; font-weight: 500; }
.jbx-subsection[open] > summary { margin-bottom: .75rem; }

#holders { margin-top: 1rem; }
#holders > summary { padding: .4rem 0; font-size: .85em; color: #666; text-decoration: none; }
#holders[open] > summary { margin-bottom: .75rem; }

.revenue-chart { margin: 1.5rem 0; }
.revenue-chart svg { display: block; width: 100%; height: auto; }
.revenue-chart figcaption { margin-top: .75rem; font-size: .8em; color: #555; }

#revenue .jbx-subsection { margin: 1.25rem 0; }
#revenue .jbx-subsection > summary { font-size: .95em; font-weight: 400; color: #555; text-decoration: none; }
.revenue-table { width: 100%; min-width: 28rem; border-collapse: collapse; font-size: .875rem; }
.revenue-table th, .revenue-table td { padding: .4rem .35rem; text-align: right; }
.revenue-table th:first-child { text-align: left; }
.revenue-table tbody th { font-weight: 400; }
#revenue .source-note { font-size: .875rem; color: #555; }

.revenue-bar > rect:first-of-type { transition: opacity 120ms ease; }
.revenue-bar:hover > rect:first-of-type { opacity: .6; }

.revenue-tooltip { position: fixed; z-index: 10; pointer-events: none; background: #333; color: #fff; padding: 6px 10px; border-radius: 3px; font-size: 14px; line-height: 1.4; white-space: nowrap; }

.revenue-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: 1.5rem 0 .5rem; }
.revenue-total span { color: #555; }
.revenue-total strong { font-size: 1.6em; }