/* ============================================================
   Pipezoom - css/leadcols.css, the pickers behind More and the column grip.
   The Types, Systems and Columns pickers and the handle that resizes a
   column. A picker is a panel under its own press, and a press with
   something switched off carries the count of what is switched off. In
   the market column from 1100px a picker's list opens in place under
   its press. leadpop.js opens and closes it.
   Defines the classes .lds-pan* and .lds-grip.
   Notes: docs/notes/app.pipezoom.com/css/leadcols.css.md
   ============================================================ */

.lds-pan-w{position:relative;display:inline-flex;}
.lds-pan-n{
  margin-left:6px;padding:1px 6px;
  background:var(--accent);color:var(--ink-inverse);
  border-radius:var(--radius-pill);
  font-size:.68rem;font-weight:700;
}

.lds-pan{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  width:262px;max-width:86vw;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
}
.lds-pan-h{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;
  border-bottom:1px solid var(--line);
  font-size:.78rem;font-weight:600;color:var(--ink);
}
.lds-pan-h span{flex:1;}
.lds-pan-a{
  padding:2px 7px;cursor:pointer;
  background:var(--surface-hover);border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink-soft);font:inherit;font-size:.72rem;
}
.lds-pan-a:hover{color:var(--ink);border-color:var(--line-strong);}
.lds-pan-a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}

/* Because a market can carry 80 types, the panel scrolls. */
.lds-pan-b{max-height:302px;overflow-y:auto;padding:5px;}
.lds-pan-r{
  display:flex;align-items:center;gap:8px;
  padding:5px 7px;cursor:pointer;
  border-radius:var(--radius-sm);
  font-size:.79rem;color:var(--ink-soft);
}
.lds-pan-r:hover{background:var(--surface-hover);color:var(--ink);}
.lds-pan-r input{cursor:pointer;flex:none;}
.lds-pan-l{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lds-pan-c{
  flex:none;font-size:.72rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.lds-pan-e{margin:8px 10px;font-size:.78rem;color:var(--ink-faint);}

/* The handle on a column's edge */
.lds-tbl thead th{position:relative;}
.lds-grip{
  position:absolute;top:0;right:0;bottom:0;
  width:7px;cursor:col-resize;
  user-select:none;
}
.lds-grip::after{
  content:"";
  position:absolute;top:22%;bottom:22%;right:2px;
  width:1px;background:var(--line-strong);
  opacity:0;
}
.lds-tbl thead th:hover .lds-grip::after{opacity:1;}
/* During a column drag the handle's cursor is shown everywhere, and
   nothing on the page takes a selection. */
body.lds-resizing{cursor:col-resize;user-select:none;}
body.lds-resizing .lds-grip::after{opacity:1;}

/* A panel under a press near the right of the row runs off the screen
   without this. leadpop.js measures the panel as it opens and sets this
   class. */
.lds-pan-right{left:auto;right:0;}

@media (max-width:640px){
  .lds-pan{left:auto;right:0;}
}

/* In the market column from 1100px. The column scrolls on its own
   (overflow-y:auto) and clips a panel positioned over it. Each picker is
   a press across the column here, and its list opens in the flow under
   it. */
@media (min-width:1100px){
  .lds-side .lds-pan-w{display:flex;flex-direction:column;}
  .lds-side .lds-pan-w > .tog{width:100%;}
  .lds-side .lds-pan{position:static;width:auto;max-width:none;margin-top:6px;box-shadow:none;}
  .lds-side .lds-pan-b{max-height:240px;}
}