/* em-site.css — ė.email's own look, loaded after house.css. Every class here begins with em-.
   The accent is violet: #6D28D9 on paper, #C4B5FD on the dark ground (contrast measured by the build, see /about/). */

:root {
    --accent:     #6D28D9;
    --accent-ink: #5B21B6;
    --on-accent:  #ffffff;
    --em-soft:    rgba(109, 40, 217, .07);
    --em-edge:    rgba(109, 40, 217, .28);
}
html[data-dark] {
    --accent:     #C4B5FD;
    --accent-ink: #DDD6FE;
    --on-accent:  #11161C;
    --em-soft:    rgba(196, 181, 253, .09);
    --em-edge:    rgba(196, 181, 253, .34);
}

/* ------------------------------------------------------------------ tap targets (44 px) on the shared chrome */
.mast__brand { min-height: 44px; }
.mast__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.ed button { position: relative; }
.ed button::after { content: ''; position: absolute; top: -9px; bottom: -9px; }
.ed button:first-child::after { left: -12px; right: 0; }
.ed button:last-child::after { left: 0; right: -12px; }
.foot ul { gap: 0; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__legal { align-items: center; }
.foot__legal a { min-height: 44px; min-width: 44px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }

/* eight sections do not fit beside the brand on a phone: the brand and the switch share the first row, the
   sections take the second and scroll sideways inside it; the masthead then scrolls away with the page */
@media (max-width: 760px) {
    .mast { position: static; }
    .mast__in { flex-wrap: wrap; gap: 0 10px; min-height: 0; padding-top: 6px; }
    .mast__brand { margin-right: auto; }
    .mast__nav { order: 3; flex: 1 0 100%; margin-left: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: calc(var(--gutter) - 8px);
                 -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}

/* ------------------------------------------------------------------ hero */
.em-hero { padding-block: clamp(28px, 5vw, 64px) clamp(18px, 3vw, 32px); }
.em-hero h1 { max-width: 20ch; }
.em-hero h1 b { color: var(--accent-ink); }
.em-hero--inner h1 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); max-width: 24ch; }

/* ------------------------------------------------------------------ the desk */
.em-desk { padding-block: clamp(20px, 3vw, 36px) clamp(36px, 5vw, 64px); border-top: 1px solid var(--line); background: var(--tint); }
.em-form { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(16px, 2.4vw, 24px); box-shadow: 0 1px 0 var(--line-soft); }
.em-form .row { align-items: end; }
.em-form .input { font-family: var(--mono); min-height: 52px; }
.em-form .btn { min-height: 52px; flex: 0 0 auto; }
.em-form .note { margin: 14px 0 0; }
.em-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.em-try .label { margin-right: 4px; }
.em-chip { min-height: 44px; padding: 0 16px; font-family: var(--mono); font-size: .86rem; }
.em-chip[disabled] { opacity: .45; cursor: not-allowed; }
.em-desk .status { margin: 16px 2px 0; min-height: 3.2em; }
@media (max-width: 640px) { .em-form .btn { width: 100%; } }

.em-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; align-items: start; }
.em-side { display: grid; gap: 16px; min-width: 0; }
.em-results { display: grid; gap: 16px; min-width: 0; align-content: start; }
@media (min-width: 1040px) {
    .em-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
    .em-side { position: sticky; top: 76px; order: 2; }
}

/* the summary and the run */
.em-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.em-panel--sum { border-color: var(--em-edge); background: linear-gradient(var(--em-soft), var(--em-soft)), var(--card); min-height: 260px; }
.em-panel--run { min-height: 190px; }
.em-sum__h, .em-run__h { font: 500 .74rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); margin: 0 0 12px; overflow-wrap: anywhere; }
.em-sum { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.em-sum__i { position: relative; padding-left: 16px; font-size: .93rem; line-height: 1.5; color: var(--ink-77); overflow-wrap: anywhere; }
.em-sum__i::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--muted); }
.em-sum__i b { color: var(--ink); font-weight: 600; }
.em-sum__i--good::before { background: var(--good); }
.em-sum__i--warn::before { background: var(--warn); }
.em-sum__i--bad::before { background: var(--bad); }
.em-panel .note { margin: 0; font-size: .82rem; }
.em-run__dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .88rem; }
.em-run__dl dt { color: var(--ink-55); }
.em-run__dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.em-run__err { margin: 8px 0 0; padding-left: 18px; font-size: .8rem; color: var(--ink-77); }
.em-run__err code { font-family: var(--mono); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ a card per record */
.em-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 18px 24px; min-width: 0; min-height: 132px; overflow: hidden; }
.em-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line); }
.em-card[data-em-state="good"]::before { background: var(--good); }
.em-card[data-em-state="warn"]::before { background: var(--warn); }
.em-card[data-em-state="bad"]::before { background: var(--bad); }
.em-card[data-em-state="info"]::before { background: var(--accent); }
.em-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.em-card__head h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.em-card__what { font-size: .84rem; color: var(--ink-55); margin: 0; flex: 1 1 200px; }
.em-card__tag { margin-left: auto; }
.em-card__body > * { margin-top: 12px; margin-bottom: 0; }
.em-card__body > :first-child { margin-top: 0; }
.em-card__verdict { font-size: 1.02rem; line-height: 1.55; color: var(--ink); max-width: 74ch; }
.em-card__wait, .em-card__idle { color: var(--ink-55); font-size: .92rem; margin: 0; }
.em-card__src { margin-top: 14px; }
.em-ref { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; white-space: nowrap; }
.em-ref:hover { text-decoration-color: var(--accent); }
.tag { white-space: nowrap; }

.em-rec { display: grid; gap: 4px; min-width: 0; }
.em-rec__name { font: 500 .7rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-55); overflow-wrap: anywhere; }
.em-rec__txt { display: block; font: 400 .84rem/1.55 var(--mono); background: var(--em-soft); border: 1px solid var(--line-soft); border-left: 2px solid var(--accent); border-radius: 6px; padding: 10px 12px; overflow-wrap: anywhere; word-break: break-word; color: var(--ink); }
.em-rec__txt + .em-rec__txt { margin-top: 6px; }
.em-wrap { overflow-wrap: anywhere; word-break: break-word; }

.em-mx, .em-terms { min-width: 600px; }          /* on a phone these scroll inside their .tablewrap */
.em-terms td:first-child { width: 15em; min-width: 15em; }
.em-mx td:nth-child(2) { min-width: 17em; }
.em-terms tr.is-ignored td { color: var(--ink-55); }
.em-terms tr.is-ignored td:first-child { text-decoration: line-through; }
.em-terms tr.is-bad td:first-child { color: var(--bad); }
.em-mx td, .em-terms td { font-size: .88rem; }
.em-lv--good { color: var(--good); }
.em-lv--warn { color: var(--warn); }
.em-lv--bad { color: var(--bad); }

.em-meter__h { margin: 0 0 6px; font-size: .95rem; color: var(--ink-77); }
.em-meter__h b { color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.em-meter__bar { height: 10px; border-radius: 999px; background: var(--line-soft); border: 1px solid var(--line); overflow: hidden; max-width: 420px; }
.em-meter__bar span { display: block; height: 100%; background: var(--good); border-radius: 999px; }
.em-meter.is-over .em-meter__bar span { background: var(--bad); }
.em-meter.is-over .em-meter__h b { color: var(--bad); }
.em-meter .note { margin: 8px 0 0; }

.em-find { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.em-find__i { position: relative; padding-left: 22px; font-size: .92rem; line-height: 1.55; color: var(--ink-77); overflow-wrap: anywhere; }
.em-find__mark { position: absolute; left: 0; top: .42em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); }
.em-find__i--good .em-find__mark { border-color: var(--good); background: var(--good); }
.em-find__i--warn .em-find__mark { border-color: var(--warn); border-radius: 2px; }
.em-find__i--bad .em-find__mark { border-color: var(--bad); background: var(--bad); border-radius: 2px; }

.em-q { font-size: .84rem; line-height: 1.5; color: var(--ink-55); border-top: 1px dashed var(--line); padding-top: 10px; overflow-wrap: anywhere; }
.em-q--differ, .em-q--one, .em-q--none { color: var(--ink-77); border: 1px solid var(--warn); border-radius: 8px; padding: 10px 12px; }
.em-q--none { border-color: var(--bad); }
.em-q__h { margin: 0 0 10px; }
.em-q__two { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.em-q__two .label { margin: 0 0 6px; }
.em-q__list { margin: 0; padding-left: 18px; }
.em-q__list code, .em-q__none { font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; word-break: break-word; }
.em-q__none { margin: 0; }

.em-more { border: 1px solid var(--line-soft); border-radius: 8px; padding: 0 12px; }
.em-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-77); list-style: none; }
.em-more > summary::-webkit-details-marker { display: none; }
.em-more > summary::before { content: '+'; font-family: var(--mono); color: var(--accent-ink); width: 1em; }
.em-more[open] > summary::before { content: '−'; }
.em-more[open] { padding-bottom: 12px; }
.em-more .note { margin: 10px 0 0; }

.em-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.em-tree .em-tree { margin: 10px 0 0; padding-left: 14px; border-left: 1px solid var(--line); }
.em-tree__i { min-width: 0; }
.em-tree__n { display: inline-block; min-width: 2.2em; font-size: .78rem; color: var(--ink-55); }
.em-tree__t { font: 500 .86rem/1.5 var(--mono); overflow-wrap: anywhere; }
.em-tree__i.is-over > .em-tree__n, .em-tree__i.is-over > .em-tree__t { color: var(--bad); }
.em-tree__rec { display: block; margin-top: 4px; font: 400 .78rem/1.5 var(--mono); color: var(--ink-55); overflow-wrap: anywhere; word-break: break-word; }
.em-tree__note { margin: 4px 0 0; font-size: .84rem; color: var(--ink-77); }
.em-walk { margin: 0; padding-left: 20px; font-size: .88rem; color: var(--ink-77); display: grid; gap: 4px; }
.em-walk code { font-family: var(--mono); overflow-wrap: anywhere; }
.em-notfetched { border-left: 2px solid var(--line); padding-left: 12px; }

/* DKIM: selectors */
.em-dkim__controls { display: grid; gap: 14px; }
.em-dkim__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.em-dkim__form .field { flex: 1 1 200px; }
.em-dkim__form .input { font-family: var(--mono); }
.em-sels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.em-sel { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; min-width: 0; display: grid; gap: 8px; }
.em-sel[data-em-state="good"] { border-color: var(--good); }
.em-sel[data-em-state="bad"] { border-color: var(--bad); }
.em-sel[data-em-state="warn"] { border-color: var(--warn); }
.em-sel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.em-sel__name { font: 600 .95rem/1.3 var(--mono); overflow-wrap: anywhere; }
.em-sel__verdict { margin: 0; font-size: .93rem; color: var(--ink-77); }
#em-dkim-sum { margin: 0; font-size: .95rem; color: var(--ink-77); max-width: 74ch; }
#em-dkim-status { margin: 0; min-height: 1.6em; }

/* ------------------------------------------------------------------ prose bands */
.em-cols { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .em-cols { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.em-prose h2 { margin-top: 1.6em; }
.em-prose h2:first-child { margin-top: 0; }
.em-prose ul, .em-prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.em-prose li { margin: 0 0 .5em; }
.em-prose li::marker { color: var(--accent-ink); }
.em-ex { display: block; font: 400 .86rem/1.6 var(--mono); background: var(--em-soft); border: 1px solid var(--line-soft); border-left: 2px solid var(--accent); border-radius: 6px; padding: 12px 14px; margin: 0 0 1em; overflow-wrap: anywhere; word-break: break-word; color: var(--ink); white-space: pre-wrap; }
.em-ex__cap { font-size: .8rem; color: var(--ink-55); margin: -.6em 0 1.2em; }
.em-aside { align-self: start; display: grid; gap: 16px; }
.em-aside .card h3 { font-size: .98rem; }
.em-aside .card ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.em-aside .card li a { display: flex; align-items: center; min-height: 44px; text-decoration: none; border-top: 1px solid var(--line-soft); color: var(--ink-77); font-size: .92rem; }
.em-aside .card li:first-child a { border-top: 0; }
.em-aside .card li a:hover { color: var(--ink); }
.em-aside .card li a::after { content: '→'; margin-left: auto; color: var(--accent-ink); }
.em-srcnote { display: block; font-size: .84rem; line-height: 1.5; color: var(--ink-55); padding: 0 0 12px; }
.em-aside .card .em-srclist li a { color: var(--ink); }
.em-records .card { display: block; }
.em-records .card h3 { display: flex; align-items: baseline; gap: 10px; }
.em-records .card h3 span { font: 500 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.em-srclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.em-srclist li { font-size: .9rem; line-height: 1.5; color: var(--ink-77); overflow-wrap: anywhere; }
.em-srclist a { color: var(--ink); }
.em-noscript { border: 1px solid var(--warn); border-radius: 10px; padding: 12px 14px; margin: 14px 0 0; font-size: .92rem; }

@media (max-width: 520px) {
    .em-card { padding: 16px 14px 16px 18px; }
    .em-card__tag { margin-left: 0; }
    table.t th, table.t td { padding: 9px 10px; }
}
@media print {
    .em-form, .em-try, .em-dkim__controls { display: none !important; }
}