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

   The Take Action page: the window control, the count over the list,
   and 1 line per dated row. The left end of a line is the day and the
   days remaining, and the rest is what the call needs in hand.

   Every value is a token, so the 4 looks carry the page without a rule
   of their own.

   Loaded through the manifest beside leads.css.
   Doc: docs/notes/new/css/leadnow.css.md
   ============================================================ */

.ldn{margin-top:16px;}

/* ---- The window ---- */
.ldn-win{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.ldn-win-l{font-size:.86rem;font-weight:600;color:var(--ink-soft);}
.ldn-sel{width:auto;min-width:140px;}
.ldn-err{margin-bottom:12px;}

.ldn-tally{
  font-size:.86rem;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.ldn-none{
  display:flex;align-items:center;gap:9px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-raised);
  color:var(--ink-soft);
  font-size:.9rem;
}

/* ---- The list ---- */
.ldn-list{display:flex;flex-direction:column;gap:8px;}

.ldn-row{
  display:flex;align-items:flex-start;gap:14px;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-raised);
  color:var(--ink);
  text-align:left;
}
.ldn-row:hover{background:var(--surface-hover);border-color:var(--line-strong);}

/* ---- The day ---- */
.ldn-when{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  flex:0 0 132px;
  padding-top:1px;
}
.ldn-date{font-size:.93rem;font-weight:700;color:var(--ink);white-space:nowrap;}
.ldn-left{
  display:inline-block;
  padding:2px 9px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.72rem;font-weight:600;
  white-space:nowrap;
}

/* ---- The business ---- */
.ldn-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.ldn-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ldn-name{font-size:.95rem;font-weight:600;color:var(--ink);}
.ldn-mkt{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.78rem;color:var(--ink-faint);
}
.ldn-why{
  padding:2px 8px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  color:var(--ink-soft);
  font-size:.72rem;font-weight:600;
}
.ldn-word{font-size:.84rem;color:var(--ink-soft);}

/* ---- The three readings ---- */
.ldn-runs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:1px;}
.ldn-run{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:2px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-high);
}
.ldn-run-l{font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);}
.ldn-run-v{font-size:.8rem;color:var(--ink);}

/* ---- What the call needs in hand ----
   The lead table's own cell classes ride along for the ink and the
   cut. Their widths belong to a table column, so the width is released
   here and the line decides how much room each fact takes. */
.ldn-facts{display:flex;align-items:center;gap:5px 14px;flex-wrap:wrap;}
.ldn-f{
  display:inline-flex;align-items:center;gap:6px;
  min-width:0;max-width:100%;
  font-size:.8rem;
}
.ldn-facts .lds-c-addr,.ldn-facts .lds-c-tel,.ldn-facts .lds-c-web,
.ldn-facts .lds-c-num,.ldn-facts .lds-c-pos,.ldn-facts .lds-c-who{
  width:auto;padding:0;text-align:left;
}
.ldn-facts .lds-c-addr{max-width:250px;}
.ldn-facts .lds-c-web{max-width:180px;}
.ldn-facts .lds-c-who{max-width:210px;}
.ldn-f > i{flex:0 0 auto;color:var(--ink-faint);font-size:.76rem;}
/* The link is the flex item that runs long, so the cut is on it. */
.ldn-f a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Both carry their own left margin for a table cell, which the gap
   here already gives them. */
.ldn-f .lds-who-l,.ldn-f .lds-sure{margin-left:0;}

.ldn-edit{flex:0 0 auto;margin-top:1px;}

/* ---- Narrow ----
   The day moves above the business, because 132px of date beside a
   long name leaves the name two words a line. */
@media (max-width:560px){
  .ldn-row{flex-direction:column;gap:9px;padding:12px;}
  .ldn-when{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;}
  .ldn-main{width:100%;}
  .ldn-facts{gap:5px 11px;}
  .ldn-facts .lds-c-addr,.ldn-facts .lds-c-web,.ldn-facts .lds-c-who{max-width:100%;}
  .ldn-name{font-size:.92rem;}
}