/* ============================================================
   DMARCmetric — free tools page
   Extends styles.css. Reuses --bg, --accent, .glass, .btn,
   .pill, .mono, .grad, .reveal, .led, etc. No overrides of
   shared tokens — only new tool-specific components.
   ============================================================ */

/* ---- hero ---- */
.tools-hero{
  max-width:var(--maxw);margin:0 auto;text-align:center;
  padding:9rem clamp(1rem,4vw,2.4rem) 2.5rem;
}
.tools-hero .eyebrow{justify-content:center}
.tools-h1{font-size:clamp(2.3rem,6vw,4.4rem);font-weight:600;margin:.3rem auto .2rem}
.tools-sub{color:var(--muted);font-size:1.1rem;max-width:60ch;margin:1.3rem auto 0}
.tools-trust{
  display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;
  margin-top:1.8rem;font-size:.78rem;color:var(--muted);
}
.tools-trust span{display:inline-flex;align-items:center;gap:.5rem}
.tools-trust .led{width:7px;height:7px;border-radius:50%}

/* ---- shell + tabs ---- */
.tools-shell{padding-top:1rem;padding-bottom:3rem}
.tabs{
  display:inline-flex;gap:.35rem;padding:.4rem;margin:0 auto 2.4rem;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  position:relative;left:50%;transform:translateX(-50%);max-width:100%;
  flex-wrap:wrap;justify-content:center;
}
.tab{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:.92rem;color:var(--muted);
  background:transparent;border:1px solid transparent;border-radius:10px;
  padding:.6rem 1.05rem;transition:color .2s,background .25s,border-color .25s;white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab .tab-ic{font-size:1rem}
.tab.is-active{
  color:var(--ink);background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border-color:rgba(47,230,196,.35);box-shadow:0 8px 24px -16px var(--glow), inset 0 1px 0 rgba(255,255,255,.06);
}

.panel-tool{animation:fadeIn .4s cubic-bezier(.2,.7,.2,1)}
.panel-tool.is-hidden{display:none}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.tool-head{text-align:center;max-width:46rem;margin:0 auto 2.2rem}
.tool-head .section-title{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.tool-head .lead{margin-left:auto;margin-right:auto;text-align:center}

/* ---- shared form bits ---- */
.field-label{
  display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;
}
.field-label em{font-style:normal;color:var(--dim);text-transform:none;letter-spacing:0}
.tag-key{
  display:inline-block;color:var(--accent);background:rgba(47,230,196,.1);
  border:1px solid rgba(47,230,196,.25);border-radius:5px;padding:0 .35rem;
  font-size:.66rem;text-transform:none;letter-spacing:0;margin-left:.2rem;
}
.input{
  width:100%;font-family:var(--font-mono);font-size:.95rem;color:var(--ink);
  background:rgba(0,0,0,.32);border:1px solid var(--glass-border);border-radius:11px;
  padding:.8rem .95rem;transition:border-color .2s,box-shadow .2s,background .2s;
}
.input::placeholder{color:var(--dim)}
.input:focus{outline:none;border-color:rgba(47,230,196,.55);box-shadow:0 0 0 3px rgba(47,230,196,.14);background:rgba(0,0,0,.45)}

/* ---- checker form ---- */
.checker{max-width:980px;margin:0 auto;padding:1.4rem}
.field-row{display:flex;gap:.9rem;align-items:flex-end;flex-wrap:wrap}
.field-row.tight{gap:.6rem;align-items:stretch}
.field{display:flex;flex-direction:column;min-width:0}
.field.grow{flex:2 1 240px}
.field-row > .field:not(.grow){flex:1 1 180px}
.grow{flex:1 1 auto}
.check-go{flex:0 0 auto;height:fit-content;padding:.85rem 1.4rem}
.field-hint{margin-top:.9rem;font-size:.74rem;color:var(--dim)}

/* ---- checker results ---- */
.results{max-width:980px;margin:1.6rem auto 0;display:flex;flex-direction:column;gap:1.1rem}
.res-card{padding:1.3rem 1.4rem;animation:fadeIn .45s cubic-bezier(.2,.7,.2,1) both}
.res-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.res-title{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.res-title .res-ic{font-size:1.05rem}
.res-raw{
  display:block;margin-top:1rem;font-family:var(--font-mono);font-size:.78rem;color:var(--muted);
  background:rgba(0,0,0,.38);border:1px solid var(--glass-border);border-radius:10px;
  padding:.75rem .85rem;word-break:break-all;line-height:1.6;
}
.res-raw.missing{color:var(--dim);font-style:italic}

/* pill states reuse design tokens */
.pill-bad{color:var(--bad);background:rgba(255,107,94,.12);border:1px solid rgba(255,107,94,.3)}
.pill-info{color:var(--accent-2);background:rgba(110,168,255,.12);border:1px solid rgba(110,168,255,.3)}

/* parsed tag explanations */
.tags{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-top:1.05rem}
.tags li{
  display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--muted);
  padding:.6rem .75rem;border-radius:10px;background:rgba(255,255,255,.025);
  border:1px solid transparent;
}
.tags li .t-k{
  font-family:var(--font-mono);font-size:.8rem;color:var(--ink);flex:0 0 auto;min-width:54px;
}
.tags li .t-k b{color:var(--accent)}
/* .t-k also labels the verdict-card rows (From/SPF/DKIM — always short, fixed
   strings) and the hop index (always 1-3 digits) — both rely on .t-k's
   flex:0 0 auto + min-width:54px to stay a tidy, aligned key column, so that
   base rule must not change. The headers-table row is different: this cell
   holds the raw, attacker-controlled header NAME straight out of the paste.
   RFC 5322 puts no length limit on a field name, and it can be one unbroken
   run with no space or hyphen to break at — flex:0 0 auto's "never shrink
   below content width" is exactly what let a 121-char name push the page
   611px wider than the viewport. Scoped to just this cell (not all of .t-k)
   so the other two usages keep their alignment untouched. */
.tags li .t-hname{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.tags li .t-x{flex:1 1 auto;line-height:1.5}
/* The hop-duration cell ("0s", "45s"): short, fixed-format, must never wrap.
   NOT .t-x — two flex:1 1 auto siblings on one row (the long Received value AND
   the short duration) squeeze together, and the short one can be pushed under a
   single character's width, wrapping "45s" onto three stacked lines under the
   overflow-wrap:anywhere guard meant for the OTHER cell. flex:0 0 auto sizes it
   to its own content and nowrap forbids any wrap regardless of pressure. */
.tags li .t-dur{flex:0 0 auto;white-space:nowrap}
.tags li.flag-warn{background:rgba(255,194,75,.07);border-color:rgba(255,194,75,.22)}
.tags li.flag-bad{background:rgba(255,107,94,.07);border-color:rgba(255,107,94,.22)}
.tags li .t-badge{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.12rem .4rem;border-radius:5px;flex:0 0 auto;align-self:center;
}
.tags li.flag-warn .t-badge{color:var(--warn);background:rgba(255,194,75,.14)}
.tags li.flag-bad .t-badge{color:var(--bad);background:rgba(255,107,94,.14)}

.res-note{
  margin-top:1rem;font-size:.86rem;line-height:1.55;color:var(--muted);
  padding-left:1.1rem;border-left:2px solid rgba(47,230,196,.4);
}
.res-note.warn{border-color:var(--warn)}
.res-note.bad{border-color:var(--bad)}
.res-note strong{color:var(--ink)}
/* Inline prose links. Neither stylesheet these pages load carries an unscoped a{} colour, so a
   bare <a> here falls through to the UA's #0000EE / #551A8B on a near-black page — unreadable.
   Every other link on the page is inside a component that styles it; these are not. */
.res-note a,.faq p a,.faq li a,.tools-sub a,.tool-intro a{color:var(--accent)}
.res-note a:hover,.faq p a:hover,.faq li a:hover,.tools-sub a:hover,.tool-intro a:hover{opacity:.78}

.res-loading{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.92rem;padding:.4rem 0}
.spinner{
  width:16px;height:16px;border-radius:50%;border:2px solid rgba(47,230,196,.25);
  border-top-color:var(--accent);animation:spin .7s linear infinite;flex:0 0 auto;
}
@keyframes spin{to{transform:rotate(360deg)}}
.res-error{
  padding:1.1rem 1.3rem;color:var(--muted);font-size:.9rem;
  border-color:rgba(255,107,94,.3);
}
.res-error strong{color:var(--bad)}

/* ---- generators (shared) ---- */
.gen-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.4rem;align-items:start;max-width:1060px;margin:0 auto}
.gen-form{padding:1.6rem;display:flex;flex-direction:column;gap:1.5rem}
.gen-field{display:flex;flex-direction:column}
.gen-two{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.gen-hint{margin-top:.55rem;font-size:.82rem;color:var(--dim);line-height:1.5}
.gen-hint strong{color:var(--muted)}

/* segmented control */
.seg{display:inline-flex;flex-wrap:wrap;gap:.3rem;padding:.3rem;background:rgba(0,0,0,.3);border:1px solid var(--glass-border);border-radius:11px}
.seg-btn{
  cursor:pointer;font-family:var(--font-mono);font-size:.8rem;color:var(--muted);
  background:transparent;border:1px solid transparent;border-radius:8px;padding:.45rem .8rem;
  transition:color .2s,background .2s,border-color .2s;
}
.seg-btn:hover{color:var(--ink)}
.seg-btn.is-on{color:#04130f;background:var(--grad);font-weight:700;box-shadow:0 4px 14px -6px var(--glow)}

/* range */
.range-row{display:flex;align-items:center;gap:1rem}
.range{
  flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));outline:none;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--ink);border:3px solid var(--accent);cursor:pointer;box-shadow:0 0 12px var(--glow);
}
.range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--accent);cursor:pointer}
.range-out{font-size:.95rem;color:var(--accent);min-width:48px;text-align:right}

/* chips + add buttons */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:.85rem;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:999px;
  padding:.42rem .9rem;transition:color .2s,background .2s,border-color .2s;
}
.chip:hover{color:var(--ink);border-color:rgba(47,230,196,.4)}
.chip.is-on{color:var(--accent);background:rgba(47,230,196,.1);border-color:rgba(47,230,196,.45)}
.add-btn{flex:0 0 auto;padding:.6rem 1.1rem}

/* mechanism list */
.mech-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.mech-list:empty{display:none}
.mech-list li{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-family:var(--font-mono);font-size:.84rem;color:var(--ink);
  background:rgba(255,255,255,.03);border:1px solid var(--glass-border);
  border-radius:9px;padding:.5rem .75rem;animation:fadeIn .25s both;
}
.mech-list .mech-x{
  cursor:pointer;color:var(--dim);background:none;border:none;font-size:1.05rem;line-height:1;
  padding:.1rem .35rem;border-radius:6px;transition:color .2s,background .2s;flex:0 0 auto;
}
.mech-list .mech-x:hover{color:var(--bad);background:rgba(255,107,94,.12)}
.mech-empty{margin-top:0}
.mech-empty.is-hidden{display:none}

/* ---- generator output side ---- */
.gen-side{display:flex;flex-direction:column;gap:1.1rem;position:sticky;top:5.5rem}
.gen-output{padding:1.3rem}
.gen-out-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem;flex-wrap:wrap}
.gen-out-head .mono{font-size:.72rem}
.copy-btn{padding:.45rem .9rem;font-size:.82rem}
.copy-btn.copied{color:var(--accent);border-color:rgba(47,230,196,.45)}
.record-box{
  display:block;font-size:.86rem;line-height:1.65;color:var(--ink);word-break:break-all;
  background:rgba(0,0,0,.4);border:1px solid var(--glass-border);border-radius:11px;
  padding:.95rem 1rem;min-height:3.2rem;
}
.record-box .r-tag{color:var(--accent)}
.record-box .r-warn{color:var(--warn)}

/* spf lookup meter */
.lookup-meter{margin-top:.9rem;font-family:var(--font-mono);font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.lookup-meter .lm-bar{flex:1 1 120px;height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;min-width:90px}
.lookup-meter .lm-fill{height:100%;border-radius:999px;background:var(--accent);transition:width .3s,background .3s}
.lookup-meter.warn .lm-fill{background:var(--warn)}
.lookup-meter.bad .lm-fill{background:var(--bad)}
.lookup-meter.warn .lm-count{color:var(--warn)}
.lookup-meter.bad .lm-count{color:var(--bad)}

/* generator guide card */
.gen-guide{padding:1.3rem 1.4rem}
.guide-h{font-family:var(--font-display);font-size:1.05rem;font-weight:600;margin-bottom:.8rem}
.guide-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.guide-list li{position:relative;padding-left:1.4rem;color:var(--muted);font-size:.88rem;line-height:1.5}
.guide-list li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}

/* ---- FAQ ---- */
.tools-faq{padding-top:2rem}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.faq{padding:1.5rem 1.4rem;transition:transform .25s,border-color .25s}
.faq:hover{transform:translateY(-4px);border-color:rgba(47,230,196,.3)}
.faq h3{font-size:1.1rem;margin-bottom:.55rem}
.faq p{color:var(--muted);font-size:.92rem;line-height:1.55}

/* ---- hub card grid ---- */
.hub-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2.4rem) 3rem;
}
.hub-card{
  display:flex;align-items:center;gap:1rem;padding:1.4rem 1.3rem;
  text-decoration:none;color:inherit;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.hub-card:hover{
  transform:translateY(-4px);border-color:rgba(47,230,196,.35);
  box-shadow:0 12px 36px -18px var(--glow);
}
.hub-ic{font-size:1.7rem;flex:0 0 auto}
.hub-body{flex:1 1 auto;min-width:0}
.hub-name{font-family:var(--font-display);font-size:1.05rem;font-weight:600;margin-bottom:.28rem}
.hub-desc{color:var(--muted);font-size:.84rem;line-height:1.45;margin:0}
.hub-arrow{
  color:var(--accent);font-size:1.1rem;flex:0 0 auto;
  opacity:.6;transition:opacity .2s,transform .2s;
}
.hub-card:hover .hub-arrow{opacity:1;transform:translateX(3px)}

/* ---- tool-page breadcrumbs ---- */
.crumbs{
  max-width:var(--maxw);margin:0 auto;padding:5.5rem clamp(1rem,4vw,2.4rem) 0;
  font-size:.78rem;color:var(--dim);
}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
/* On tool pages the breadcrumb (padding-top clears the fixed nav) precedes the
   hero, so the hero drops its own big top padding. The hub (tools.html) has no
   .crumbs, so its standalone .tools-hero keeps the 9rem nav clearance. */
.crumbs + .tools-hero{padding-top:2.5rem}

/* ---- tool-page CTA aside ---- */
.tool-cta{
  max-width:var(--maxw);margin:2.4rem auto 0;padding:1.6rem 1.8rem;
  display:flex;gap:2rem;align-items:flex-start;flex-wrap:wrap;
}
.tool-cta .cta-body{flex:1 1 280px}
.tool-cta .cta-body h3{font-size:1.12rem;margin-bottom:.5rem}
.tool-cta .cta-body p{color:var(--muted);font-size:.9rem;line-height:1.5;margin-bottom:1rem}
.tool-cta .cta-kb{flex:0 1 200px}
.tool-cta .cta-kb p{margin-bottom:.5rem}
.tool-cta .cta-kb ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.tool-cta .cta-kb ul li a{color:var(--muted);font-size:.88rem;text-decoration:none}
.tool-cta .cta-kb ul li a:hover{color:var(--ink)}

/* ---- sibling tools ---- */
.sibling-tools{
  max-width:var(--maxw);margin:2.4rem auto 0;padding:0 clamp(1rem,4vw,2.4rem) 3rem;
}
.sibling-tools .section-title{font-size:1.2rem;margin-bottom:.9rem}
.sibling-list{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.sibling-list li{font-size:.9rem;color:var(--muted)}
.sibling-list li a{color:var(--ink);text-decoration:none;font-weight:500}
.sibling-list li a:hover{color:var(--accent)}

/* ---- analyzer: dropzone ---- */
/* ---- analyzer: privacy banner ---- */
.privacy-banner{
  max-width:640px;margin:0 auto 1.6rem;padding:1rem 1.4rem;
  text-align:center;font-size:.86rem;line-height:1.55;color:var(--muted);
}
.privacy-banner .led{display:inline-block;vertical-align:middle;margin-right:.45rem}
.privacy-banner strong{color:var(--ink)}

.dropzone{
  max-width:980px;margin:0 auto;padding:2.4rem;text-align:center;
  border:2px dashed var(--glass-border);border-radius:16px;cursor:pointer;
  transition:border-color .25s,background .25s;
}
.dropzone:hover,.dropzone.drag{
  border-color:rgba(47,230,196,.55);background:rgba(47,230,196,.04);
}
.dropzone p{color:var(--muted);font-size:.92rem;margin:.5rem 0 0}

/* ---- analyzer: kpi grid ---- */
.kpi-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;
  max-width:980px;margin:1.6rem auto 0;
}
.kpi{
  padding:1.1rem 1.2rem;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-border);
  display:flex;flex-direction:column;gap:.25rem;
}
.kpi.kpi-bad .kpi-n{color:var(--bad)}
.kpi-n{font-family:var(--font-display);font-size:1.8rem;font-weight:600;line-height:1.1}
.kpi-l{color:var(--muted);font-size:.8rem}

/* ---- analyzer: pass/fail bar ---- */
.pf-bar{
  display:flex;height:8px;border-radius:999px;overflow:hidden;
  max-width:980px;margin:1rem auto 0;background:rgba(255,107,94,.25);
}
.pf-ok{background:var(--accent);border-radius:999px 0 0 999px;transition:width .4s}
.pf-bad{background:var(--bad);border-radius:0 999px 999px 0;transition:width .4s}

/* ---- analyzer: source table ---- */
.src-table{
  width:100%;border-collapse:collapse;font-size:.86rem;
  max-width:980px;margin:1.4rem auto 0;
}
.src-table th{
  padding:.55rem .7rem;text-align:left;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.src-table th.num{text-align:right}
.src-table td{padding:.72rem .7rem;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.src-table tbody tr{transition:background .18s}
.src-table tbody tr:hover{background:rgba(255,255,255,.025)}
.src-table tbody tr:last-child td{border-bottom:none}

/* ---- analyzer: verdict pill ---- */
.verdict-pill{
  display:inline-block;padding:.18rem .55rem;border-radius:6px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.verdict-pill.tone-ok{color:var(--accent);background:rgba(47,230,196,.12);border:1px solid rgba(47,230,196,.3)}
.verdict-pill.tone-warn{color:var(--warn);background:rgba(255,194,75,.12);border:1px solid rgba(255,194,75,.3)}
.verdict-pill.tone-bad{color:var(--bad);background:rgba(255,107,94,.12);border:1px solid rgba(255,107,94,.3)}

/* ---- responsive ---- */
@media(max-width:900px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .gen-grid{grid-template-columns:1fr}
  .gen-side{position:static}
  .faq-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .tool-cta{flex-direction:column;gap:1.2rem}
}
@media(max-width:680px){
  .hub-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .field-row{flex-direction:column;align-items:stretch}
  .check-go{width:100%}
  .gen-two{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .nav-cta .btn-ghost{display:none}
  .tabs{gap:.2rem;padding:.3rem}
  .tab{padding:.55rem .7rem;font-size:.82rem}
}

/* Grid items refuse to shrink below their content's min-content width, so a long
   unbroken answer pushed the card ~7px past a 360px viewport (measured). */
.faq-grid > *{min-width:0}

/* --- Email header analyzer (SEO Batch 5) ------------------------------ */

/* The tool's primary input. No `textarea` rule existed anywhere in the codebase
   before this page, so on a permanently-dark surface it rendered as the light
   browser default. */
.tools-shell textarea{
  width:100%;box-sizing:border-box;margin-bottom:1rem;padding:.9rem 1rem;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;
  color:var(--ink);font-family:var(--font-mono);font-size:.84rem;line-height:1.55;
  resize:vertical;min-height:12rem;
}
.tools-shell textarea:focus{outline:none;border-color:var(--accent)}
.tools-shell textarea::placeholder{color:var(--dim)}

/* styles.css styles `summary` only under `.faq-item`, so a `.res-card` <details>
   would render the raw UA triangle with no padding. Scoped with `>` so it cannot
   leak into the FAQ blocks further down the same page. */
.res-card > summary{
  cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:1rem;
  color:var(--ink);list-style:none;display:flex;align-items:center;gap:.6rem;
}
.res-card > summary::-webkit-details-marker{display:none}
.res-card > summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1;margin-left:auto;transition:transform .2s}
.res-card[open] > summary::after{transform:rotate(45deg)}
.res-card > summary + *{margin-top:1rem}

/* Why the verdict came out the way it did — one line per reason. */
/* overflow-wrap:anywhere: these sentences are generated by header-verdict.js
   and interpolate domains taken straight from the pasted header — attacker-
   controlled and, like the header name above, unbounded and possibly a single
   unbroken run. Without this, a long domain in a reason sentence overflows the
   card and widens the whole page (measured: a 124-char domain forced
   documentElement.scrollWidth to 860px against a 390px viewport). */
.res-reasons{margin:1rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.88rem;line-height:1.6;overflow-wrap:anywhere}
.res-reasons li{margin-top:.4rem}

/* Received lines and header values are long and unbreakable. Without this they
   force the page wider than the viewport — the exact failure the KB tables hit
   on 2026-08-05, where a grid/flex child at its min-content width won. */
.res-card .tags .t-x{overflow-wrap:anywhere;min-width:0}

/* Visible to screen readers only. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* BIMI logo preview — loaded only on explicit click (privacy: fetching it
   contacts the checked domain from the visitor's browser). Bounded so a large
   or oddly-shaped SVG cannot blow out the card. */
.bimi-logo{display:block;max-width:128px;max-height:128px;margin-top:.75rem;
  border-radius:12px;background:var(--glass);padding:.5rem}

/* DKIM generator — record, PEM and config blocks. Long unbreakable base64 must
   wrap inside the card: a 410-char record on a 390px viewport is exactly the
   overflow class that widened the KB tables on 2026-08-05. */
.rec-value{margin:.35rem 0 .6rem;padding:.7rem .85rem;border-radius:12px;background:var(--glass);
  font-size:.82rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;max-height:22rem;overflow:auto}
.rec-label{margin:.9rem 0 0;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.rec-split{margin:.6rem 0 0;padding:.7rem .85rem;border-radius:12px;background:var(--glass);
  font-size:.8rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.rec-split.is-hidden{display:none}