/* Block chrome, dense.
 *
 * A block used to spend four rows on chrome before the first number: the head,
 * the hint that wrapped it onto a second line, the list, the search. That is
 * 122px of furniture over 60px of data in a small panel. These rules cut it to
 * two rows — a head that may not wrap, and one row of actions.
 *
 * Its own file rather than a block in terminal.css: this is a layer ABOUT that
 * sheet (every rule here overrides one of its rules), and keeping it separate
 * means the density can be read, reviewed and reverted in one place.
 */

/* The head is one line, always. What does not fit scrolls sideways inside the
 * params strip instead of pushing the head taller: a panel's chrome must not
 * change height with its width, or a desk reflows every time a column moves.
 *
 * The height is a floor, not a squeeze. Cutting it to `min-height: 0` with
 * 3px of padding won five pixels of body and made the one row a reader
 * actually operates — the symbol, the 🔗 chips, the view select — feel like a
 * seam between panels rather than a control strip. 26px keeps most of the
 * saving (the sheet it overrides asks 34px) and gives those controls room to
 * be hit. */
.panel-head {
  flex-wrap: nowrap; min-height: 26px; gap: 7px;
  padding: 4px 30px 4px 9px;
}
.panel-head .block-params {
  flex: 0 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.panel-head .block-params::-webkit-scrollbar { display: none; }
/* …and because it has no scrollbar, the edge with something behind it fades.
 * Without this a narrow Funding farm simply has no «фільтрувати» select: the
 * strip hides it perfectly. Classes come from deck/overflow-hint.js. */
.more-right:not(.more-left) { mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); }
.more-left:not(.more-right) { mask-image: linear-gradient(to right, transparent, #000 16px); }
.more-left.more-right { mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.panel-head .block-params input, .panel-head .block-params select { padding: 2px 6px; }
/* The symbol and the group chips are buttons, and a 1px target is a miss. */
.panel-head .block-sym { padding: 3px 5px; }
.panel-head .context-link-trigger { padding: 3px 6px; }

/* The name identifies the block; it is not what anyone reads. It sits back at
 * `--ink-3` and comes forward when the panel is under the pointer. */
.block-title { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel:hover .block-title, .panel:focus-within .block-title { color: var(--ink-2); }

/* Status is state — a count, a warning, an age. It gets the space left over
 * and truncates rather than wrapping. */
.block-status { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-close { top: 4px; right: 5px; padding: 1px 7px; }

/* Column heads are labels, not data: they lose a pixel each side. Rows keep
 * their own padding — shrinking those would buy space out of legibility. */
.tbl th { padding: 3px 8px; }
.panel-body { padding: 6px 8px; }

/* One row of actions, for blocks that have any. The picker stretches; the
 * controls beside it keep their size. */
.row-act { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px 0; }
.row-act > .mkt-picker { flex: 1 1 auto; min-width: 0; padding: 0; }
.row-act > select { font-size: 10.5px; }

/* ── The two blocks that had their own second row ──────────────────────
 *
 * Not the same axis as the `density` SETTING in terminal.css: that one is
 * about how tall a DATA row is, and it stays the reader's choice. This is
 * about chrome, and chrome does not need a preference — nobody asks for more
 * furniture.
 */

/* Order book. The market line («Binance · Perpetual · BTCUSDT») sat under the
 * search field because the picker bar wraps. Nothing here may wrap: a bar that
 * grows a line when the panel narrows makes the book jump while it is read. */
.mkt-picker-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mkt-picker-bar::-webkit-scrollbar { display: none; }
.mkt-picker-selected { flex: 0 1 auto; min-width: 0; }
/* Every block that carries a picker wants it slim — the book, the candles —
 * and the watchlist, where the row it shares takes over the padding. */
.mkt-picker { padding: 3px 8px 0; }
[data-type="orderbook"] .ob-cols { padding: 0 4px 2px; }

/* Networks. Five things — coin, totals, deposit/withdraw counts, age, the
 * alert control — on one line, in that order of importance. Only the counts
 * push right; the age used to as well, which split the row in two places and
 * was what made it wrap. */
.nw-head { flex-wrap: nowrap; gap: 8px; padding: 3px 9px; min-width: 0; }
.nw-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-head .nw-age { margin-left: 0; flex: 0 0 auto; }
.nw-head button { padding: 1px 7px; font-size: 10.5px; white-space: nowrap; }
.nw-cols { padding: 3px 9px; }

/* Spread chart. The meta line is seven things — pair, IN, OUT, funding on
 * both sides, status, the timeframe chips — and wrapped into two rows in any
 * panel narrower than about 520px; the legend was a third row. Both are now
 * one line each and scroll, so the chart keeps every pixel they gave back.
 * The legend stays a row of its own: it names the lines on the chart, which
 * is closer to an axis label than to a control. */
.sc-meta { flex-wrap: nowrap; gap: 4px 10px; padding: 3px 8px; overflow-x: auto; scrollbar-width: none; }
.sc-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 6px; }
.sc-meta::-webkit-scrollbar, .sc-legend::-webkit-scrollbar { display: none; }
.sc-ranges { flex: 0 0 auto; }

/* The drag handle. At --rule-strong on --raised it was a smudge nobody saw,
 * which makes "drag a panel by its header" a secret. It is not data, so it
 * stays quiet — but quiet is --ink-3, not invisible. */
.panel-head .grip {
  color: var(--ink-3); letter-spacing: 0; font-size: 13px; line-height: 1;
  padding: 2px 3px; border-radius: 2px;
}
.panel-head .grip:hover { color: var(--ink); background: var(--rule); }

/* ── About token ──────────────────────────────────────────────────────────
 * Six facts about one coin. The old card put a sentence next to every number
 * — "100% of what is issued", "6.9% of the cap" — and the numbers ended up
 * queueing behind the words. Now a number is said once: the four market
 * figures stand in a grid, and the ONE proportion that is structural (how
 * much of the coin is out) is drawn as a proportion instead of spelled out.
 */
.tf-card { display: grid; gap: 10px; }
.tf-head { display: flex; align-items: baseline; gap: 7px; }
.tf-name { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-ticker { letter-spacing: .06em; }
.tf-rank { margin-left: auto; font-size: 10.5px; }

/* Pairs, not a ragged row: at a panel's usual width three across leaves the
   fourth alone on a line of its own. */
.tf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px 16px; }
.tf-stat { display: grid; gap: 1px; min-width: 0; }
.tf-stat-label { font-size: 10px; color: var(--ink-3); letter-spacing: .02em; }
/* `.num` right-aligns everywhere else in the deck, which is right in a table
   and wrong here: each value sits under its own label, so it reads from the
   same left edge the word does. */
.tf-stat-value { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: left; }
.tf-stat-value.pos { color: var(--pos); } .tf-stat-value.neg { color: var(--neg); }

.tf-supply { display: grid; gap: 4px; }
.tf-supply-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tf-supply-value { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
/* The same bar the index block uses for a venue's weight: inside this product
   a filled track already means "this much of the whole". Kept in ink rather
   than the link blue — it is a quantity, not something to press. */
.tf-bar { height: 3px; background: var(--rule); border-radius: 2px; }
.tf-bar-fill { display: block; height: 100%; background: var(--ink-3); border-radius: 2px; }
.tf-supply-note { font-size: 10.5px; }
.tf-foot { display: flex; align-items: baseline; gap: 8px; font-size: 10px; }

/* The coin picker inside About token: a ticker names more than one coin, and
   the card's guess has to be overrulable without leaving the block. */
.tf-pick { position: relative; margin-bottom: 8px; }
.tf-search {
  width: 100%; padding: 4px 8px; background: var(--panel);
  border: 1px solid var(--rule); border-radius: 2px; color: var(--ink);
  font: inherit; font-size: 11px;
}
.tf-search:focus { outline: none; border-color: var(--info); }
.tf-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 2px;
  max-height: 260px; overflow-y: auto; background: var(--raised);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.tf-result {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: baseline;
  width: 100%; padding: 5px 8px; background: none; border: 0; border-bottom: 1px solid var(--rule-soft);
  color: var(--ink); font: inherit; font-size: 11px; text-align: left; cursor: pointer;
}
.tf-result:hover { background: var(--panel); }
.tf-result-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-none { padding: 6px 8px; font-size: 11px; }
.tf-reset { margin-left: 8px; font-size: 9.5px; }
.tf-share { color: var(--ink-2); }