/* Switch profile (fable-profile-switch.js, owner's pick 7 Oct: 'Option A · From your picture'): the status card that drops
   from the header picture while Rabby's sign-in switches profile, and the account menu's 'Switch profile' list. Dark only;
   palette tokens only (styles.css / fable.css). Sizes are layout px, like the account menu it hangs beside (fable-account.css:
   on desktop the page renders at html zoom .66825, so the card reads at the header's own scale). */

/* ---- the card: anchored under the pill, as the account menu (.mast-actions is the anchor) */
.fps-card{position:absolute;top:calc(100% + 14px);right:0;z-index:61;width:400px;max-width:calc(100 * var(--vw, 1vw) - 32px);box-sizing:border-box;padding:16px;border:1px solid var(--line-2);border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 4%,var(--panel)),var(--panel));color:var(--ink);font:400 16px/1.4 var(--sans);text-align:left;
  box-shadow:0 22px 48px -10px #000c,0 2px 0 #0006,inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent);animation:fpsIn .16s ease-out}
.fps-card::before{content:'';position:absolute;top:-8px;right:20px;width:14px;height:14px;background:color-mix(in srgb,var(--ink) 4%,var(--panel));border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);transform:rotate(45deg)}
@keyframes fpsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fps-row{display:flex;align-items:center;gap:14px}
.fps-faces{display:flex;align-items:center;gap:8px;flex:none}
.fps-av{box-shadow:0 0 0 2px var(--panel),0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent)}
.fps-arrow{color:var(--brand);font:700 22px/1 var(--sans)}
.fps-chip{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand-sheen-sm);color:var(--brand-ink);font:750 15px/1 var(--mono);box-shadow:var(--brand-bevel)}
.fps-words{display:flex;flex-direction:column;gap:3px;min-width:0}
.fps-title{display:flex;align-items:center;gap:8px;font:750 17px/1.25 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.fps-line{font-size:14.5px;color:var(--ink-2);overflow-wrap:anywhere}
.fps-spin{flex:none;width:15px;height:15px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--brand);animation:fpsSpin 1s linear infinite}
@keyframes fpsSpin{to{transform:rotate(360deg)}}
.fps-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fps-btns>button{flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;min-height:42px;padding:10px 14px;border-radius:10px;font:800 15px/1.1 var(--sans);cursor:pointer;white-space:nowrap}
.fps-press{border:0;background:var(--brand-sheen-btn);color:var(--brand-ink);text-shadow:var(--brand-ink-shadow);box-shadow:var(--brand-bevel)}
.fps-press:hover{background:var(--brand-sheen-btn-hover,var(--brand-sheen-btn))}
.fps-ghost{border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font-weight:700}
.fps-ghost:hover{border-color:var(--ink-2);color:var(--ink)}
.fps-btns>button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fps-fine{margin-top:10px;font-size:13px;color:var(--muted)}
.fps-card[data-kind="done"] .fps-title{color:var(--up)}
/* the pill's picture while a switch is under way */
.wallet.acct-pill.fps-switching .acct-av{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--brand);animation:fpsRing 1.2s ease-in-out infinite alternate}
@keyframes fpsRing{to{box-shadow:0 0 0 2px var(--panel),0 0 0 4px color-mix(in srgb,var(--brand) 35%,transparent)}}
@media (prefers-reduced-motion:reduce){.fps-card,.fps-spin,.wallet.acct-pill.fps-switching .acct-av{animation:none}}
/* phones: the card spans the screen under the header, 8px from each side */
@media (max-width:640px){
  .fps-card{right:-8px;width:calc(100vw - 16px);max-width:none;padding:14px;font-size:14px}
  .fps-card::before{right:26px}
  .fps-row{gap:12px}
  .fps-title{font-size:15.5px}.fps-line{font-size:13.5px}
  .fps-av{--s:40px!important}
  .fps-btns>button{min-height:40px;padding:9px 10px;font-size:14px;white-space:normal}
  .fps-fine{font-size:12px}
}

/* ---- the account menu's 'Switch profile' panel (inside .acct-pop) */
.acct-pop .fps-list{display:flex;flex-direction:column;gap:6px;padding:2px 4px 6px}
.fps-cur{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;border-bottom:1px solid var(--line)}
.fps-who{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.fps-who b{font:700 14.5px/1.2 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fps-who small{font:500 12px/1.2 var(--sans);color:var(--muted)}
.fps-rows{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.fps-item{display:flex;align-items:center;gap:4px}
.fps-go{flex:1;display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer;text-align:left}
.fps-go:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 6%,transparent)}
.fps-go:disabled{opacity:.5;cursor:default}
.fps-x{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font:600 14px/1 var(--sans);cursor:pointer}
.fps-x:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.fps-empty{margin:6px 8px;font-size:13px;color:var(--muted)}
.fps-add{display:flex;align-items:center;gap:10px;margin-top:4px;padding:10px 8px;border:1px dashed var(--line-2);border-radius:10px;background:transparent;color:var(--ink-2);font:700 14px/1.2 var(--sans);cursor:pointer}
.fps-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fps-add:hover{border-color:var(--brand);color:var(--ink)}
.fps-note{margin:6px 8px 0;font-size:12px;line-height:1.4;color:var(--muted)}
.acct-pop .fps-list button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* saved sign-ins (7 Oct 08:40): the list says which profiles switch with no signature; Sign out of all, with its confirm */
.fps-who small.fps-saved{color:var(--up)}
.fps-all{margin:8px 8px 2px;padding:6px 0;border:0;background:none;color:var(--muted);font:600 12.5px/1.3 var(--sans);text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fps-all:hover:not(:disabled){color:var(--down)}
.fps-confirm{margin:8px 4px 2px;padding:10px;border:1px solid var(--line-2);border-radius:10px}
.fps-confirm p{margin:0;font-size:13px;line-height:1.4;color:var(--ink-2)}
.fps-confirm .fps-btns{margin-top:10px}
/* the trade box's wallet lines that come with this (coin.js "Pay with"; its own look stays in terminal-shell.css): a new
   wallet links on its first trade; another profile's wallet says whose; an account the extension is not on is information */
.pw-note.pw-say.new,.pw-note.pw-say.other{color:var(--ink-2)}
.pw-note.pw-say .pw-link{margin-left:6px}
.pw-card.info,.pw-card.info:hover{cursor:default;background-color:var(--panel-2)}
/* (owner, 7 Oct 15:10) one of this profile's wallets the extension can't sign as now: dimmed, no words */
.pw-card.info>.pw-ico,.pw-card.info>.pw-card-main,.pw-card.info>.pw-card-bal{opacity:.45}