/* ============================================================
   Pipezoom - css/leads.css, the Leads page around the rows of its table.
   The page's own tokens, the market forms, the first-run card, the tally
   chips, the count line and the table's own columns. The head, the
   toolbar and the panel slot are in css/leadtools.css; the filter bar in
   css/leadfilters.css. The switches, the selects and the buttons are the
   shell's own controls and are not redrawn here. The tags are painted in
   tokens for all 4 looks; only the 2 categories a rep can sell to are
   colored. Defines --lds-stick and the classes under .lds.
   Notes: docs/notes/app.pipezoom.com/css/leads.css.md
   ============================================================ */

.lds{
  /* The top the filter bar sticks at: the top bar and the crumb row under
     it (38px and a 1px rule, css/shell.css). */
  --lds-stick:calc(var(--topbar-h) + 39px);
  margin-top:0;
}

/* The count line over the table. */
.lds-count{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;
  margin:0 0 10px;
  font-size:.84rem;
  color:var(--ink-soft);
}

/* The plan's cap, in the New market press's place. */
.lds-cap{
  margin:0;
  font-size:.8rem;line-height:1.5;
  color:var(--ink-soft);
}
.lds-cap i{color:var(--ink-faint);}
.lds-cap a{color:var(--accent);font-weight:600;white-space:nowrap;}

/* The first-run card
   In the table's place on an account with no market: 1 entry per way a
   market starts, each a light press in the page's own ink. */
.lds-start{padding:22px;}
.lds-start .lds-start-t{margin:0 0 6px;padding:0;font-size:1.2rem;}
.lds-start-s{margin:0 0 16px;font-size:.9rem;line-height:1.6;color:var(--ink-soft);}
.lds-ways{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.lds-way{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:14px 15px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);font:inherit;text-align:left;
  cursor:pointer;
}
.lds-way:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);text-decoration:none;}
.lds-way i{font-size:1.05rem;color:var(--ink-soft);}
.lds-way-t{font-size:.92rem;font-weight:700;}
.lds-way-s{font-size:.82rem;line-height:1.5;color:var(--ink-soft);}
.lds-way:disabled{opacity:.6;cursor:default;}
.lds-way:disabled:hover{background:var(--surface-page);border-color:var(--line);}

/* The row above the table */
.lds-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;
}
.lds-bar-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;}
.lds-sel-list{width:auto;min-width:200px;max-width:320px;}
.lds-sel{width:auto;min-width:150px;}

/* The mark that opens the file formats. Because it is pressed once, on
   the day a market is first loaded, it is a circle and adds no fifth
   label to the row. */
.lds-ask{
  margin-left:auto;
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:var(--radius-pill);
  border:1px solid var(--line);
  background:var(--surface-raised);
  color:var(--ink-soft);
  font-size:.76rem;font-weight:700;
  cursor:pointer;
}
.lds-ask:hover{background:var(--surface-hover);border-color:var(--line-strong);color:var(--ink);}
.lds-ask:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);outline:none;}
.lds-ask-on{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.lds-ask-on:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--ink-inverse);}

.lds-help{margin-bottom:14px;}

/* The import panel. The name and the zip describe the market about to
   be made; the switch and the progress come after, on their own line
   under them. */
.lds-csv{align-items:center;}
.lds-csv-ai{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;color:var(--ink);
  cursor:pointer;
}
.lds-csv-ai input{width:15px;height:15px;accent-color:var(--accent-strong);cursor:pointer;}
.lds-csv-prog{flex:1 1 100%;margin-top:4px;}
/* A refused file answers in the panel's own line. On the tinted
   background under it, the sentence carries weight with no color. */
.lds-csv-no{color:var(--ink);font-weight:600;}

/* An error here is a sentence to read, in the page's own background and
   ink. */
.lds-err{
  background:var(--surface-raised);
  border-color:var(--line-strong);
  color:var(--ink);
}

/* The last load's receipt, in neutral colors. */
.lds-said{
  display:flex;align-items:center;gap:8px;
  margin:0 0 14px;
  padding:10px 13px;
  background:var(--surface-raised);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:.85rem;
}
.lds-said i{color:var(--ink-faint);}

/* With no list yet, this row names the only thing to do. */
.lds-new-say{
  flex:1 1 100%;
  color:var(--ink-soft);
  font-size:.82rem;
}

/* A note above the table, with the table still shown. */
.lds-note{
  margin:0 0 12px;
  color:var(--ink-soft);
  font-size:.84rem;
}

/* Because a box holding a name reads as a label, the picker names
   itself. */
.lds-pick{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.lds-pick-l{
  font-size:.7rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}

/* The rename row's reply. */
.lds-edit-say{
  flex:1 1 100%;
  font-size:.8rem;
  color:var(--ink-soft);
}

/* Starting a list */
.lds-new{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px;
  margin-bottom:14px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

/* Tally chips
   Clickable counts above the table. Pressing a chip overrides every
   filter and shows only the rows that carry the matching flag.

   Default: a quiet pill that reads as a count.
   Active (lds-chip-on): solid fill with white text, 1 color per chip,
   and the pressed chip names the set the table shows. */
.lds-tally{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:12px;
  font-size:.82rem;
  color:var(--ink-soft);
}
.lds-t b{color:var(--ink);font-size:1.02rem;font-weight:700;margin-right:4px;}
.lds-t-off b{color:var(--ink-faint);}

.lds-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-raised);
  color:var(--ink-soft);
  font:inherit;font-size:.82rem;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.lds-chip b{color:var(--ink);font-weight:700;margin-right:2px;}
.lds-chip:hover{
  background:var(--surface-hover);
  border-color:var(--line-strong);
  color:var(--ink);
}
.lds-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Active: each chip has its own fill, with white ink on all of them to
   keep the contrast above 5:1. Because the hover rule above is a class
   and a state deep, the ink is restated here at the same depth. */
.lds-chip-on{color:#fff;border-color:transparent;}
.lds-chip-on b{color:#fff;}
.lds-chip-on:hover,.lds-chip-on:hover b{color:#fff;}
.lds-chip-chain.lds-chip-on{background:var(--lead-other);}
.lds-chip-chain.lds-chip-on:hover{background:#3d4650;}
.lds-chip-big.lds-chip-on{background:var(--lead-national);}
.lds-chip-big.lds-chip-on:hover{background:#7e3800;}
.lds-chip-local.lds-chip-on{background:var(--lead-local);}
.lds-chip-local.lds-chip-on:hover{background:#1b5e20;}
/* Because neither of the rep's own 2 is a list the files decide, both
   wear the page's accent, the color that already means "you did this". */
.lds-chip-hide.lds-chip-on,
.lds-chip-star.lds-chip-on{background:var(--accent-strong);}
.lds-chip-watch.lds-chip-on{background:var(--lead-regional);}
.lds-chip-hide.lds-chip-on:hover,
.lds-chip-star.lds-chip-on:hover{background:var(--accent-hover);}

/* The save icon is inside the chip, small and faded until hovered. */
.lds-chip-save{
  margin-left:2px;
  font-size:.68rem;
  opacity:.45;
  cursor:pointer;
  transition:opacity .15s;
}
.lds-chip:hover .lds-chip-save,
.lds-chip-save:hover{opacity:1;}
.lds-chip-on .lds-chip-save{opacity:.65;}
.lds-chip-on .lds-chip-save:hover{opacity:1;}

/* The filters
   1 row that wraps on a phone. */
.lds-flt{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:4px;
}

/* The single row, and the controls folded behind it
   The 2 counts, the 2 filters changed on every market, the search and
   Refine stay out; the rest fold behind More. */
.lds-one{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;
  font-size:.82rem;
  color:var(--ink-soft);
}
.lds-one .lds-in-find{flex:1 1 200px;min-width:0;max-width:320px;}
.lds-one .lds-more-go{margin-left:auto;}

/* From 900px the row does not wrap. The search box takes the width left
   and the 2 pickers shrink with it; every other control holds the width
   it needs.

   The breakpoint is 900px. Measured from 762 to 861px with the pickers
   at their own 150px floor, the row came to 857px against a 722px box
   and the whole page scrolled sideways. Here the pickers shrink down to
   120px, 103px of extra room, and under 900px the row wraps. */
@media (min-width:900px){
  .lds-one{flex-wrap:nowrap;}
  .lds-one > *{flex:none;}
  .lds-one .lds-sel{flex:0 1 auto;min-width:120px;}
  .lds-one .lds-in-find{flex:1 1 120px;min-width:96px;}
}

.lds-more{
  display:flex;flex-direction:column;gap:8px;
  padding:11px 12px;
  margin-bottom:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.lds-more .lds-tally,
.lds-more .lds-flt{margin-bottom:0;}

.lds-more-go{display:inline-flex;align-items:center;gap:7px;}
.lds-more-car{font-size:.7rem;transition:transform .12s ease;}
.lds-more-go[aria-expanded="true"] .lds-more-car{transform:rotate(180deg);}
/* The count of the controls switched on behind the press, white on the
   accent in all 4 themes. */
.lds-more-n{
  min-width:17px;padding:1px 5px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);color:var(--ink-inverse);
  font-size:.68rem;font-weight:700;line-height:1.5;text-align:center;
}

/* The groups behind More
   1 open row a group: its name in the caption type of the bar's other
   labels, its controls beside it, a rule between rows. Nothing in here
   folds: More is the only control that opens and shuts, and it shows
   every control it holds. */
.lds-grp{
  display:flex;align-items:flex-start;gap:12px;
  padding:9px 0 0;
  border-top:1px solid var(--line);
}
.lds-grp-name{
  flex:0 0 118px;
  padding-top:9px;
  font-size:.7rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
.lds-grp .lds-flt{flex:1 1 auto;min-width:0;margin-bottom:0;}

/* Because 2 pickers at their 150px floor in a 322px box cut every label
   of 3 words, a control takes the whole row on a phone. */
@media (max-width:560px){
  .lds-grp{flex-direction:column;gap:6px;}
  .lds-grp-name{flex:none;padding-top:0;}
  .lds-grp .lds-sel{min-width:0;flex:1 1 100%;}
}

@media (max-width:760px){
  .lds-one .lds-more-go{margin-left:0;}
  .lds-one .lds-in-find{max-width:100%;}
}
/* Phones: the filter stack in 2 even columns, its caption and the search
   across both. */
@media (max-width:699px){
  .lds-one{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .lds-one > .lds-one-l,
  .lds-one > .lds-in-find,
  .lds-one > button:only-of-type{grid-column:1 / -1;}
  .lds-one .lds-sel{min-width:0;}
  .lds-one > .tog{justify-content:center;}
}
.lds-in{
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-page);
  color:var(--ink);
  font-size:.84rem;
  min-width:0;
  flex:1 1 160px;
}
.lds-in::placeholder{color:var(--ink-faint);}
.lds-in:hover{border-color:var(--line-strong);}
.lds-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);outline:none;}
.lds-in-sm{flex:0 1 130px;}
.lds-in-xs{flex:0 0 74px;}
.lds-in-find{flex:1 1 200px;max-width:280px;}

/* The table
   16 columns, each with a declared width under a fixed layout. The
   table is as wide as the widths add up to, a pixel total the page
   writes in its own style block; a column dragged 60px wider makes the
   table 60px wider. The min-width .tbl-wrap puts under every table is
   taken off here, and a narrow screen scrolls the box around it. */
.tbl-wrap .lds-tbl{font-size:.84rem;table-layout:fixed;min-width:0;}
/* A heading is 1 word on 1 line, cut at its own column edge. */
.lds-tbl th{white-space:nowrap;overflow:hidden;}

/* Compact rows for scrolling 200+ businesses. */
.lds-tbl td,.lds-tbl th{padding:6px 8px;}

/* Because the table is fixed-layout, every cell stops at its own column
   and ends in an ellipsis. */
.lds-tbl td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* The press columns hold buttons and keep their focus ring whole. */
.lds-tbl td.lds-c-mk,
.lds-tbl td.lds-c-pick,
.lds-tbl td.lds-c-act{overflow:visible;}

/* A sortable heading is a button, reachable from the keyboard, in the
   heading's own type. */
.lds-sort{
  display:inline-flex;align-items:center;gap:6px;
  min-height:18px;
  padding:0;
  background:transparent;
  border:0;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
}
/* On the heading row's tinted background, the sorted column shows by
   weight and a full-strength arrow. */
.lds-sort:hover{color:var(--ink);}
.lds-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}
.lds-sort-ic{font-size:.7rem;opacity:.6;}
.lds-sort-on{color:var(--ink);}
.lds-sort-on .lds-sort-ic{opacity:1;color:var(--ink);}

/* The 2 hand marks lead the row, each a press alone with no heading
   word. */
.lds-c-mk{width:24px;text-align:center;padding-left:1px;padding-right:1px;}
.lds-c-n{width:26px;text-align:right;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
/* Because a fixed layout reads its widths off the first row, the
   heading cell carries the column's width. */
.lds-c-name{width:146px;}
/* Miles and Rating each hold a figure of 2 or 3 characters under a
   heading with an arrow, and each column is as wide as its heading
   word. */
.lds-c-num{width:78px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.lds-c-rate{width:88px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
/* Because each heading word is wider than the figures under it, both
   columns have narrow side padding. */
.lds-c-num,.lds-c-rate{padding-left:4px;padding-right:6px;}
.lds-c-addr{width:146px;}
.lds-c-tel{width:108px;white-space:nowrap;}
.lds-c-web{width:150px;}
.lds-c-web a{color:var(--accent);}
.lds-c-tel a{color:var(--accent);}
.lds-c-kind{width:94px;}
.lds-c-who{width:114px;}
.lds-c-cat{width:90px;}
.lds-c-act{width:54px;text-align:center;}

/* The 3 that run long are cut at the column and carry the whole value
   in a title, on a 1-line row. */
.lds-c-addr,.lds-c-kind,.lds-c-who,.lds-c-web{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lds-name b{color:var(--ink);font-weight:600;}
.lds-soft{color:var(--ink-soft);}
.lds-none{color:var(--ink-faint);}

/* An address opens the shop's location on the map. Because every value
   in the column is a link, it wears the column's own quiet ink with no
   underline. */
.lds-map{color:inherit;}
.lds-map:hover{color:var(--accent);text-decoration:underline;}

/* The contact is a name to say and 2 presses to make. */
.lds-who{color:var(--ink);}
.lds-who-l{
  margin-left:6px;
  color:var(--ink-faint);
  font-size:.76rem;
}
.lds-who-l:hover{color:var(--accent);}