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

   The row above a market that fills it from the map: what to find,
   how far, how many, 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; what is here is 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. It sits on the panel's raised surface, so
   it carries the page's ink and no color of its own, and the chevron is
   the only thing that 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 sits inside the same 12px the head keeps, with a breath
   between it and the head and the same again between its two rows,
   which used to touch. */
.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;}
/* The word the number is measured in. It follows the box, because
   "Within 10 miles" is one sentence and the box is the middle of it.
   */
.lai-unit{
  font-size:.82rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.lai-bar .btn{margin-left:auto;}
/* The service that will sort what the run brings in, beside the press
   that starts it. A rep reads which model answered without leaving the
   page for 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;}

/* ---- What a Reference Solutions search brought back ----
   One row a business under the bar, in the market table's own type.
   The row is removed on the left and added 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;
}

/* ---- What the last runs did ---- */
.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;}

/* ---- One run opened onto the businesses it changed ----
   The whole entry is the press, so the caret says which way it goes
   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);}

/* The three steps under the form. Numbered, because the order is the
   whole instruction: 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);}

/* What each stored path is for, over the three boxes that hold them.
   A path on its own says nothing about which run 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 reads the same inside the history window as it did on
   the page, without the gap that separated it from the card above. */
.ldb-body .lai-runs{margin-top:0;}

/* ---------------- A rep's own model keys ----------------
   One row per service on My Account, each carrying what it is, where a
   key for it is made, and the box to paste one into. The row that is
   actually running is marked, because the answer to "which of these am
   I on" is the reason somebody opens this. */
.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);}