/* The email sign-in card (owner, 2026-10-19): login.yotta.bot's sign-in card
   (src/yotta-login/frontend/styles.css, .signin*) with only the email, for
   the environments' web portals, the admin portal and the investor portals.
   One canonical copy, src/common/frontend/sign-in/email-sign-in.css; `make
   sync-sign-in` copies it into each portal beside loader.css. Change it here
   only. Everything is under .esi-page, which carries data-theme="dark", so the
   portal's dark tokens apply and nothing leaks into the portal. */
/* The resets have no specificity (:where), so every class below wins. */
:where(.esi-page, .esi-page *, .esi-page *::before, .esi-page *::after) { box-sizing:border-box; }
.esi-page { position:relative; min-height:100vh; display:flex; flex-direction:column; background:var(--hbg); overflow:hidden;
  color:var(--text); font-family:'IBM Plex Sans',sans-serif; }
:where(.esi-page *) { margin:0; padding:0; font-family:inherit; }
:where(.esi-page button) { font:inherit; cursor:pointer; background:none; border:0; color:inherit; }
.esi-grid { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.esi-grid path { fill:none; stroke:rgba(var(--chrome-rgb),0.12); stroke-width:1; }
.esi-main { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 16px; }
.esi-card { position:relative; width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,0.35); }
.esi-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:8px 14px 8px 24px; }
/* Back at the card's top right after the email step (owner, 2026-10-19),
   login.yotta.bot's .icon-btn. */
.esi-back { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; color:var(--text2); transition:background 0.15s, color 0.15s; }
.esi-back:hover { background:rgba(var(--chrome-rgb),0.06); color:var(--text); }
.esi-logo { height:18px; width:auto; display:block; }
.esi-stripe { display:flex; height:4px; }
.esi-stripe > span { flex:1; }
.esi-body { padding:24px; }
.esi-stack { display:flex; flex-direction:column; gap:18px; }
/* The title, and the host it is on at the right, level with it (owner,
   2026-10-19). */
.esi-heading { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:12px; }
.esi-title { font-size:18px; font-weight:400; color:var(--text); }
/* The host it is on, in a box with round ends, green like the old YottaBot
   Desktop sign-in note: the stripe's green border on that green at 8%, and
   its text in the green too. */
.esi-domain { display:inline-flex; align-items:center; padding:3px 12px; border:1px solid var(--sc-green); border-radius:999px;
  background:rgba(124,189,60,0.08); color:var(--sc-green); font-size:11px; letter-spacing:0.04em; line-height:1.5; white-space:nowrap; }
.esi-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text);
  padding:10px 12px; font-size:13px; letter-spacing:0.02em; outline:none; transition:border-color 0.15s; }
.esi-input:focus { border-color:var(--border-strong); }
.esi-input::placeholder { color:var(--text3); }
.esi-password { position:relative; }
.esi-password .esi-input { padding-right:40px; }
.esi-eye { position:absolute; top:0; right:0; height:100%; width:38px; display:inline-flex; align-items:center; justify-content:center; color:var(--text3); }
.esi-eye:hover { color:var(--text); }
.esi-caps { font-size:11px; color:var(--sc-orange); margin-top:-8px; }
/* Sign In (owner, 2026-10-19): two ramp steps lighter than the card (neutral
   950, --surface), neutral 850, and one more on hover (800), with the card's
   text, at Create Account's size. */
.esi-submit { padding:11px 16px; border-radius:6px; background:#473f38; color:var(--text); font-size:12px; font-weight:500;
  display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.esi-submit:hover { background:#534b43; }
.esi-submit:disabled { opacity:0.45; cursor:not-allowed; background:#473f38; }
.esi-secondary { padding:11px 16px; border-radius:6px; border:1px solid var(--border-strong); color:var(--text); font-size:12px;
  display:flex; align-items:center; justify-content:center; gap:10px; background:var(--bg); }
.esi-secondary:hover { border-color:var(--text3); }
.esi-secondary:disabled { opacity:0.5; cursor:not-allowed; }
.esi-link { color:var(--text3); text-decoration:underline; text-underline-offset:2px; font-size:11px; cursor:pointer; }
.esi-link:hover { color:var(--text2); }
.esi-stack > .esi-link { align-self:center; }
/* Who is signing in (owner, 2026-10-19), as login.yotta.bot shows it:
   Username, then the email with Change at its right. Underlined text is drawn
   like the footer's (.esi-legal a). */
.esi-account { display:flex; flex-direction:column; gap:4px; }
.esi-account-label { font-size:11px; color:var(--text3); }
.esi-account-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.esi-account-row > span { font-size:13px; color:var(--text); overflow-wrap:anywhere; }
.esi-error { padding:8px 12px; border:1px solid var(--sc-red); border-radius:6px; background:rgba(209,54,68,0.08); color:var(--sc-red);
  font-size:11px; letter-spacing:0.02em; line-height:1.5; }
.esi-notice { padding:8px 12px; border:1px solid var(--border-strong); border-radius:6px; color:var(--text2); font-size:11px; line-height:1.5; }
.esi-foot { position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px;
  padding:10px 24px; background:var(--hbg); border-top:1px solid rgba(var(--chrome-rgb),0.10); font-size:11px; color:var(--text3); }
.esi-legal { display:flex; gap:18px; }
.esi-legal a { color:var(--text3); text-decoration:underline; text-underline-offset:2px; }
.esi-legal a:hover { color:var(--text2); }