/* The header's account switcher (owner, 2026-09-24: "Let's move this to
   header"): the client menu, your account menu and the Add a client dialog,
   drawn by /ui/rl-account.js. RlUI's menu shape at two widths, and a sheet on
   a phone. The chip they open from is in rl-shell.css with the top bar. */
.rlx .rl-menu.is-wsm{width:372px;max-height:calc(100vh - 96px);overflow:auto}
.rlx .rl-menu.is-acct{width:300px}
.rlx .rl-menu.is-left{transform-origin:top left}

/* whose clients these are; on a phone, the sheet's title and its close */
.rlx .acm-eye{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 6px 4px 10px}
.rlx .acm-eye>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#646c7f}
.rlx .acm-eye>em{flex:none;margin-left:auto;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--rl-surface3);font-style:normal;font-size:11px;font-weight:700;color:var(--rl-ink2)}
.rlx .acm-eye.is-me{display:none}
.rlx .acm-x{display:none;flex:none;margin-left:auto;width:40px;height:40px;border-radius:12px;place-items:center;color:var(--rl-ink2);background:var(--rl-surface2)}
.rlx .acm-eye>em+.acm-x{margin-left:6px}

/* a workspace's tile: its initial in its colour; the dot is its WhatsApp */
.rlx .acm-tile{position:relative;flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--c,#475067);color:#fff;font-size:13px;font-weight:800;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.12)}
.rlx .acm-tile.is-lg{width:38px;height:38px;border-radius:11px;font-size:16px}
.rlx .acm-dot{position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;border-radius:50%;background:var(--rl-ok);box-shadow:0 0 0 2px var(--acm-ring,#fff)}
.rlx .acm-dot.is-off{background:#fff;border:2.5px solid var(--rl-warn)}
.rlx .acm-tile.is-lg .acm-dot{width:11px;height:11px}
.rlx .acm-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rlx .acm-t b{font-size:13.5px;font-weight:700;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .acm-t small{font-size:12px;font-weight:500;color:#646c7f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .acm-t small.is-warn{font-weight:700;color:#a15c07}

/* the client you are in, with its two settings */
.rlx .acm-cur{--acm-ring:var(--rl-bg);display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:var(--rl-bg);box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .acm-cur-hd{display:flex;align-items:center;gap:12px;padding:12px}
.rlx .acm-cur-hd .acm-t b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.rlx .acm-cur-hd .acm-t small{font-weight:600}
.rlx .acm-cur-hd>.rl-ic{color:var(--rl-ink)}
.rlx .acm-set{display:flex;align-items:center;gap:10px;width:100%;height:42px;padding:0 12px;border-top:1px solid var(--rl-line);font-size:13px;font-weight:700;color:var(--rl-ink);transition:background .12s}
.rlx .acm-set:hover,.rlx .acm-set:focus-visible{background:#fff;outline:0}
.rlx .acm-set>.rl-ic:first-child{color:#646c7f}
.rlx .acm-set>.rl-ic:last-child{color:var(--rl-ink3);transform:rotate(-90deg)}
.rlx .acm-set .nm{flex:1;min-width:0}
.rlx .acm-set .v{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--rl-ink2)}
.rlx .acm-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:99px;background:#e7f7f0;color:#067a55;font-size:11.5px;font-weight:800;white-space:nowrap}
.rlx .acm-pill i{width:6px;height:6px;border-radius:50%;background:var(--rl-ok)}
.rlx .acm-pill.is-off{background:#fff5e6;color:#a15c07}
.rlx .acm-pill.is-off i{width:8px;height:8px;background:none;border:2px solid var(--rl-warn)}

/* the other clients */
.rlx .acm-sec{display:flex;align-items:baseline;gap:8px;padding:14px 10px 8px}
.rlx .acm-sec b{font-size:13px;font-weight:800;color:var(--rl-ink)}
.rlx .acm-sec span{font-size:12px;font-weight:600;color:#646c7f}
.rlx .acm-find{position:relative;display:block;margin:0 4px 6px}
.rlx .acm-find>.rl-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#646c7f;pointer-events:none}
.rlx .acm-find input{display:block;width:100%;height:36px;min-height:36px!important;margin:0;padding:0 12px 0 34px!important;border:1px solid var(--rl-line)!important;border-radius:10px!important;background:#fff!important;color:var(--rl-ink)!important;font-size:13.5px!important;font-weight:500;box-shadow:none}
.rlx .acm-find input::placeholder{color:var(--rl-ink3)}
.rlx .acm-find input:focus{outline:0!important;border-color:var(--rl-acc)!important;box-shadow:0 0 0 4px var(--rl-ring)!important}
.rlx .acm-list{display:flex;flex-direction:column;gap:2px;max-height:262px;overflow:auto;padding-bottom:2px}
.rlx .acm-row{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 10px;border-radius:10px;color:var(--rl-ink);transition:background .12s}
.rlx .acm-row:hover,.rlx .acm-row:focus-visible{--acm-ring:var(--rl-surface2);background:var(--rl-surface2);outline:0}
.rlx .acm-go{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--rl-ink2);opacity:0;transition:opacity .12s}
.rlx .acm-row:hover .acm-go,.rlx .acm-row:focus-visible .acm-go{opacity:1}
.rlx .acm-none{margin:0;padding:12px 12px 14px;font-size:13px;line-height:1.5;color:var(--rl-ink2)}
.rlx .acm-add{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 10px;border-radius:10px;color:var(--rl-ink)}
.rlx .acm-add:hover,.rlx .acm-add:focus-visible{background:var(--rl-surface2);outline:0}
.rlx .acm-plus{flex:none;width:30px;height:30px;border-radius:9px;border:1.5px dashed #c3c9d5;display:grid;place-items:center;color:var(--rl-ink2)}

/* your account */
.rlx .acm-me{display:flex;align-items:center;gap:12px;padding:10px 10px 12px}
.rlx .acm-av{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(180deg,#262b38,#11141b);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(16,24,40,.4);color:#fff;font-size:15px;font-weight:800}
.rlx .acm-av.is-photo{overflow:hidden;background:var(--rl-surface3)}
.rlx .acm-av>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.rlx .acm-me .acm-t small{font-size:11.5px;font-weight:600}
.rlx .acm-me .acm-t b{font-weight:800}
.rlx .acm-role{display:flex;align-items:center;gap:8px;min-width:0;padding:0 10px 12px}
.rlx .acm-role em{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#161a24;color:#fff;font-style:normal;font-size:11px;font-weight:800}
.rlx .acm-role span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:#646c7f}
.rlx .acm-item{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--rl-ink)}
.rlx .acm-item:hover,.rlx .acm-item:focus-visible{background:var(--rl-surface2);outline:0}
.rlx .acm-item>.rl-ic{color:#646c7f}
.rlx .acm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 6px;font-size:11.5px;font-weight:600;color:#646c7f}
.rlx .acm-foot .b{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;font-weight:500}

/* add a client */
.rlx .acd-types{display:flex;flex-direction:column;gap:8px}
.rlx .acd-hd{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
.rlx .acd-hd b{font-size:12.5px;font-weight:600;color:var(--rl-ink2)}
.rlx .acd-hd span{font-size:12px;font-weight:500;color:#646c7f}
.rlx .acd-list{display:flex;flex-direction:column;overflow:hidden;border-radius:12px;box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .acd-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:9px 14px;color:var(--rl-ink);transition:background .12s}
.rlx .acd-opt+.acd-opt{border-top:1px solid var(--rl-line)}
.rlx .acd-opt:hover{background:#fafbfc}
.rlx .acd-opt.is-on{background:var(--rl-bg)}
.rlx .acd-opt:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--rl-acc)}
.rlx .acd-opt .acm-t b{font-weight:800}
.rlx .acd-opt .acm-t small{white-space:normal;line-height:1.4}
.rlx .acd-radio{flex:none;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:1.5px solid #c3c9d5;background:#fff}
.rlx .acd-opt.is-on .acd-radio{border:5.5px solid var(--rl-ink)}
.rlx .acd-skel{display:block;height:56px;background:linear-gradient(90deg,#eef0f4 0%,#f7f8fa 50%,#eef0f4 100%);background-size:200% 100%;animation:rl-shimmer 1.2s infinite linear}
.rlx .acd-skel+.acd-skel{border-top:1px solid var(--rl-line)}
.rlx .acd-miss{margin:0;font-size:13px;line-height:1.5;color:var(--rl-ink2)}
.rlx .acd-link{display:inline;padding:0;font-weight:700;color:var(--rl-ink);text-decoration:underline;text-underline-offset:2px}

/* a phone: both menus are sheets from the bottom edge, with a title and a
   close, and every row is a thumb's height */
@media (max-width:760px){
  .rlx .rl-menu.is-wsm,.rlx .rl-menu.is-acct{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto;max-height:88vh;overflow:auto;padding:8px 12px calc(16px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;transform-origin:bottom;animation:rl-sheetin .32s var(--rl-ease)}
  .rlx .rl-menu.is-wsm::before,.rlx .rl-menu.is-acct::before{content:"";display:block;width:40px;height:5px;margin:0 auto 8px;border-radius:3px;background:#d5d9e3}
  .rlx>div:has(>.rl-menu.is-wsm)>.rl-veil,.rlx>div:has(>.rl-menu.is-acct)>.rl-veil{background:rgba(9,11,15,.36)}
  .rlx .acm-eye.is-me,.rlx .acm-x{display:flex}
  .rlx .acm-x{align-items:center;justify-content:center}
  .rlx .acm-eye>span{font-family:inherit;font-size:17px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--rl-ink)}
  .rlx .acm-set{height:48px;font-size:14px}
  .rlx .acm-row,.rlx .acm-add{min-height:56px}
  .rlx .acm-tile{width:34px;height:34px}
  .rlx .acm-t b{font-size:15px}
  .rlx .acm-find input{height:44px;min-height:44px!important;font-size:16px!important}
  .rlx .acm-list{max-height:40vh}
  .rlx .acm-go{display:none}
  .rlx .acm-item{height:48px;font-size:15px}
  .rlx .acd-opt{min-height:60px}
}