/* Qyverix Mail — account switcher, modelled on Gmail's account card.
   Geometry, type sizes, radii and neutrals follow Gmail's Material 3 card;
   the one accent (the manage button) is Qyverix violet rather than Google
   blue, so it belongs to the rest of the app. */

:root{
  --acct-card:   #e9eef6;
  --acct-panel:  #ffffff;
  --acct-ink:    #1f1f1f;
  --acct-ink2:   #444746;
  --acct-line:   #c4c7c5;
  --acct-hover:  rgba(31,31,31,.08);
  --acct-accent: #673de6;
  --acct-shadow: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.3);
}
html.dark-mode{
  --acct-card:   #282a2c;
  --acct-panel:  #1b1b1b;
  --acct-ink:    #e3e3e3;
  --acct-ink2:   #c4c7c5;
  --acct-line:   #444746;
  --acct-hover:  rgba(227,227,227,.08);
  --acct-accent: #b49bff;
  --acct-shadow: 0 4px 8px 3px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------- avatars -- */
.qyx-av{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  border-radius:50%; overflow:hidden; color:#fff; font-weight:500; line-height:1;
  user-select:none; text-transform:uppercase; font-family:Roboto,Arial,sans-serif;
}
.qyx-av img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ------------------------------------------------- top-right button -- */
.qyx-acct-btn{
  appearance:none; border:0; padding:4px; margin:0; cursor:pointer;
  background:transparent; border-radius:50%; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.qyx-acct-btn:hover{ background:var(--acct-hover); }
.qyx-acct-btn:focus-visible{ outline:2px solid var(--acct-accent); outline-offset:1px; }
.qyx-acct-btn:focus:not(:focus-visible){ outline:0 !important; box-shadow:none !important; }

/* desktop: pinned top-right, like Gmail */
body > .qyx-acct-btn{ position:fixed; top:12px; right:20px; z-index:30005; }
html.qyx-has-acct #layout-content > .header{ padding-right:64px !important; }

/* phone: the last thing on the header row, at the far right edge where
   Gmail's mobile avatar sits (order beats the menu button's DOM position) */
.qyx-acct-btn-inline{ order:100; margin:0 8px 0 0; align-self:center; }

/* ------------------------------------------------------------- card -- */
.qyx-card{
  position:fixed; top:60px; right:12px; z-index:30010;
  width:410px; max-width:calc(100vw - 16px); max-height:calc(100vh - 72px); overflow:auto;
  background:var(--acct-card); color:var(--acct-ink);
  border-radius:28px; box-shadow:var(--acct-shadow);
  font-family:Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased;
  animation:qyx-card-in .16s cubic-bezier(.2,0,0,1) both;
}
@keyframes qyx-card-in{ from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1; transform:none} }
html.layout-phone .qyx-card, html.layout-small .qyx-card{ top:8px; left:8px; right:8px; width:auto; }

.qyx-card-head{ position:relative; padding:18px 56px 0; min-height:40px; text-align:center; }
.qyx-card-email{ font-size:14px; line-height:20px; font-weight:500; letter-spacing:.1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-top:2px; }
.qyx-card-close{
  position:absolute; top:8px; right:8px; width:40px; height:40px; border:0; border-radius:50%;
  background:transparent; color:var(--acct-ink2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.qyx-card-close:hover{ background:var(--acct-hover); }

.qyx-card-hero{ display:flex; flex-direction:column; align-items:center; padding:14px 24px 16px; }
.qyx-av-hero{ margin-bottom:10px; }
.qyx-card-hi{ font-size:22px; line-height:28px; font-weight:400; margin:0 0 16px; text-align:center; }
.qyx-manage{
  display:inline-flex; align-items:center; height:40px; padding:0 23px;
  border:1px solid #747775; border-radius:100px; text-decoration:none !important;
  font-size:14px; line-height:20px; font-weight:500; letter-spacing:.1px;
  color:var(--acct-accent) !important; background:transparent; transition:background .15s;
}
.qyx-manage:hover{ background:rgba(103,61,230,.08); }
html.dark-mode .qyx-manage{ border-color:#8e918f; }

/* one account: two pills, side by side */
.qyx-pair{ display:flex; gap:4px; padding:0 16px 8px; }
.qyx-pill{
  flex:1; display:flex; align-items:center; justify-content:center; gap:12px;
  height:56px; border:0; cursor:pointer; background:var(--acct-panel); color:var(--acct-ink);
  font:500 14px/20px Roboto,Arial,sans-serif; letter-spacing:.1px; transition:background .15s;
}
.qyx-pill:first-child{ border-radius:28px 4px 4px 28px; }
.qyx-pill:last-child{ border-radius:4px 28px 28px 4px; }
.qyx-pill:hover{ background:color-mix(in srgb, var(--acct-panel) 92%, var(--acct-ink)); }
.qyx-pill[disabled]{ opacity:.6; cursor:default; }

/* several accounts: the white panel */
.qyx-panel{ margin:0 16px 8px; background:var(--acct-panel); border-radius:28px; overflow:hidden; }
.qyx-row{
  width:100%; display:flex; align-items:center; gap:16px; min-height:56px; padding:0 20px 0 24px;
  border:0; background:transparent; color:var(--acct-ink); cursor:pointer; text-align:left;
  font:500 14px/20px Roboto,Arial,sans-serif; letter-spacing:.1px; transition:background .15s;
}
.qyx-row:hover{ background:var(--acct-hover); }
.qyx-row[disabled]{ opacity:.6; cursor:default; }
.qyx-row + .qyx-row, .qyx-list + .qyx-row, .qyx-toggle + .qyx-list{ border-top:1px solid var(--acct-line); }
.qyx-row-icon{ width:32px; display:inline-flex; justify-content:center; color:var(--acct-ink2); }
.qyx-row-label{ flex:1; }
.qyx-toggle .qyx-row-label{ flex:1; }
.qyx-toggle-icon{ display:inline-flex; color:var(--acct-ink2); }
.qyx-acct{ min-height:64px; }
.qyx-acct-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.qyx-acct-name{ font-size:14px; line-height:20px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qyx-acct-mail{ font-size:12px; line-height:16px; font-weight:400; color:var(--acct-ink2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qyx-acct-state{ font-size:12px; line-height:16px; font-weight:400; color:var(--acct-ink2); white-space:nowrap; }

.qyx-card-foot{ padding:10px 16px 16px; text-align:center; font-size:12px; line-height:16px; color:var(--acct-ink2); }
.qyx-ic{ display:inline-flex; line-height:0; }

/* ---------------------------------------- sign-in: choose an account -- */
/* The sign-in card forces its table cells to display:block with
   `body.task-login #login-form table` (qyverix.css), so these need at least
   that much specificity to hide anything. */
body.task-login #login-form.qyx-mode-choose table,
body.task-login #login-form.qyx-mode-choose tbody,
body.task-login #login-form.qyx-mode-choose .qyx-remember-row,
body.task-login #login-form.qyx-mode-choose .qyx-forgot-row,
body.task-login #login-form.qyx-mode-choose p.formbuttons{ display:none !important; }
body.task-login #login-form.qyx-mode-password tbody > tr:first-child{ display:none !important; }
body.task-login #login-form.qyx-mode-password .qyx-login-head{ margin-bottom:26px; }

.qyx-chooser{ margin:4px 0 6px; border-top:1px solid var(--lg-line, #dfe3ea); }
.qyx-choice{
  width:100%; display:flex; align-items:center; gap:14px; padding:12px 8px; min-height:60px;
  border:0; border-bottom:1px solid var(--lg-line, #dfe3ea); background:transparent; cursor:pointer;
  text-align:left; color:var(--lg-ink, #202124); font:inherit; border-radius:0; transition:background .15s;
}
.qyx-choice:hover{ background:rgba(103,61,230,.05); }
.qyx-choice .qyx-acct-name{ font-weight:500; }
.qyx-choice-glyph{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--lg-ink2, #5f6368); }
.qyx-choice-other .qyx-acct-name{ font-weight:500; }
.qyx-choice-rm{ color:#c5221f; display:inline-flex; }

.qyx-chip{
  display:inline-flex; align-items:center; gap:8px; margin:14px auto 0; padding:3px 8px 3px 3px;
  border:1px solid #747775; border-radius:16px; background:transparent; cursor:pointer;
  font:500 14px/20px Roboto,Arial,sans-serif; color:var(--lg-ink, #202124); max-width:100%;
}
.qyx-chip:hover{ background:rgba(31,31,31,.05); }
.qyx-chip-mail{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qyx-chip-caret{ display:inline-flex; color:var(--lg-ink2, #5f6368); }