/* Free email checker (/tools/email/): one box for a web address, one button, then the answer.
   Green and red only mean good or bad. Amber means "partly". Grey is just information. */
.em-form { display: flex; flex-direction: column; gap: 12px; }
.em-input {
  width: 100%; min-height: 66px; padding: 0 20px; border: 2px solid var(--line); border-radius: 18px; background: var(--white);
  font: 600 21px/1.2 var(--addr); color: var(--ink);
}
.em-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--mark); }
.em-input::placeholder { color: #8A9099; font-weight: 500; }
.em-try { font-size: 15px; color: var(--muted); text-align: center; }
.em-chip {
  margin-left: 4px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink);
  font: 700 14px/1 var(--addr); cursor: pointer;
}
.em-chip:hover { border-color: var(--ink); }
.em-form .tool-private { justify-content: center; text-align: left; }
.tool-go:disabled { opacity: .7; cursor: progress; }

.em-out { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; scroll-margin-top: 16px; }
.em-out[hidden] { display: none; }
.em-msg { padding: 14px 16px; border-radius: 16px; background: var(--white); font-size: 16px; line-height: 1.45; font-weight: 600; }

/* the answer */
.em-verdict { padding: 22px 22px 24px; border-radius: 22px; border: 2px solid; display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 16px; }
.em-verdict.is-bad { background: var(--wrong-tint); border-color: var(--wrong); }
.em-verdict.is-good { background: var(--right-tint); border-color: var(--right); }
.em-verdict.is-warn { background: #FFF1D6; border-color: #E2A62B; }
.em-domain { font: 700 15px/1.3 var(--addr); color: var(--muted); overflow-wrap: anywhere; }
.em-answer { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 7.4vw, 44px); line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.is-bad .em-answer { color: var(--wrong-dark); }
.is-good .em-answer { color: var(--right-dark); }
.is-warn .em-answer { color: #8A5A00; }
.em-why { font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--ink); text-wrap: pretty; }

/* the four checks */
.em-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.em-check { padding: 14px 16px 15px; border: 2px solid var(--line); border-radius: 18px; background: var(--white); }
.em-check-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.em-check-name { font-size: 17px; font-weight: 800; line-height: 1.3; }
.em-check-name small { font-size: 13px; font-weight: 700; color: var(--muted); }
.em-pill { flex: none; max-width: 55%; padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.em-check.is-good .em-pill { background: var(--right-tint); color: var(--right-dark); }
.em-check.is-bad .em-pill { background: var(--wrong-tint); color: var(--wrong-dark); }
.em-check.is-warn .em-pill { background: #FFF1D6; color: #8A5A00; }
.em-check.is-info .em-pill { background: var(--paper); color: var(--ink); }
.em-check-line { margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: #3A3F47; text-wrap: pretty; }
.em-raw { margin-top: 8px; }
.em-raw summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); list-style: none; }
.em-raw summary::-webkit-details-marker { display: none; }
.em-raw summary::after { content: " +"; }
.em-raw[open] summary::after { content: " \2212"; }
.em-raw code { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--paper); font: 500 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* the fix */
.em-fix { padding: 20px 20px 22px; border: 2px solid var(--ink); border-radius: 22px; background: var(--white); display: flex; flex-direction: column; gap: 10px; }
.em-fix-head { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.em-fix-where { font-size: 15px; line-height: 1.5; color: var(--muted); }
.em-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: fix; }
.em-steps > li { counter-increment: fix; position: relative; padding-left: 42px; }
.em-steps > li::before {
  content: counter(fix); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--white); font: 800 15px/30px var(--body); text-align: center;
}
.em-steps b { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; }
.em-steps p { margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: #3A3F47; text-wrap: pretty; }
.em-record { margin-top: 10px; padding: 8px 10px; border-radius: 14px; background: var(--paper); display: flex; flex-direction: column; gap: 4px; }
.em-rec-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; }
.em-rec-k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.em-rec-v { font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; }
.em-copy { min-height: 34px; padding: 0 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 800 13px/1 var(--body); cursor: pointer; }
.em-copy:hover { border-color: var(--ink); }
.em-rec-row:first-child { grid-template-columns: 52px minmax(0, 1fr); }

/* on to team plans */
.em-teams {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 54px 18px 20px; position: relative; border-radius: 20px;
  background: var(--ink); color: var(--white); text-decoration: none;
}
.em-teams::after { content: "\2192"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 800; color: var(--gold); }
.em-teams b { font-size: 18px; font-weight: 800; }
.em-teams span { font-size: 15px; line-height: 1.45; color: #C9CED6; }
.em-teams:hover b { text-decoration: underline; text-underline-offset: 3px; }

.em-next-icon { display: grid; place-items: center; font-size: 24px; line-height: 1; }
.em-next-icon.is-coral { background: #F0644A; color: var(--white); font-family: var(--display); font-size: 22px; letter-spacing: .04em; }

@media (max-width: 640px) {
  .em-input { font-size: 19px; }
  .em-verdict { padding: 18px 18px 20px; }
  .em-fix { padding: 18px 16px 20px; }
  .em-steps > li { padding-left: 38px; }
}