/* ============================================================
   Pipezoom - css/leadrefine.css, the Refine panel over the lead table.
   The press in the toolbar, the controls strip, the 3 tick sets, the 6
   group cards with 1 row a check, and the lines of a run under the
   progress bar. The panel and the group cards take the raised
   background with the 1px line (docs/29-leads-workspace.md, question
   31). Every color is a token the 4 themes set.
   Defines the .lrf classes and the .lai-got lines.
   Notes: docs/notes/app.pipezoom.com/css/leadrefine.css.md
   ============================================================ */

/* The press in the toolbar */
.lrf-go{display:inline-flex;align-items:center;gap:7px;}
.lrf-go-car{font-size:.7rem;transition:transform .12s ease;}
.lrf-go[aria-expanded="true"] .lrf-go-car{transform:rotate(180deg);}
.lrf-go-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 panel. A scroll to it from its press stops under the top bar and
   the crumb row (--lds-stick, css/leads.css). */
.lrf{
  display:flex;flex-direction:column;gap:12px;
  padding:13px 14px;
  margin-bottom:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  scroll-margin-top:var(--lds-stick, 0px);
}

/* The controls strip
   Under 1100px every control wraps in reading order, Start last. From
   1100px the strip is 2 lines: the rows, the mode and the spend menu
   with Start at the end, then the pace, the floor and the cadence, each
   under its own words. */
.lrf-strip{display:flex;flex-direction:column;gap:10px;}
.lrf-head{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;}
.lrf-who,
.lrf-mode{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;}
.lrf-mode{color:var(--ink-soft);}
.lrf-r{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.83rem;color:var(--ink);cursor:pointer;white-space:nowrap;
}
.lrf-r input{margin:0;cursor:pointer;accent-color:var(--accent-strong);}
.lrf-r b{
  padding:1px 7px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);color:var(--ink-soft);
  font-size:.72rem;font-weight:700;
}
.lrf-line{display:flex;align-items:flex-end;gap:10px 24px;flex-wrap:wrap;}
.lrf-run{align-self:flex-start;}
@media (min-width:1100px){
  .lrf-strip{
    display:grid;align-items:center;gap:12px 16px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"head go" "line line";
  }
  .lrf-head{grid-area:head;}
  .lrf-line{grid-area:line;}
  .lrf-run{grid-area:go;align-self:center;}
}

/* The count of ticked checks on Start, on a white chip */
.lrf-run-n{
  min-width:18px;margin-left:2px;padding:0 6px;
  border-radius:var(--radius-pill);
  background:var(--ink-inverse);color:var(--accent-strong);
  font-size:.7rem;font-weight:700;line-height:1.6;text-align:center;
  font-variant-numeric:tabular-nums;
}

/* A setting of the second line: its words over its control. The floor
   lines its 3 figures up under its words, 2 across on a phone. */
.lrf-par,
.lrf-floor,
.lrf-when{display:grid;align-items:center;gap:4px 12px;min-width:0;}
.lrf-floor{grid-template-columns:repeat(3,auto);}
.lrf-when{grid-template-columns:auto auto;}
.lrf-par-l,
.lrf-floor-l,
.lrf-when-l{grid-column:1 / -1;font-size:.76rem;font-weight:600;color:var(--ink-soft);}
.lrf-line .lds-sel{width:auto;min-width:0;}
.lrf-line .sel-in{padding:6px 28px 6px 10px;font-size:.8rem;}
.lrf-floor-f{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.8rem;color:var(--ink-soft);
}
.lrf-floor-in{
  flex:0 0 6em;width:6em;min-width:0;padding:6px 8px;
  font-size:.8rem;font-variant-numeric:tabular-nums;
}
.lrf-when-was{font-size:.78rem;color:var(--ink-soft);white-space:nowrap;}
@media (max-width:639px){
  .lrf-floor{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lrf-floor-f{display:flex;}
  .lrf-floor-in{flex:1 1 auto;width:auto;}
  .lrf-run{align-self:stretch;}
}

/* The rows this run covers, under the strip while the 2 counts differ.
   leadrefine.js draws it and takes it off again. */
.lrf-cover{margin:0;font-size:.82rem;color:var(--ink-soft);}

/* A run that ended with checks stopped writes 1 line a check, and
   pre-line keeps its newlines. */
.lrf-say{margin:0;font-size:.81rem;line-height:1.5;color:var(--ink-soft);white-space:pre-line;}
.lrf-say.lrf-busy{color:var(--ink);}

/* The 3 tick sets over the grid, light presses that turn solid accent
   while their whole set is ticked. The model line of Find businesses
   ends the row. */
.lrf-pre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lrf-pre-b[aria-pressed="true"]{
  background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);
}
.lrf-pre-b[aria-pressed="true"]:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.lrf-pre-b:disabled{opacity:.5;cursor:default;}
.lrf-model{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-size:.79rem;color:var(--ink-faint);
}

/* The group cards
   3 across from 1200px, 2 from 900px, 1 under. Each card is as tall as
   its own rows. */
.lrf-groups{
  display:grid;gap:10px;align-items:start;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .lrf-groups{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1200px){
  .lrf-groups{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.lrf-group{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding:10px 10px 8px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}

/* The card's head: the box that ticks the group, its name and the count */
.lrf-group-h{display:flex;align-items:center;gap:10px;padding:0 4px 0 6px;}
.lrf-group-l{
  display:inline-flex;align-items:center;gap:8px;
  flex:1 1 auto;min-width:0;cursor:pointer;
}
.lrf-group-t{font-size:.86rem;font-weight:700;color:var(--ink);}
.lrf-group-n{
  flex:none;padding:1px 8px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);color:var(--ink-soft);
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.lrf-gbox,
.lrf-box{flex:none;margin:0;cursor:pointer;accent-color:var(--accent-strong);}
.lrf-gbox:disabled{cursor:default;}

/* 1 row a check: the box, the name and the tags are 1 label, and the
   info press beside it opens the note on the line under them. */
.lrf-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
.lrf-row{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 4px;
  padding:5px 4px 5px 6px;
  border-radius:var(--radius-sm);
}
.lrf-row:hover{background:var(--surface-high);}
.lrf-pick{
  display:flex;align-items:flex-start;gap:8px;
  flex:1 1 0;min-width:0;cursor:pointer;
}
.lrf-pick .lrf-box{margin-top:2px;}
.lrf-t{flex:1 1 auto;min-width:0;font-size:.83rem;font-weight:600;line-height:1.35;color:var(--ink);}
.lrf-tags{display:inline-flex;align-items:center;gap:4px;flex:none;margin-top:1px;}

/* The cost of a check
   Because colored ink on a tinted background stops reading on some
   theme, every tag is white on a solid background. The 3 backgrounds
   are the category tokens, picked to hold white: 5.13, 5.75 and 9.39
   against it. */
.lrf-tag{
  padding:2px 7px;
  border-radius:var(--radius-pill);
  font-size:.6rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  white-space:nowrap;
  color:#ffffff;
  background:var(--lead-local);
}
.lrf-tag-model{background:var(--lead-regional);}
.lrf-tag-paid{background:var(--lead-contract);}

/* The info press and the note it opens */
.lrf-info{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:22px;margin:0;padding:0;
  border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--ink-faint);
  font-size:.82rem;cursor:pointer;
}
.lrf-info:hover,
.lrf-info[aria-expanded="true"]{background:var(--surface-hover);color:var(--ink);}
.lrf-info:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.lrf-note{
  flex:1 1 100%;min-width:0;
  margin:3px 28px 2px 21px;
  font-size:.78rem;line-height:1.5;color:var(--ink-soft);
}

/* A row waiting on a key
   Gray marks it: a key mark in the box's place, the name and the tags
   in the faint ink, then the condition and the press that ends it on
   the line under. Only that press acts on the row. */
.lrf-row-off:hover{background:transparent;}
.lrf-row-off .lrf-pick{cursor:default;}
.lrf-row-off .lrf-t{color:var(--ink-faint);}
.lrf-row-off .lrf-tag{background:var(--ink-faint);}
.lrf-off-i{flex:none;width:13px;margin-top:1px;font-size:.74rem;color:var(--ink-faint);text-align:center;}
.lrf-off-w{
  display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;
  flex:1 1 100%;min-width:0;
  margin:4px 0 2px 21px;
  font-size:.77rem;line-height:1.45;color:var(--ink-soft);
}

/* The Apollo row's own question
   It has its own label: pressing its words answers the question and
   leaves the row's box alone. */
.lrf-opts{display:flex;flex-wrap:wrap;gap:6px 14px;flex:1 1 100%;margin:3px 0 1px 21px;}
.lrf-opt{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;color:var(--ink-faint);cursor:pointer;
}
.lrf-opt input{margin:0;cursor:pointer;accent-color:var(--accent-strong);}

/* A run holds the pane: the boxes take no new answer until it ends. */
.lrf-run-on .lrf-groups,
.lrf-run-on .lrf-pre,
.lrf-run-on .lrf-who,
.lrf-run-on .lrf-floor,
.lrf-run-on .lrf-mode,
.lrf-run-on .lrf-spend{opacity:.55;pointer-events:none;}

/* The fields a run filled in
   1 line a business under the progress bar, with the fields that gained
   a value. A business the run read and left alone does not appear. */
.lai-got{
  list-style:none;
  max-height:190px;overflow-y:auto;
  margin:8px 0 0;padding:0;
  border-top:1px solid var(--line);
}
.lai-got-i{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:5px 2px;
  border-bottom:1px solid var(--line);
  font-size:.79rem;color:var(--ink-soft);
}
.lai-got-i:last-child{border-bottom:0;}
.lai-got-b{font-weight:700;color:var(--ink);}
.lai-got-f{color:var(--ink-faint);}
.lai-got-f b{font-weight:600;color:var(--ink-soft);}
.lai-got-n{margin:8px 0 0;font-size:.76rem;color:var(--ink-faint);}

/* The checks that stopped
   1 line a check under the bar: the name on its card, then its message.
   Because it is the only thing on the bar a rep has to act on, it stays
   until the rep closes the bar. */
.lrf-bad{
  list-style:none;
  margin:9px 0 0;padding:0;
  border-top:1px solid var(--line);
}
.lrf-bad-i{
  display:block;
  padding:6px 2px;
  border-bottom:1px solid var(--line);
  font-size:.79rem;line-height:1.45;color:var(--ink-soft);
}
.lrf-bad-i:last-child{border-bottom:0;}
.lrf-bad-t{display:block;font-weight:700;color:var(--ink);}
.lrf-bad-w{display:block;}

/* 3 tiers of progress
   A refine run works a market through 1 set of checks at a time. The
   finished sets read as lines, the running set carries its own bar and
   the business it is on, and the whole run's bar is underneath. */
.lrf-tiers{margin:0 0 11px;}

.lrf-sets{list-style:none;margin:0;padding:0;display:grid;gap:3px;}
.lrf-sets:empty{display:none;}
.lrf-sets li{
  display:flex;align-items:baseline;gap:10px;
  font-size:.83rem;color:var(--ink-faint);
}
.lrf-set-t{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lrf-set-p{flex:none;font-variant-numeric:tabular-nums;}
.lrf-sets li.lrf-set-done .lrf-set-t{color:var(--ink-soft);}

/* 1 line a check in flight
   Name, its own presses out, the row it is reading, and its own bar.
   The lines stack in the order the pane lists the checks. */
.lrf-flight{margin:9px 0 0;font-size:.78rem;color:var(--ink-faint);}

.lrf-now{margin:9px 0 0;display:grid;gap:9px;}
.lrf-one-top{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  margin:0 0 4px;font-size:.83rem;
}
.lrf-one-t{
  flex:1 1 auto;min-width:0;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lrf-one-n{flex:none;font-size:.76rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.lrf-one-at{
  flex:0 1 auto;min-width:0;font-size:.78rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* The track and its reading share 1 line, with the number beside its
   own bar. */
.lrf-bar{display:flex;align-items:center;gap:10px;}
.lrf-bar .lai-track{flex:1 1 auto;}
.lrf-pct{
  flex:none;min-width:3.1em;text-align:right;
  font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--ink-faint);
}

/* Because the set bar moves a batch at a time and the name above it
   moves a row at a time, its fill glides and the total's fill steps. */
.lrf-now .lai-track i{transition:width .9s linear;}

/* A run found waiting on the record */
.lrf-back{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:11px 0 0;font-size:.85rem;color:var(--ink-soft);
}
.lrf-back > span{flex:1 1 15em;min-width:0;}

@media (max-width:640px){
  .lrf-one-top{gap:2px 12px;}
  .lrf-one-at{flex-basis:100%;}
}

/* This month's Google Places calls
   Because it is a fact about the 2 Places rows, it is under the group
   cards. The numbers are on the page background in the plain ink the
   rest of the pane uses. */
.lrf-use{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding:9px 12px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.lrf-use-h{
  font-size:.7rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink-soft);
}
.lrf-use-t{
  font-size:.79rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.lrf-use-t b{font-weight:700;}
.lrf-use-list{flex:1 1 100%;margin-top:4px;}
.lrf-use-rs{
  list-style:none;margin:0;padding:0;
  max-height:22em;overflow:auto;
}
.lrf-use-r{
  display:grid;
  grid-template-columns:9.5em minmax(0,1fr) 9em 6em;
  gap:8px;align-items:baseline;
  padding:5px 0;
  border-bottom:1px solid var(--line);
  font-size:.77rem;color:var(--ink);
}
.lrf-use-r:last-child{border-bottom:0;}
.lrf-use-w,.lrf-use-g{
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.lrf-use-q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lrf-use-k{color:var(--ink-soft);}
.lrf-use-n{margin:6px 0 0;font-size:.77rem;color:var(--ink-soft);}
@media (max-width:859px){
  .lrf-use-r{grid-template-columns:minmax(0,1fr) 7em;}
  .lrf-use-w,.lrf-use-k{display:none;}
}

/* The spend allowed to a press
   A menu on the strip, shut to 1 line. Because a rep can want 2 of the 3
   kinds together, they are checkboxes. */
.lrf-spend{position:relative;}
.lrf-spend-s{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 10px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:.79rem;color:var(--ink);
  cursor:pointer;list-style:none;
}
.lrf-spend-s::-webkit-details-marker{display:none;}
.lrf-spend-s:hover{background:var(--surface-high);}
.lrf-spend[open] .lrf-spend-s i{transform:rotate(180deg);}
.lrf-spend-s i{font-size:.7rem;color:var(--ink-soft);transition:transform .15s;}
.lrf-spend-m{
  position:absolute;z-index:6;top:calc(100% + 4px);left:0;min-width:16em;
  display:flex;flex-direction:column;gap:2px;
  padding:6px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop, 0 8px 22px rgba(0,0,0,.28));
}
.lrf-spend-o{
  display:flex;align-items:center;gap:8px;
  padding:5px 7px;border-radius:var(--radius-sm);
  font-size:.79rem;color:var(--ink);cursor:pointer;
}
.lrf-spend-o:hover{background:var(--surface-high);}
.lrf-spend-o input{cursor:pointer;accent-color:var(--accent-strong);}

/* The key fields under a row waiting on a key
   They open at the row, and the row stays on screen while the rep
   types the key. */
.lrf-off-k{flex:1 1 100%;min-width:0;margin:6px 0 2px 21px;}
.lrf-off-k .aik{display:block;margin:0;}
.lrf-off-k .aik-row{margin:0;}
.lrf-off-k .aik-how{margin:6px 0;}