/* ==========================================================
   Email Check page (/email/) — scoped styles
   Loaded via $pageCss; depends only on shared.css variables.
   ========================================================== */

/* ─── Verdict pill (card header) ─────────────────────────── */
.email-verdict{display:none;margin-left:auto;margin-right:8px;padding:4px 12px;border-radius:100px;font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border:1px solid;align-self:center;white-space:nowrap}
.email-verdict.show{display:inline-block}
.email-verdict[data-rating="trusted"],
.email-verdict[data-rating="good"]{background:var(--green-subtle);color:var(--green);border-color:rgba(52,211,153,0.4)}
.email-verdict[data-rating="questionable"]{background:var(--yellow-subtle);color:var(--yellow);border-color:rgba(251,191,36,0.4)}
.email-verdict[data-rating="high-risk"]{background:var(--red-subtle);color:var(--red);border-color:rgba(248,113,113,0.5);animation:emailVerdictPulse 2.4s ease-in-out infinite}
@keyframes emailVerdictPulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,0.4)}50%{box-shadow:0 0 0 8px rgba(248,113,113,0)}}

/* ─── Hero: dial + meta ──────────────────────────────────── */
.email-hero-grid{display:grid;grid-template-columns:auto 1fr;gap:36px;padding:28px 28px 26px;align-items:center}
.email-dial-wrap{display:flex;justify-content:center;align-items:center}
.email-dial{position:relative;width:200px;height:200px;flex-shrink:0}
.email-dial-svg{width:100%;height:100%;display:block;overflow:visible}
#emailArc,#emailArcGlow{transition:stroke .4s ease}
.email-dial-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.email-dial-value{font-family:var(--font-mono);font-size:56px;font-weight:700;line-height:1;letter-spacing:-0.04em;color:var(--text-primary);transition:color .4s ease;font-feature-settings:"tnum"}
.email-dial-out-of{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-muted);margin-top:4px;letter-spacing:0.02em}
.email-dial-label{margin-top:9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-tertiary);transition:color .4s ease}

.email-meta{display:flex;flex-direction:column;gap:16px;min-width:0}
.email-meta-query{padding-bottom:14px;border-bottom:1px solid var(--border-default)}
.email-meta-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);font-weight:600;margin-bottom:4px}
.email-meta-target{display:flex;align-items:center;gap:10px;min-width:0}
.email-meta-target-value{font-family:var(--font-mono);font-size:clamp(18px,2.6vw,26px);font-weight:700;line-height:1.2;letter-spacing:-0.02em;background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;word-break:break-all;min-width:0}
.email-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px 22px}
.email-meta-row{min-width:0}
.email-meta-value{font-size:13px;font-weight:600;color:var(--text-primary);word-break:break-word}
.email-meta-value a{color:var(--accent);text-decoration:none}
.email-meta-value a:hover{text-decoration:underline}

/* Cross-tool actions */
.email-xtools{display:flex;flex-wrap:wrap;gap:8px}
.email-xtool{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:100px;font-size:12px;font-weight:600;color:var(--text-secondary);text-decoration:none;transition:color .15s ease,border-color .15s ease,background .15s ease}
.email-xtool:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-hover)}
.email-xtool svg{width:13px;height:13px;flex-shrink:0;color:var(--accent);opacity:.8}

/* ─── Score breakdown bars ───────────────────────────────── */
.email-breakdown{padding:18px 22px 16px;border-bottom:1px solid var(--border-default)}
.email-breakdown-title{font-size:10.5px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);font-weight:600;margin-bottom:13px}
.email-breakdown-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.email-breakdown-row:last-child{margin-bottom:0}
.email-breakdown-label{width:112px;flex-shrink:0;font-size:12.5px;color:var(--text-secondary);font-weight:500}
.email-breakdown-track{flex:1;height:7px;background:var(--bg-elevated);border-radius:100px;overflow:hidden}
.email-breakdown-fill{display:block;height:100%;border-radius:100px;width:0;transition:width .6s var(--ease-out)}
.email-breakdown-fill[data-band="good"]{background:var(--green)}
.email-breakdown-fill[data-band="warn"]{background:var(--yellow)}
.email-breakdown-fill[data-band="bad"]{background:var(--red)}
.email-breakdown-val{width:52px;flex-shrink:0;text-align:right;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text-secondary);white-space:nowrap}

/* ─── Check rows (MX / SPF / DMARC / …) ──────────────────── */
.email-checks-count{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.04em}
.email-checks-count[data-status="good"]{color:var(--green)}
.email-checks-count[data-status="warn"]{color:var(--yellow)}
.email-checks-count[data-status="bad"]{color:var(--red)}
.email-checks{display:flex;flex-direction:column;gap:8px;padding:16px 22px 22px}
.email-check{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:border-color .15s ease}
.email-check:hover{border-color:var(--border-hover)}
.email-check-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-top:1px}
.email-check-icon svg{width:14px;height:14px}
.email-check[data-status="pass"] .email-check-icon{background:var(--green-subtle);color:var(--green)}
.email-check[data-status="fail"] .email-check-icon{background:var(--red-subtle);color:var(--red)}
.email-check[data-status="warn"] .email-check-icon{background:var(--yellow-subtle);color:var(--yellow)}
.email-check[data-status="info"] .email-check-icon{background:var(--accent-subtle,rgba(56,189,248,0.10));color:var(--accent)}
.email-check-body{flex:1;min-width:0}
.email-check-name{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.email-check-status{padding:2px 8px;border-radius:100px;font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}
.email-check[data-status="pass"] .email-check-status{background:var(--green-subtle);color:var(--green)}
.email-check[data-status="fail"] .email-check-status{background:var(--red-subtle);color:var(--red)}
.email-check[data-status="warn"] .email-check-status{background:var(--yellow-subtle);color:var(--yellow)}
.email-check[data-status="info"] .email-check-status{background:var(--bg-surface);color:var(--text-tertiary)}
.email-check-desc{font-size:12.5px;color:var(--text-secondary);line-height:1.55}
.email-check-copy{opacity:0;transition:opacity .15s ease,color .15s ease,border-color .15s ease,background .15s ease}
.email-check:hover .email-check-copy,.email-check-copy:focus-visible{opacity:1}
@media (hover:none){.email-check-copy{opacity:.7}}

/* SPF record (mono, with copy) */
.email-record{display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px 10px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);min-width:0}
.email-record code{flex:1;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--text-primary);word-break:break-all;white-space:pre-wrap}
.email-record .skeleton{flex:1;height:14px;margin:0}
.email-record-pending{font-size:11.5px;color:var(--text-muted)}

/* ─── Signals (factors) ──────────────────────────────────── */
.email-factors{display:flex;flex-direction:column;gap:8px;padding:16px 22px 22px}
.email-factor{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;background:var(--bg-elevated);border:1px solid var(--border-default);border-left-width:3px;border-radius:var(--radius-md)}
.email-factor[data-impact="positive"]{border-left-color:var(--green)}
.email-factor[data-impact="negative"]{border-left-color:var(--red)}
.email-factor[data-impact="info"]{border-left-color:var(--text-tertiary)}
.email-factor-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.email-factor-icon svg{width:14px;height:14px}
.email-factor[data-impact="positive"] .email-factor-icon{background:var(--green-subtle);color:var(--green)}
.email-factor[data-impact="negative"] .email-factor-icon{background:var(--red-subtle);color:var(--red)}
.email-factor[data-impact="info"] .email-factor-icon{background:var(--bg-surface);color:var(--text-tertiary)}
.email-factor-name{font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.email-factor-detail{font-size:12.5px;color:var(--text-secondary);line-height:1.55}

/* ─── Error retry ────────────────────────────────────────── */
.email-retry{margin-left:14px;padding:7px 16px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:100px;font-size:12px;font-weight:700;color:var(--text-primary);cursor:pointer;transition:border-color .15s ease,background .15s ease;flex-shrink:0}
.email-retry:hover{border-color:var(--border-hover);background:var(--bg-hover)}

/* ─── Disposable-domains browser ─────────────────────────── */
.email-browse{margin-top:40px}
.ip-page.centered .email-browse{max-width:900px;margin:14vh auto 0}
.email-browse-tools{display:flex;align-items:center;gap:10px;padding:16px 22px 4px}
.email-browse-filter{position:relative;flex:1;display:flex;align-items:center;min-width:0}
.email-browse-filter svg{position:absolute;left:12px;width:14px;height:14px;color:var(--text-muted);pointer-events:none}
.email-browse-filter input{width:100%;padding:9px 12px 9px 34px;font-family:var(--font-mono);font-size:13px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.email-browse-filter input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
.email-browse-filter input::placeholder{color:var(--text-muted)}
.email-browse-answer{display:none;align-items:center;gap:10px;margin:12px 22px 0;padding:11px 14px;border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:13px;font-weight:600}
.email-browse-answer.show{display:flex}
.email-browse-answer svg{width:15px;height:15px;flex-shrink:0}
.email-browse-answer[data-status="bad"]{background:var(--red-subtle);border-color:rgba(248,113,113,0.3);color:var(--red)}
.email-browse-answer[data-status="good"]{background:var(--green-subtle);border-color:rgba(52,211,153,0.3);color:var(--green)}
.email-browse-answer[data-status="pending"]{background:var(--bg-elevated);color:var(--text-secondary)}
.email-browse-answer a{margin-left:auto;color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap}
.email-domain-grid{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px 20px}
.email-domain-chip{display:inline-flex;align-items:center;padding:6px 12px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:100px;font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);text-decoration:none;transition:color .15s ease,border-color .15s ease,background .15s ease;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-domain-chip:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-hover)}
.email-domain-chip mark{background:transparent;color:var(--accent);font-weight:700}
.email-domain-empty{padding:6px 22px 20px;font-size:12.5px;color:var(--text-tertiary)}
.email-browse-note{padding:0 22px 20px;font-size:11.5px;color:var(--text-muted);line-height:1.6}
.email-browse-skel{flex:1;padding:0}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width:768px){
    .email-hero-grid{grid-template-columns:1fr;gap:22px;padding:22px 18px}
    .email-dial{width:180px;height:180px}
    .email-dial-value{font-size:48px}
    .email-verdict{display:none!important}
    .email-checks,.email-factors{padding:14px 16px 18px}
    .email-browse-tools{flex-wrap:wrap}
    .ip-page.centered .email-browse{margin-top:9vh}
}