/* The feed card: the tab track, chain pills and filter, then the table.
   The card is a size container, so columns drop by the width the feed
   gets, not by the width of the screen. The deployer pages reuse it. */

.feed-card { container: feed / inline-size; min-width: 0; }
/* Outside the home frame (a deployer page) the table sits in its own card */
.main > .feed-card { padding: 4px 12px 8px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--ring-card); }
.feed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 4px 12px; }
.tabs {
  display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; scrollbar-width: none;
  background: var(--tile); border-radius: var(--r-input);
}
.tabs::-webkit-scrollbar { display: none; }
.tab, .chip-chain {
  display: inline-flex; align-items: center; flex: none; height: 30px; padding: 0 11px;
  color: var(--ink-muted); font-size: 14px; font-weight: var(--w-heading); white-space: nowrap;
  transition: color var(--quick) var(--ease), background-color var(--quick) var(--ease);
}
.tab { border-radius: var(--r-segment); }
.tab:hover, .chip-chain:hover { color: var(--ink); }
.tab[aria-current="page"] { background: var(--seg-on); color: var(--ink); }
.chains { display: flex; gap: 4px; margin-left: auto; }
.chip-chain { height: 32px; border-radius: var(--r-pill); }
.chip-chain[aria-current="true"] { background: var(--seg-on); color: var(--ink); box-shadow: var(--ring-tile); }

/* The filter: the Filter button shows inside the box once it has focus */
.filter { position: relative; display: flex; align-items: center; }
.filter > .search { position: absolute; left: 11px; color: var(--ink-muted); pointer-events: none; }
.filter input {
  width: 170px; height: 36px; padding: 0 12px 0 34px; border: 0; outline: 0; border-radius: var(--r-input);
  background: var(--tile); box-shadow: var(--ring-tile); color: var(--ink); font-size: 14px;
  transition: width var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.filter input::placeholder { color: var(--ink-muted); opacity: 1; }
.filter input::-webkit-search-cancel-button { display: none; }
.filter input:focus { width: 240px; padding-right: 70px; box-shadow: inset 0 0 0 1px rgba(111, 159, 255, 0.7); }
.filter .ghost { position: absolute; right: 4px; height: 28px; padding: 0 10px; opacity: 0; pointer-events: none; }
.filter:focus-within .ghost { opacity: 1; pointer-events: auto; }

/* The table */
.table-wrap { overflow-x: auto; scrollbar-width: thin; }
.feed, .deployers { width: 100%; font-size: 14px; line-height: 20px; }
.feed th, .feed td, .deployers th, .deployers td {
  padding: 0 8px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--divider);
}
.feed thead th, .deployers thead th { height: 40px; color: var(--ink-muted); font-weight: var(--w-body); }
.feed th[aria-sort] { color: var(--ink-2); }
.feed th .caret { display: inline-block; margin-left: 5px; vertical-align: 0; color: var(--ink-2); }
.feed td, .deployers tbody th, .deployers td { height: 52px; color: var(--ink); }
.feed .num, .deployers .num { text-align: right; }
.feed tbody tr, .deployers tbody tr { transition: background-color var(--quick) var(--ease); }
.feed tbody tr:hover, .deployers tbody tr:hover { background: var(--hover-fill); }
.feed tbody tr[data-href] { cursor: pointer; }
.feed tbody tr:last-child > *, .deployers tbody tr:last-child > * { border-bottom: 0; }

/* Cells */
.tok { display: inline-flex; align-items: center; gap: 10px; min-width: 0; vertical-align: middle; }
.tok-text { display: flex; flex-direction: column; min-width: 0; max-width: 132px; }
.tok-sym {
  overflow: hidden; text-overflow: ellipsis;
  font-size: 15px; line-height: 20px; font-weight: var(--w-title); letter-spacing: -0.1px;
}
.tok-name { overflow: hidden; text-overflow: ellipsis; color: var(--ink-muted); line-height: 18px; }
.c-token .chain-chip, .c-token .chip-boost { margin-left: 4px; vertical-align: middle; }
.spark { width: 80px; height: 24px; margin-left: auto; }
.spark.up { color: var(--up); }
.spark.down { color: var(--down); }
.c-fetched .took { display: block; color: var(--ink-muted); line-height: 18px; }
.dep { color: var(--ink-2); }
.dep:hover { color: var(--ink); }
.c-rank { width: 1%; color: var(--ink-muted); }

/* Column priority by the width of the feed */
.feed [data-p="2"], .feed [data-p="3"], .feed [data-p="4"] { display: none; }
@container feed (min-width: 600px) { .feed [data-p="2"] { display: table-cell; } }
@container feed (min-width: 1180px) { .feed [data-p="3"] { display: table-cell; } }
@container feed (min-width: 1500px) { .feed [data-p="4"] { display: table-cell; } }
.feed .c-rank, .feed .c-vol { display: none; }
/* The Volume tab rules hold on the table layout only; phones keep their
   own grid row (mobile.css). */
@media (min-width: 641px) {
  @container feed (min-width: 600px) { .feed:has(th.c-vol[aria-sort]) .c-vol { display: table-cell; } }
}
/* The table never scrolls sideways. As the feed narrows, the 24 hour line
   and the chain and Boosted chips go first (the 24h column keeps the
   number), then Liquidity and Age, then the Volume tab's 24h change, so the
   column it sorts by stays. The Volume tab has one more column, so its
   steps come at wider feeds. */
@container feed (max-width: 899px) { .feed :is(.c-spark, .c-token .chain-chip, .c-token .chip-boost) { display: none; } }
@container feed (max-width: 1009px) { .feed:has(th.c-vol[aria-sort]) :is(.c-spark, .c-token .chain-chip, .c-token .chip-boost) { display: none; } }
@container feed (max-width: 768px) { .feed:has(th.c-vol[aria-sort]) :is(.c-liq, .c-age) { display: none; } }
@container feed (max-width: 663px) { .feed :is(.c-liq, .c-age) { display: none; } }
@media (min-width: 641px) {
  @container feed (min-width: 600px) and (max-width: 648px) { .feed:has(th.c-vol[aria-sort]) .c-change { display: none; } }
}

/* Show more. While the toggle is shut, the cut rows (feedtable.js), the
   open count and the "Show N more" link stay hidden; the label flips inside
   the summary. */
.more {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 4px 4px; color: var(--ink-muted); font-size: 14px; line-height: 20px;
}
.more-acts { display: flex; align-items: center; gap: 8px; }
.more-toggle > summary { list-style: none; cursor: pointer; }
.more-toggle > summary::-webkit-details-marker { display: none; }
.more-toggle[open] > summary .if-shut, .more-toggle:not([open]) > summary .if-open,
.feed-card:has(.more-toggle:not([open])) :is(.feed tr.cut, .more-count .if-open, .more-acts > .if-open),
.feed-card:has(.more-toggle[open]) .more-count .if-shut { display: none; }

/* /deployers */
.deployers-card .card-title { margin-bottom: 8px; }
.deployers .addr { color: var(--ink-2); }
.deployers .tok { gap: 8px; }
.deployers .took { margin-left: 8px; color: var(--ink-muted); }
.deployers .unit { display: none; }