/* ============================================================================
   memefimarketcap — design system.

   The layout, density and interaction patterns follow the market-data
   leaderboard genre that CoinMarketCap established: a dense sortable table
   with a numeric rank, a logo+name+ticker identity cell, right-aligned
   numerics, signed green/red deltas with carets, a 7-day sparkline in the last
   data column, a sticky header, sticky identity columns under horizontal
   scroll, a strip of global stats above it, a chip/filter row, and pagination
   with a rows-per-page control. Those are genre conventions.

   The identity is this site's own: its wordmark and mark, amber as the accent
   (never CMC's blue), teal reserved as a semantic colour for the equity side,
   our own icon set drawn inline, and our own copy.

   Measurements were taken off the real thing so the density is right rather
   than guessed: 12px/700 column headers in a 40px header row, 14px/500 cells
   in a 57px row, 1px hairline dividers. See ../../references/.

   One departure, deliberate: every number here is set in a monospaced face
   with tabular figures. CMC uses proportional figures, which is why its
   columns only align because they are right-aligned. Tabular figures align
   digit-by-digit, which is what makes a column of prices scan as a column
   rather than as a list.
   ========================================================================= */

/* ------------------------------------------------------------------ font -- */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
          Arial, 'Noto Sans', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1680px;
  --gut: 16px;
  --row-h: 60px;
  --head-h: 40px;
  --bar-h: 60px;

  --r-sm: 5px;
  --r: 8px;
  --r-lg: 12px;
}

/* Light — the default. A white, bright, dense data surface. */
html[data-theme='light'] {
  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #f8fafd;
  --surface-3: #f1f4f9;
  --text:      #0d1421;
  --text-2:    #3b475c;
  --muted:     #616e85;
  --faint:     #8c98ad;
  --line:      #eef1f5;
  --line-2:    #dfe4ec;

  --up:        #14a45a;
  --up-bg:     #e8f7ee;
  --down:      #d4304a;
  --down-bg:   #fdecef;
  --flat:      #8c98ad;

  /* brand — amber. Chrome only: the mark, the active tab rule, primary
     buttons, focus rings. It never appears inside a numeric cell, so it
     cannot be mistaken for a price direction. */
  --accent:    #a15c07;
  --accent-2:  #e8912d;
  --accent-bg: #fdf3e4;

  /* equity — teal. Semantic, not decorative: it marks the stock side of the
     pairing everywhere it appears. */
  --eq:        #0b7c72;
  --eq-2:      #12a094;
  --eq-bg:     #e6f6f4;
  --eq-band:   #f4fbfa;

  --shadow:    0 1px 2px rgba(13, 20, 33, .06), 0 4px 14px rgba(13, 20, 33, .05);
  --stick-sh:  6px 0 8px -6px rgba(13, 20, 33, .16);
}

html[data-theme='dark'] {
  --bg:        #0b0e14;
  --surface:   #11151d;
  --surface-2: #161b25;
  --surface-3: #1c222e;
  --text:      #e9edf4;
  --text-2:    #b6c0d0;
  --muted:     #8994a6;
  --faint:     #656f81;
  --line:      #1c2330;
  --line-2:    #29313f;

  --up:        #2ecc80;
  --up-bg:     #12321f;
  --down:      #f2536d;
  --down-bg:   #35141c;
  --flat:      #656f81;

  --accent:    #e8912d;
  --accent-2:  #f5a94d;
  --accent-bg: #2a1e0c;

  --eq:        #2fc9ba;
  --eq-2:      #45ded0;
  --eq-bg:     #0d2a29;
  --eq-band:   #0e1a1e;

  --shadow:    0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .35);
  --stick-sh:  6px 0 8px -6px rgba(0, 0, 0, .55);
}

/* ----------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { display: block; }
table { border-collapse: separate; border-spacing: 0; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 3px;
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* Every number on the page. Monospaced and tabular so digits stack.
   Column HEADERS stay in the sans face — they are labels, not figures. */
.mono, .num, .tbl td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 0;
  letter-spacing: -.012em;
}

/* The ticker tape lived here. Element, builder and rules all removed
   2026-08-31 (mf-declutter) — client feedback: page furniture above the
   table. Nothing else on the site used .tape-*; theme.js still sets the
   `still` class for review screenshots, which is now a no-op here and is
   left alone because redesign.css and the shot scripts both reference it. */

/* ================================================================= masthead */
.bar {
  position: sticky; top: 0; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--gut);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

/* Our mark: one square split on the diagonal — the meme side in amber, the
   equity side in teal. The product thesis, at 24px. */
.brand-mk {
  width: 24px; height: 24px; border-radius: 6px; overflow: hidden;
  display: block; position: relative; flex: 0 0 auto;
  background: var(--accent-2);
}
.brand-mk span {
  position: absolute; inset: 0; display: block;
  background: var(--eq-2);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.brand-mk span + span {
  background: var(--surface);
  clip-path: polygon(46% 0, 54% 0, 54% 100%, 46% 100%);
  transform: rotate(45deg) scale(1.5);
  opacity: .95;
}
.brand-tx b {
  display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.024em;
  line-height: 1.1;
}
.brand-tx b em { font-style: normal; font-weight: 400; color: var(--muted); }
.brand-tx i {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .075em;
  text-transform: uppercase; color: var(--eq); font-weight: 700; margin-top: 1px;
}

.bar-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.bar-nav a {
  padding: 7px 10px; border-radius: var(--r-sm); font-size: 13.5px;
  font-weight: 600; color: var(--text-2);
}
.bar-nav a:hover { background: var(--surface-3); color: var(--text); }

.bar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.chip-chain {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-bg);
  border: 1px solid var(--accent-2); border-radius: 4px; padding: 3px 6px;
}

/* search — masthead placement, like the genre */
.srch { position: relative; display: flex; align-items: center; }
.srch svg {
  position: absolute; left: 10px; width: 15px; height: 15px; color: var(--faint);
  pointer-events: none;
}
.srch input {
  width: 240px; height: 36px; padding: 0 30px 0 32px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r); font-size: 13.5px;
}
.srch input::placeholder { color: var(--faint); }
.srch input:focus { outline: none; border-color: var(--accent-2); background: var(--surface); }
.srch .clr {
  position: absolute; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  color: var(--muted); font-size: 15px; line-height: 1;
}
.srch .clr:hover { background: var(--surface-3); color: var(--text); }

.tbtn {
  height: 36px; padding: 0 12px; border: 1px solid var(--line-2);
  border-radius: var(--r); font-size: 13px; font-weight: 600; color: var(--text-2);
  background: var(--surface);
}
.tbtn:hover { border-color: var(--accent-2); color: var(--text); }

/* ============================================================== notice bar */
.notice {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
}
.notice-in {
  max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gut);
  display: flex; gap: 10px; align-items: baseline;
}
.notice b {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .07em;
  color: var(--accent); border: 1px solid var(--accent-2); border-radius: 4px;
  padding: 2px 5px; flex: 0 0 auto; text-transform: uppercase;
}
.notice strong { color: var(--text); }
.notice .short { display: none; }

/* ================================================================= nav tabs */
.tabs {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  display: flex; gap: 22px; white-space: nowrap;
}
.tabs button {
  padding: 13px 0 11px; font-size: 15px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected='true'] { color: var(--text); border-bottom-color: var(--accent-2); }

/* ============================================================== stat cards */
.stats {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px;
  padding: 14px 0 4px;
}
.card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 12px 14px 13px;
}
.card-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; margin-bottom: 9px;
}
.card-h span { font-size: 11px; font-weight: 500; color: var(--faint); }

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kpi {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px 10px;
}
.kpi.is-eq { background: var(--eq-band); border-color: var(--eq-bg); }
.kpi i {
  display: block; font-style: normal; font-size: 10.5px; color: var(--muted);
  margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 700; letter-spacing: -.03em; display: block;
}
.kpi.is-eq b { color: var(--eq); }
.kpi small { font-size: 10.5px; color: var(--faint); }

/* the two mini leaderboards inside the cards */
.mini { display: flex; flex-direction: column; gap: 1px; }
.mini a {
  display: grid; grid-template-columns: 14px 22px 1fr auto; gap: 8px;
  align-items: center; padding: 5px 4px; border-radius: var(--r-sm);
  font-size: 12.5px;
}
.mini a:hover { background: var(--surface-2); }
.mini .m-rk { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.mini .m-lg { width: 22px; height: 22px; border-radius: 50%; }
.mini .m-tk { font-weight: 700; }
.mini .m-tk span { color: var(--muted); font-weight: 500; margin-left: 5px; font-size: 11.5px; }
.mini .m-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px;
  text-align: right;
}
.mini .m-v i { display: block; font-style: normal; font-size: 11px; }

/* ============================================================== chip / tools */
.tools {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 11px; border-bottom: 1px solid var(--line);
}
.chips {
  display: flex; align-items: center; gap: 6px; overflow-x: auto;
  scrollbar-width: none; flex: 1 1 auto; min-width: 0;
}
.chips::-webkit-scrollbar { display: none; }
.chips button {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 32px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.chips button:hover { border-color: var(--faint); color: var(--text); }
.chips button[aria-pressed='true'] {
  background: var(--accent-bg); border-color: var(--accent-2); color: var(--accent);
}
.chips .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; }

.tools-r { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ------------------------------------------------ listing policy note ----- */
/* The table shows a few thousand of ninety thousand launches. This line states
   both numbers and the rule, and lazily loads the excluded set on request.
   It sits above the table because a caveat below the fold is not a caveat. */
.listing-note {
  margin: 0; padding: 11px 0 0;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.listing-note b { color: var(--text-2); font-weight: 700; }
.listing-note span { display: inline; }
.listing-note button {
  display: inline; padding: 0; margin-left: 4px;
  border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.listing-note button:disabled { color: var(--faint); cursor: default; }
.untraded {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
}
.untraded p { margin: 0 0 8px; }
.untraded .untraded-cap { color: var(--faint); font-size: 11.5px; }
.untraded ul {
  margin: 0; padding: 0; list-style: none;
  max-height: 300px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px;
}
.untraded li {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11.5px; padding: 2px 0; border-bottom: 1px solid var(--line);
}
.untraded code { font-family: var(--mono); font-weight: 700; color: var(--text-2); }
.untraded li span { color: var(--muted); }
.untraded li em { margin-left: auto; font-style: normal; color: var(--faint); font-size: 11px; }

/* An empty stat card says why it is empty rather than showing a zero. */
.mini-empty {
  margin: 0; padding: 10px 3px; font-size: 12px; line-height: 1.5; color: var(--muted);
}
.sel {
  height: 32px; padding: 0 26px 0 10px; border: 1px solid var(--line-2);
  border-radius: var(--r); background: var(--surface); font-size: 12.5px;
  font-weight: 600; color: var(--text-2); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 10px) 14px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.sel:hover { border-color: var(--faint); }
.count {
  font-family: var(--mono); font-size: 11.5px; color: var(--faint); white-space: nowrap;
}

/* ==================================================================== table */
/* A sticky header and sticky columns cannot both hang off one element.
   CSS will not let a box scroll on one axis only: `overflow-x: auto` with a
   `visible` y computes y to `auto`, and with a `clip` y computes y to
   `hidden`. Either way the wrapper becomes a scroll container and swallows
   the header's `top:` — it pins to the wrapper (which never scrolls
   vertically) instead of to the viewport, and ends up parked below the first
   row. There is no combination that gives page-scroll AND wrapper-scroll.

   So the behaviour is split by width, and each width gets the one that is
   actually right for it:

   WIDE — all 14 columns fit, so nothing needs to scroll sideways. The
   wrapper is `visible`, the page scrolls, and the header pins under the
   masthead. This is the genre-standard behaviour and the one on the desktop
   review screenshot.

   NARROW — the columns do not fit. The wrapper becomes a real two-axis
   scroll region with a viewport-height cap, which makes it a frozen-pane
   grid: the header pins to the top of the region and the star / rank / name
   columns pin to its left edge while the figures scroll under them. */
.tbl-scroll {
  overflow: visible;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.tbl { width: 100%; min-width: 1320px; }

/* --- header --- */
/* pins under the sticky masthead when the page scrolls; re-anchored to 0 in
   the narrow query, where it pins to the top of the scroll region instead */
.tbl thead th {
  position: sticky; top: var(--head-top, 60px); z-index: 20;
  height: var(--head-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
  padding: 0 10px;
  font-size: 12px; font-weight: 700; color: var(--text);
  text-align: left; white-space: nowrap;
  vertical-align: middle;
}
.tbl thead th.num { text-align: right; }
.tbl thead th button.srt {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: inherit; padding: 0;
}
.tbl thead th.num button.srt { flex-direction: row; }
.tbl thead th button.srt:hover { color: var(--accent); }

/* the stacked double caret, dimmed until the column is the active sort */
.caret { width: 7px; height: 11px; flex: 0 0 auto; color: var(--faint); }
.caret path { fill: currentColor; }
.tbl th[aria-sort] button.srt { color: var(--accent); }
.tbl th[aria-sort] .caret { color: var(--accent); }
.tbl th[aria-sort='ascending'] .caret .cd,
.tbl th[aria-sort='descending'] .caret .cu { opacity: .25; }

.info {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--faint); color: var(--muted);
  font-size: 9px; font-weight: 700; line-height: 12px; text-align: center;
  margin-left: 5px; vertical-align: middle; font-family: var(--sans);
}
.info:hover { border-color: var(--accent); color: var(--accent); }

/* --- body --- */
.tbl tbody td {
  height: var(--row-h);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px; font-weight: 500;
  vertical-align: middle;
  white-space: nowrap;
}
.tbl tbody td.num { text-align: right; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tbody tr:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.tbl tbody tr.is-dead td { color: var(--faint); }
.tbl tbody tr.is-dead .nm-name { color: var(--muted); }

/* sticky identity columns — star, rank, name. They hold their ground while
   the numeric columns scroll under them, which is what makes a 14-column
   table usable on a phone.

   The `left` offsets are written by app.js from the columns' measured
   positions. Hard-coding them here does not survive contact with the table
   layout algorithm: the rendered widths drift from the declared ones, and a
   sticky cell whose natural position is LEFT of its `left` value gets shoved
   right, overlapping the column beside it. */
.tbl .c-star { position: sticky; left: 0; z-index: 10; width: 34px; padding: 0 0 0 6px; }
.tbl .c-rank { position: sticky; left: 0; z-index: 10; width: 40px; padding-left: 0; }
.tbl .c-name { position: sticky; left: 0; z-index: 10; min-width: 268px; }
.tbl thead .c-star, .tbl thead .c-rank, .tbl thead .c-name { z-index: 30; }
.tbl-scroll.is-scrolled .c-name::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: -1px; width: 8px;
  transform: translateX(100%); box-shadow: var(--stick-sh); pointer-events: none;
}

.star { width: 22px; height: 22px; color: var(--faint); display: block; }
.star svg { width: 14px; height: 14px; margin: 0 auto; }
.star:hover { color: var(--accent-2); }
.star[aria-pressed='true'] { color: var(--accent-2); }
.star[aria-pressed='true'] svg path { fill: currentColor; }

.tbl td.c-rank { font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-align: left; }

/* --- name cell --- */
.nm { display: flex; align-items: center; gap: 10px; }
.logo, .logo-ph {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface-3); object-fit: cover;
}
.logo-ph {
  display: grid; place-items: center; font-family: var(--mono);
  font-size: 10px; font-weight: 700; color: var(--muted);
}
.nm-tx { min-width: 0; }
.nm-top { display: flex; align-items: baseline; gap: 7px; }
.nm-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.nm-tk {
  font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted);
}
.nm-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.nm-sub .lp { font-size: 11px; color: var(--faint); }
/* market cap under the ticker — a phone-only line, switched on in the
   narrow media query below. Declared here so the query can override it. */
.nm-mc { display: none; }

.tag {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .05em;
  padding: 1px 4px; border-radius: 3px; border: 1px solid currentColor;
  text-transform: uppercase;
}
.tag-live { color: var(--up); }
.tag-mock { color: var(--faint); }
.tag-dead { color: var(--down); }

/* --- the pairing column: the differentiator, as a first-class column --- */
.pair-c { width: 132px; }
.plate {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px;
  border: 1px solid var(--eq-bg); background: var(--eq-band);
  border-radius: var(--r-sm); padding: 4px 8px; min-width: 104px;
}
.plate-t { display: flex; align-items: center; gap: 4px; }
.plate-t b {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--eq);
}
.plate-lock { width: 9px; height: 9px; color: var(--eq); flex: 0 0 auto; }
.plate-b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--muted);
}
.plate-b .chg { font-size: 10.5px; margin-left: 4px; }

/* --- numeric cells --- */
.tbl td.px { font-size: 14px; font-weight: 500; }
.chg {
  display: inline-flex; align-items: baseline; gap: 3px; justify-content: flex-end;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 500;
}
.chg .car { font-size: 8px; line-height: 1; position: relative; top: -1px; }
.chg.up   { color: var(--up); }
.chg.down { color: var(--down); }
.chg.flat { color: var(--flat); }

/* --- STOCK LOCKED IN POOL ---------------------------------------------- */
/* The column no competitor has, so it is treated as an object rather than a
   cell: a teal band running the full height of the table, a depth meter
   scaled against the largest position in the table, a padlock, and two lines
   of figures — share count in the stock's own ticker, USD beneath.
   NEVER labelled "treasury": this liquidity is permanently locked and
   unwithdrawable, and "treasury" reads as a spendable balance. */
.tbl .c-lock {
  background: var(--eq-band);
  border-left: 1px solid var(--eq-bg);
  border-right: 1px solid var(--eq-bg);
  width: 168px;
}
.tbl thead .c-lock { border-bottom-color: var(--eq-2); }
.tbl thead .c-lock button.srt { color: var(--eq); }
.tbl thead .c-lock .caret { color: var(--eq); }
.tbl tbody tr:hover td.c-lock { background: var(--eq-bg); }
.lk { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.lk-units {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 700; color: var(--eq);
  display: flex; align-items: baseline; gap: 4px;
}
.lk-units span { font-size: 10px; font-weight: 400; color: var(--muted); }
.lk-usd {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--muted);
}
.lk-meter {
  width: 92px; height: 3px; border-radius: 2px; background: var(--eq-bg);
  overflow: hidden; margin-top: 1px;
}
.lk-meter i { display: block; height: 100%; background: var(--eq-2); border-radius: 2px; }
.lock-i { width: 10px; height: 10px; color: var(--eq); flex: 0 0 auto; }

/* --- fee reinvestment rate --- */
.fee { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.fee b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 500;
}
.fee.is-zero b { color: var(--faint); }
.fee.is-default b { color: var(--eq); }
.fee-bar { width: 46px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fee-bar i { display: block; height: 100%; background: var(--eq-2); }
.fee.is-zero .fee-bar i { background: var(--faint); }

/* --- sparkline --- */
.spk { width: 116px; height: 34px; display: block; margin-left: auto; }
.spk.up   { color: var(--up); }
.spk.down { color: var(--down); }
.spk.flat { color: var(--flat); }

/* ============================================================== pagination */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 22px 0 28px; flex-wrap: wrap;
}
.pages { display: flex; align-items: center; gap: 4px; }
.pages button {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text-2);
}
.pages button:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.pages button[aria-current='page'] {
  background: var(--accent); color: #fff; font-weight: 700;
}
.pages button:disabled { color: var(--line-2); cursor: default; }
.pages .gap { color: var(--faint); padding: 0 2px; font-family: var(--mono); }
.pager-r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }

.empty {
  padding: 60px 20px; text-align: center; color: var(--muted); font-size: 14px;
}
.empty b { display: block; font-size: 17px; color: var(--text); margin-bottom: 6px; }

/* =================================================================== footer */
.foot {
  border-top: 1px solid var(--line); background: var(--surface-2);
  margin-top: 10px; padding: 30px 0 22px; font-size: 12.5px; color: var(--muted);
}
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.foot h4 {
  margin: 0 0 9px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text);
}
.foot p { margin: 0 0 9px; line-height: 1.55; }
.foot strong { color: var(--text-2); }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { padding: 3px 0 3px 17px; position: relative; line-height: 1.5; }
.foot li::before { position: absolute; left: 0; font-weight: 700; }
.always li::before { content: '✓'; color: var(--up); }
.never  li::before { content: '✕'; color: var(--down); }
.foot-b {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-top: 16px; font-size: 11.5px; color: var(--faint);
}
.foot-b a { color: var(--accent); font-weight: 600; }

/* ================================================================== tooltip */
.tip {
  position: fixed; z-index: 120; max-width: 330px;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 11px 13px;
  font-size: 12.5px; line-height: 1.5;
  opacity: 0; visibility: hidden; transition: opacity .12s;
}
.tip.on { opacity: 1; visibility: visible; }
.tip b {
  display: block; color: var(--eq); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px;
}
.tip em { font-style: normal; color: var(--text); font-weight: 600; }

/* ============================================================ coin detail  */
.dt { padding-top: 18px; padding-bottom: 40px; }
.crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.crumb a { color: var(--accent); font-weight: 600; }
.crumb span { margin: 0 5px; }

.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.hero-id { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hero-id .logo, .hero-id .logo-ph { width: 52px; height: 52px; }
.hero-h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.hero-tk {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font-family: var(--mono); font-size: 13px; color: var(--muted);
}

.pairing {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.pairing-t {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.pairing-b { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 14px; }
.pairing-side b {
  display: block; font-family: var(--mono); font-size: 19px; font-weight: 700;
  letter-spacing: -.03em;
}
.pairing-side i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px; }
.pairing-side.meme b { color: var(--accent); }
.pairing-side.stk { text-align: right; }
.pairing-side.stk b { color: var(--eq); }
.pairing-x {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2);
  position: relative; background: var(--surface-2);
}
.pairing-x::before, .pairing-x::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px;
  background: var(--faint); transform: translate(-50%, -50%) rotate(45deg);
}
.pairing-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pairing-n {
  margin: 0; padding: 10px 14px; border-top: 1px solid var(--line);
  background: var(--surface-2); font-size: 12px; color: var(--muted); line-height: 1.5;
}

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px;
  background: var(--surface);
}
.tile.hi { background: var(--eq-band); border-color: var(--eq-bg); }
.tile b {
  display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 700; letter-spacing: -.03em;
}
.tile.hi b { color: var(--eq); }
.tile i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px; }
.tile small { display: block; font-size: 11px; color: var(--faint); margin-top: 5px; }

.sec { margin-top: 34px; }
.sec-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.sec-h h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.sec-h span { font-size: 12px; color: var(--faint); }

.chart-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.chart-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.chart-ttl { font-size: 13px; font-weight: 700; }
.lgd { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); }
.lgd i { display: inline-block; width: 10px; height: 2.5px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.lgd .sw-meme { background: var(--accent-2); }
.lgd .sw-stk { background: var(--eq-2); }
.chart-body { position: relative; padding: 12px 14px 6px; }
.chart-svg { width: 100%; height: 300px; display: block; overflow: visible; }

/* Comparison chart marks. Both series are indexed to 100 and share one axis —
   a memecoin at fractions of a cent and a share at hundreds of dollars have no
   honest shared scale otherwise. Amber is the memecoin side, teal the equity
   side; each line is also labelled at its right end, so the colour is not
   carrying the identification on its own. */
.chart-svg .grid { stroke: var(--line); stroke-width: 1; }
.chart-svg .grid.base { stroke: var(--line-2); }
.chart-svg .axl {
  fill: var(--faint); font-family: var(--mono); font-size: 10px; text-anchor: end;
}
.chart-svg .ln { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .ln.meme { stroke: var(--accent-2); }
.chart-svg .ln.stk  { stroke: var(--eq-2); }
.chart-svg .endl { font-family: var(--mono); font-size: 10.5px; font-weight: 700; }
.chart-svg .endl.meme { fill: var(--accent); }
.chart-svg .endl.stk  { fill: var(--eq); }
.chart-svg .cross { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .dot { stroke: var(--surface); stroke-width: 2; }
.chart-svg .dot.meme { fill: var(--accent-2); }
.chart-svg .dot.stk  { fill: var(--eq-2); }
.chart-note {
  margin: 0; padding: 11px 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); line-height: 1.55;
}
.ctip {
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 8px 10px; font-size: 11.5px; white-space: nowrap;
}
.ctip.on { opacity: 1; }

.two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start; }
.pull {
  margin: 0 0 14px; font-size: 17px; line-height: 1.45; font-weight: 600;
  color: var(--text); border-left: 3px solid var(--accent-2); padding-left: 14px;
}
.prose p { margin: 0 0 12px; line-height: 1.65; color: var(--text-2); font-size: 14px; }
.prose .drop::first-letter {
  float: left; font-size: 40px; line-height: .86; font-weight: 700;
  padding: 3px 8px 0 0; color: var(--accent);
}

.facts { margin: 0; font-size: 12.5px; }
.facts div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.facts dt { color: var(--muted); flex: 0 0 auto; }
.facts dd {
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; overflow: hidden; text-overflow: ellipsis;
}

/* The provenance list sits under the facts and is deliberately quieter — it is
   there to be checked, not read. */
.prov-h { margin-top: 22px; }
#provenance dd { font-family: var(--sans); color: var(--muted); font-size: 11.5px; }

/* Missing rather than zero. Both of these states exist because the data can
   genuinely be absent, and an absent value has to look absent. */
.chart-none {
  margin: 0; padding: 34px 22px; text-align: center;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface-2);
}
.lore-none { color: var(--muted); font-style: italic; }
.lore-src { margin: 12px 0 0; font-size: 11.5px; color: var(--faint); }

/* Pool composition. Both segments are directly labelled, so the colour is
   never the only thing carrying the meaning. */
.pool-bar { display: flex; gap: 2px; height: 34px; margin-bottom: 14px; }
.pool-seg {
  display: grid; place-items: center; min-width: 0; overflow: hidden;
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: #fff;
  border-radius: var(--r-sm); white-space: nowrap;
}
.pool-seg.meme { background: var(--accent); }
.pool-seg.stk  { background: var(--eq); }
.pool-seg.empty {
  flex: 1 1 auto; background: var(--surface-2); color: var(--muted);
  border: 1px dashed var(--line-2); font-family: var(--sans); font-weight: 500;
  font-size: 11.5px; padding: 0 12px; text-align: center; white-space: normal;
  line-height: 1.35;
}
.pool-rows { font-size: 12.5px; }
.pool-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.pool-row i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; }
.pool-row .sw-meme { background: var(--accent-2); }
.pool-row .sw-stk { background: var(--eq-2); }
.pool-row b { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.honest { display: grid; gap: 12px; }
.hon { border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; }
.hon h5 {
  margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
.hon.yes { border-color: var(--up); }
.hon.yes h5 { color: var(--up); }
.hon.no { border-color: var(--down); }
.hon.no h5 { color: var(--down); }
.hon ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-2); }
.hon li { padding: 3px 0 3px 16px; position: relative; line-height: 1.5; }
.hon li::before { position: absolute; left: 0; font-weight: 700; }
.hon.yes li::before { content: '✓'; color: var(--up); }
.hon.no li::before { content: '✕'; color: var(--down); }

/* ============================================================ about page ==
   about.html is the one prose surface on the site and the one page written to
   be indexed and linked. It reuses the detail page's section furniture
   (.sec / .two / .prose / .honest) and adds only what prose needs: a numbered
   step list, a Q&A block, and the disclaimer panel. */

/* The three consequences of the substitution. Numbered because they are
   sequential — each follows from the one above — which a bulleted list would
   not say. Counter rather than list-style so the numeral can carry the accent
   and sit in the gutter at a fixed width. */
.steps { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: s; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 11px 34px; line-height: 1.6; color: var(--text-2);
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--accent-2);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.steps b { color: var(--text); }

/* Q&A. Two columns on a wide screen because the answers are short and a
   single 1680px-wide column of 12-word lines is unreadable. */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.qa {
  border-top: 1px solid var(--line-2);
  padding: 14px 0 4px;
}
.qa h3 {
  margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--text);
  line-height: 1.4;
}
.qa p { margin: 0; font-size: 13px; line-height: 1.62; color: var(--text-2); }
.qa b, .qa strong { color: var(--text); }
.qa code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-3); border-radius: 3px; padding: 1px 4px;
}

/* The disclaimer. Bordered in the down colour because it is the one block on
   the site that exists to say no — but at low saturation, since it is a
   standing legal statement, not an alert about anything. */
.disc {
  border: 1px solid var(--line-2); border-left: 3px solid var(--down);
  border-radius: var(--r); background: var(--surface-2);
  padding: 16px 18px; max-width: 900px;
}
.disc p { margin: 0 0 10px; font-size: 13px; line-height: 1.62; color: var(--text-2); }
.disc p:last-child { margin-bottom: 0; }
.disc strong { color: var(--text); }

@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
}

/* ============================================================== responsive */
/* Below this the 14 columns stop fitting, so the table becomes a frozen-pane
   scroll region: header pinned to its top, identity columns pinned to its
   left. See the note on .tbl-scroll for why this cannot be one behaviour. */
@media (max-width: 1400px) {
  .tbl { min-width: 1240px; }
  .srch input { width: 190px; }

  .tbl-scroll {
    overflow: auto;
    max-height: calc(100vh - 132px);
    max-height: calc(100dvh - 132px);
    border-bottom: 1px solid var(--line);
  }
  .tbl thead th { --head-top: 0px; }
}

@media (max-width: 1080px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .card:first-child { grid-column: 1 / -1; }
  .hero, .two { grid-template-columns: 1fr; }
  .bar-nav { display: none; }
}

@media (max-width: 760px) {
  :root { --row-h: 56px; --gut: 12px; }

  .bar { gap: 10px; }
  .brand-tx i { display: none; }
  .chip-chain { display: none; }
  .srch input { width: 130px; }

  /* The stat cards become a swipeable rail rather than a stack. Stacked they
     cost two full screens before the table appears, which is the opposite of
     what this page is for. */
  .stats {
    display: flex; gap: 10px; padding: 12px 0 4px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut);
  }
  .stats::-webkit-scrollbar { display: none; }
  .stats .card { flex: 0 0 86%; scroll-snap-align: start; padding: 11px 12px 12px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 7px; }
  .kpi { padding: 7px 9px; }
  .kpi b { font-size: 16px; }
  .mini a { padding: 4px 3px; }

  .notice-in { padding: 7px var(--gut); }
  .notice .long { display: none; }
  .notice .short { display: inline; }

  .tools { flex-direction: column; align-items: stretch; gap: 9px; }
  .tools-r { justify-content: space-between; }
  .tools-r .sel { flex: 1 1 0; min-width: 0; }
  .count { display: none; }

  /* The table STAYS a table. Cards would lose the column comparison that is
     the entire point of a leaderboard — and the genre keeps the table on a
     phone, with the identity columns pinned and the numbers scrolling under
     them. Only the type and the identity cell compact. */
  .tbl { min-width: 1080px; }
  .tbl thead th { font-size: 11px; padding: 0 8px; }
  .tbl tbody td { font-size: 12.5px; padding: 5px 8px; }
  /* widths only — the sticky `left` offsets are measured and applied by
     app.js, which re-measures on resize */
  .tbl .c-star { width: 28px; padding-left: 3px; }
  .tbl .c-rank { width: 30px; }
  .tbl .c-name { min-width: 152px; }

  .logo, .logo-ph { width: 24px; height: 24px; }
  .nm { gap: 7px; }
  /* ticker-first on a phone: the full name will not fit in 152px and the
     ticker is what a reader is scanning for */
  .nm-name { display: none; }
  .nm-tk { font-size: 12.5px; font-weight: 700; color: var(--text); }
  .nm-sub .lp { display: none; }
  .nm-mc {
    display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 10.5px; color: var(--muted); margin-top: 1px;
  }

  .chg { font-size: 12px; }
  .spk { width: 82px; height: 28px; }
  .plate { min-width: 88px; padding: 3px 6px; }
  .tbl .c-lock { width: 140px; }
  .lk-units { font-size: 12.5px; }
  .lk-meter { width: 70px; }

  .foot-grid { grid-template-columns: 1fr; gap: 22px; }
  .hero-h1 { font-size: 24px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .chart-svg { height: 230px; }
}

/* --------------------------------------------------------- anomaly note --- */
/* The plausibility guard's public receipt. Styled as a quiet notice rather than
   an alarm: in the healthy case it reads "0 coins excluded", and a permanent
   red banner announcing that nothing is wrong trains people to ignore it. The
   accent bar is enough to mark it as a different kind of statement from the
   listing note above it. */
.anomaly-note {
  margin: 12px 0 0; padding: 11px 0 0 13px;
  border-left: 2px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.anomaly-note b { color: var(--text-2); font-weight: 700; }
.anomaly-note .an-sub { display: block; margin-top: 7px; }

.anomaly-list {
  margin: 11px 0 0; padding: 11px 13px; list-style: none;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  max-height: 320px; overflow-y: auto;
}
.anomaly-list li {
  display: grid; gap: 2px 10px; padding: 7px 0;
  grid-template-columns: minmax(90px, auto) minmax(48px, auto) auto 1fr;
  border-top: 1px solid var(--line);
}
.anomaly-list li:first-child { border-top: 0; padding-top: 0; }
.anomaly-list code {
  font-family: var(--mono, ui-monospace, monospace); font-weight: 700; color: var(--text-2);
}
.anomaly-list span { color: var(--faint); }
/* The excluded figure IS shown in scientific notation, deliberately. Here it is
   labelled as a rejected value rather than presented as a market fact, and
   "7.16e+52" is the honest and readable way to write it — the ban on exponential
   applies to the headline totals, which are claims about the market. */
.anomaly-list .an-val {
  font-family: var(--mono, ui-monospace, monospace); font-weight: 700; color: var(--down, #d9534f);
}
.anomaly-list em { font-style: normal; color: var(--muted); font-size: 11.5px; }
.anomaly-list small { grid-column: 1 / -1; color: var(--faint); font-size: 11.5px; }

@media (max-width: 640px) {
  .anomaly-list li { grid-template-columns: 1fr auto; }
  .anomaly-list em { grid-column: 1 / -1; }
}