/* ============================================================
   Pipezoom - leadai.css

   The row above a market that fills it from the map: the type to find,
   the distance, the count and the button. Under it the progress of a
   run while one is going, and the last few runs with an Undo on each.
   The controls are the shell's own; this file holds the layout, the
   progress track and the run rows.
   ============================================================ */

.lai{
  margin-bottom:14px;
  padding:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.lai-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

/* The search row's own press, on the panel's raised background, in the
   page's ink with no color of its own. Only the chevron moves. */
.lai-fold{padding:0;}
.lai-head{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px;
  background:none;border:0;border-radius:var(--radius);
  color:var(--ink);font:inherit;font-size:.88rem;font-weight:600;
  text-align:left;cursor:pointer;
}
.lai-head:hover{background:var(--surface-hover);}
.lai-head:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}
.lai-head i{color:var(--ink-faint);}
.lai-head-t{flex:1 1 auto;min-width:0;}
.lai-head-ic{transition:transform .15s ease;}
.lai-fold-on .lai-head-ic{transform:rotate(180deg);}
/* The body keeps the head's 12px sides, with a small gap above it and
   the same gap between its 2 rows. */
.lai-body{padding:4px 12px 14px;}
.lai-body .lai-bar + .lai-bar{margin-top:10px;}
.lai-f{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.lai-f .lds-sel{min-width:210px;}
.lai-f .lds-in-xs{flex:0 0 74px;}
/* Because "Within 10 miles" is 1 sentence with the box in the middle,
   the unit follows the box. */
.lai-unit{
  font-size:.82rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.lai-bar .btn{margin-left:auto;}
/* The service that sorts the run's results, beside the press that
   starts the run. A rep reads the model in use without opening the
   Access screen. */
.lai-model{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.lai-model i{font-size:.8rem;color:var(--ink-faint);}
.lai .lds-err{margin:12px 0 0;}

/* The results of a Reference Solutions search
   1 row a business under the bar, in the market table's own type. A row
   has Remove on the left and Add to the open market on the right, and
   the whole block folds with the bar. */
.axl-got{margin-top:14px;}
.axl-got-n{margin:0 0 8px;font-size:.82rem;color:var(--ink-soft);}
.axl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.axl-tbl{font-size:.84rem;margin:0;}
.axl-tbl th,.axl-tbl td{padding:6px 8px;vertical-align:middle;white-space:nowrap;}
.axl-tbl td{max-width:260px;overflow:hidden;text-overflow:ellipsis;}
.axl-tbl td:first-child{font-weight:400;}
.axl-tbl td.axl-c-biz{font-weight:600;color:var(--ink);}
.axl-c-x,.axl-c-add{width:1%;}
.axl-c-x{padding-right:0;}
.axl-c-num{text-align:right;}
.axl-tbl td.axl-c-num{text-align:right;font-variant-numeric:tabular-nums;}
.axl-tbl td.axl-c-add{text-align:right;overflow:visible;}
.axl-tbl .lds-x{width:26px;height:26px;}
.axl-tbl tr.axl-busy td{opacity:.55;}

/* A run in progress */
.lai-prog{margin-top:12px;}
.lai-prog-top{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.84rem;
  margin-bottom:8px;
}
.lai-prog-top > i{color:var(--accent);}
.lai-state{color:var(--ink);font-weight:600;}
.lai-count{color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.lai-prog-do{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.lai-track{
  height:6px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  overflow:hidden;
}
.lai-track i{
  display:block;height:100%;width:0;
  background:var(--accent-strong);
  border-radius:var(--radius-pill);
  transition:width .3s;
}

/* The last runs */
.lai-runs{display:grid;gap:6px;margin-top:12px;}
.lai-runs:empty{display:none;}
.lai-run{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 11px;
  background:var(--surface-high);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:.82rem;
  color:var(--ink-soft);
}
.lai-run-when{color:var(--ink);font-weight:600;white-space:nowrap;}
.lai-run-what{flex:1 1 240px;min-width:0;}
.lai-run-note{flex:1 1 100%;color:var(--ink-faint);font-size:.78rem;}
.lai-run .btn{margin-left:auto;}
.lai-run-st{
  display:inline-block;
  padding:1px 8px;
  border-radius:var(--radius-pill);
  font-size:.66rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  color:#ffffff;
  background:var(--lead-other);
}
.lai-run-st-done{background:var(--lead-local);}
.lai-run-st-failed{background:var(--lead-franchise);}
.lai-run[data-state="undone"] .lai-run-what,
.lai-run[data-state="undone"] .lai-run-when{opacity:.55;}

/* 1 run opened onto the businesses it changed
   The whole entry is the press. The caret shows its direction, and the
   row under it carries the businesses. */
.lai-run{cursor:pointer;}
.lai-run-car{color:var(--ink-faint);font-size:.7rem;transition:transform .12s ease;}
.lai-run-open .lai-run-car{transform:rotate(90deg);}
.lai-run .btn{cursor:pointer;}
.lai-run-rows{
  flex:1 1 100%;
  max-height:260px;overflow-y:auto;
  margin-top:4px;padding-top:6px;
  border-top:1px solid var(--line);
  cursor:default;
}
.lai-rw{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:4px 0;
  border-bottom:1px solid var(--line);
  font-size:.78rem;
}
.lai-rw:last-child{border-bottom:0;}
.lai-rw-b{font-weight:700;color:var(--ink);}
.lai-rw-f{color:var(--ink-faint);}
.lai-rw-f b{font-weight:600;color:var(--ink-soft);}
.lai-rw-w{color:var(--ink-soft);}
.lai-rw-n{margin:6px 0 0;font-size:.76rem;color:var(--ink-faint);}

/* The system column on the table */
.lds-c-pos{width:92px;white-space:nowrap;}
.lds-pos{
  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;
}

@media (max-width:640px){
  .lai-f .lds-sel{min-width:160px;}
  .lai-bar .btn{margin-left:0;}
  .lds-tbl th:nth-child(11),
  .lds-tbl td:nth-child(11){display:none;}
}

/* Admin, the sorting model form */
.acc-model-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.acc-model-f{display:flex;flex-direction:column;gap:5px;min-width:0;flex:0 1 190px;}
.acc-model-f .sel{width:100%;}
.acc-model-f .form-input{padding:8px 11px;font-size:.88rem;}
.acc-model-wide{flex:1 1 300px;}
.acc-model-row .btn{align-self:flex-end;}
.acc-model-say{flex:1 1 100%;font-size:.8rem;color:var(--ink-soft);}

/* Because the order is the whole instruction, the 3 steps under the
   form are numbered: a provider first, then its key, then Save. */
.acc-model-steps{
  margin:14px 0 0;padding:0 0 0 20px;
  display:grid;gap:5px;
  font-size:.84rem;color:var(--ink);
}
.acc-model-steps a{color:var(--accent);font-weight:600;}
.acc-model-fine{margin:10px 0 0;font-size:.78rem;color:var(--ink-soft);}

/* The purpose of each stored path, over the 3 boxes that hold them. A
   bare path does not name the run that reads it. */
.acc-paths-what{
  margin:0 0 14px;padding:0 0 0 18px;
  display:grid;gap:5px;
  font-size:.84rem;color:var(--ink-soft);
}
.acc-paths-what b{color:var(--ink);font-weight:600;}

/* The run list inside the history window, without the gap above it. */
.ldb-body .lai-runs{margin-top:0;}

/* A rep's own model keys
   1 row per service on My Account, each with its name, the page where
   its key is made, and the box to paste the key into. Because the
   service in use is the reason a rep opens this, its row is marked. */
.aik{display:flex;flex-direction:column;gap:10px;}
.aik-now{margin:0;font-size:.86rem;color:var(--ink);}
.aik-row{
  display:flex;flex-direction:column;gap:7px;
  padding:12px 14px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.aik-row-on{background:var(--surface-high);}
.aik-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.aik-name{font-size:.95rem;font-weight:700;color:var(--ink);}
.aik-model{margin-left:auto;font-size:.74rem;color:var(--ink-faint);}
.aik-tag{
  padding:2px 7px;border-radius:3px;
  background:var(--surface-high);color:var(--ink-soft);
  font-size:.62rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
}
.aik-tag-on{background:var(--accent-strong);color:var(--ink-inverse);}
.aik-tag-soft{background:var(--surface-page);color:var(--ink-faint);}
.aik-how{margin:0;font-size:.82rem;color:var(--ink-soft);line-height:1.5;}
.aik-how a{color:var(--accent);font-weight:600;}
.aik-set{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.aik-set .form-input{flex:1 1 260px;min-width:0;padding:8px 11px;font-size:.88rem;}
.aik-said{font-size:.8rem;color:var(--ink-soft);}