/* OSIRIS tool: liquidation map. Only what tools.css does not have: the filter row, the density slider, the key, the chart cursor. */
.lq-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-bottom:1rem}
.lq-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.lq-pills .tpill{cursor:pointer}
.lq-pills .tpill::before{width:.75rem;height:.75rem;opacity:.3;background:var(--pc,var(--mist))}
.lq-pills .tpill.is-on::before{opacity:1}

.lq-dens{display:flex;align-items:center;gap:.85rem;margin-left:auto;min-height:2.25rem;padding:0 1rem;border-radius:var(--r-pill);border:1px solid var(--line-strong)}
.lq-dens label{font-size:var(--t-small);color:var(--mist)}
.lq-dens output{min-width:4.4rem;text-align:right;font-size:var(--t-small);font-weight:700;font-variant-numeric:tabular-nums}
.lq-dens input[type=range]{-webkit-appearance:none;appearance:none;width:10rem;height:2.25rem;margin:0;background:transparent;cursor:pointer;--fill:0%}
.lq-dens input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--nile) var(--fill),rgba(238,241,244,.16) var(--fill))}
.lq-dens input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(238,241,244,.16)}
.lq-dens input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--nile)}
.lq-dens input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.25rem;height:1.25rem;margin-top:calc(2px - .625rem);border-radius:50%;background:var(--bone);border:2px solid var(--nile);box-shadow:0 0 0 4px var(--accent-soft);transition:box-shadow var(--d-fast)}
.lq-dens input[type=range]::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--bone);border:2px solid var(--nile);box-shadow:0 0 0 4px var(--accent-soft)}
.lq-dens input[type=range]:hover::-webkit-slider-thumb,.lq-dens input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 7px var(--accent-ring)}
.lq-dens input[type=range]:focus-visible{outline:2px solid var(--nile-strong);outline-offset:2px;border-radius:var(--r-pill)}

/* the chart takes over the touch: one finger pans it, two pinch it */
.tpanel #liqCanvas{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.tpanel #liqCanvas.is-axis{cursor:ns-resize}
.tpanel #liqCanvas.is-drag{cursor:grabbing}
.tpanel #liqCanvas:focus-visible{outline:2px solid var(--nile-strong);outline-offset:4px;border-radius:12px}
.tcanvas.is-busy canvas{opacity:.4;transition:opacity .25s}

.lq-key{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:1rem;font-size:var(--t-small);color:var(--mist)}
.lq-key span{display:inline-flex;align-items:center;gap:.6rem}
.lq-key i{display:inline-block;width:3.75rem;height:.5rem;border-radius:var(--r-pill);background:var(--g,var(--line-strong))}
.lq-key__note{color:var(--fog)}

.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)}

@media (max-width:760px){
  #sMagCard{grid-column:1/-1}
  #liqTitle small{display:block;margin:.2rem 0 0}
  .tpanel__tools{width:100%;justify-content:space-between}
  .lq-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .lq-pills .tpill{justify-content:flex-start;min-height:2.5rem}
  .lq-dens{width:100%;margin-left:0}
  .lq-dens input[type=range]{flex:1;width:auto;min-width:0}
  .lq-key i{width:2.75rem}
}