/* Email Record Checker - styles scoped to #erc so they never touch the rest of the site.
   Colours come from the Yelland Digital tokens in /styles.css. */
#erc{
  --bg:var(--paper);--card:#fff;--text:var(--charcoal);--muted:#5E5C45;--line:rgba(51,50,31,.18);
  --accent:var(--reed-dark);--accent-text:var(--paper);--code-bg:var(--reed-light);
  --ok:#0f6a3b;--ok-bg:#e1f2e7;--warn:#7a4e00;--warn-bg:#fbefcf;--bad:#9c1f19;--bad-bg:#fbe5e1;--info:#2a4686;--info-bg:#e5ecfb;
  color:var(--text);
}
#erc *{box-sizing:border-box}
#erc h2{font-size:1.3rem;margin:0 0 6px}
#erc h3{font-size:1.08rem;margin:0}
#erc p{margin:.5em 0}
#erc .tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:10px}
#erc .tab{background:none;border:1px solid transparent;color:var(--muted);padding:9px 14px;border-radius:8px;cursor:pointer;font:inherit;font-size:.95rem;font-weight:600}
#erc .tab:hover{color:var(--text)}
#erc .tab[aria-selected=true]{background:var(--card);border-color:var(--line);color:var(--accent)}
#erc .panel[hidden]{display:none}
#erc .erc-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:14px}
#erc .card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px;flex-wrap:wrap}
#erc label{display:block;font-weight:600;font-size:.95rem;margin:12px 0 4px}
#erc input[type=text],#erc input[type=number],#erc select,#erc textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
#erc textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;min-height:110px;resize:vertical}
#erc input:focus,#erc select:focus,#erc textarea:focus,#erc button:focus-visible,#erc summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#erc .row{display:flex;gap:10px;flex-wrap:wrap}
#erc .row>*{flex:1 1 200px}
#erc .check{display:flex;align-items:center;gap:9px;font-weight:400;margin:7px 0;font-size:1rem}
#erc .check input{width:auto;transform:scale(1.15)}
#erc .checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 14px}
#erc button.erc-btn{background:var(--accent);color:var(--accent-text);border:0;border-radius:8px;padding:11px 20px;font:inherit;font-weight:700;cursor:pointer}
#erc button.erc-btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line);padding:7px 14px;font-size:.88rem}
#erc button.erc-btn:disabled{opacity:.6;cursor:wait}
#erc .small{font-size:.9rem;color:var(--muted)}
#erc pre,#erc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#erc pre.out{background:var(--code-bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0;white-space:pre-wrap;word-break:break-all;font-size:.86rem;flex:1;min-width:0}
#erc code{background:var(--code-bg);padding:1px 6px;border-radius:4px;font-size:.88em}
#erc .badge{font-size:.8rem;font-weight:700;padding:4px 11px;border-radius:99px;white-space:nowrap}
#erc .badge.pass{background:var(--ok-bg);color:var(--ok)}
#erc .badge.warn{background:var(--warn-bg);color:var(--warn)}
#erc .badge.fail,#erc .badge.missing{background:var(--bad-bg);color:var(--bad)}
#erc .badge.none{background:var(--info-bg);color:var(--info)}
#erc ul.findings{list-style:none;padding:0;margin:12px 0 0}
#erc ul.findings li{display:flex;gap:10px;padding:10px 12px;border-radius:8px;margin-bottom:7px;font-size:.98rem}
#erc ul.findings li.ok{background:var(--ok-bg)}
#erc ul.findings li.warn{background:var(--warn-bg)}
#erc ul.findings li.bad{background:var(--bad-bg)}
#erc ul.findings li.info{background:var(--info-bg)}
#erc .ico{font-weight:800;width:1.1em;text-align:center;flex:none}
#erc li.ok .ico{color:var(--ok)}
#erc li.warn .ico{color:var(--warn)}
#erc li.bad .ico{color:var(--bad)}
#erc li.info .ico{color:var(--info)}
#erc .fixline{display:block;margin-top:3px;font-size:.93rem}
#erc table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.92rem}
#erc th,#erc td{text-align:left;vertical-align:top;padding:7px 8px;border-top:1px solid var(--line)}
#erc th{width:36%;font-weight:600}
#erc details{margin-top:12px}
#erc summary{cursor:pointer;color:var(--accent);font-weight:600}
#erc details>*:not(summary){margin-top:8px}
#erc .what{color:var(--muted);font-size:.95rem;margin:2px 0 0}
#erc [hidden]{display:none!important}
#erc .term{border:1px solid var(--line);border-radius:10px;margin:8px 0;padding:0 14px;background:var(--bg)}
#erc .term summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:11px 0;color:var(--text);font-weight:400;list-style:none;cursor:pointer}
#erc .term summary::-webkit-details-marker{display:none}
#erc .term summary::before{content:'+';color:var(--accent);font-weight:800;width:1em;flex:none}
#erc .term[open] summary::before{content:'\2013'}
#erc .term summary code,#erc .term summary b{font-weight:700}
#erc .term .gl{color:var(--muted);font-size:.95rem;flex:1 1 220px}
#erc .term p{margin:0 0 12px}
#erc .term .ex{background:var(--code-bg);border-radius:8px;padding:8px 10px;font-size:.93rem}
#erc .pill{font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap}
#erc .pill.good{background:var(--ok-bg);color:var(--ok)}
#erc .pill.avoid{background:var(--bad-bg);color:var(--bad)}
#erc .pill.adv{background:var(--info-bg);color:var(--info)}
#erc .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#erc .chip{background:var(--bg);border:1px solid var(--line);color:var(--accent);border-radius:99px;padding:6px 14px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
#erc .chip:hover{border-color:var(--accent)}
#erc .lgroup h2{margin-bottom:2px}
#erc ul.svc{margin:4px 0 0;padding-left:22px}
#erc ul.svc li{margin:3px 0}
#erc .tagu{background:var(--warn-bg);color:var(--warn);font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
#erc .nick{font-weight:400;color:var(--muted);font-size:.92rem}
#erc .banner{border-radius:12px;padding:20px;margin-bottom:14px}
#erc .banner h2{margin:0 0 4px;font-size:1.35rem}
#erc .banner.ok{background:var(--ok-bg);color:var(--ok)}
#erc .banner.warn{background:var(--warn-bg);color:var(--warn)}
#erc .banner.bad{background:var(--bad-bg);color:var(--bad)}
#erc .banner p{margin:0;color:var(--text)}
#erc ol.todo{margin:8px 0 0;padding-left:22px}
#erc ol.todo li{margin:6px 0}
#erc a.link,#erc a.link:visited{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline}
#erc .erc-step{display:flex;align-items:center;gap:10px;font-weight:700;margin:20px 0 6px;font-size:1.04rem}
#erc .erc-step:first-of-type{margin-top:8px}
#erc .num{background:var(--accent);color:var(--accent-text);width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;flex:none}
#erc .opt{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:8px 0;cursor:pointer;font-weight:400}
#erc .opt:hover{border-color:var(--accent)}
#erc .opt input{margin-top:6px;width:auto;transform:scale(1.15)}
#erc .opt b{font-weight:700}
#erc .opt small{color:var(--muted);font-size:.9rem}
#erc .dns{border:1px solid var(--line);border-radius:10px;padding:6px 14px;margin:10px 0;background:var(--bg)}
#erc .dnsrow{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
#erc .dnsrow:first-child{border-top:0}
#erc .dnsrow .k{width:64px;flex:none;font-weight:700;font-size:.9rem}
#erc .dnsrow code{flex:1;word-break:break-all;background:var(--code-bg);padding:7px 10px;border-radius:6px}
#erc .warnbox{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:11px 13px;font-size:.93rem;margin-top:10px}
#erc .gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:6px}
#erc .gloss .erc-card{margin:0;padding:16px}
#erc .gloss h3{margin-bottom:4px}
#erc .gloss p{font-size:.93rem;color:var(--muted);margin:0}
#erc .inline{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#erc .inline input{flex:1 1 180px}
#erc .spinner{color:var(--muted)}
#erc ol.howto{padding-left:22px;margin:6px 0}
#erc ol.howto li{margin:6px 0}

/* ---- site look and feel ---- */
#erc h2,#erc h3{color:var(--ink)}
#erc .erc-card{box-shadow:0 2px 6px rgba(0,0,0,.02);border-radius:var(--radius)}
#erc .erc-card h2{font-size:1.3rem}
#erc .erc-card h3{font-size:1.08rem;margin-bottom:0}
#erc .erc-card p{font-size:inherit;margin:.5em 0}
#erc .small,#erc .erc-card p.small{font-size:.9rem;color:var(--muted)}
#erc .what{margin:2px 0 0}
#erc .gloss p{font-size:.93rem;margin:0}
#erc .tab{font-family:inherit;border-radius:var(--radius)}
#erc .tab:hover{color:var(--ink)}
#erc button.erc-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);padding:12px 24px;font-size:.95rem;font-family:inherit;font-weight:600;transition:background .2s ease}
#erc button.erc-btn:hover:not(:disabled){background:var(--ink)}
#erc button.erc-btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:7px 14px;font-size:.88rem}
#erc button.erc-btn.ghost:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}
#erc input[type=text]{background:#fff}
#erc .chip,#erc .term,#erc .dns,#erc .opt,#erc .warnbox,#erc pre.out,#erc .term .ex,#erc .dnsrow code,#erc ul.findings li,#erc input[type=text],#erc select,#erc textarea{border-radius:var(--radius)}
#erc .banner{border-radius:var(--radius)}
#erc .erc-note{margin-top:30px;color:var(--muted);font-size:.9rem}
#erc a.link,#erc a.link:visited{color:var(--accent)}
#erc summary{color:var(--accent)}
#erc .term summary{color:var(--text)}
#erc textarea{min-height:110px}
@media (max-width:640px){
  #erc .tabs{gap:4px}
  #erc .tab{padding:8px 10px;font-size:.9rem}
  #erc .erc-card{padding:16px}
  #erc .dnsrow{flex-wrap:wrap}
  #erc .dnsrow .k{width:100%}
}
#erc input[type=radio],#erc input[type=checkbox]{accent-color:var(--reed-dark)}