/* ============================================================
   Pipezoom - css/sideleads.css, the rail's Leads mode.

   The panel of includes/sideleads.php on the shell's tokens: the count line, the blocks' controls (the markets, the
   zip and the distance slider, the radios and the boxes with their counts, the saved views), Plan selected and the
   run line. While html[data-side="leads"] is on and the rail is open, the Leads bar's taken controls (data-side-take:
   Category, Distance, the 6 tally chips) and the Map strip's are not drawn, and a pressed tally chip is a chip of the
   active row. css/shell.css shows the panel. Notes: docs/notes/app.pipezoom.com/css/sideleads.css.md
   ============================================================ */

/* The count line over the blocks. */
.sl-count{margin:0 0 4px;padding:2px 11px;font-size:.84rem;color:var(--shell-ink-soft);}
.sl-count b{color:var(--shell-ink);font-weight:700;font-variant-numeric:tabular-nums;}
.sl-count[hidden]{display:none;}

/* A block's controls, inset under the heading press. */
.side-menu-list.sl-body{gap:3px;padding:2px 4px 10px 12px;}
.side-menu-list.sl-body[hidden]{display:none;}

/* Markets: 1 row a market with its row count; the open market is filled with the accent, as the lit rail row. */
.sl-mkt{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;
  border-radius:var(--radius-sm);
  color:var(--shell-ink-soft);font-size:.86rem;
}
.sl-mkt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sl-mkt b{flex:none;color:var(--shell-ink-faint);font-weight:600;font-variant-numeric:tabular-nums;}
.sl-mkt:hover{background:var(--shell-raised);color:var(--shell-ink);text-decoration:none;}
.sl-mkt.sl-on,
.sl-mkt.sl-on:hover{background:var(--accent-strong);color:var(--ink-inverse);font-weight:600;}
.sl-mkt.sl-on b{color:var(--ink-inverse);}
.sl-cap{margin:4px 2px 0;font-size:.8rem;color:var(--shell-ink-faint);line-height:1.45;}

/* A text press of the rail: New market, the systems behind more. */
.sl-link{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:5px 10px;
  border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--shell-ink-faint);
  font:inherit;font-size:.82rem;font-weight:600;
  cursor:pointer;
}
.sl-link:hover{background:var(--shell-raised);color:var(--shell-ink);}
.sl-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

/* The New market form and the rows of the Origin and Views blocks. */
.sl-form{display:flex;flex-direction:column;gap:6px;padding:2px 2px 4px;}
.sl-form[hidden]{display:none;}
.sl-row{display:flex;align-items:center;gap:6px;min-width:0;}
.sl-l{flex:none;font-size:.8rem;font-weight:600;color:var(--shell-ink-soft);}
.sl-v{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--shell-ink);}
.sl-in{
  flex:1 1 0;min-width:0;
  padding:6px 8px;
  background:var(--shell-raised);
  border:1px solid var(--shell-line);
  border-radius:var(--radius-sm);
  color:var(--shell-ink);
  font:inherit;font-size:.84rem;
}
.sl-in::placeholder{color:var(--shell-ink-faint);}
.sl-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.sl-zip{flex:0 1 92px;}
.sl-body .btn-sm{flex:none;padding:5px 10px;font-size:.8rem;}
/* The zip's Save before an edit of the zip, and Plan selected with no row picked. */
.sl-body .btn:disabled,
.sl-plan:disabled{opacity:.5;cursor:default;}
.sl-range{width:100%;margin:2px 0 4px;accent-color:var(--accent-strong);cursor:pointer;}

/* A radio or a box with its words and its count. */
.sl-opt{
  display:flex;align-items:center;gap:8px;
  padding:4px 6px;
  border-radius:var(--radius-sm);
  color:var(--shell-ink-soft);font-size:.85rem;
  cursor:pointer;
}
.sl-opt:hover{background:var(--shell-raised);color:var(--shell-ink);}
.sl-opt input{flex:none;margin:0;accent-color:var(--accent-strong);cursor:pointer;}
.sl-opt-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sl-n{flex:none;color:var(--shell-ink-faint);font-weight:600;font-size:.8rem;font-variant-numeric:tabular-nums;}
.sl-n[hidden]{display:none;}
.sl-rest{display:flex;flex-direction:column;gap:3px;}
.sl-rest[hidden]{display:none;}
.sl-none{margin:2px 6px;font-size:.8rem;color:var(--shell-ink-faint);}
.sl-none[hidden]{display:none;}

/* Views: pressing the name applies the view, pressing the xmark removes it; Save view under the list. */
.sl-views{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.sl-view{display:flex;align-items:center;gap:2px;}
.sl-view-go,
.sl-view-x{border:0;background:transparent;font:inherit;cursor:pointer;border-radius:var(--radius-sm);}
.sl-view-go{
  flex:1;min-width:0;
  padding:5px 8px;
  text-align:left;color:var(--shell-ink-soft);font-size:.85rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sl-view-x{flex:none;width:28px;height:28px;color:var(--shell-ink-faint);font-size:.78rem;}
.sl-view-go:hover,
.sl-view-x:hover{background:var(--shell-raised);color:var(--shell-ink);}
.sl-view-go:focus-visible,
.sl-view-x:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

/* Plan selected, the reply under it and the run line. */
.sl-foot{display:flex;flex-direction:column;gap:6px;margin:8px 4px 0;}
.sl-plan{width:100%;justify-content:center;}
.sl-say{margin:0;font-size:.8rem;line-height:1.45;color:var(--shell-ink-soft);}
.sl-say[hidden]{display:none;}
.sl-run{
  display:flex;align-items:center;gap:7px;
  padding:6px 8px;
  border:1px solid var(--shell-line);border-radius:var(--radius-sm);
  background:transparent;color:var(--shell-ink-soft);
  font:inherit;font-size:.8rem;text-align:left;
  cursor:pointer;
}
.sl-run:hover{background:var(--shell-raised);color:var(--shell-ink);}
.sl-run[hidden]{display:none;}

/* The Leads bar while Leads mode is open: the taken controls are not drawn, and the chip of a pressed tally chip
   (js/leadchips.js, data-side-flag) is drawn in the active row. The Map view's strip (includes/leadmap.php) is drawn
   with its counts and no Category, Distance or band box: those of the panel are the ones in use. Under 900px the rail
   is a drawer and the stored mode applies at every width; from 900px each control is drawn while the rail is collapsed. */
.lds-chip-f[data-side-flag]{display:none;}
@media (max-width:899px){
  :root[data-side="leads"] [data-side-take],
  :root[data-side="leads"] .lmap-bar > .sel,
  :root[data-side="leads"] .lmap-bar label.lmap-band{display:none;}
  :root[data-side="leads"] .lds-chip-f[data-side-flag]{display:inline-flex;}
}
@media (min-width:900px){
  :root[data-side="leads"]:not([data-rail="on"]) [data-side-take],
  :root[data-side="leads"]:not([data-rail="on"]) .lmap-bar > .sel,
  :root[data-side="leads"]:not([data-rail="on"]) .lmap-bar label.lmap-band{display:none;}
  :root[data-side="leads"]:not([data-rail="on"]) .lds-chip-f[data-side-flag]{display:inline-flex;}
}