/* ============================================================
   Pipezoom - 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 holds the day and
   the days remaining, and the rest holds the facts the call needs.

   Every value is a token, for all 4 looks.

   Loaded through the manifest beside leads.css.
   Doc: docs/notes/app.pipezoom.com/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 3 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);}

/* The facts the call needs in hand
   The lead table's own cell classes come along for the ink and the cut.
   Because their widths belong to a table column, the width is released
   here and the line sizes each fact. */
.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 cut is on the link, the flex item that runs long. */
.ldn-f a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* The gap here gives the spacing, and the left margin both carry for a
   table cell is set to 0. */
.ldn-f .lds-who-l,.ldn-f .lds-sure{margin-left:0;}

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

/* Narrow
   Because 132px of date beside a long name leaves the name 2 words a
   line, the day moves above the business. */
@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;}
}