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

   The Refine pane over the lead table: the press that opens it, who
   the run covers, one card a check, and the list of what a run filled
   in under the progress bar.

   It wears the page's own card tokens, the ones the rows under it
   wear. The shell tokens read as dark slate on the light theme's white
   card.

   Doc: docs/notes/new/css/leadrefine.css.md
   ============================================================ */

/* ---- The press in the row of filters ---- */
.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 pane ---- */
.lrf{
  display:flex;flex-direction:column;gap:10px;
  padding:13px 14px;
  margin-bottom:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.lrf-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.lrf-who{display:flex;align-items:center;gap:14px;}
.lrf-r{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.83rem;color:var(--ink);cursor:pointer;
}
.lrf-r input{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-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-soft);}

/* Which model provider the account's Find businesses run sorts with.
   No check on this pane reaches a model, and the one run that does is
   the one a rep is asking about when they read the pane. */
.lrf-model{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.79rem;color:var(--ink-faint);
}

.lrf-run{margin-left:auto;}

/* ---- The rows this run covers ----
   Under the choice and above the cadence. leadrefine.js draws it and
   takes it off again while the run covers the whole market. */
.lrf-cover{margin:0;font-size:.82rem;color:var(--ink-soft);}

/* A run that ended with checks stopped writes one line a check, so the
   newlines it sends are kept and the reasons read down the pane. */
.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);}

/* ---- One card a check ----
   Two across on a desk and one on a phone. A card is the label, so
   the whole of it is the press that ticks the box in its corner. */
.lrf-cards{
  display:grid;gap:9px;
  grid-template-columns:1fr;
}
@media (min-width:860px){
  .lrf-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}

.lrf-card{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 12px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  cursor:pointer;
}
.lrf-card:hover{background:var(--surface-high);}
.lrf-card:has(.lrf-box:checked){border-color:var(--accent-strong);}
.lrf-box{margin-top:2px;flex:none;cursor:pointer;accent-color:var(--accent-strong);}
.lrf-card-b{display:flex;flex-direction:column;gap:4px;min-width:0;}
.lrf-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lrf-t{font-size:.87rem;font-weight:700;color:var(--ink);}
.lrf-s{font-size:.79rem;line-height:1.5;color:var(--ink-soft);}

/* A card that asks a question of its own.
   A word inside a label presses the box that label names, so the
   second question sits outside the card's label and this box holds the
   two. The shell comes out here with it, so the card is still the one
   box every other card is, and the hover follows the label alone
   because that is the part a press acts on. The indent is the column
   the card's words stand in, the one `.lrf-off-w` lines up with. */
.lrf-card-w{
  display:flex;flex-direction:column;
  padding:11px 12px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.lrf-card-w:has(.lrf-card:hover){background:var(--surface-high);}
.lrf-card-w:has(.lrf-box:checked){border-color:var(--accent-strong);}
.lrf-card-w .lrf-card{padding:0;background:transparent;border:0;}
.lrf-card-w .lrf-opts{padding-left:22px;}

/* ---- What a check costs to run ----
   White on a solid ground at every tag: colored ink on a tinted ground
   is the one pairing that stops reading on a theme. The three grounds
   are the category tokens, which were picked to hold white and measure
   5.13, 5.75 and 9.39 against it. */
.lrf-tag{
  padding:2px 8px;
  border-radius:var(--radius-pill);
  font-size:.64rem;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 checks waiting on a key ----
   Under the live cards, in the same card shell, with a key mark where
   the box would be. The outer box carries the edge and the card inside
   carries the layout, so the condition and its press sit in the same
   box as the card they belong to. */
.lrf-off{
  display:grid;gap:9px;
  padding-top:11px;
  border-top:1px solid var(--line);
}
.lrf-off-h{
  display:flex;align-items:center;gap:8px;
  margin:0;
  font-size:.83rem;font-weight:700;color:var(--ink-soft);
}
.lrf-off-c{
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
/* The card here ticks nothing. The press under it is the only thing
   on the block that acts, so the card drops the hand and the hover the
   live ones wear. */
.lrf-off-c .lrf-card{border:0;background:transparent;cursor:default;}

/* Grey is the whole reading. The label, the sentence and the cost tag
   all drop to the faint ink, and the tag drops its own ground with
   them: a live Paid card and a shut one must not read alike. */
.lrf-off-c .lrf-t,
.lrf-off-c .lrf-s{color:var(--ink-faint);}
.lrf-off-c .lrf-tag{background:var(--ink-faint);}

.lrf-off-i{margin-top:3px;flex:none;font-size:.8rem;color:var(--ink-faint);}

/* The condition the card is in, and the press that ends it, on one
   line under the card and wrapping to two on a phone. */
.lrf-off-w{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0;padding:0 12px 11px 34px;
  font-size:.79rem;line-height:1.5;color:var(--ink-soft);
}

/* ---- The question the Apollo card asks of its own ----
   A label of its own, so its words answer it and not the card. */
.lrf-opts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:3px;}
.lrf-opt{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;color:var(--ink-faint);cursor:pointer;
}
.lrf-opt input{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-cards,
.lrf-run-on .lrf-who,
.lrf-run-on .lrf-floor,
.lrf-run-on .lrf-mode{opacity:.55;pointer-events:none;}

/* ---- What a run filled in ----
   One line a business under the progress bar, holding the fields that
   gained a value. A business the run read and left alone never
   appears, so the list is what moved. */
.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 ----
   One line a check under the bar, the name it carries on its card and
   then what it said. It stays until the rep closes the bar, because it
   is the one thing on the bar that has to be acted on. */
.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;}

/* ---- Three tiers of progress ----
   A refine run works a market through one set of checks at a time, so
   one bar could only ever say the whole thing. The sets already
   through read as lines, the set running carries its own bar and the
   business it is on, and the whole run sits 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);}

/* ---- One 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 sit on one line, so the number is beside
   the bar it belongs to and not under the next one. */
.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);
}

/* The set bar moves a batch at a time and the name above it moves a
   row at a time, so its fill glides where the total's 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%;}
}

/* ---- How often this market is read again ----
   Sits under the head, above the cards, because it is about the whole
   market and not about one check. */
.lrf-when{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 0;
  border-top:1px solid var(--line);
}
.lrf-when-l{font-weight:600;}
.lrf-when-was{color:var(--ink-soft);font-size:.82rem;}

/* ---- How many requests of one check go out at once ----
   Its own row under the cadence, because it is about how hard the
   page presses and not about when. */
.lrf-par{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 0;
  border-top:1px solid var(--line);
}
.lrf-par-l{font-weight:600;}

/* ---- The volume floor ----
   The three figures a market is worked above, on one row under the
   request count. The boxes wear the page's own `lds-in` class, so they
   read as the fields the rest of the lead page uses. Under 860px the
   row wraps and each figure takes the width it needs. */
.lrf-floor{
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:8px 0;
  border-top:1px solid var(--line);
}
.lrf-floor-l{flex:none;font-weight:600;}
.lrf-floor-f{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;color:var(--ink-soft);
}
.lrf-floor-in{
  flex:0 0 8.5em;width:8.5em;min-width:0;
  font-variant-numeric:tabular-nums;
}
@media (max-width:859px){
  .lrf-floor-f{flex:1 1 13em;}
  .lrf-floor-in{flex:1 1 auto;width:auto;}
}

/* ---- This month's Google Places calls ----
   Under the cards, because it is a fact about the two cards above it
   and not a control. The numbers sit on the page ground with 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;}
}

/* ---- What a press may spend ----
   A menu on the head, shut to one line. The three kinds are checkboxes
   because a rep can want two of them at once. */
.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);}
.lrf-run-on .lrf-spend{opacity:.55;pointer-events:none;}

/* ---- The key fields under a card waiting on one ----
   Open where the card is. A window over the pane took the card the rep
   was reading off the screen to type one key. */
.lrf-off-k{margin:6px 0 0;}
.lrf-off-k .aik{display:block;margin:0;}
.lrf-off-k .aik-row{margin:0;}
.lrf-off-k .aik-how{margin:6px 0;}