/* ============================================================
   GP Team Hub - leads.css

   The lead table, the tally chips, the row-level flag chips and the
   row of filters over it. The switches, the selects and the buttons
   are the shell's own controls, so nothing here redraws them; what
   is here is the table's own columns, the category tags, the flag
   chips that say how each row was classified, and the tally chips
   that let a rep surface the hidden rows.

   The tags are painted in the tokens, so the four looks carry them.
   Only the two categories a rep can actually sell to are colored:
   everything else is filtered out by default and reads as furniture
   on the way past.
   ============================================================ */

.lds{margin-top:16px;}

/* ---- 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. A circle, because it is
   pressed once on the day a market is first loaded and then never
   again, and a fifth label in that row would read as a fifth thing
   to do. */
.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 switch and the progress take a line of their
   own under the name and the zip, because the row is a sentence about
   what is about to be made and those two are what happens after. */
.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. The surface under it
   is tinted, so the sentence carries weight and not color. */
.lds-csv-no{color:var(--ink);font-weight:600;}

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

/* What the last load did. Neutral, because it is a receipt. */
.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 is the one thing to do, so it says so. */
.lds-new-say{
  flex:1 1 100%;
  color:var(--ink-soft);
  font-size:.82rem;
}

/* Said above the table, not instead of it. */
.lds-note{
  margin:0 0 12px;
  color:var(--ink-soft);
  font-size:.84rem;
}

/* The picker says what it is, because a box holding a name reads as a
   label until it says otherwise. */
.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;
}

/* What the rename row says back. */
.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 one overrides every
   filter and shows only the rows that carry the matching flag, so a
   rep can inspect the hidden set without hunting through toggles.

   Default: a quiet pill that reads as a count.
   Active (lds-chip-on): solid fill with white text, one color per
   chip, so the pressed state says which set the table is showing. */
.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. White ink on all of them to keep
   the contrast above 5:1. The hover rule above is a class and a state
   deep, so it outweighed the pressed rule and turned the words of a
   pressed chip back to the page's ink; the ink is restated here at the
   same depth so the fill and its words stay together. */
.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;}
/* The rep's own two wear the page's accent, because neither is one of
   the three lists the files decide and the accent is the one 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 sits inside the chip. Small, faded until hovered,
   so it does not compete with the count for attention. */
.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 ----
   One row that wraps, because on a phone six controls in a line is a
   row nobody reaches the end of. */
.lds-flt{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:4px;
}

/* ---- The one row, and what folds behind it ----
   Four rows of switches stood over the table and a rep read past all
   of them to reach the search box. The two counts, the two filters
   that get changed on every market, the search and Refine stay out;
   the rest fold. */
.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 never wraps. The search box takes whatever is
   left and the two pickers give ground with it; everything else holds
   the width it needs. Wrapping was allowed here and the row sat one
   press away from breaking: the counts reading 326 and 960 instead of
   two single digits was enough width to put More on a line of its own.

   900px and not 760px. Measured at 762 to 861 with the pickers at
   their own 150px floor, the row came to 857px against a 722px box
   and the whole page scrolled sideways. The pickers give ground from
   here down to 120px, which is 103px of room the row did not have,
   and under 900px it wraps the way a phone wants it to. */
@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 what is switched on behind the press. White on the
   accent, which reads on all four 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 ----
   One open row a group: its name in the caption type the bar's other
   labels use, its controls wrapping beside it, a rule between rows.
   Nothing in here folds. More is the one thing that opens and shuts,
   and every control it holds is on screen the moment it does. */
.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;}

/* On a phone a control takes the whole row. Two pickers at their own
   150px floor in a 322px box cut every label of three words at the
   ellipsis and neither one could be read. */
@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%;}
}
.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 ----
   Sixteen columns, and left to size themselves the two longest fields
   took half the width between them and pushed the rest off the right
   edge. Every column is declared a width instead, which needs a fixed
   layout to be honored. The table is then as wide as those add up to:
   filling the box handed the surplus back to the columns by share, so
   a column dragged 60px wider took 60px off the other fifteen and the
   drag looked like it had done nothing. The page writes that total as
   a pixel width in its own style block. The floor .tbl-wrap puts under
   every table is the content of the cells, which is the measurement
   the declared widths replace, so it is taken off here. A narrow
   screen scrolls the box around it. */
.tbl-wrap .lds-tbl{font-size:.84rem;table-layout:fixed;min-width:0;}
/* A heading is one word on one line, cut at its own column and never
   allowed to run into the next one. Rating is a longer word than the
   figures under it need room for, and it was landing on Type. */
.lds-tbl th{white-space:nowrap;overflow:hidden;}

/* Compact rows for scrolling 200+ businesses without the table
   feeling like a spreadsheet with double-spaced lines. */
.lds-tbl td,.lds-tbl th{padding:6px 8px;}

/* Every cell stops at its own column and ends in an ellipsis. The
   table is fixed-layout, so a long phone number or address used to run
   straight over the cell beside it. */
.lds-tbl td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* The press columns hold buttons, which need 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 so it can be reached from the
   keyboard, and it inherits 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;
}
/* The heading row is a tinted ground, so the sorted column is said
   with 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 two hand marks lead the row. Each is the press and nothing else,
   because a heading over either would be a word wider than the press
   under it and the gap either side was reading as a column. */
.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;}
/* The width belongs to the column, which means to the heading cell as
   well: a fixed layout reads its widths off the first row, and with the
   heading left unsized this one column took every pixel the other
   twelve did not ask for. */
.lds-c-name{width:146px;}
/* Miles and Rating are both a figure of two or three characters, and
   both are sorted by a heading that carries an arrow, so each is as
   wide as its own 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;}
/* Both are sorted by a heading whose word is wider than the figures
   under it, so the two of them give back at the edges what the word
   needs in the middle. */
.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 three that run long are cut at the column and carry the whole
   value in a title, so a row stays one line and nothing is lost. */
.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 is where the shop is, so it opens there. It wears the
   column's own quiet ink, because a column where every value is a
   link does not need every value underlined to say so. */
.lds-map{color:inherit;}
.lds-map:hover{color:var(--accent);text-decoration:underline;}

/* The contact is a name to say and two 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);}