/* Account screens (screens.js): sign in, profile, the client list; and the account button and menu. */

/* signed in: the app stays hidden until a client is open, and while an account screen is up */
body.cloud:not(.ready) .app, body.gated .app{display:none}
#gate{min-height:100vh;background:var(--bg)}
.gate-top{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.gate-brand{display:flex;align-items:center;gap:8px;font-weight:600}
.gate-body{display:flex;justify-content:center;padding:8vh 16px 48px}
.gate-card,.gate-wide{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px}
.gate-wide{max-width:760px;background:transparent;border:0;padding:0}
.gate-card h1,.gate-wide h1{font-size:24px;line-height:1.25;margin:0 0 6px}
.gate-wide h1{margin-bottom:18px}
.gate-lede{color:var(--muted);margin:0 0 20px}
.gate-in{width:100%;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--ink);font:inherit;padding:8px 10px}
.gate-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
#signInForm{display:grid;gap:10px}
#signInForm .btn,.gate-actions .btn{padding:7px 14px}
.gate-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.gate-msg{margin-top:12px;font-size:13px;color:var(--muted);min-height:1em}
.gate-msg.warn{color:var(--amber)}
.gate-msg:empty{display:none}
.gate-card.offline{margin:12vh auto}

/* sign in: the K mark, then the card, centered on the page */
.gate-signin{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px 16px 10vh}
.gate-logo{display:block;width:84px;height:84px}
.gate-signin .gate-card{text-align:center;padding:32px 28px}
.gate-signin .gate-card h1{font-size:22px}
.gate-signin #signInForm .btn{width:100%;padding:9px 14px}

/* the splash over the sign-in page, on its first load in a tab (screens.js): the K mark inside a faint ring,
   with a short accent arc turning around it */
.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);animation:splash-out .5s ease 1.8s forwards}
.splash-mark{position:relative;width:140px;height:140px;display:grid;place-items:center;opacity:0;animation:splash-in .5s ease .1s forwards}
.splash-mark img{width:64px;height:64px}
.splash-mark::before,.splash-mark::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--line)}
.splash-mark::after{border-color:transparent;border-top-color:var(--accent);animation:splash-spin 1.1s linear infinite}
@keyframes splash-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes splash-spin{to{transform:rotate(360deg)}}
@keyframes splash-out{to{opacity:0;visibility:hidden}}

/* profile */
.av{object-fit:cover}
.av.big{width:64px;height:64px;font-size:22px}
.prof-photo{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.prof-photo > span:not(.av){display:flex;gap:6px}

/* client list */
.cl-new{display:flex;gap:8px;margin-bottom:18px}
.cl-new .gate-in{flex:1}
.cl-list{display:grid;gap:8px}
.cl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cl-row.open{border-bottom-left-radius:0;border-bottom-right-radius:0}
.cl-main{flex:1;display:flex;flex-direction:column;min-width:0}
.cl-main b{font-size:15px;font-weight:600}
.cl-act{display:flex;gap:6px;align-items:center}
.cl-panel{margin-top:-9px;padding:14px;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;background:var(--surface)}
.cl-panel .cl-new{margin:14px 0 0}
.cl-people{display:grid;gap:4px}
.person{display:flex;align-items:center;gap:10px;padding:6px 4px}
.person > span:nth-child(2){flex:1;display:flex;flex-direction:column;min-width:0}
.person small{color:var(--muted);font-size:12px}
.person.pending .av{background:var(--soft);color:var(--muted)}
.cl-hist{display:grid;gap:2px}
.hist-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:5px 4px}
.cl-import{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-bottom:18px;border-radius:10px;background:var(--accent-soft)}

/* account button and menu */
.acct-chip{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--ink);font:inherit;padding:4px 8px;border-radius:6px;cursor:pointer}
.acct-chip:hover{background:var(--hover)}
/* the sidebar's account button stays at the bottom, like Snowflake's */
body.cloud .sidebar{display:flex;flex-direction:column}
.side-acct{position:sticky;bottom:-8px;margin:auto -6px -8px;padding:10px 12px;display:flex;align-items:center;gap:10px;border:0;border-top:1px solid var(--line);background:var(--side);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.side-acct:hover{background:var(--hover)}
.side-acct .av{width:28px;height:28px;font-size:11.5px}
.side-acct > span:not(.av){display:flex;flex-direction:column;min-width:0}
.side-acct b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-acct small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu{position:fixed;z-index:60;width:280px;padding:6px;display:flex;flex-direction:column}
.acct-menu button{border:0;background:none;color:var(--ink);font:inherit;text-align:left;padding:6px 8px;border-radius:5px;cursor:pointer}
.acct-menu button:hover{background:var(--hover)}
.acct-who{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.acct-who > span:not(.av){display:flex;flex-direction:column;min-width:0}
.acct-who small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.acct-theme{display:grid;gap:6px;padding:8px;margin:4px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.acct-menu .theme-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.acct-menu .theme-seg button{display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 0;font-size:13px;text-align:center}
.acct-menu .theme-seg svg{width:14px;height:14px}
body.cloud #themeBtn{display:none}   /* signed in, the theme is picked in the account menu */
@media(max-width:640px){.cl-row{flex-wrap:wrap}.cl-act{width:100%;justify-content:flex-end}}
.cl-panel > .hint:first-child{margin-top:0}
.cl-unlocks{display:grid;gap:2px}
.cl-unlocks label{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:6px;cursor:pointer}
.cl-unlocks label:hover{background:var(--hover)}