/* OSIRIS tool: long/short ratio. The coin table (a grid of rows), the long/short bars, the chart box. */
.ls-table{width:100%}
.ls-row{position:relative;display:grid;grid-template-columns:2.25rem 4.5rem 4.5rem 5rem repeat(4,4.75rem) minmax(9rem,1fr);gap:.25rem .5rem;align-items:center;padding:0 .75rem;min-height:3.25rem;border-top:1px solid var(--line);transition:background-color var(--d-fast)}
.ls-row:not(.ls-head):hover{background:var(--fill-soft)}
.ls-head{min-height:2.5rem;border-top:0;font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fog)}
.ls-row.is-btc{background:linear-gradient(90deg,var(--accent-soft),transparent 55%)}
.ls-row.is-btc::before{content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:3px;border-radius:0 3px 3px 0;background:var(--nile)}
.ls-n{color:var(--fog);font-variant-numeric:tabular-nums}
.ls-sym{font-weight:700;letter-spacing:.02em}
.is-btc .ls-sym,.is-btc .ls-n{color:var(--nile-strong)}
.ls-ratio{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ls-pct,.ls-oi>span{font-size:.9375rem;font-variant-numeric:tabular-nums}
.ls-pct{font-weight:700}
.ls-oi{display:contents}
.ls-vol{color:var(--mist)}
.ls-na{color:var(--fog)}
.ls-bar{display:flex;height:1.75rem;border-radius:.5rem;overflow:hidden;background:rgba(238,241,244,.04);min-width:0}
.ls-bar__l,.ls-bar__s{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;font-size:.75rem;font-weight:700;color:rgba(238,241,244,.95);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ls-bar__l{background:linear-gradient(90deg,rgba(34,197,94,.62),rgba(34,197,94,.28))}
.ls-bar__s{background:linear-gradient(90deg,rgba(239,68,68,.28),rgba(239,68,68,.62))}

.ls-key{display:none;margin:-.25rem 0 .9rem;font-size:var(--t-small);color:var(--fog)}
.ls-legend{margin:0 0 1rem}
.ls-legend__hint{margin-left:auto;color:var(--fog)}
#mainChart{height:22rem}
.tcanvas.is-busy{opacity:.55;transition:opacity .25s}
.tpanel__fine a{color:var(--mist);text-decoration:underline;text-underline-offset:2px}
.tpanel__fine a:hover{color:var(--bone)}
.tmsg.is-note{padding:.75rem 1rem;margin-top:.9rem;border-radius:12px;border:1px solid var(--line-strong);border-left:2px solid var(--accent);background:var(--fill-soft);color:var(--text);text-align:left;font-size:var(--t-small)}

/* narrow screens (tablet and phone): two lines per coin, no sideways scroll. Line one: rank, coin, ratio, longs, bar. Line two: the open interest figures with their labels. */
@media (max-width:920px){
  .ls-row{grid-template-columns:1.5rem 3.1rem 3rem 3.6rem minmax(0,1fr);gap:.2rem .5rem;padding:.6rem .15rem}
  .ls-head{padding-top:0;padding-bottom:.5rem;min-height:0}
  .ls-head .ls-h-oi{display:none}
  .ls-key{display:block}
  .ls-oi{display:grid;grid-column:1/-1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:.35rem;padding-left:2rem;margin-top:.1rem}
  .ls-oi>span{font-size:.8125rem;white-space:nowrap}
  .ls-oi>span::before{content:attr(data-l);margin-right:.3rem;font-size:.6875rem;color:var(--fog)}
  .ls-bar{grid-column:5;grid-row:1;height:1.5rem}
  .ls-bar__l,.ls-bar__s{font-size:.6875rem}
}
@media (max-width:760px){
  #mainChart{height:18rem}
  .ls-legend__hint{display:none}
}