/* OSIRIS tool: live order book. The balance bar, the Bucket and Range controls, the notice. Everything else comes from tools.css. */
.ob-balance{margin-bottom:1.25rem}
.ob-bar{display:flex;height:.625rem;border-radius:var(--r-pill);overflow:hidden;background:var(--fill)}
.ob-bar>span{display:block;height:100%;width:0;transition:width .6s var(--ease-out)}
.ob-bar__b{background:linear-gradient(90deg,rgba(34,197,94,.35),var(--up))}
.ob-bar__a{background:linear-gradient(90deg,var(--down),rgba(239,68,68,.35))}
.ob-bar-labels{display:flex;justify-content:space-between;gap:1rem;margin-top:.6rem;font-size:var(--t-small);font-variant-numeric:tabular-nums;color:var(--mist)}
.ob-bar-labels span:first-child{color:var(--up)}
.ob-bar-labels span:last-child{color:var(--down)}
.ob-ctl{display:flex;align-items:center;gap:.6rem}
.ob-ctl>span{font-size:var(--t-small);color:var(--fog)}
.tpanel #zoneCanvas,.tpanel #depthCanvas{cursor:default}
.tmsg.is-note{padding:.75rem 1rem;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)}

@media (max-width:760px){
  .tmetrics .tmetric:last-child{grid-column:1/-1}
  .tpanel__tools{width:100%}
  .ob-ctl{width:100%}
  .ob-ctl .tseg{flex:1;min-width:0}
  .ob-ctl .tseg button{flex:1;min-width:0;padding:0 .4rem}
  #depthTitle small{display:block;margin:.2rem 0 0}
  .tmetrics #bidLbl,.tmetrics #askLbl{white-space:nowrap}
}