/* ============================================================
   Pipezoom - css/leadtools.css, the head, the toolbar and the panel slot of the Leads page.

   The head with the market select, its pen and New market; the toolbar
   whose presses open 1 panel at a time; the slot the panels open in; the
   Find businesses form and the Add a business panel inside it. The rows
   of the table and the filter bar are elsewhere (css/leads.css,
   css/leadfilters.css). Loaded by includes/head.php.
   Notes: docs/notes/app.pipezoom.com/css/leadtools.css.md
   ============================================================ */

/* The head: the page name, the market block beside it, the 4 record
   presses at the right end, and an error or a receipt on a line of their own. */
.lds-head{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;
  margin:6px 0 14px;
}
.lds-h1{flex:0 0 auto;margin:0;}
.lds-market{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  flex:1 1 auto;min-width:0;
}
.lds-market .lds-sel-list{min-width:220px;max-width:360px;}
.lds-hacts{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;}
/* Each press carries the auto left margin of a heading link, set to 0 in
   this row, and the 4 are drawn together at the right end. */
.lds-hacts > .head-link{margin-left:0;}
.lds-head > .lds-err,
.lds-head > .lds-said{flex:1 1 100%;margin:0;}

/* The toolbar: the presses that bring rows in or read them on the left,
   the 2 that write a file on the right. Under 700px the row scrolls
   sideways and no press wraps. */
.lds-tools{
  display:flex;align-items:center;gap:8px;
  margin:0 0 10px;
  padding:0 0 10px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}
.lds-tools::-webkit-scrollbar{display:none;}
.lds-tools-l,
.lds-tools-r{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.lds-tools-r{margin-left:auto;}
.lds-tool{white-space:nowrap;}
/* An open panel's press reads pressed: the page's ink on the raised
   surface, with no color of its own. */
.lds-tool[aria-expanded="true"]{
  background:var(--surface-high);
  border-color:var(--line-strong);
  color:var(--ink);
}
/* The Refine press carries its ticked count beside its name. */
.lds-tool .lrf-go-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  margin-left:4px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.7rem;font-weight:700;
}
.lds-tool .lrf-go-n[hidden]{display:none;}
.lds-tool .lrf-go-car{display:none;}

/* The slot: 1 panel at a time, the table always under it. A panel is a
   card on the raised surface; the market forms keep their own card rule
   (.lds-new, css/leads.css) and add nothing here. */
.lds-panels{display:flex;flex-direction:column;gap:0;}
.lds-panels > [data-lds-panel]{margin:0 0 14px;}
.lds-panels > [data-lds-panel][hidden]{display:none;}
.lds-panel{scroll-margin-top:var(--lds-stick);}

/* Find businesses: the card wraps the form and the run strip, and shows
   nothing of its own while both are hidden. */
.lds-panels > .lai{margin:0;padding:0;background:none;border:0;border-radius:0;}
.lds-panels > .lai:not(:has(> :not([hidden]))){display:none;}
.lai-form{
  padding:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.lai-form .lai-bar{align-items:end;}
.lai-form .lai-f{display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
.lai-form .lai-f > .lds-pick-l{margin:0;}
/* The miles word sits beside its box on the same line as the box. */
.lai-form .lai-f:has(.lai-unit){flex-direction:row;flex-wrap:wrap;align-items:center;}
.lai-form .lai-f:has(.lai-unit) > .lds-pick-l{flex:1 1 100%;}
.lai-form .lai-bar > .btn{align-self:end;}
.lai-form .lds-err{margin:10px 0 0;}
.lds-panels > .lai > .lai-prog{
  margin:0 0 14px;
  padding:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.lds-panels > .lai > .lai-prog[hidden]{display:none;}
/* The run strip drawn with no Find businesses card. */
.lds-panels > .lai-prog{
  margin:0 0 14px;
  padding:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

/* The Data Axle panel holds the card with its own fold press hidden: the
   toolbar press is the fold. */
[data-lds-panel="axle"] > .lai{margin:0;}
[data-lds-panel="axle"] .lai-head{display:none;}
[data-lds-panel="axle"] .lai-body{padding:12px;}

/* Add a business, as a panel. */
.lds-addp{
  padding:12px 14px 14px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.lds-addp .lds-add-t{margin:0 0 2px;padding:0;font-size:1rem;}
.lds-addp .sub{margin:0 0 10px;}
.lds-addp .lds-add{margin:0;}

/* The Refine panel's own card rules are in css/leadrefine.css; in the
   slot it keeps the gap every panel has. */

@media (max-width:699px){
  .lds-head{margin-bottom:10px;}
  .lds-market .lds-sel-list{min-width:0;max-width:none;flex:1 1 100%;}
  .lds-hacts{margin-left:0;}
}