/* www.axionsoftware.dev/webmail -- the mail sign-in.

   Everything it can borrow comes from account.css: the page, the boot block,
   .acct-signin, fields, the password peek, buttons and alerts. This file holds
   only what the mail door adds -- the logo over the heading, the accounts kept
   on this device, the domain after the name on a ?d= link, the address chip
   on the password step, the keep-me-signed-in row and the help panel. */

.wm-door { min-height: calc(100vh - 64px - 40px); }
.wm-door .wm-logo { display: block; width: 120px; height: auto; margin-bottom: -6px; }

.wm-chip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 12px 7px 7px; border-radius: 999px; cursor: pointer;
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.13);
  color: var(--text); font: inherit; font-size: 13.5px; text-align: left;
}
.wm-chip:hover { border-color: rgba(255,255,255,0.25); }
.wm-chip-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 600; font-size: 12.5px; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
}
.wm-chip-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-chip-x { font-size: 12px; color: var(--blue); }

#wm-step-password { display: flex; flex-direction: column; gap: 13px; }

.wm-keep { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.wm-keep input { accent-color: var(--blue); width: 15px; height: 15px; }


.wm-help {
  width: 100%; max-width: 420px; margin-top: 6px; padding: 16px 18px; text-align: left;
  background: var(--dark2); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.wm-help h2 { font-family: 'Exo 2', sans-serif; font-size: 16px; font-weight: 700; color: var(--white); }
.wm-help p { font-size: 13.5px; color: var(--muted); max-width: none; }

/* "Choose an account": one row per address kept on this device. The chip's
   avatar is reused so a row and the password step look like the same person. */
.wm-accts { display: flex; flex-direction: column; gap: 8px; }
.wm-acct {
  display: flex; align-items: center; width: 100%;
  border-radius: 12px; background: var(--dark2); border: 1px solid rgba(255,255,255,0.13);
}
.wm-acct:hover { border-color: rgba(255,255,255,0.25); }
.wm-acct-open, .wm-acct-other {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; background: none; border: 0; cursor: pointer;
  color: var(--text); font: inherit; text-align: left;
}
.wm-acct-open .wm-chip-av { width: 32px; height: 32px; font-size: 14px; }
.wm-acct-txt { display: flex; flex-direction: column; min-width: 0; }
.wm-acct-addr { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-acct-sub { font-size: 12px; color: var(--muted); }
.wm-acct-x {
  flex: none; width: 34px; height: 34px; margin-right: 6px; border-radius: 8px;
  background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 19px; line-height: 1;
}
.wm-acct-x:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.wm-acct-plus {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px dashed rgba(255,255,255,0.25); color: var(--muted); font-size: 17px;
}

/* A ?d= link: "frontdesk" then "@theirbusiness.com" inside the same field. */
.wm-addr-wrap { position: relative; display: flex; align-items: center; }
.wm-suffix {
  position: absolute; right: 11px; pointer-events: none;
  font-size: 13.5px; color: var(--muted); max-width: 60%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The System status link on a "server isn't answering" reply. */
#wm-alert a { color: inherit; font-weight: 600; text-decoration: underline; }