/* The sign-in and join panel. Its own stylesheet, loaded only where joining is
   on, so the twelve sites that do not run it carry none of this. */

/* Self-contained: on most pages a global reset makes this border-box already,
   but the EnergyPilot landing scopes its reset to .ep and the panel mounts on
   document.body, outside it, so without this the padded inputs overflow the
   card. Harmless where border-box is already the default. */
.signin, .signin * { box-sizing: border-box; }

.signin {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(11, 20, 26, 0.55);
  overflow-y: auto;
}

.signin__card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 24px 20px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(11, 20, 26, 0.3);
  font-family: inherit;
  color: #111b21;
}

.signin__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.signin__close svg { width: 20px; height: 20px; }

.signin__title {
  margin: 0 40px 4px 0;
  font-size: 20px;
  font-weight: 700;
}

.signin__lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(17, 27, 33, 0.65);
}

.signin__said {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdecea;
  color: #a5281b;
  font-size: 13.5px;
  line-height: 19px;
  font-weight: 600;
}

.signin__said[hidden] { display: none; }

.signin__form { display: grid; gap: 14px; margin-top: 14px; }

.signin__field { display: grid; gap: 5px; margin: 0; }

.signin__field label {
  font-size: 13px;
  font-weight: 600;
}

.signin__field input {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(11, 20, 26, 0.25);
  border-radius: 8px;
  font: inherit;
  /* Under 16px iOS zooms the page the moment the field takes focus. */
  font-size: 16px;
}

.signin__field input:focus-visible {
  outline: 2px solid var(--brand-DEFAULT, #22909a);
  outline-offset: 1px;
}

.signin__hint {
  font-size: 12.5px;
  color: rgba(17, 27, 33, 0.55);
}

.signin__go {
  min-height: 48px;
  border: 0;
  border-radius: 24px;
  background: var(--brand-DEFAULT, #22909a);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.signin__go:disabled { opacity: .6; }

.signin__swap {
  margin: 14px 0 0;
  font-size: 14px;
  text-align: center;
  color: rgba(17, 27, 33, 0.65);
}

.signin__link,
.signin__swap a {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--brand-DEFAULT, #22909a);
  text-decoration: underline;
  cursor: pointer;
}