/* GP Team Hub - What one row of the lead table carries.
 *
 * The flag chips beside a name, the category tag, the phone and website
 * cells, who has it starred, how sure the system reading is, the
 * franchise hold, the switching count, the register answer and the
 * lapse date.
 *
 * Split out of leads.css on 2026-09-15 when that file reached 31kb.
 * That file is the page and the table around the rows; this one is what
 * sits inside a row.
 *
 * Loaded through the manifest beside leads.css.
 *
 * Doc: docs/notes/new/css/leadrow.css.md
 */

/* ---- Row-level flag chips ----
   Small inline badges next to the business name in the table. Each
   flag type has its own fill so a rep scanning the column can
   separate the three reasons a row was classified.

   Solid fill and white ink, same treatment as the category tags.
   Green for big-local because those are yours to sell and worth
   spotting. Neutral for chains (just hidden, not a category). Brown
   for too-big (the over-10M ceiling). */
.lds-flag{
  display:inline-block;
  margin-left:7px;
  padding:1px 7px;
  border-radius:var(--radius-pill);
  color:#ffffff;
  font-size:.66rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  white-space:nowrap;
  vertical-align:middle;
}
.lds-flag-chain{background:var(--lead-other);}
.lds-flag-big{background:var(--lead-national);}
.lds-flag-ent{background:var(--lead-national);}
.lds-flag-local{background:var(--lead-local);}

/* A row that has been pushed off the list stays readable, because
   the reason to show it at all is to check whether pushing it off
   was right. */
.lds-row-off td{opacity:.5;}
.lds-row-off .lds-name b{font-weight:500;}

.lds-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--ink-faint);
  font-size:.8rem;
  cursor:pointer;
}
.lds-x:hover{background:var(--surface-hover);border-color:var(--line);color:var(--ink);}
.lds-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

/* A mark that is set is a filled icon in the page's accent, and one
   that is not is the faint outline every other row press is, so a
   column of them scans as the few that are on without a ground behind
   any of them. The accent is a token both looks carry, which a fixed
   hue on a bare row would not be. */
.lds-mk{width:22px;height:22px;font-size:.82rem;}
.lds-mk-on,.lds-mk-on:hover{color:var(--accent);background:transparent;border-color:transparent;}
.lds-mk-on:hover{background:var(--surface-hover);}

/* The two buttons beside the picker. After the plain row button above,
   not before it: both are one class deep, so the one written later is
   the one that paints, and written first these took the transparent
   border and disappeared. */
.lds-x-bar{
  width:32px;height:32px;
  border:1px solid var(--line);
  background:var(--surface-raised);
  color:var(--ink-soft);
}
.lds-x-bar:hover{background:var(--surface-hover);border-color:var(--line-strong);color:var(--ink);}

/* Armed, the trash grows into the sentence it is about to carry out and
   inverts: the page's own ink as the ground and the page's own ground as
   the ink. Weight and inversion, because a red button is a color a
   reader has to have been taught, and a tinted one is a treatment this
   site does not use. */
.lds-x-del{gap:0;}
.lds-x-del-t{display:none;}
.lds-x-del-on{
  width:auto;
  gap:8px;
  padding:0 12px;
  background:var(--ink);
  border-color:var(--ink);
  color:var(--surface-raised);
  font-size:.82rem;font-weight:600;
  white-space:nowrap;
}
.lds-x-del-on:hover{background:var(--ink);border-color:var(--ink);color:var(--surface-raised);}
.lds-x-del-on .lds-x-del-t{display:inline;}

/* ---- Category tags ----
   Six fills, one per category, carried over from the list builder so a
   rep reads the same colors here that they read there. Solid fill and
   white ink on every one: no tinted grounds, no colored ink, no
   borders. White holds 5:1 or better on all six, which is why the
   orange is darker here than in the builder, where it came to 3.8.

   The six values are tokens, so a theme can move them without every
   rule below being found. */
:root{
  --lead-local:#2e7d32;
  --lead-regional:#1565c0;
  --lead-national:#9a4500;
  --lead-franchise:#c62828;
  --lead-contract:#6a1b9a;
  --lead-other:#4a5560;
  /* The figure on a confidence chip. The ink is white, so the grounds
     are the theme's own hue families deepened until white carries on
     them. The button hues measure 2.26 to 3.38 against white, which is
     why the figure used to be dark. These measure 5.00, 5.49 and 7.61. */
  --lead-sure-ink:#ffffff;
  --lead-sure-green:#2f7d5a;
  --lead-sure-blue:#1f6f9e;
  --lead-sure-grey:#4a5560;
}
.lds-tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:var(--radius-pill);
  color:#ffffff;
  font-size:.7rem;font-weight:700;letter-spacing:.2px;
  white-space:nowrap;
}
.lds-tag-local{background:var(--lead-local);}
.lds-tag-regional{background:var(--lead-regional);}
.lds-tag-national{background:var(--lead-national);}
.lds-tag-franchise{background:var(--lead-franchise);}
.lds-tag-contract{background:var(--lead-contract);}
.lds-tag-other{background:var(--lead-other);}

/* ---- Adding one ---- */
.lds-add{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.lds-empty{
  margin-top:14px;
  padding:16px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink-soft);
  font-size:.86rem;
}

/* A heading a screen reader needs and the eye does not: the actions
   column has no name worth a word of width. Kept in flow, because .tbl-wrap
   is not a containing block and an absolute label inside it
   anchored to the page instead, standing at a fixed x past the right
   edge and giving every phone a sideways scroll of its own. */
.lds-hidden-label{
  display:inline-block;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ---- Phones ----
   The type and the rating are the two columns a rep does not read
   standing on a pavement, so they are the two that go. The table still
   scrolls sideways inside .tbl-wrap for anything else. */
@media (max-width:700px){
  .lds-bar-acts{margin-left:0;}
  .lds-sel-list{max-width:100%;flex:1 1 100%;}
  .lds-tally{gap:8px;font-size:.78rem;}
  .lds-chip{padding:3px 10px;font-size:.78rem;}
  /* Named by column, so a column added to the middle of the table
     cannot silently change which three go. */
  .lds-tbl [data-col="rate"],
  .lds-tbl [data-col="kind"],
  .lds-tbl [data-col="who"]{display:none;}
}

/* ============================================================
   The trash

   The window is the page's own surface over a scrim, tabbed because
   three unrelated things land in the same place and a single mixed list
   would make the reader work out which rule each row follows. The
   history window beside it wears the same box.
   ============================================================ */
/* The two presses at the right end of the market heading are the icon
   alone: gray, no ring and no ground, because neither of them is an
   action on the page under them and a bordered circle would read as
   one more control in the bar. The question mark keeps its circle,
   which is the layout it has everywhere else on the site. */
.lds-hicon{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;
  border:0;background:transparent;
  color:var(--ink-faint);
  font-size:.92rem;line-height:1;
  cursor:pointer;
}
.lds-hicon:hover{color:var(--ink);}
.lds-hicon:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm);}
/* Every heading link carries a left margin of auto of its own, which
   over three of them spread the free space between all three and left
   the clock standing on its own in the middle of the line. The first
   one takes the gap and the ones after it close up behind it, so the
   three read as one group at the right-hand end. */
h2 > .lds-hicon:first-of-type{margin-left:auto;}
h2 > .lds-hicon ~ .head-link{margin-left:0;}

/* The AI press carries words beside its icon, so it takes the width
   its label needs instead of the square the icon presses take. It
   stands last, at the right-hand end of the group. */
.lds-hwide{
  width:auto;gap:6px;
  padding:3px 9px;
  border-radius:var(--radius-sm);
  font-size:.78rem;font-weight:600;
}
.lds-hwide:hover{background:var(--surface-high);}
.lds-hwide i{font-size:.8rem;}

/* The row carries two presses, the eye and the bin, so the cell holding
   them keeps them on one line. */
.lds-c-act{white-space:nowrap;}

/* ---- Starred by ----
   Who has this business on their own starred list, which is a fact
   about every rep and not about the one reading. Nobody, one name, or
   a count that opens onto the names. */
.lds-c-sby{white-space:nowrap;}
.lds-sby-no{color:var(--ink-faint);}
.lds-sby-1{color:var(--ink-soft);}
/* The reader's own star, so they pick it out of the column at a
   glance. Weight and ink, no ground and no border. */
.lds-sby-me{color:var(--ink);font-weight:700;}
.lds-sby-w{position:relative;display:inline-block;}
.lds-sby-go{
  display:inline-flex;align-items:center;gap:5px;
  padding:1px 5px;
  border:0;border-radius:var(--radius-sm);
  background:transparent;
  color:var(--ink-soft);
  font:inherit;font-size:.8rem;
  cursor:pointer;
}
.lds-sby-go:hover{background:var(--surface-high);color:var(--ink);}
.lds-sby-go i{font-size:.6rem;}
.lds-sby-go[aria-expanded="true"] i{transform:rotate(180deg);}
/* Placed by script against the press it hangs off. Fixed and not
   absolute: the table sits in a wrapper that scrolls sideways, and an
   absolute box inside it is cut off at the wrapper's edge. */
.lds-sby-list{
  position:fixed;z-index:60;
  display:flex;flex-direction:column;gap:2px;
  min-width:140px;max-height:190px;overflow-y:auto;
  padding:6px 8px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop, 0 8px 22px rgba(0,0,0,.28));
}
.lds-sby-n{font-size:.79rem;color:var(--ink);}

/* ---- How sure a system reading is ----
   A score out of ten on one of three grounds, in the theme's own hue
   families deepened until white carries on them. The figure is white,
   the way the category tag's is. The vendor name beside it keeps its
   own light ground and dark ink. A row nobody has traced carries no chip
   at all, which is what tells it apart from one traced and found
   wanting. */
.lds-sure{
  display:inline-block;
  margin-left:6px;padding:1px 6px;
  border-radius:var(--radius-pill);
  color:#ffffff;
  font-size:.62rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  vertical-align:middle;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* The three confidence chips, and only those three. The five tags
   below share this class and keep their dark grounds and their white,
   so the ink is set here and not on the class they all wear. */
.lds-sure-sure,
.lds-sure-likely,
.lds-sure-maybe{color:var(--lead-sure-ink);}
.lds-sure-sure{background:var(--lead-sure-green);}
.lds-sure-likely{background:var(--lead-sure-blue);}
.lds-sure-maybe{background:var(--lead-sure-grey);}

/* A mark column's heading is a caret and nothing else: the word that
   names it is read aloud and never drawn, because the column is 24px
   wide and holds one press. */
/* The mark columns head a press whose whole label is the caret, so
   the press carries its own hit area and does not take its size from
   the icon font. */
.lds-sort-q{padding:0;min-width:18px;min-height:18px;justify-content:center;}
.lds-sort-q .lds-sort-ic{margin:0;}

/* ---- Everything sits on the middle of its row ----
   components.css tops every cell in the site, which is right for a
   table of paragraphs. A lead row is one line of facts with a taller
   cell here and there: the name carrying two flag chips, the contact
   carrying a line and two icons. Topped, the short cells floated above
   the tall ones and the row read as ragged. */
.lds-tbl th,
.lds-tbl td{vertical-align:middle;}

/* The pick box, a little larger than a browser draws one: it is the
   first thing read down that edge and the first thing pressed. */
.lds-tbl td.lds-c-pick,
.lds-tbl th.lds-c-pick{text-align:center;}
.lds-tbl .lds-c-pick input[type="checkbox"]{
  width:16px;height:16px;
  margin:0;
  vertical-align:middle;
}

/* The market's own bin opens the edit line, ahead of the name box, so
   the row is one line. What the row says back takes the width it needs
   and takes none when it has nothing to say. */
.lds-edit{align-items:center;}
.lds-edit-say:empty{display:none;}

body.ldb-open{overflow:hidden;}

.ldb{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--scrim);
}
.ldb[hidden]{display:none;}
.ldb-box{
  width:min(680px,100%);max-height:min(80vh,720px);
  display:flex;flex-direction:column;
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-overlay);
  padding:18px 20px 16px;
}
.ldb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ldb-t{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink);}
.ldb-x{
  width:32px;height:32px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:transparent;color:var(--ink-soft);cursor:pointer;
}
.ldb-x:hover{background:var(--surface-high);color:var(--ink);}
.ldb-sub{margin:6px 0 14px;font-size:.84rem;color:var(--ink-soft);}

.ldb-tabs{
  display:flex;gap:4px;padding:4px;margin-bottom:12px;
  background:var(--surface-high);border:1px solid var(--line);
  border-radius:var(--radius);
}
.ldb-tab{
  display:inline-flex;align-items:center;gap:7px;
  flex:1 1 0;justify-content:center;
  padding:7px 12px;border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--ink-soft);
  font-size:.84rem;font-weight:600;cursor:pointer;
}
.ldb-tab:hover{background:var(--surface-hover);color:var(--ink);}
.ldb-tab-on,.ldb-tab-on:hover{background:var(--accent-strong);color:var(--ink-inverse);}
.ldb-tab-n{
  min-width:18px;padding:1px 5px;border-radius:var(--radius-pill);
  background:var(--surface-raised);color:var(--ink-soft);
  font-size:.68rem;font-weight:700;
}
.ldb-tab-on .ldb-tab-n{background:var(--accent-hover);color:var(--ink-inverse);}

.ldb-err{margin-bottom:10px;}
.ldb-body{overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.ldb-empty{margin:14px 0;font-size:.86rem;color:var(--ink-soft);text-align:center;}

.ldb-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 13px;
  background:var(--surface-high);border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.ldb-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ldb-row-t{font-size:.9rem;font-weight:700;color:var(--ink);}
.ldb-row-w{font-size:.82rem;color:var(--ink);}
.ldb-row-s{font-size:.76rem;color:var(--ink-soft);}
.ldb-acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
.ldb-gone-armed{background:var(--danger);border-color:var(--danger);color:var(--ink-inverse);}
.ldb-gone-armed:hover{background:var(--danger);border-color:var(--danger);color:var(--ink-inverse);}

@media (max-width:640px){
  .ldb-row{flex-direction:column;align-items:stretch;}
  .ldb-acts{justify-content:flex-start;}
  .ldb-tab span{display:none;}
}

/* ---- When their financing lapses ----
   The date a rep opens the call with. A lapse inside ninety days wears
   the solid ground the sure badge wears, white on a token picked to
   hold it, because a colored date on a tinted row stops reading on a
   theme. */
.lds-lien{
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.lds-lien-soon{
  display:inline-block;
  padding:1px 7px;
  border-radius:var(--radius-pill);
  background:var(--lead-contract);color:#ffffff;
  font-weight:700;
}
.lds-lien-n{
  display:inline-block;
  margin-left:6px;padding:0 5px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);color:var(--ink-soft);
  font-size:.68rem;font-weight:700;
}

/* A merchant named by two systems as strongly is mid-move, which is
   the call with a reason attached. White on the regional token, the
   same treatment the sure badge wears beside it. */
.lds-moving{background:var(--lead-regional);}

/* A franchise location whose agreement names the till. The franchise
   token carries it, which keeps it apart from the maybe badge the same
   cell can already be wearing. */
.lds-held{background:var(--lead-franchise);}

/* A merchant the archive shows changing system before. The national
   token carries it, which keeps it apart from the three system words
   and from the franchise hold in the same cell. */
.lds-switched{background:var(--lead-national);}

/* What the corporate register last said happened. A new owner is the
   one worth a call, so it wears the strongest of the three; a business
   that ended wears the flat one and belongs out of the list. */
.lds-sos-hands{background:var(--lead-local);}
.lds-sos-change{background:var(--lead-regional);}
.lds-sos-gone{background:var(--lead-other);}

/* How long they have been on what they run. Plain ink and not a badge:
   it is a figure a rep reads down the column, and a pill on every row
   of a market reads as noise. */
.lds-since{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  white-space:nowrap;
}

/* ---- The version their own page names ----
   The string is drawn the way the tenure is: plain ink, a figure a rep
   reads down the column. How far behind what the platform ships now is
   the part worth acting on, so it wears the solid ground the lapse
   inside ninety days wears, white on a token picked to hold it. */
.lds-ver{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  white-space:nowrap;
}
.lds-ver-old{
  display:inline-block;
  margin-left:6px;padding:1px 7px;
  border-radius:var(--radius-pill);
  background:var(--lead-contract);color:#ffffff;
  font-size:.68rem;font-weight:700;
  white-space:nowrap;
}

/* ---- The 3 roles behind the one system answer ----
   The processor takes the card, the ordering system runs the till or
   the storefront, and the delivery marketplace lists them. Each vendor
   is drawn in the pill the System cell draws, so a rep reading across
   the four columns reads one shape. The score word beside it is the
   sure badge, which carries its own ground. */
.lds-role{
  display:inline-block;
  padding:2px 8px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:.72rem;font-weight:600;
}


/* ---- The watch ----
   The bell sits with the star and the eye. A watched business whose
   shared record has been written to since the rep last read it wears
   the fill; pressing it then is reading it, and it goes quiet. */
.lds-mk-watch.lds-mk-on{color:var(--lead-regional);}
/* Two classes, so it beats the rule above it. Written with one class
   first, the watched colour won and the lit bell drew blue ink on an
   orange ground. */
.lds-mk-watch.lds-mk-fresh{
  color:#ffffff;
  background:var(--lead-national);
  border-radius:var(--radius-pill);
}
.lds-mk-watch.lds-mk-fresh:hover{
  color:#ffffff;
  background:var(--lead-franchise);
}