/* ============================================================================
   memefimarketcap — 2026-08-30 client-feedback pass.

   Loaded AFTER app.css and live.css, and it only ever overrides. It is a
   separate file on purpose: app.css is being edited concurrently by the
   real-time job, and two agents editing one 46 KB stylesheet is how work gets
   silently reverted. Everything here is additive and can be reasoned about on
   its own.

   Brief, verbatim: "less crowded, work super well on mobile, make the market
   snapshot / top movers / most equity locked sections half as long, add logos
   for all memecoins and all stock tokens, make the font bigger in general."

   Four changes, in the order they matter:

   1  THE HEADER BLOCK IS HALVED. It used to cost the whole first screen before
      a single row of the table appeared, which is backwards — the table is the
      product. On desktop the three cards lose their inner padding, their KPI
      grid goes from 2x2 to 1x4, and the mini lists drop from five rows to
      three. On a phone the whole block collapses behind a one-line summary
      that states the two numbers worth knowing, closed by default.

   2  THE PHONE LAYOUT IS NOT A SHRUNK TABLE. Below 760px the row stops being
      ten columns behind a horizontal scrollbar and becomes a two-line grid:
      rank, mark, name+ticker, the paired-stock chip, price, one change figure.
      Everything else is one tap away in a drawer. Nothing is dropped, and
      nothing requires sideways scrolling to read a price.

   3  TYPE IS BIGGER THROUGHOUT. Base 14 -> 16px, table rows 14 -> 15px, and
      every numeric class keeps `tabular-nums` — enlarging the figures without
      keeping them monospaced would cost the column alignment that makes this
      genre read as authoritative, which is a bad trade at any size.

   4  MARKS ON BOTH SIDES OF EVERY ROW, and a monogram where there is no
      artwork, so a cell is never empty and an image is never broken.
   ========================================================================= */

/* ------------------------------------------------------- overflow containment */
/* This originally also clipped the scrolling pairings tape, which was
   `width: max-content` and reported a document scrollWidth of 815px against a
   390px body — on a phone Chrome then widens the LAYOUT VIEWPORT to swallow the
   overflow, so the page renders as a zoomed-out desktop layout and every
   `max-width` query answers for a width the device does not have.

   The tape itself was removed on 2026-08-31 (mf-declutter), so its rule is gone
   with it. The document-level clip STAYS: it was load-bearing for that whole
   class of bug, the table is the widest thing on the page and any future
   overflow would reproduce it exactly.

   `clip` rather than `hidden` on purpose: `hidden` makes an element a scroll
   container, which would break the `position: sticky` table header this design
   depends on. `clip` clips without that side effect. */
html { overflow-x: clip; }

/* ---------------------------------------------------------------- type up -- */
/* One step up across the board. The row height moves with it: 15px text in a
   60px row reads as a 14px row with padding, not as a bigger row. */
:root { --row-h: 66px; --head-h: 44px; }

body { font-size: 16px; }

.notice { font-size: 13.5px; }
.tabs button { font-size: 16px; padding: 14px 0 12px; }
.chips button { font-size: 13.5px; height: 34px; padding: 0 13px; }
.sel { font-size: 13.5px; height: 34px; }
.count { font-size: 12.5px; }
.listing-note, .anomaly-note { font-size: 13.5px; }

.tbl thead th, .tbl thead th button.srt { font-size: 13px; }
.tbl tbody td { font-size: 15px; }
.tbl td.px { font-size: 16px; font-weight: 600; }
.tbl td.c-rank { font-size: 13.5px; }
.chg { font-size: 14.5px; }
.nm-name { font-size: 15.5px; max-width: 230px; }
.nm-tk { font-size: 13px; }
.nm-sub .lp { font-size: 12px; }
.lk-units { font-size: 14.5px; }
.lk-usd { font-size: 12.5px; }
.plate-t b { font-size: 13.5px; }
.plate-b { font-size: 12px; }

/* The whole point of the enlargement is that the columns still line up.
   Restated rather than inherited, because these are the elements that grew. */
.tbl td.num, .tbl td.px, .chg, .lk-units, .lk-usd, .plate-b, .kpi b, .m-v,
.tbl td.c-rank, .dw dd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 0;
}

/* ------------------------------------------------------------ header block -- */
/* Half the height, same three sections, same figures. The savings come from
   chrome — inner card padding, the 2x2 KPI grid, and two mini rows nobody
   reads — not from removing information. */
.stats { gap: 10px; padding: 10px 0 2px; }
.card { padding: 9px 12px 10px; border-radius: var(--r); }
.card-h { font-size: 12.5px; margin-bottom: 7px; }
.card-h span { font-size: 11px; }

/* 1x4 instead of 2x2: the card loses a whole row of its own height. */
.kpis { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { padding: 6px 9px; }
.kpi i { font-size: 11px; margin-bottom: 2px; }
.kpi b { font-size: 19px; line-height: 1.15; }
.kpi small { font-size: 10.5px; line-height: 1.3; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mini a {
  grid-template-columns: 24px 1fr auto; gap: 9px;
  padding: 4px 4px; font-size: 13.5px;
}
.mini .m-rk { display: none; }        /* the order already says the rank */
.mini .m-lg { width: 24px; height: 24px; }
.mini .m-tk span { font-size: 12px; }
.mini .m-v { font-size: 12.5px; }
.mini .m-v i { font-size: 11.5px; }

/* The two long explanatory notes stay on the page — they are the receipts for
   the plausibility guard and the listing floor — but they are set as footnotes
   rather than as paragraphs competing with the table. */
.listing-note { padding-top: 9px; line-height: 1.5; }
.anomaly-note { margin-top: 9px; padding-top: 9px; line-height: 1.5; }
.tools { padding: 10px 0 9px; }

/* The folded half of each receipt. Deliberately a plain disclosure and not a
   modal or a tooltip: the text has to stay selectable, linkable and printable,
   because it is the site's account of what it excluded and why. */
.note-why { display: inline; margin-left: 7px; }
.note-why > summary {
  display: inline; cursor: pointer; list-style: none;
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.note-why > summary::-webkit-details-marker { display: none; }
.note-why > summary { white-space: nowrap; }
.note-why > div { margin-top: 6px; color: var(--muted); }

/* ------------------------------------------------------------------ marks -- */
/* A monogram has to look chosen, not missing. Twelve fixed pairs, picked by a
   hash of the symbol so a ticker always gets the same chip; a class rather than
   an inline style because the CSP here forbids style attributes. */
.logo, .logo-ph { width: 30px; height: 30px; }
.logo { object-fit: cover; background: var(--surface-3); }
.logo-ph {
  font-size: 11px; font-weight: 700; letter-spacing: -.02em;
  border: 1px solid transparent;
}
.mg-0  { background: #eef2ff; color: #4351b8; border-color: #dde3fb; }
.mg-1  { background: #fef1f1; color: #b3423f; border-color: #fbdedd; }
.mg-2  { background: #eaf7ef; color: #2c7a4b; border-color: #d6eede; }
.mg-3  { background: #fff4e5; color: #a5641a; border-color: #fae3c6; }
.mg-4  { background: #f2effc; color: #6a45b0; border-color: #e3ddf7; }
.mg-5  { background: #e8f6fa; color: #1d6f88; border-color: #d3ebf3; }
.mg-6  { background: #fdeff7; color: #a53c76; border-color: #f8dcec; }
.mg-7  { background: #f0f4e9; color: #55702b; border-color: #e0e9d3; }
.mg-8  { background: #fdf0ea; color: #ad5424; border-color: #f8ddd0; }
.mg-9  { background: #eaf1f6; color: #3a6183; border-color: #d8e5ef; }
.mg-10 { background: #f6eef4; color: #7d4174; border-color: #ecdde8; }
.mg-11 { background: #e9f5f3; color: #26766c; border-color: #d5ebe7; }

html[data-theme='dark'] .mg-0  { background: #1a1f3a; color: #97a4ea; border-color: #262d4d; }
html[data-theme='dark'] .mg-1  { background: #3a1c1e; color: #ef8f8c; border-color: #4d2629; }
html[data-theme='dark'] .mg-2  { background: #15301f; color: #6ed097; border-color: #1f3f2b; }
html[data-theme='dark'] .mg-3  { background: #33240d; color: #e5ac5f; border-color: #443116; }
html[data-theme='dark'] .mg-4  { background: #251b3c; color: #b295ee; border-color: #33254f; }
html[data-theme='dark'] .mg-5  { background: #102b34; color: #64c2dd; border-color: #183945; }
html[data-theme='dark'] .mg-6  { background: #34172a; color: #e78dbe; border-color: #452038; }
html[data-theme='dark'] .mg-7  { background: #212b17; color: #a8c47a; border-color: #2d3920; }
html[data-theme='dark'] .mg-8  { background: #351f14; color: #e79a6c; border-color: #45291b; }
html[data-theme='dark'] .mg-9  { background: #1a2530; color: #8aaecd; border-color: #24323f; }
html[data-theme='dark'] .mg-10 { background: #2e1b2b; color: #d094c6; border-color: #3d2439; }
html[data-theme='dark'] .mg-11 { background: #122e2b; color: #5fc9bc; border-color: #1b3d39; }

/* The equity side is always teal, whatever the ticker hashes to: the colour is
   semantic on this site — it marks the stock half of the pairing — and letting
   a stock chip come out amber would break that everywhere else. */
.logo-ph.is-eq {
  background: var(--eq-bg); color: var(--eq); border-color: var(--eq-bg);
}

/* --- the paired-stock plate, now with a mark ------------------------------ */
.plate { flex-direction: row; align-items: center; gap: 8px; padding: 4px 9px 4px 5px; }
.plate-lg { width: 24px; height: 24px; font-size: 9.5px; flex: 0 0 auto; }
.plate-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.pair-c { width: 156px; }

/* Above 760px there is nothing to collapse, so the summary is simply hidden and
   the <details> is left open — which is its state in the markup, and which only
   app.js ever changes, and only on a narrow viewport.

   There is deliberately NO `display: grid !important` companion to this rule.
   It was tried and it created a bistable viewport: the desktop grid overflowed
   390px, Chrome's mobile shrink-to-fit widened the layout viewport to 815px to
   accommodate it, at 815px this very query started matching, which re-applied
   the desktop grid, which kept the viewport wide. The page rendered as a
   zoomed-out desktop layout on a phone. Forcing layout from inside a width
   query that the forced layout can itself widen is a feedback loop — the open
   state belongs to the element, not to the breakpoint. */
@media (min-width: 901px) {
  .statwrap > summary { display: none; }
}

/* The header collapses on TABLETS too, not just phones. The row layout switches
   at 760px because that is where ten columns stop fitting; the snapshot block
   has a different threshold, because at 768px (iPad portrait) the three cards
   still rendered at full desktop height and the table opened on two rows. Two
   different problems, two different breakpoints. */
@media (max-width: 900px) {
  .statwrap { border-bottom: 1px solid var(--line); }
  .statwrap > summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 0; font-size: 14px; color: var(--text-2);
    list-style: none;
  }
  .statwrap > summary::-webkit-details-marker { display: none; }
  .statwrap > summary::after {
    content: ''; width: 7px; height: 7px; margin-left: auto; flex: 0 0 auto;
    border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
  }
  .statwrap[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
  .statwrap > summary b {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 15px; font-weight: 700; color: var(--eq);
  }
  .statwrap > summary i { font-style: normal; color: var(--faint); font-size: 13px; }
}

/* --------------------------------------------------------------- expander -- */
/* Desktop has nothing to expand — every figure is already on the row. */
.exp { display: none; }
tr.det { display: none; }

/* ============================================================ phone layout */
/* The row is rebuilt for the width rather than scaled down to it. */
@media (max-width: 760px) {
  :root { --gut: 12px; --row-h: auto; }

  body { font-size: 16px; }

  /* The <summary> itself is styled in the 900px block above — it collapses on
     tablets as well as phones. Only the opened cards are tuned here. */
  .stats { padding: 2px 0 10px; }
  .stats .card { flex: 0 0 88%; padding: 10px 12px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 7px; }
  .kpi b { font-size: 18px; }

  /* The receipts need no phone-specific hiding: both are folded behind a
     disclosure at every width now, so the counts read on one line here too.
     The "show what is excluded" control does go, though — it pulls a 200-row
     list of never-traded launches, which is a desktop research task, and
     keeping it here wrapped the listing line onto a second row. */
  #showUntraded { display: none; }

  .notice-in { padding: 7px var(--gut); }
  .tabs button { padding: 11px 0 9px; font-size: 15px; }

  /* The launchpad chips and the show-selector were stacked, which cost a whole
     44px band before the table for two controls that fit side by side. The
     chips already scroll horizontally, so they simply give up the width. */
  .tools { flex-direction: row; align-items: center; padding: 8px 0; gap: 8px; }
  .tools-r { flex: 0 0 auto; }
  .tools-r .sel { flex: 0 0 auto; max-width: 46vw; }
  .listing-note { padding-top: 7px; }
  .anomaly-note { margin-top: 7px; padding-top: 7px; }

  /* --- the table becomes a list of rows ---------------------------------- */
  /* No horizontal scroll, no pinned columns, no minimum width. `display:block`
     on the table elements takes the table layout algorithm out of the picture
     entirely, which is what lets each row become its own two-line grid. */
  .tbl-scroll {
    overflow: visible;
    max-height: none;
    border-bottom: 0;
  }
  .tbl { display: block; min-width: 0; width: 100%; }
  .tbl thead { display: none; }
  .tbl tbody { display: block; }

  /* Three columns, not four. The expander is a button INSIDE the name cell —
     a table row can only contain cells, so it cannot be a grid item of the row
     itself and `grid-area` would never reach it. It is anchored to the row's
     right edge instead, and the row reserves the space with padding. */
  .tbl tbody tr.r {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    grid-template-areas:
      "rank name price"
      "rank pair chg";
    align-items: center;
    column-gap: 9px; row-gap: 3px;
    padding: 10px 34px 11px 0;
    border-bottom: 1px solid var(--line);
  }
  /* EVERY per-cell rule below is written against this same base selector.
     They have to be: `.tbl tbody tr.r > td` is specificity (0,2,3), so a
     shorter `.tbl .c-lock { display: none }` at (0,2,0) silently loses to it
     and the cell stays in the grid, auto-placing itself and wrecking the two
     rows. Matching the base selector exactly keeps source order in charge. */
  .tbl tbody tr.r > td {
    display: block; height: auto; padding: 0; border: 0; background: none;
    white-space: nowrap; overflow: hidden; min-width: 0;
  }
  .tbl tbody tr:hover td { background: none; }

  /* the sticky machinery is meaningless once nothing scrolls sideways.
     `left` is cleared in JS too — it is written as an inline style, which
     no stylesheet rule can outrank. */
  .tbl tbody tr.r > td.c-star,
  .tbl tbody tr.r > td.c-rank,
  .tbl tbody tr.r > td.c-name { position: static; }
  .tbl-scroll.is-scrolled .c-name::after { display: none; }

  /* Watchlist and the four secondary figures leave the row. The figures are
     all repeated in the drawer below; the star stays on desktop and on each
     coin's own page. */
  .tbl tbody tr.r > td.c-star,
  .tbl tbody tr.r > td.c-mc,
  .tbl tbody tr.r > td.c-vol,
  .tbl tbody tr.r > td.c-lock,
  .tbl tbody tr.r > td.c-hold { display: none; }

  .tbl tbody tr.r > td.c-rank {
    grid-area: rank; text-align: left;
    font-size: 12.5px; color: var(--faint);
  }
  .tbl tbody tr.r > td.c-name { grid-area: name; }
  .tbl tbody tr.r > td.pair-c { grid-area: pair; width: auto; overflow: visible; }
  .tbl tbody tr.r > td.px { grid-area: price; text-align: right; font-size: 16px; font-weight: 700; }
  .tbl tbody tr.r > td.c-chg { grid-area: chg; text-align: right; }

  /* identity: the mark, then the ticker, then the name under it. Ticker-first
     because that is what someone is scanning a leaderboard for. */
  .nm { gap: 9px; }
  .logo, .logo-ph { width: 32px; height: 32px; }
  .nm-tx { min-width: 0; flex: 1 1 auto; }
  .nm-top { flex-direction: row-reverse; justify-content: flex-end; gap: 6px; align-items: baseline; }
  .nm-tk { font-size: 15.5px; font-weight: 700; color: var(--text); order: -1; }
  .nm-name {
    display: block; font-size: 12.5px; font-weight: 500; color: var(--muted);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .nm-sub { margin-top: 0; }
  .nm-sub .lp, .nm-mc { display: none; }

  /* the stock chip sits on the second line, under the name */
  .plate { padding: 3px 8px 3px 4px; gap: 6px; min-width: 0; }
  .plate-lg { width: 20px; height: 20px; font-size: 8.5px; }
  .plate-t b { font-size: 12.5px; }
  .plate-b { font-size: 11px; }
  .chg { font-size: 13.5px; }

  /* --- the drawer -------------------------------------------------------- */
  .exp {
    display: grid; place-items: center;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%;
    color: var(--muted); background: var(--surface-2);
  }
  .exp svg { width: 13px; height: 13px; transition: transform .15s; }
  .exp[aria-expanded='true'] { color: var(--accent); background: var(--accent-bg); }
  .exp[aria-expanded='true'] svg { transform: rotate(180deg); }

  tr.det { display: block; }
  tr.det[hidden] { display: none; }
  tr.det > td {
    display: block; height: auto; white-space: normal;
    padding: 11px 12px 12px; border: 0;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
  }
  .dw { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
  .dw > div { min-width: 0; }
  .dw dt { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
  .dw dd {
    margin: 0; font-family: var(--mono); font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis;
  }
  .dw dd i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12.5px; }
  .dw-go {
    display: inline-block; margin-top: 11px; font-size: 13.5px; font-weight: 700;
    color: var(--accent);
  }

  .pager { padding: 14px 0 20px; }
}

/* 360px is the narrowest phone still in real use. Everything above must hold
   here too — the only concession is trimming the fixed columns. */
@media (max-width: 380px) {
  :root { --gut: 10px; }

  /* At 360px the masthead ran out of room and the theme button, being the only
     shrinkable thing left, was squeezed to one letter per line. The search
     field gives up the width instead — it is the element that can afford to. */
  .bar-r { gap: 6px; min-width: 0; }
  .srch { min-width: 0; }
  .srch input { width: 100%; min-width: 0; }
  .tbtn { flex: 0 0 auto; white-space: nowrap; }
  .tbl tbody tr.r { grid-template-columns: 18px 1fr auto; column-gap: 7px; padding-right: 30px; }
  .exp { width: 26px; height: 26px; }
  .logo, .logo-ph { width: 29px; height: 29px; }
  .nm { gap: 7px; }
  .nm-tk { font-size: 14.5px; }
  .tbl td.px { font-size: 15px; }
  .chg { font-size: 12.5px; }
  .plate-b { display: none; }        /* the stock's own price is in the drawer */
  .dw { grid-template-columns: 1fr; }
}