/* WARs DEX: the Grid page (grid.html, js/grid.js), on top of css/pools.css and css/orders.css. */
.gfield{margin-top:12px;display:grid;gap:6px}
.gfield>.glabel{font:800 12px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between}
.gfield>.glabel b{color:var(--fg);font-family:var(--mono)}
.gfield input[type=range]{width:100%;accent-color:var(--a1)}
.gfield p{margin:0}
.seg.gwide{display:flex} .seg.gwide button{flex:1}
details.gfield>summary{cursor:pointer;font:700 13px var(--body);color:var(--muted)}
.osplit.gtwo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.glegend{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.gl{display:inline-block;width:14px;height:0;border-top:2px dashed;vertical-align:middle;margin-inline-end:4px}
.gl.buy{color:var(--up)} .gl.sell{color:var(--down)}
.glevels{width:100%;border-collapse:collapse;font-size:13px}
.glevels th,.glevels td{padding:6px 8px;border-bottom:1px solid var(--edge);text-align:start}
.glevels th{color:var(--muted);font:800 11px var(--body);text-transform:uppercase;letter-spacing:.06em}
.glevels .r{text-align:end}
.tablewrap{max-height:340px;overflow:auto}
.gside{font:800 11px var(--body);text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:1px solid}
.gside.buy{color:var(--up);border-color:color-mix(in srgb,var(--up) 40%,transparent)}
.gside.sell{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,transparent)}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:6px}
.gcard{background:var(--glass-2);border:1px solid var(--edge);border-radius:18px;padding:14px;cursor:pointer;min-width:0}
.gcard:hover,.gcard:focus-visible{border-color:var(--a1);outline:none}
.gchead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gcrange{margin-top:8px;font-size:14px}
.gcard .kv{margin-block:10px 0}
.gcard .orow{margin-top:10px}
.gbar{display:flex;gap:2px;margin-top:10px;height:8px}
.gbar i{flex:1;border-radius:2px}
.gbar i.buy{background:color-mix(in srgb,var(--up) 70%,transparent)} .gbar i.sell{background:color-mix(in srgb,var(--down) 70%,transparent)}
.ghow>summary{cursor:pointer;list-style:none} .ghow>summary h3{display:inline} .ghow>summary::after{content:" ▾";color:var(--muted)}
.ghow[open]>summary::after{content:" ▴"}
.ghow .owhy{margin-top:14px}
#detail .tablewrap{max-height:260px;margin-top:8px}
.gstops{margin-top:10px}
@media (max-width:760px){
  .osplit.gtwo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .osplit.gtwo .legrow input{font-size:18px}
  .gcards{grid-template-columns:minmax(0,1fr)}
  .seg.gwide button{padding:8px 6px;font-size:12px}
}
.osplit.gtwo .legrow input{font-size:clamp(16px,2.4vw,22px)}
.glevels td.num{white-space:nowrap}
@media (max-width:860px){ .glvcard{order:3} }
#sum.kv,#rvKv,#dtKv{grid-template-columns:minmax(100px,max-content) minmax(0,1fr)}
.gsoon{margin-top:14px;text-align:center;padding:28px 18px} .gsoon h3{margin:10px 0 6px} .gsoon p{max-width:520px;margin:0 auto}