/* ============================================================
   15 — PICKER & CAROUSEL

   One control for "what sends" and "what receives", used on the
   home page, the chooser and the dashboard. A control that
   behaves differently in three places is three controls to learn.

   The sender column holds message sources AND broker accounts
   together, because the customer does not arrive knowing whether
   they want a signal bridge or a copier. They know what they have
   and what they want it to reach; which product that is, is the
   picker's job to work out.
   ============================================================ */

.pick2{
  display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.022);
}
.pick2 .pickcol{border:0;border-radius:0;background:none;min-width:0}
.pick2 .pickcol > header{
  display:flex;align-items:center;gap:9px;
  padding:13px 16px;border-bottom:1px solid var(--line);
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.pick2 .pickcol > header b{
  width:18px;height:18px;border-radius:6px;background:var(--spectrum);color:#12061F;
  display:grid;place-items:center;font:700 9px/1 var(--display);flex:0 0 auto;
}
.pick2 .pickcol > header .cnt{
  margin-left:auto;font-size:10px;color:var(--faint);
  padding:3px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);
}
.pick2 .opts{padding:8px;display:grid;gap:3px;max-height:392px;overflow:auto}

/*  The divider is where the two kinds of sender are explained. Without it,
    "Quotex" appearing in a list headed "Sender" reads as a mistake. */
.pickdiv{
  padding:14px 12px 7px;display:flex;flex-direction:column;gap:3px;
}
.pickdiv span{
  font:500 9.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);
}
.pickdiv i{font:400 11px/1.4 var(--ui);font-style:normal;color:var(--faint)}
.pickdiv:first-child{padding-top:4px}

.pick2 .pickopt{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  align-items:center;gap:2px 11px;
  padding:10px 12px;border-radius:var(--r-sm);border:1px solid transparent;
  background:none;color:inherit;text-align:left;cursor:pointer;width:100%;
  transition:background .18s,border-color .18s,transform .18s cubic-bezier(.2,.7,.3,1);
}
.pick2 .pickopt .src{grid-row:1 / 3;grid-column:1;width:fit-content}
.pick2 .pickopt b{grid-column:2;grid-row:1;font:600 13.5px/1.25 var(--display)}
.pick2 .pickopt > span:not(.src){
  grid-column:2;grid-row:2;font-size:11.5px;line-height:1.4;color:var(--faint);
}
.pick2 .pickopt .tick{grid-column:3;grid-row:1 / 3;color:var(--cyan);opacity:0;
  transition:opacity .18s,transform .18s cubic-bezier(.34,1.4,.64,1);transform:scale(.6)}
.pick2 .pickopt:hover{background:rgba(255,255,255,.05);transform:translateX(2px)}
.pick2 .pickopt.on{
  background:rgba(255,79,216,.13);border-color:rgba(255,79,216,.42);
}
.pick2 .pickopt.on .tick{opacity:1;transform:none}
.pick2 .pickopt.on b{color:var(--text)}

/*  The wire between the columns is the product in one glyph: something leaves
    the left and arrives on the right. It only runs while a pair is selected. */
.pickflow{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  padding:0 6px;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(255,79,216,.05),transparent);
  min-width:56px;
}
.pickflow .wire{
  flex:1;width:2px;background:var(--line);border-radius:2px;display:block;
}
.pickflow .orb{
  width:11px;height:11px;border-radius:50%;background:var(--cyan);flex:0 0 auto;
  box-shadow:0 0 18px 3px rgba(255,79,216,.75);
  animation:pickrun 2.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes pickrun{
  0%{transform:translateY(-96px);opacity:0}
  12%{opacity:1} 88%{opacity:1}
  100%{transform:translateY(96px);opacity:0}
}

/*  A receiver this sender cannot reach is dimmed, never removed. A list that
    changes length under your cursor is harder to use than one that stays put
    and explains itself. */
.pick2 .pickopt.unreachable{opacity:.42}
.pick2 .pickopt.unreachable b{font-weight:500}
.pick2 .pickopt.copyonly .src{filter:saturate(.6)}

@media(max-width:820px){
  .pick2{grid-template-columns:1fr}
  .pickflow{
    flex-direction:row;min-width:0;height:52px;
    border-left:0;border-right:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:linear-gradient(90deg,transparent,rgba(255,79,216,.05),transparent);
  }
  .pickflow .wire{flex:1;width:auto;height:2px}
  @keyframes pickrun{
    0%{transform:translateX(-120px);opacity:0}
    12%{opacity:1} 88%{opacity:1}
    100%{transform:translateX(120px);opacity:0}
  }
  .pick2 .opts{max-height:280px}
}

@media(prefers-reduced-motion:reduce){
  .pickflow .orb{animation:none;opacity:.85}
  .pick2 .pickopt,.pick2 .pickopt .tick,.cdot{transition:none}
  .carotrack{scroll-behavior:auto}
}
html[data-fx-off] .pickflow .orb{animation:none;opacity:.85}