/* Credits Wallet Rarity — editorial: thin rules, magenta accent, rounded corners, light and dark themes.
 *
 * Type is split by job. Inter carries UI text, headings and trait labels; IBM
 * Plex Mono carries anything you would compare down a column — scores, counts,
 * percentages, token ids, wallet addresses and the data tables — always with
 * tabular-nums so digits line up. Mixing the two is the point: the prose stops
 * looking like a terminal, the numbers stay a ledger.
 *
 * Surfaces sit on a warm off-white ground as white cards with a soft elevation
 * and a consistent corner radius: 14px for the big surfaces, 10px for the
 * controls inside them, 8px for image plates and 6px for badges — the smaller
 * the element, the tighter the corner, so nothing reads as a pill. The shadow
 * does the separating, so hairlines are used sparingly — for the editorial
 * rules that structure the page, not to outline every box.
 */

:root {
  --ink: #111;
  --mid: #666;
  --dim: #999;
  --faint: #aaa;
  --rule: #e0ded8;
  --wash: #f0eee9;
  --paper: #fff;      /* raised surfaces */
  --ground: #f1f1ee;  /* the page behind them, dark enough that white pops */
  --accent: #e6007e;
  --on-ink: #fff;     /* text on top of --ink surfaces (buttons) */
  --k: #111;          /* the K in the CMYK wordmark */
  --k-shadow: rgba(17, 17, 17, 0.28);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
          Consolas, "Liberation Mono", monospace;

  /* One elevation, used everywhere, so the whole page reads as a single system:
     a tight contact shadow plus a wide soft one. Surfaces are separated by this
     ALONE — no outlines — so it has to carry real weight. */
  --lift: 0 2px 4px rgba(0, 0, 0, 0.08), 0 14px 36px rgba(0, 0, 0, 0.16);
  --lift-hi: 0 6px 10px rgba(0, 0, 0, 0.10), 0 24px 56px rgba(0, 0, 0, 0.22);
}

/* Dark mode: a dark-gray ground rather than black, with the cards one step
   lighter so the elevation still reads. Chosen by the toggle in the masthead
   (persisted in localStorage) or, with no choice saved, by the OS preference. */
:root[data-theme="dark"] {
  --ink: #ececea;
  --mid: #b0b0ad;
  --dim: #8a8a87;
  --faint: #6f6f6c;
  --rule: #3a3a3a;
  --wash: #3a3a3a;
  --paper: #2b2b2b;
  --ground: #1f1f1f;
  --on-ink: #1a1a1a;
  --k: #f2f2f0;
  --k-shadow: rgba(0, 0, 0, 0.55);
  --lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.5);
  --lift-hi: 0 6px 10px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ececea;
    --mid: #b0b0ad;
    --dim: #8a8a87;
    --faint: #6f6f6c;
    --rule: #3a3a3a;
    --wash: #3a3a3a;
    --paper: #2b2b2b;
    --ground: #1f1f1f;
    --on-ink: #1a1a1a;
    --k: #f2f2f0;
    --k-shadow: rgba(0, 0, 0, 0.55);
    --lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.5);
    --lift-hi: 0 6px 10px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The ledger face: everything you would read as a number or an identifier. */
.mono,
.summary .addr,
.stat .v,
.stat .s,
.chip .n,
.phase .count,
.controls .n,
.card .id,
.card .nums,
.dist-row .cnt,
.dist-row .pct,
.dist-row .own,
.bits-axis,
.tip-addr,
form.lookup input,
table.traits-table td {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: inherit; }
a:hover { color: var(--accent); }

button, input, select { font: inherit; color: inherit; }

/* The radius scale, in one place so it stays consistent. */
.card, .stat, .dist-card, .notice, .tips, form.lookup { border-radius: 14px; }
.btn, .chip, form.lookup input { border-radius: 10px; }
.card .thumb { border-radius: 8px; }
.badge { border-radius: 6px; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 16px 72px;
}

/* ---------- header ---------- */

.masthead { border-bottom: 1px solid var(--ink); padding-bottom: 18px; position: relative; }

/* Theme toggle: top-right of the masthead, styled like a small ghost button. */
.theme-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  color: var(--mid);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--lift);
  transition: color 0.15s, background 0.15s;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle .sun, .theme-toggle .moon { width: 14px; height: 14px; display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root:not([data-theme="dark"]) .theme-toggle .moon { display: block; }

.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The wordmark is the one place the 8×8 grid the art is drawn on shows up in
   the type. Pixel faces want no optical tracking and no antialiasing — both
   would blur the steps between pixels — so the negative letter-spacing and the
   smoothing the rest of the page uses are turned off here only. */
h1.wordmark {
  margin: 10px 0 4px;
  font-family: "Pixelify Sans", "Silkscreen", var(--mono);
  font-weight: 700;
  font-size: clamp(28px, 6.2vw, 46px);
  letter-spacing: 0;
  line-height: 1.15;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

/* "Brypto" cycles the CMYK palette the Credits plates are printed from.
   The letters are decorative spans; the aria-label on the wrapper is what a
   screen reader announces. */
.brypto .c { color: #00b7eb; }
.brypto .m { color: #e6007e; }
.brypto .y { color: #ffd500; }
.brypto .k { color: var(--k); }

/* Yellow on this ground is about 1.6:1 on its own. A one-pixel hard shadow —
   no blur, so it stays a pixel — holds every letter's edge, and on a pixel face
   it reads as part of the lettering rather than as a patch. */
.brypto span { text-shadow: 2px 2px 0 var(--k-shadow); }

.tagline { margin: 0; font-size: 13px; color: var(--mid); }

/* Collection links: a wrapping row of separated labels rather than a list, so
   it holds one line on a laptop and folds cleanly on a phone. */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  font-size: 12px;
}
.links a {
  color: var(--mid);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* The input and its buttons are one raised bar, not three separate chips: a
   single shadow around the row, and nothing inside it casts its own. */
form.lookup {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 22px;
  padding: 10px;
  background: var(--paper);
  box-shadow: var(--lift);
  flex-wrap: wrap;
}

form.lookup input {
  flex: 1 1 300px;
  min-width: 0;
  padding: 12px 12px;
  border: none;
  background: transparent;
  font-size: 14px;
}
form.lookup input::placeholder { color: var(--faint); }
form.lookup input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
form.lookup .btn { box-shadow: none; }

.btn {
  padding: 13px 24px;
  border: none;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--lift);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 600;
  transition: box-shadow 0.15s, background 0.15s, color 0.15s;
}
.btn:hover:not(:disabled) {
  background: var(--accent);
  box-shadow: var(--lift-hi);
}
.btn:disabled { opacity: 0.45; cursor: progress; box-shadow: none; }
/* Inside the white bar a white button would vanish, so the secondary action is
   a light wash rather than an outline. */
.btn.ghost { background: var(--wash); color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--on-ink); }

.samples {
  margin-top: 12px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--dim);
  min-height: 1.4em;   /* reserved so filling the note does not jump the page */
}

/* ---------- status / progress ---------- */

.status { margin-top: 24px; }
.status[hidden] { display: none !important; }

.phase {
  display: grid;
  grid-template-columns: 96px 1fr 220px;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
}
.phase .label {
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600; color: var(--mid);
}
.phase .track { height: 4px; background: var(--wash); position: relative; overflow: hidden; }
.phase .bar { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width 0.2s; }
.phase.done .bar { background: var(--accent); }
.phase .count { text-align: right; color: var(--dim); white-space: nowrap; }
.phase .bar.indeterminate { animation: slide 1.1s ease-in-out infinite; }

@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .phase .bar.indeterminate { animation: none; width: 100% !important; opacity: 0.4; }
  .btn, .card, .tip-copy { transition: none; }
}

.notice {
  background: var(--paper);
  border-left: 4px solid var(--accent);
  box-shadow: var(--lift);
  padding: 18px 20px;
  margin-top: 20px;
  font-size: 13px;
}

/* ---------- summary ---------- */

.summary { margin-top: 36px; }
.summary .addr {
  padding: 12px 0 14px;
  font-size: 12px;
  color: var(--mid);
  word-break: break-all;
}
.summary .addr b { color: var(--ink); font-weight: 500; }

/* Tiles, not a hairline grid: each stat is its own raised surface. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 20px;
}
.stat { background: var(--paper); box-shadow: var(--lift); padding: 22px; }
.stat .k {
  font-family: var(--sans);
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
}
.stat .v { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px; }
.stat .s { font-size: 11px; color: var(--mid); }
.stat .v.accent { color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 12px; padding: 22px 0 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: none;
  box-shadow: var(--lift);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  user-select: none;
}
.chip .n { font-weight: 500; letter-spacing: 0; }
.chip.muted { opacity: 0.45; }

/* The formula, collapsed by default: there when someone asks "how", invisible
   when they do not. */
.explainer {
  margin-top: 22px;
  background: var(--paper);
  box-shadow: var(--lift);
  border-radius: 14px;
  padding: 4px 20px;
  font-size: 12px;
}
.explainer > summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  letter-spacing: 0.02em;
  list-style-position: inside;
}
.explainer > summary:hover { color: var(--accent); }
.explainer-body { padding-bottom: 16px; color: var(--mid); max-width: 78ch; }
.explainer-body p { margin: 0 0 9px; }
.explainer-body p.formula {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--wash);
  border-radius: 8px;
  padding: 9px 12px;
  overflow-x: auto;
  white-space: pre-wrap;
}
.explainer-body a { color: var(--accent); }
.explainer-body p.bands { color: var(--ink); }

/* The annotated graphic. Square and large, so it is capped well short of the
   panel width on a desktop and simply fills it on a phone. */
.formula-fig { margin: 18px 0 20px; }
.formula-fig a { display: block; max-width: 560px; }
.formula-fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--lift);
}
.formula-fig a:hover img { box-shadow: var(--lift-hi); }

.explainer-body .plain-h {
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* Provenance and the places the data does not match the neat story. */
.explainer-body p.caveat {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--faint);
}
.explainer-body p.caveat a { color: var(--mid); }
.explainer-body p.caveat a:hover { color: var(--accent); }

/* On the empty state this is the only thing on the page, so give it air. */
#explain:not(:empty) { margin-top: 26px; }
#explain .explainer { margin-top: 0; }

/* Colors takes no part in the score, so its panel never takes the accent. */
.dist-card.unscored-card h3 { color: var(--faint); }

/* ---------- controls ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 34px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.controls .spacer { flex: 1 1 auto; }
.controls .n { font-size: 11px; color: var(--mid); }

/* ---------- grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 28px;
  margin-top: 24px;
}

.card {
  background: var(--paper);
  box-shadow: var(--lift);
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.card:hover { box-shadow: var(--lift-hi); transform: translateY(-2px); }
.card.open {
  box-shadow: var(--lift-hi);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  grid-column: 1 / -1;
  cursor: default;
  transform: none;
}

.card .thumb {
  width: 100%;
  aspect-ratio: 1;
  background: var(--wash);
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}
.card.open .thumb { max-width: 320px; }

.card .head {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.card .id {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.card .skeleton { color: var(--faint); font-size: 11px; }

.badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
/* LEGENDARY is the longest label; at the narrowest card it needs the tracking
   back rather than an ellipsis. */
@media (max-width: 400px) {
  .card .badge { letter-spacing: 0.04em; padding: 3px 6px; }
}

/* The score is the one number people came for, so it gets the size; the rank
   underneath is what gives it scale. */
.card .scoreline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.card .score-k {
  font-family: var(--sans);
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
}
.card .score-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1;
}
.card .score-rank {
  flex: 1 0 100%;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--mid);
}
.card.open .score-v { font-size: 38px; }

/* One row per scored trait: the value, then its own −w·ln p. */
.card .traits {
  font-size: 11px; color: var(--mid);
  display: flex; flex-direction: column; gap: 2px;
}
.card .traits .t { display: flex; justify-content: space-between; gap: 10px; }
.card .traits .t b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink); font-weight: 500;
}
.card .traits .t.top { color: var(--accent); }
.card .traits .t.top b { color: var(--accent); font-weight: 600; }

.card .detail { border-top: 1px solid var(--rule); padding-top: 12px; }
.card.open .body { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.card.open .body > .col { flex: 1 1 280px; min-width: 0; }

table.traits-table { width: 100%; border-collapse: collapse; font-size: 12px; }
table.traits-table th {
  font-family: var(--sans);
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--rule); padding: 5px 8px 5px 0;
}
table.traits-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--wash); }
table.traits-table td.num { text-align: right; padding-right: 0; }
table.traits-table tr.top td { color: var(--accent); font-weight: 500; }
table.traits-table tr.unscored td { color: var(--faint); }

.detail-links { margin-top: 12px; display: flex; gap: 14px; font-size: 11px; flex-wrap: wrap; }

/* ---------- distribution ---------- */

section.dist { margin-top: 64px; }
.section-head { border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 18px; }
.section-head h2 {
  margin: 0; font-size: 15px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.section-head p { margin: 5px 0 0; font-size: 12px; color: var(--mid); max-width: 70ch; }

.dist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }

.dist-card { background: var(--paper); box-shadow: var(--lift); padding: 20px; }
.dist-card h3 {
  margin: 0 0 11px; font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
}

.dist-row {
  display: grid;
  grid-template-columns: 60px 1fr 52px 48px 32px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  padding: 2px 0;
}
.dist-row .lab { font-family: var(--sans); color: var(--mid); overflow: hidden; text-overflow: ellipsis; }
.dist-row .track { height: 6px; background: var(--wash); position: relative; overflow: hidden; }
.dist-row .fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.dist-row .cnt { text-align: right; color: var(--faint); }
.dist-row .pct { text-align: right; color: var(--dim); }
.dist-row .own { text-align: right; color: var(--faint); font-size: 10px; }
.dist-row .own.zero { visibility: hidden; }
.dist-row.hit .lab, .dist-row.hit .pct { color: var(--accent); font-weight: 600; }
.dist-row.hit .fill { background: var(--accent); }
.dist-row.hit .own { color: var(--accent); font-weight: 500; }

.bits-card { grid-column: 1 / -1; }
.bits-chart { display: flex; align-items: flex-end; gap: 1px; height: 130px; }
.bits-chart .b { flex: 1 1 0; background: var(--ink); min-width: 1px; }
.bits-chart .b.hit { background: var(--accent); }
.bits-axis { display: flex; justify-content: space-between; font-size: 9px; color: var(--faint); margin-top: 5px; }
.bits-legend { margin-top: 8px; font-size: 11px; color: var(--mid); }
.bits-legend .hit { color: var(--accent); font-weight: 600; }

/* ---------- footer ---------- */

footer {
  margin-top: 64px;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  font-size: 12px;
  color: var(--mid);
  line-height: 1.7;
}
footer a { text-decoration: underline; }

.built {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-weight: 600;
  color: var(--ink);
}
.built a { color: var(--accent); }

/* Tips. The address is shown in full — a truncated donation address is not
   something anyone should have to trust — so it may wrap mid-string on a phone
   while the copy button stays whole beside it. */
.tips {
  background: var(--paper);
  box-shadow: var(--lift);
  border-left: 3px solid var(--accent);
  padding: 20px;
  margin-bottom: 20px;
}
/* Long enough that uppercase micro-label tracking would fight it, so this one
   label stays sentence case while the short ones elsewhere keep their caps. */
.tips .k {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  max-width: 62ch;
}
.tip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 9px;
}
.tip-addr {
  font-size: 12px;
  color: var(--ink);
  word-break: break-all;
  min-width: 0;
}
.btn.tiny {
  padding: 7px 14px;
  font-size: 10px;
  flex: 0 0 auto;
}
.btn.tiny.copied { background: var(--accent); color: #fff; }

.empty { padding: 48px 0; text-align: center; color: var(--dim); font-size: 13px; }

@media (max-width: 520px) {
  .wrap { padding: 20px 14px 56px; }
  body { font-size: 14px; }
  .phase { grid-template-columns: 66px 1fr 132px; gap: 8px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .card { padding: 14px; }
  .stats { gap: 14px; }
  .stat { padding: 16px; }
  .dist-grid { gap: 16px; }
  .dist-card { padding: 16px; }
  .dist-row { grid-template-columns: 48px 1fr 46px 42px 28px; gap: 6px; }
  .bits-chart { height: 92px; }
  /* A hover lift is meaningless on touch and only causes reflow jitter. */
  .card:hover { transform: none; }
}

/* ---------- all.html: the whole collection ---------- */

/* The status line doubles as the loading / error message on this page. */
.status.all-status { font-size: 11px; color: var(--mid); font-family: var(--mono); }
.status.error { color: var(--accent); }

.all-controls[hidden] { display: none !important; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin-top: 12px;
  padding: 16px;
  background: var(--paper);
  box-shadow: var(--lift);
  border-radius: 14px;
}
.filters .field { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.filters .field.grow { flex: 1 1 160px; }
.filters .field.narrow { min-width: 80px; }
.filters .field > span {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim);
}
.filters input, .filters select {
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--ground);
  color: var(--ink);
  font-size: 13px;
}
.filters input { font-family: var(--mono); }
.filters input:focus, .filters select:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.filters .btn.tiny { align-self: flex-end; }

/* Band chips are buttons here; pressed = filter on. Unpressed chips dim so the
   active set reads at a glance. */
.chip.band-chip { border: none; cursor: pointer; font: inherit; }
.chip.band-chip[aria-pressed="false"] { opacity: 0.45; }
.chip.band-chip:hover { opacity: 1; }

.table-wrap { overflow-x: auto; margin-top: 14px; -webkit-overflow-scrolling: touch; }
table.all-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 860px; }
table.all-table th {
  position: sticky; top: 0; background: var(--ground);
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--rule); padding: 8px 10px 8px 0;
}
table.all-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--wash); white-space: nowrap; }
table.all-table th.num, table.all-table td.num { text-align: right; }
table.all-table td.num, table.all-table td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.all-table td.id a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
table.all-table td.id a:hover { color: var(--accent); border-bottom-color: var(--accent); }
table.all-table td.score { font-weight: 500; font-size: 14px; }
table.all-table td.thumb-cell { width: 28px; padding-right: 4px; }
table.all-table img.mini { width: 28px; height: 28px; display: block; image-rendering: pixelated; background: var(--wash); border-radius: 4px; }
table.all-table td.links-cell a { font-size: 11px; color: var(--mid); }
table.all-table td.links-cell a:hover { color: var(--accent); }
table.all-table tr:hover td { background: var(--paper); }

.empty { font-size: 13px; color: var(--mid); margin: 24px 0; }
.more-row { display: flex; justify-content: center; margin: 22px 0 8px; }

/* Grid / Table switch: a two-button segment, styled like the filters' inputs. */
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg .view-btn {
  padding: 8px 14px; border: none; background: var(--ground); color: var(--mid);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}
.seg .view-btn + .view-btn { border-left: 1px solid var(--rule); }
.seg .view-btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

/* The picture grid: image first, then id + band, then the score. Cards are
   links, so the whole tile goes to the token's breakdown. */
.all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.all-grid[hidden], .table-wrap[hidden] { display: none !important; }
.gcard {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: var(--paper);
  box-shadow: var(--lift);
  border-radius: 14px;
  color: inherit; text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
}
.gcard:hover { box-shadow: var(--lift-hi); transform: translateY(-2px); color: inherit; }
.gthumb {
  width: 100%; aspect-ratio: 1 / 1; display: block;
  background: var(--wash); border-radius: 8px;
  image-rendering: pixelated; object-fit: contain;
}
.ghead { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.gid { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.gnums { display: flex; align-items: baseline; gap: 8px; }
.gscore { font-family: var(--mono); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.grank { font-family: var(--mono); font-size: 10px; color: var(--dim); }
@media (max-width: 520px) {
  .all-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
  .gcard { padding: 10px; }
}