/* Volume Monitor: /coins and /coin/. Builds on app.css variables and site.css components. */
/* ---- breadcrumbs ---- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; font-size: var(--fs-sm); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--dim); }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }
.crumbs + .pagehead { padding-top: 8px; }
.pagehead .meta a { color: var(--muted); }
.pagehead .meta a:hover { color: var(--text); }
/* Reserve each live sentence, including when BTC has aged out. Keeping these
slots separate also prevents the following explanatory copy from jumping.
Minimum heights grow naturally if text needs more room (zoom, longer values). */
#ls-intro #ls-btc-summary { display: block; min-height: 2lh; }
#ls-intro #ls-market-summary { display: block; min-height: 1lh; }
@media (max-width: 40rem) {
#ls-intro #ls-btc-summary { min-height: 5lh; }
#ls-intro #ls-market-summary { min-height: 3lh; }
}
/* Keep the trailing explanation link in the same flex row as the clock ticks. */
#ls-intro #updated { flex: 0 0 24ch; max-width: 100%; font-variant-numeric: tabular-nums; }
#coin-page .lede, #summary { max-width: 72ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linkout { font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.linkout:hover { color: var(--text); text-decoration: underline; }
/* T-1744: the options strip's max pain / options vs perps / chain row, each link a 24px target */
.opt-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--dim); font-size: 12.5px; }
.opt-links .linkout { display: inline-flex; align-items: center; min-height: 24px; }
.subh { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; }
/* ---- history summary above the charts (partials/coin_history.html) ---- */
.hist-text { margin: 0; max-width: 96ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
#coin-page > details { border-block: 1px solid var(--line); }
#coin-page > details > summary { padding: 12px 0; cursor: pointer; font-weight: 600; }
#coin-page > details > summary:hover { color: var(--conf); }
#coin-page > details > summary:focus-visible { outline: 2px solid var(--conf); outline-offset: 2px; }
#coin-page > details > summary .muted { font-weight: 400; }
#coin-page > details > summary h2 { display: inline; font: inherit; }
#coin-page > details > p { margin: 0; padding-block: 0 16px; max-width: 72ch; }
#coin-page > .meta { margin: 0; color: var(--muted); }
/* ---- /coins ---- */
.coins-tools { align-items: center; }
.coins-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coins-search { width: 180px; }
.coins-scroll { max-height: calc(100vh - 170px); min-height: 320px; }
.coins-table td.sticky { min-width: 120px; }
.vchips { display: flex; gap: 4px; }
.coins-table td.vchips { display: table-cell; }
.coins-table td.vchips .chip + .chip { margin-left: 4px; }
.coins-table .tag { margin-left: 2px; }
/* ---- /coin/ stats ---- */
.coin-stats .z { color: var(--dim); }
.coin-stats .stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-stats .split:empty { background: var(--line); }
/* ---- markets table ---- */
.mkt-table td.sticky { min-width: 190px; }
.mkt-table .tag { margin-inline-start: 4px; }
.mkt-sym { font-family: Inter, sans-serif; font-weight: 600; font-size: 12.5px; margin: 0 2px 0 4px; }
.panel > .note { margin: 0; padding: 8px 14px 12px; border-top: 1px solid var(--line); }
.panel > .note.spike-empty { border-top: 0; padding-top: 0; }
/* ---- spikes ---- */
.spike-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.kv { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); min-width: 92px; }
.kv > span { font-size: 11px; color: var(--muted); }
.kv b { font-size: 14px; font-weight: 600; }
.kv b small { display: block; font: 500 10.5px Inter, sans-serif; color: var(--muted); margin-top: 1px; }
.kv.wide { justify-content: center; }
.spike-table td.tcell { color: var(--muted); }
.spike-table .age { display: block; font-size: 10.5px; color: var(--dim); }
/* ---- liquidations ---- */
.liq-win td:first-child { font-family: Inter, sans-serif; font-weight: 600; }
.liq-bar-h { width: 40%; }
.split.liq-split { margin: 0; min-width: 80px; height: 6px; }
.coin-chart { min-height: 150px; margin-top: 12px; }
#liqs .legend { margin-top: 6px; }
.liq-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.liq-list li { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.liq-list li:last-child { border-bottom: 0; }
.liq-list li b { font-weight: 600; text-align: right; }
.liq-list li .muted { font-size: 11.5px; }
.liq-list li .z { color: var(--dim); font-size: 11.5px; min-width: 52px; text-align: right; }
.liq-list li.none { display: block; color: var(--muted); }
.na-note { font-size: 13px; margin: 0; padding: 4px 0 2px; }
/* ---- about + related ---- */
.coin-faq { padding: 0; max-width: none; }
.coin-faq h2 { font-size: 15px; font-weight: 600; margin: 6px 0 10px; }
.related-links { display: flex; flex-wrap: wrap; gap: 6px; }
.related-links a {
display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line2);
background: var(--panel2); text-decoration: none; font-weight: 600; font-size: 12.5px;
}
.related-links a:hover { border-color: var(--muted); }
.related-links a.all { font-weight: 500; color: var(--muted); background: transparent; }
/* "Notify me" quick alerts (T-552): a pill like a.all; opened, the panel takes its own row below. */
.notify > summary {
display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line2);
font-weight: 500; font-size: 12.5px; color: var(--muted); cursor: pointer; list-style: none;
}
.notify > summary::-webkit-details-marker { display: none; }
.notify > summary:hover, .notify[open] > summary { border-color: var(--muted); }
.notify[open] { flex-basis: 100%; }
.nt-pop { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel2); max-width: 520px; font-size: 13px; }
.nt-h { margin: 0 0 6px; font-weight: 600; }
.nt-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; cursor: pointer; }
.nt-row input { margin-top: 3px; flex: 0 0 auto; }
.nt-txt { min-width: 0; }
.nt-txt b { display: block; font-weight: 600; }
.nt-txt small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.nt-ch { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); }
.nt-chl { color: var(--muted); }
.nt-on { color: var(--up); }
.nt-msg { margin: 8px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.nt-msg.err { color: var(--down); }
.nt-msg.ok { color: var(--up); }
.related-links .nt-pop a.nt-adv { display: inline-block; height: auto; margin-top: 8px; padding: 0; border: 0; background: none; font-weight: 500; text-decoration: underline; }
.related-links .nt-msg a { display: inline; height: auto; padding: 0; border: 0; background: none; text-decoration: underline; }
/* ---- per-coin tabs (overview + metric pages) ---- */
.mtabs { display: flex; gap: 2px; margin: 10px 0 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.mtabs::-webkit-scrollbar { display: none; }
.mtabs a {
flex: 0 0 auto; padding: 7px 11px 8px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none;
border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: 6px 6px 0 0;
}
.mtabs a:hover { color: var(--text); background: var(--hover); }
.mtabs a:focus-visible { outline: 2px solid var(--conf); outline-offset: -2px; }
.mtabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--up); font-weight: 600; }
#msummary { max-width: 96ch; }
/* ---- long/short (shared by /long-short-ratio and coin pages) ---- */
.lsbar { position: relative; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--down); margin: 0 0 7px; }
.lsbar:empty { background: var(--line); }
.lsbar i.lg { display: block; height: 100%; background: var(--up); }
.lsbar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--panel); }
.lsbar.sm { width: 96px; height: 5px; margin: 0; }
.stat-value .unit { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.stat-label .coinlink { font-size: 13px; }
.coinlink.big { font-size: inherit; letter-spacing: -.02em; }
.ls-rank { justify-content: flex-start; gap: 2px 12px; }
.ls-rank a, .ls-shifts a { color: var(--text); font-weight: 600; text-decoration: none; }
.ls-rank a:hover, .ls-shifts a:hover { text-decoration: underline; }
.ls-shifts { display: grid; gap: 7px; margin-top: 8px; font-size: 12.5px; }
.ls-shifts > div { display: flex; flex-wrap: wrap; gap: 1px 12px; align-items: baseline; }
.ls-shifts .muted { flex-basis: 100%; font-size: 11.5px; }
.ls-shifts b { font-weight: 600; }
.ls-tools { gap: 8px 14px; }
.ls-tools h2 { margin-right: auto; }
.ls-scroll { max-height: calc(100vh - 150px); min-height: 320px; }
.ls-table td.sticky { min-width: 104px; }
.ls-table .grp { font-size: 10.5px; }
.ls-bar-h { min-width: 110px; }
.ls-legend .legend { margin-right: 6px; vertical-align: -1px; }
.ls-defs { display: grid; gap: 12px; margin: 0; }
@media (min-width: 900px) { .ls-defs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ls-defs dt { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.ls-defs dd { margin: 0; color: var(--muted); font-size: 13px; }
.ls-defs dd b { color: var(--text); font-weight: 600; }
.ls-explain .note { margin: 12px 0 0; max-width: 120ch; font-size: 12.5px; }
.lk { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--muted); flex: none; vertical-align: middle; }
.lk.binance_accounts { background: var(--v-binance); }
.lk.binance_top_pos { background: var(--conf); }
.lk.bybit_accounts { background: repeating-linear-gradient(90deg, var(--v-bybit) 0 5px, transparent 5px 7px); }
.lk.binance_top_acct { background: var(--warn); }
.lk.binance_taker_buy { background: repeating-linear-gradient(90deg, var(--v-binance) 0 2px, transparent 2px 4px); }
.lk.gate_accounts, .lk.gate_top_acct, .lk.gate_top_pos { background: var(--v-gate, var(--muted)); }
.lk.bitget_accounts { background: var(--v-bitget, var(--muted)); }
.lk.htx_top_acct, .lk.htx_top_pos { background: var(--v-htx, var(--muted)); }
.ls-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ls-more { width: 100%; font-size: 12px; }
.ls-more caption { text-align: left; font-size: 11.5px; color: var(--muted); padding: 0 0 4px; }
.ls-more td:first-child { display: flex; align-items: center; gap: 7px; }
.ls-more tr.ls-net td:first-child { padding-left: 21px; }
/* T-460: not inside a .tablescroll, so the label column wraps (.dtable's nowrap pushed it past 320px phones) */
.ls-more { min-width: 0; }
.ls-more caption, .ls-more td:first-child { white-space: normal; }
.ls-body { display: grid; gap: 14px; }
@media (min-width: 1000px) { .ls-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; } }
.ls-cards { display: grid; gap: 8px; }
.ls-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); padding: 9px 12px; min-width: 0; }
.ls-card.off { opacity: .75; }
.ls-card-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--muted); }
.ls-card-v { display: flex; align-items: baseline; gap: 5px; margin: 3px 0 7px; font-size: 12px; color: var(--muted); }
.ls-card-v > b { font: 700 20px/1.2 Inter, sans-serif; letter-spacing: -.02em; color: var(--text); }
.ls-r { margin-left: auto; }
.ls-r b { color: var(--text); font-weight: 600; font-size: 13px; }
.ls-card-s { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--muted); }
.ls-card-s b { font-weight: 500; color: var(--text); }
.ls-card-s b.up { color: var(--up); } .ls-card-s b.down { color: var(--down); } .ls-card-s b.z { color: var(--dim); }
.ls-card-na { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.ls-chart { min-height: 220px; touch-action: pan-y; }
@media (min-width: 1000px) { .ls-chart { min-height: 300px; } }
.ls-chart .mid { stroke: var(--muted); stroke-dasharray: 4 3; stroke-width: 1; opacity: .8; }
.ls-chart .ln { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ls-chart .ln.binance_accounts { stroke: var(--v-binance); }
.ls-chart .ln.binance_top_pos { stroke: var(--conf); }
.ls-chart .ln.bybit_accounts { stroke: var(--v-bybit); stroke-dasharray: 5 3; }
.ls-chart .ln.binance_top_acct { stroke: var(--warn); }
.ls-chart .dot.binance_top_acct { fill: var(--warn); }
.ls-chart .cursor { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.ls-chart .dot { stroke: var(--panel); stroke-width: 1.5; }
.ls-chart .dot.binance_accounts { fill: var(--v-binance); } .ls-chart .dot.binance_top_pos { fill: var(--conf); } .ls-chart .dot.bybit_accounts { fill: var(--v-bybit); }
.ls-chart .chart-tip { min-width: 210px; }
.ls-chart .chart-tip .row span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.chart-tip small { color: var(--muted); font-size: 10.5px; font-weight: 500; }
.ls-chartwrap { min-width: 0; }
.ls-chartwrap .legend { margin-top: 8px; }
.lkey { display: inline-flex; align-items: center; gap: 6px; }
.lkey::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--muted); }
.lkey.binance_accounts::before { background: var(--v-binance); }
.lkey.binance_top_pos::before { background: var(--conf); }
.lkey.bybit_accounts::before { background: repeating-linear-gradient(90deg, var(--v-bybit) 0 5px, transparent 5px 7px); }
.lkey.binance_top_acct::before { background: var(--warn); }
.lkey.mid::before { height: 1px; background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 5px); }
.ls-panel .note b { color: var(--text); }
/* ---- /coin// ---- */
.focus-table th.em { color: var(--text); }
.focus-table td.em { background: var(--panel2); font-weight: 600; }
.focus-table tbody tr:hover td.em { background: var(--hover); }
.focus-table td.sticky { min-width: 170px; }
.dtable td.payer { font-family: Inter, sans-serif; font-size: 12px; color: var(--muted); }
.sharebar { display: inline-block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin-right: 7px; vertical-align: 2px; overflow: hidden; }
.sharebar i { display: block; height: 100%; background: var(--muted); }
.out-table small.hit { color: var(--muted); font: 500 11px Inter, sans-serif; margin-left: 4px; }
.out-table td:first-child { font-family: Inter, sans-serif; }
.stat-sub .linkout { font-size: 12px; }
.panel .note a, .lede a { color: inherit; }
/* ---- phones ---- */
@media (max-width: 640px) {
.crumbs { padding-top: 12px; }
.coins-tools { flex-direction: column; align-items: stretch; }
.coins-filters { flex-wrap: wrap; }
.coins-search { flex: 1 1 100%; width: auto; min-width: 0; height: 34px; }
.coins-table td.sticky { min-width: 96px; }
.mkt-table td.sticky { min-width: 0; }
.mkt-table .mkt-sym { display: block; margin: 3px 0 0; font-size: 11.5px; }
.kv { flex: 1 1 calc(50% - 8px); }
.panel > .note { padding: 8px 12px 10px; }
.liq-list li { grid-template-columns: auto auto 1fr auto; }
.liq-list li .muted { display: none; }
.liq-bar-h { width: auto; }
.split.liq-split { min-width: 44px; }
.liq-win th, .liq-win td { padding-left: 6px; padding-right: 6px; }
.mtabs { margin: 8px -16px 10px; padding: 0 10px; }
.mtabs a { padding: 7px 9px 8px; font-size: 12.5px; }
.ls-tools .coins-filters { width: 100%; }
.ls-tools .fgroup { flex: 1 1 100%; }
.ls-tools .fgroup .tg { flex: 1 1 0; padding-left: 4px; padding-right: 4px; }
.ls-table td.sticky { min-width: 84px; }
.focus-table td.sticky { min-width: 0; }
.focus-table .mkt-sym { display: block; margin: 3px 0 0; font-size: 11.5px; }
.ls-card-v > b { font-size: 18px; }
}
.focus-table .iv { color: var(--muted); }
.coinnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; margin-top: 4px; font-size: var(--fs-sm); }
.coinnav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.coinnav a:hover { color: var(--text); text-decoration: underline; }
.coinnav-hint { color: var(--muted); font-size: 11px; opacity: .7; }
@media (pointer: coarse) { .coinnav-hint { display: none; } }
.since-day { margin: 8px 0 12px; }
.since-day h2 { margin: 0 0 4px; font-weight: 600; }
.since-day .z { color: var(--dim); }
.since-day .note { margin: 4px 0 0; }
/* ---- touch hit areas (T-2442) ----
Measured at 375px before this: breadcrumb links 36x20, the long/short cards' "See all" 38x18. Same invisible-hit-area
pattern as app.css (T-666, T-720): drawn size unchanged, a transparent ::after makes the box 44px tall, centred on the link.
Breadcrumb links in a row meet at the 6px gap (3px each side); wrapped rows get a 25px gap (19.5 + 25 = 44.5 of pitch) so
their boxes meet too, and breadcrumbs wrap rarely. "See all" reaches 4px each side and, below, only the 4px margin above
the card's coin link (the rest of its 44px goes up into the card padding), so the coin link keeps its full hit area. */
@media (max-width: 640px), (pointer: coarse) {
.crumbs { row-gap: 25px; }
.crumbs a, .stat-label a.muted { position: relative; }
.crumbs a::after { content: ""; position: absolute; left: -3px; right: -3px; top: calc(50% - 22px); bottom: calc(50% - 22px); }
.stat-label a.muted::after { content: ""; position: absolute; left: -4px; right: -4px; top: calc(50% - 31px); bottom: calc(50% - 13px); }
}