/* Pipezoom - leadrow.css: the cells of 1 row of the lead table.
 *
 * The flag chips beside a name, the category tag, the phone and website
 * cells, the reps who starred it, the confidence of the system reading,
 * the franchise hold, the switching count, the register answer and the
 * lapse date.
 *
 * Split out of leads.css on 2026-09-15 at 31kb. leads.css styles the
 * page and the table around the rows; this file styles the cells.
 *
 * Loaded through the manifest beside leads.css.
 *
 * Doc: docs/notes/app.pipezoom.com/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, 1 for each of the 3 reasons a row was
   classified.

   Solid fill and white ink, as on the category tags. Green for
   big-local, the ones a rep sells to. Neutral for chains (hidden, with
   no 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);}

/* Because a pushed-off row is shown for a rep to check the push, it
   stays readable. */
.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 set mark is a filled icon in the page's accent and an unset mark is
   the faint outline of every other row press, both with no background.
   The accent is a token every look carries. */
.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 2 buttons beside the picker. Because both rules are 1 class deep
   and the later one paints, this rule comes after the plain row button
   above. */
.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 ink as the background and the page's background
   as the ink. The site uses weight and inversion here, with no red or
   tinted button. */
.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
   6 fills, 1 per category, the same colors as the list builder. Solid
   fill and white ink on every one, with no tinted backgrounds, no
   colored ink and no borders. Because white has to hold 5:1 or better
   on all 6, the orange is darker here than in the builder (3.8 there).

   The 6 values are tokens a theme can move in 1 place. */
: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, in white. Because the ink is white,
     the backgrounds are the theme's own hues deepened to hold it: 5.00,
     5.49 and 7.61 against white. The button hues measure 2.26 to 3.38. */
  --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 a row */
.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 for a screen reader only: the actions column has no name
   worth a word of width. Because .tbl-wrap is not a containing block, an
   absolute label inside it anchors to the page and adds a sideways
   scroll on a phone; this label stays in flow. */
.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, the 2 columns a rep does not read standing
   on a sidewalk, are hidden. The table still scrolls sideways inside
   .tbl-wrap for the rest. */
@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;}
  /* Each hidden column is named by its data-col value. */
  .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 background over a scrim. Because 3
   unrelated things land in it, each with its own rule, it has 1 tab
   each. The history window beside it wears the same box.
   ============================================================ */
/* Because neither of the 2 presses at the right end of the market
   heading acts on the page under them, each is the icon alone: gray,
   with no ring and no background. The question mark keeps its circle,
   as 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 its own left margin of auto. The first one
   takes the gap and the ones after it close up behind it, and the 3
   form 1 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 and takes the width its
   label needs. 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 cell holding the row's 2 presses, the eye and the bin, keeps them
   on 1 line. */
.lds-c-act{white-space:nowrap;}

/* Starred by
   The reps who have this business on their own starred list, across
   every rep. Nobody, 1 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, in weight and ink, with no background 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 its press. Because the table is in a wrapper
   that scrolls sideways and cuts an absolute box off at its edge, the
   list is fixed. */
.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);}

/* The confidence of a system reading
   A score out of 10 on 1 of 3 backgrounds, the theme's own hues
   deepened to hold white. The figure is white, as on the category tag.
   The vendor name beside it keeps its own light background and dark
   ink. A row nobody has traced carries no chip at all. */
.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 3 confidence chips alone. Because the 5 tags below share this
   class and keep their dark backgrounds and white ink, the ink is set on
   these 3. */
.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 alone. Because the column is 24px
   wide and holds 1 press, the word that names it is read aloud by a
   screen reader and never drawn. */
/* The press heading a mark column is the caret alone and carries its
   own hit area, sized apart 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;}

/* Every cell is centered on its row
   components.css aligns every cell in the site to the top, for tables
   of paragraphs. A lead row is 1 line of facts with a taller cell here
   and there: the name with 2 flag chips, the contact with a line and 2
   icons. */
.lds-tbl th,
.lds-tbl td{vertical-align:middle;}

/* The pick box, a little larger than a browser's default: 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, on 1
   line. The row's reply takes the width it needs and none when it is
   empty. */
.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;}
}

/* The financing lapse date
   The date a rep opens the call with. Because a colored date on a
   tinted row stops reading on some theme, a lapse inside 90 days wears
   the sure badge's solid background, white on a token picked to hold
   it. */
.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 2 systems as strongly is mid-move: a call with a
   reason attached. White on the regional token, as on the sure badge
   beside it. */
.lds-moving{background:var(--lead-regional);}

/* A franchise location whose agreement names the till, on the franchise
   token, apart from the maybe badge the same cell can carry. */
.lds-held{background:var(--lead-franchise);}

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

/* The corporate register's last event. A new owner is worth a call and
   wears the strongest of the 3; 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);}

/* The time on the current system: a figure a rep reads down the column,
   in plain ink with no pill. */
.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 like the tenure: plain ink, a figure a rep reads
   down the column. The gap behind the platform's current release is the
   part worth acting on and wears the solid background of the lapse
   inside 90 days, 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 single 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 System cell's pill, the same across the 4 columns.
   The score word beside it is the sure badge, with its own background. */
.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 is beside the star and the eye. A watched business whose
   shared record changed since the rep last read it wears the fill, and
   pressing the bell marks it read. */
.lds-mk-watch.lds-mk-on{color:var(--lead-regional);}
/* 2 classes deep, to beat the rule above it. */
.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);
}