/* ============================================================
   PASSAGE by Khoshà — outbound email settings modal
   Companion to emailsettings.js. Only styles for the bits that
   aren't already covered by the shared .fld/.frow/.m-title/.panel
   component classes in styles.css. Mobile-first: base rules target
   a phone; inputs are 16px throughout so iOS Safari never zooms on
   focus inside this modal, in or out of the mobile breakpoint.
   ============================================================ */

#esForm, .m-card #esHost, .m-card #esPort, .m-card #esUser, .m-card #esPass,
.m-card #esFromName, .m-card #esFromEmail {
  font-size: 16px;
}
.m-card .fld input#esHost,
.m-card .fld input#esPort,
.m-card .fld input#esUser,
.m-card .fld input#esPass,
.m-card .fld input#esFromName,
.m-card .fld input#esFromEmail {
  font-size: 16px;
  min-height: 44px;
}

.es-note{
  background: var(--bone);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 18px;
}

.es-checkfld label{
  display: flex;
  align-items: center;
  gap: 9px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.es-checkfld input[type=checkbox]{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--gold);
}

.es-error{
  background: rgba(140,59,46,.08);
  border: 1px solid rgba(140,59,46,.25);
  color: var(--red);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.es-error[hidden]{ display: none; }

.es-result{
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.es-result[hidden]{ display: none; }
.es-result.ok{
  background: rgba(30,58,51,.08);
  border: 1px solid rgba(30,58,51,.25);
  color: var(--green);
}
.es-result.err{
  background: rgba(140,59,46,.08);
  border: 1px solid rgba(140,59,46,.25);
  color: var(--red);
}

.es-outbound-title{
  margin-top: 22px;
  font-size: 13px;
}
.es-outbound-list{
  max-height: 220px;
  overflow-y: auto;
}

@media (max-width: 560px){
  .es-note{ font-size: 12px; }
}

/* App Password guidance. This is the path the firm actually uses, so it sits
   above the form rather than being buried in a help doc — the previous failure
   mode was a consultant typing the account password, seeing "Connected", and
   never learning that every client email had been rejected. */
.es-gmail { border-left: 3px solid var(--gold, #A9824C); }
.es-gmail-vals {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 9px 0 8px; font-size: 12.5px;
}
.es-gmail-vals span { white-space: nowrap; }
.es-gmail-vals b { color: var(--gold-deep, #8A6634); margin-right: 4px; }
.es-gmail-steps { font-size: 12.5px; line-height: 1.65; opacity: .85; }
@media (max-width: 640px) {
  .es-gmail-vals { flex-direction: column; gap: 3px; }
}