.gap-board{margin:.6rem 0 1rem;--drop-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0C6 4 12 6.6 12 10a6 6 0 0 1-12 0C0 6.6 6 4 6 0Z'/%3E%3C/svg%3E")}
.gap-head{margin:0 0 .2rem;font-size:1.15rem}
.gap-window{margin:0 0 .6rem}
.gap-empty{margin:.4rem 0}
.gap-cols{display:grid;grid-template-columns:1fr;gap:1rem}
.gap-col-head{margin:0 0 .1rem;font-size:1rem}
.gap-col-sub{margin:0 0 .4rem}
.gap-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.gap-row-item{border-bottom:1px solid var(--line)}
.gap-row-item:last-child{border-bottom:none}
.gap-row{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;text-decoration:none;color:inherit;min-width:0;flex-wrap:wrap}
.gap-rank{flex:0 0 1.4rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.gap-art{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.gap-art-img{width:28px;height:auto;border-radius:4px}
.gap-art svg{width:100%;height:100%;display:block}
.gap-id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.gap-chips{font-size:.72rem}
.gap-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.gap-pct{flex:0 0 auto}
/* Liquidity raindrop — one mask (--drop-m, above), fill painted bottom-up in the ONE neutral
 * chart-data blue (--data) over the neutral --line vessel on BOTH sides — never the column's
 * good/bad hue (review ruling: no side-correlated color on .drop); drip tick = ::after
 * mini-drop, no animation. Mask lives on ::before so the drip tick is never clipped by it. */
.drop{position:relative;flex:0 0 11px;width:11px;height:15px;color:var(--data)}
.drop::before{content:"";position:absolute;inset:0;-webkit-mask:var(--drop-m) center/contain no-repeat;mask:var(--drop-m) center/contain no-repeat;background:linear-gradient(to top,currentColor var(--f,0%),var(--line) var(--f,0%))}
.drop-outline{--f:0%}
.drop-third{--f:33%}
.drop-twothirds{--f:66%}
.drop-full{--f:100%}
.drop-drip::after{content:"";position:absolute;left:50%;bottom:-6px;width:5px;height:7px;transform:translateX(-50%);-webkit-mask:var(--drop-m) center/contain no-repeat;mask:var(--drop-m) center/contain no-repeat;background:currentColor}
.gap-prices{flex:0 0 100%;order:3;font-size:.78rem;margin-top:.1rem}
.gap-vs{opacity:.6}
.gap-note{margin:.4rem 0 0}
@media (max-width:899.98px){
  /* #551 — widened 759.98px -> 899.98px. .gap-cols (below) still goes 2-col at 760px, and at
   * 760-899px that squeezes this board's own column to ~338px (narrower than the 375px single-
   * column's 343px) — exactly the band where the rank ordinal used to turn back on and take its
   * ~2rem, tipping rows into a multi-line wrap (measured up to 144px vs a clean 73px). Keeping
   * rank off through the whole squeeze band buys back that width where there is none to spare;
   * the list's own DOM order still tells the rank either way. */
  .gap-rank{display:none}
}
@media (min-width:760px){
  .gap-cols{grid-template-columns:1fr 1fr}
}