/* ============================================================
   Pipezoom - ftas.css

   The FTA pages beyond what calendar.css and components.css give: the
   log form's card and field grid, the type-ahead, the linked line, the
   confirmation line, Edit in place, the contact and outcome on a row,
   the list heading and the History pager. Rows wear .cal-item.
   Defines the fta- classes.
   Notes: docs/notes/app.pipezoom.com/css/ftas.css.md
   ============================================================ */

/* The log form. */
.fta-card{margin-bottom:6px;padding:18px 18px 16px;}
.fta-card:hover{border-color:var(--line);}
/* Named under the card: base.css gives the 1st h2 of a parent a 28px top margin. */
.fta-card .fta-card-h{display:flex;align-items:center;gap:9px;margin:0 0 16px;padding:0;font-size:1.08rem;}
.fta-card-h i{color:var(--ic);}

.fta-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 16px;}
@media (min-width:640px){
  .fta-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fta-f-wide{grid-column:1 / -1;}
}
.fta-f{display:flex;flex-direction:column;min-width:0;}
.fta-f .form-input{min-height:44px;}
.fta-f .form-input[readonly]{background:var(--surface-high);color:var(--ink-soft);}
.fta-f .form-hint{margin-top:6px;}
.fta-note{min-height:68px;resize:vertical;line-height:1.45;}

/* The leads that match the Business text, and the line a picked lead leaves. */
.fta-hits{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:320px;overflow-y:auto;}
.fta-link{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font-size:.88rem;color:var(--ink-soft);}
.fta-link .btn{min-height:36px;}

.fta-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px;}
.fta-go{min-height:44px;padding:0 20px;}
.fta-said{font-size:.92rem;font-weight:600;color:var(--ink);}
.fta-said:empty{display:none;}
.fta-err{margin-top:14px;}

/* The lists. */
.fta-sec{margin-top:6px;}
.fta-sec .fta-h{margin:34px 0 12px;font-size:1.2rem;}
.fta-n{font-weight:600;color:var(--ink-soft);}
.fta-who{display:inline-flex;align-items:center;gap:5px;color:var(--ink);}
.fta-res{align-items:center;gap:10px;}
.fta-out{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;
  border-radius:var(--radius-pill);background:var(--surface-high);color:var(--ink);
  font-size:.86rem;font-weight:700;
}
.fta-at{font-size:.88rem;color:var(--ink-soft);}

/* Edit opens the form's fields under the row, on the next step of the background ramp. */
.fta-edit{display:flex;flex-direction:column;padding:14px;border-radius:var(--radius-sm);background:var(--surface-high);}
.fta-edit .form-input{background:var(--surface-page);}
.fta-edit .form-input[readonly]{background:var(--surface-hover);}
.fta-edit .fta-foot{margin-top:14px;}

/* The History pager: Newer at the left, the page in the middle, Older at the right. */
.fta-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;}
.fta-pager .btn{min-height:44px;}
.fta-pg{font-size:.88rem;color:var(--ink-soft);}