/* Ported from cleardmarc-design/redesign/canvas/project/site-round3.css by
   scripts/port-design-css.py. Do not edit above the "site" marker: change the design file
   and run the script again. Site-only rules go below the marker. */

/* Approved by the user on Oct 18, 2026 (round 3, DECISIONS 76). Boards: the round 3 canvas, https://claude.ai/artifact/Rp2ztWD3Di5P77QZ2TGSN9.
   Component rules only; board scaffolding stays in canvas/_r3/project/r3-site.css. */
/* Round 3, website (Oct 18, 2026): the home "one portal" story (sw-ps-) and the Tools "Check a domain" report (sw-dc-).
   Loads after site.css and site-tools.css. Reads only cd.css tokens; every selector is scoped to .cd.
   Phone rules use [data-device="mobile"], as site.css does (the site build turns them into its phone media query).
   Component rules first; board-only scaffolding at the end, marked. */
/* =====================================================================================================
   HOME: the story section (replaces the tabbed console in #dashboard)
   ===================================================================================================== */
.cd .sw-ps-head{max-width:760px;margin:0 auto;text-align:center}
.cd .sw-ps-head .sw-lead{max-width:600px;margin-left:auto;margin-right:auto;text-wrap:balance}
.cd .sw-ps-leg,.cd .sw-ps-src,.cd .sw-ps-keys,.cd .sw-dc ul{list-style:none;margin:0;padding:0}
.cd .sw-ps-blk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center;margin-top:112px}
.cd .sw-ps-blk.is-first{margin-top:80px}
.cd .sw-ps-blk.is-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.cd .sw-ps-blk.is-flip .sw-ps-copy{order:2}
.cd .sw-ps-copy{max-width:440px}
.cd .sw-ps-h3{font-size:30px;font-weight:800;letter-spacing:-0.02em;line-height:1.15;color:#fff;margin-top:12px;text-wrap:balance}
.cd .sw-ps-p{font-size:16.5px;line-height:1.6;color:var(--side-text);margin-top:14px;text-wrap:pretty}
.cd .sw-ps-copy .link{margin-top:18px;font-size:14px;color:color-mix(in srgb,var(--primary) 40%,#fff)}
/* the mockup frame: a light app card on the dark section, "Example" top right */
.cd .sw-ps-mock{background:var(--surface);color:var(--text);border-radius:14px;padding:22px 24px 24px;box-shadow:0 36px 72px -28px oklch(0 0 0 / 0.6);min-width:0}
.cd .sw-ps-mhd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.cd .sw-ps-mt{font-size:15px;font-weight:700;letter-spacing:-0.005em}
.cd .sw-ps-ms{font-size:12.5px;color:var(--text-3);margin-top:2px}
.cd .sw-ps-ex{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);padding:3px 8px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-sunken)}
.cd .sw-ps-sub{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.cd .sw-ps-cap{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
/* 1. the five KPI tiles and the DMARC results donut */
.cd .sw-ps-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cd .sw-ps-kpi{border:1px solid var(--border);border-top:3px solid var(--k);border-radius:10px;padding:12px 6px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.cd .sw-ps-kpi .k-ico{width:28px;height:28px;border-radius:8px;margin-bottom:4px}
.cd .sw-ps-kpi .k-ico .i{width:15px;height:15px}
.cd .sw-ps-kpi span{font-size:11.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.cd .sw-ps-kpi b{font-size:21px;font-weight:800;letter-spacing:-0.02em;line-height:1.1}
.cd .sw-ps-kpi b small{font-size:12px;font-weight:700;color:var(--text-3);margin-left:1px}
.cd .sw-ps-kpi em{font-style:normal;font-size:11px;color:var(--text-3);white-space:nowrap}
.cd .sw-ps-k-all{--k:var(--primary)}
.cd .sw-ps-k-ok{--k:var(--ok)}
.cd .sw-ps-k-fwd{--k:var(--fwd)}
.cd .sw-ps-k-warn{--k:var(--warn)}
.cd .sw-ps-k-bad{--k:var(--bad)}
.cd .ico-fwd{background:color-mix(in srgb,var(--fwd) 14%,var(--surface));color:var(--fwd-ink)}
.cd .sw-ps-donut{display:grid;grid-template-columns:168px minmax(0,1fr);gap:28px;align-items:center}
.cd .sw-ps-ring{position:relative;width:168px;height:168px}
.cd .sw-ps-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cd .sw-ps-ring circle{fill:none;stroke-width:20}
.cd .sw-ps-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cd .sw-ps-ring-c b{font-size:24px;font-weight:800;letter-spacing:-0.02em}
.cd .sw-ps-ring-c span{font-size:12px;color:var(--text-3)}
.cd .s-ok{stroke:var(--ok)}
.cd .s-fwd{stroke:var(--fwd)}
.cd .s-warn{stroke:var(--warn)}
.cd .s-bad{stroke:var(--bad)}
.cd .sw-ps-leg{display:flex;flex-direction:column;gap:6px}
.cd .sw-ps-leg li{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:12px;align-items:center;padding:7px 10px;border-left:3px solid var(--k);border-radius:0 6px 6px 0}
.cd .sw-ps-leg li:first-child{background:var(--ok-tint)}
.cd .sw-ps-leg b{display:block;font-size:13.5px;font-weight:700}
.cd .sw-ps-leg small{display:block;font-size:11.5px;color:var(--text-3)}
.cd .sw-ps-leg i{font-style:normal;font-size:13.5px;font-weight:700}
.cd .sw-ps-leg u{text-decoration:none;font-size:12.5px;color:var(--text-2);text-align:right}
/* 2. Mail by day: stacked bars, then the smaller results on a larger scale */
.cd .sw-ps-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--text-2);margin-bottom:12px}
.cd .sw-ps-key span{display:inline-flex;align-items:center;gap:6px}
.cd .sw-ps-key span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--k)}
.cd .sw-ps-chart{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px}
.cd .sw-ps-y{display:flex;flex-direction:column;justify-content:space-between;font-size:10.5px;color:var(--text-3);text-align:right;line-height:1;padding-bottom:0}
.cd .sw-ps-plot{position:relative;border-bottom:1px solid var(--border-strong)}
.cd .sw-ps-plot svg{display:block;width:100%;height:100%}
.cd .sw-ps-plot.is-main{height:150px}
.cd .sw-ps-plot.is-small{height:58px}
.cd .sw-ps-bars .f-ok{fill:var(--ok)}
.cd .sw-ps-bars .f-fwd{fill:var(--fwd)}
.cd .sw-ps-bars .f-warn{fill:var(--warn)}
.cd .sw-ps-bars .f-bad{fill:var(--bad)}
.cd .sw-ps-bars .f-wk{fill:var(--surface-sunken)}
.cd .sw-ps-bars .f-grid{fill:var(--border)}
.cd .sw-ps-x{position:relative;height:14px;font-size:10.5px;color:var(--text-3);margin:6px 0 0 38px}
.cd .sw-ps-x span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.cd .sw-ps-spike{position:absolute;top:-16px;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:var(--bad-ink);white-space:nowrap}
.cd .sw-ps-chart.is-small{margin-top:8px}
/* 3. top sending sources */
.cd .sw-ps-src{display:flex;flex-direction:column}
.cd .sw-ps-src li{display:grid;grid-template-columns:34px minmax(0,1fr) 64px 150px;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--border)}
.cd .sw-ps-src li.is-hd{border-top:0;padding:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.cd .sw-ps-src li.is-hd span:first-child{grid-column:1 / 3}
.cd .sw-ps-src li.is-hd span:nth-child(2){text-align:right}
.cd .sw-ps-logo{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff}
.cd .sw-ps-logo .i{width:16px;height:16px}
.cd .sw-ps-logo.l-g{background:#3f7ee8}
.cd .sw-ps-logo.l-m{background:#f6d64a;color:#2b2a1e}
.cd .sw-ps-logo.l-s{background:#1d88d6}
.cd .sw-ps-logo.l-z{background:var(--side-bg)}
.cd .sw-ps-logo.l-x{background:var(--bad-tint);color:var(--bad-ink)}
.cd .sw-ps-nm b{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;white-space:nowrap}
.cd .sw-ps-nm b.is-mono{font-family:var(--font-mono);font-size:12.5px}
.cd .sw-ps-nm small{display:block;font-size:11.5px;color:var(--text-3);margin-top:1px}
.cd .sw-ps-nm .pill{height:19px;padding:0 7px;font-size:10.5px;font-family:var(--font-sans)}
.cd .sw-ps-num{font-size:13.5px;font-weight:700;text-align:right}
.cd .sw-ps-pass{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:8px;align-items:center}
.cd .sw-ps-pass i{display:block;height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.cd .sw-ps-pass i::before{content:"";display:block;height:100%;width:var(--v);background:var(--k);border-radius:3px}
.cd .sw-ps-pass span{font-size:12.5px;font-weight:700;text-align:right}
.cd .sw-ps-pass.is-ok{--k:var(--ok)}
.cd .sw-ps-pass.is-ok span{color:var(--ok-ink)}
.cd .sw-ps-pass.is-warn{--k:var(--warn)}
.cd .sw-ps-pass.is-warn span{color:var(--warn-ink)}
.cd .sw-ps-pass.is-bad{--k:var(--bad)}
.cd .sw-ps-pass.is-bad span{color:var(--bad-ink)}
/* 4. ClearSPF: the lookup meter, before and after */
.cd .sw-ps-spf{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:8px;align-items:stretch}
.cd .sw-ps-meter{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--surface-sunken);min-width:0}
.cd .sw-ps-meter.is-after{background:var(--surface);border:2px solid var(--ok)}
.cd .sw-ps-meter-l{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text-2)}
.cd .sw-ps-meter-l .pill{height:20px;font-size:11px}
.cd .sw-ps-meter-n{display:flex;align-items:baseline;gap:6px;margin:8px 0 10px}
.cd .sw-ps-meter-n b{font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1}
.cd .sw-ps-meter-n span{font-size:14px;font-weight:700;color:var(--text-2)}
.cd .sw-ps-meter.is-before .sw-ps-meter-n b{color:var(--bad-ink)}
.cd .sw-ps-meter.is-after .sw-ps-meter-n b{color:var(--ok-ink)}
.cd .sw-ps-meter p{font-size:12.5px;line-height:1.45;color:var(--text-2);margin-top:10px}
.cd .sw-ps-cells{display:flex;gap:3px;align-items:center}
.cd .sw-ps-cells i{flex:1 1 0;height:12px;border-radius:2px;background:var(--border)}
.cd .sw-ps-cells i.on{background:var(--ok)}
.cd .sw-ps-cells i.is-in{background:var(--warn)}
.cd .sw-ps-cells i.is-over{background:var(--bad)}
.cd .sw-ps-cells b{flex:none;width:2px;height:20px;background:var(--text);border-radius:1px;margin:0 2px}
.cd .sw-ps-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:11px;font-weight:600;line-height:1.3;color:var(--text-2)}
.cd .sw-ps-arrow .k-ico{width:30px;height:30px;border-radius:50%}
.cd .sw-ps-need{display:flex;gap:3px;margin-top:10px}
.cd .sw-ps-need span{flex:var(--n) 1 0;min-width:0;height:28px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;background:var(--primary-tint);color:var(--primary-ink)}
.cd .sw-ps-need span.is-over{background:var(--bad-tint);color:var(--bad-ink)}
.cd .sw-ps-need b{flex:none;width:2px;background:var(--text);border-radius:1px;margin:-4px 1px}
.cd .sw-ps-need-k{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3);margin-top:8px}
/* 5. getting to reject: the policy stepper, then DKIM keys and their age */
.cd .sw-ps-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.cd .sw-ps-step{position:relative;border:1px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cd .sw-ps-step.is-done{background:var(--surface-sunken)}
.cd .sw-ps-step.is-now{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
.cd .sw-ps-step.is-next{border:2px dashed var(--primary);background:var(--primary-tint)}
.cd .sw-ps-step-t{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cd .sw-ps-step-t b{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.cd .sw-ps-step-t b i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;background:var(--border);color:var(--text-2)}
.cd .sw-ps-step.is-done .sw-ps-step-t b i{background:var(--ok);color:#fff}
.cd .sw-ps-step.is-now .sw-ps-step-t b i{background:var(--warn);color:#fff}
.cd .sw-ps-step.is-next .sw-ps-step-t b i{background:var(--primary);color:#fff}
.cd .sw-ps-step-t b i .i{width:12px;height:12px;stroke-width:3}
.cd .sw-ps-step>.pill{position:absolute;top:-11px;right:10px;height:20px;padding:0 8px;font-size:10.5px;box-shadow:0 0 0 3px var(--surface)}
.cd .sw-ps-step .tag{align-self:flex-start;font-size:11px}
.cd .sw-ps-flow{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--text-2)}
.cd .sw-ps-flow .i{width:13px;height:13px}
.cd .sw-ps-flow.is-ok{color:var(--ok-ink)}
.cd .sw-ps-flow.is-warn{color:var(--warn-ink)}
.cd .sw-ps-flow.is-bad{color:var(--bad-ink)}
.cd .sw-ps-ifr{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.cd .sw-ps-ifr-t{font-size:12.5px;font-weight:700}
.cd .sw-ps-ifr-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px}
.cd .sw-ps-ifr-bar i{display:block;background:var(--ok)}
.cd .sw-ps-ifr-bar i+i{background:var(--bad)}
.cd .sw-ps-ifr-k{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--text-2)}
.cd .sw-ps-ifr-k b{color:var(--text)}
.cd .sw-ps-keys{display:flex;flex-direction:column;margin-top:10px}
.cd .sw-ps-keys li{display:grid;grid-template-columns:minmax(0,1fr) 58px 120px 64px;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--border);font-size:12.5px}
.cd .sw-ps-keys li.is-hd{border-top:0;padding-top:0;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.cd .sw-ps-keys code{font-family:var(--font-mono);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd .sw-ps-keys .tag{justify-self:start;font-size:10.5px}
.cd .sw-ps-age{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;font-weight:600}
.cd .sw-ps-age i{display:block;height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.cd .sw-ps-age i::before{content:"";display:block;height:100%;width:var(--v);background:var(--chart-gray)}
.cd .sw-ps-keys .pill{height:20px;padding:0 8px;font-size:11px;justify-self:end}
/* phones: copy first, then the mockup; the mockup goes full width */
@media (max-width: 900px){
.cd.cd .sw-ps-blk,.cd.cd .sw-ps-blk.is-flip{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:64px}
.cd.cd .sw-ps-blk.is-first{margin-top:48px}
.cd.cd .sw-ps-blk.is-flip .sw-ps-copy{order:0}
.cd.cd .sw-ps-h3{font-size:24px}
.cd.cd .sw-ps-p{font-size:15.5px}
.cd.cd .sw-ps-mock{padding:16px 14px 18px;border-radius:12px}
.cd.cd .sw-ps-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.cd.cd .sw-ps-kpi:first-child{grid-column:1 / -1}
.cd.cd .sw-ps-donut{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px}
.cd.cd .sw-ps-leg{width:100%}
.cd.cd .sw-ps-src li{grid-template-columns:32px minmax(0,1fr) 92px;gap:10px}
.cd.cd .sw-ps-src li.is-hd span:nth-child(2){display:none}
.cd.cd .sw-ps-src .sw-ps-num{display:none}
.cd.cd .sw-ps-spf{grid-template-columns:minmax(0,1fr)}
.cd.cd .sw-ps-arrow{flex-direction:row;padding:2px 0}
.cd.cd .sw-ps-arrow .k-ico{transform:rotate(90deg)}
.cd.cd .sw-ps-need .nm{display:none}
.cd.cd .sw-ps-steps{grid-template-columns:minmax(0,1fr);gap:16px}
.cd.cd .sw-ps-keys li{grid-template-columns:minmax(0,1fr) 84px 56px}
.cd.cd .sw-ps-keys li>.tag,.cd.cd .sw-ps-keys li.is-hd span:nth-child(2){display:none}
/* =====================================================================================================
   TOOLS: Check a domain (replaces the authentication checker, the SPF surveyor and the DKIM lookup)
   ===================================================================================================== */
}
.cd .sw-dc h3,.cd .sw-dc h4,.cd .sw-dc p,.cd .sw-ps-mock p{margin:0}
.cd .sw-dc{padding:32px;display:flex;flex-direction:column;gap:20px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.cd .sw-dc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cd .sw-dc-h2{font-size:24px;font-weight:800;letter-spacing:-0.02em;line-height:1.25}
.cd .sw-dc-p{font-size:15px;line-height:1.5;color:var(--text-2);margin-top:4px}
.cd .sw-dc-form{display:flex;gap:10px}
.cd .sw-dc-form .input-group{flex:1 1 auto}
.cd .sw-dc-form .input{height:52px;font-size:16px;flex:1 1 auto;min-width:0}
.cd .sw-dc-form .btn{height:52px;padding:0 26px;font-size:15px}
.cd .sw-dc-hint{font-size:13px;color:var(--text-3);margin-top:-10px}
.cd .sw-dc-rep{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--border)}
.cd .sw-dc-rhd{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cd .sw-dc-rhd h3{font-size:19px;font-weight:800;letter-spacing:-0.01em}
.cd .sw-dc-rhd h3 span{font-family:var(--font-mono);font-weight:700}
.cd .sw-dc-rhd small{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.cd .sw-dc-share{display:flex;align-items:center;gap:10px;min-width:0}
.cd .sw-dc-url{font-family:var(--font-mono);font-size:12px;color:var(--text-2);padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-sunken);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cd .sw-dc-prov b{font-weight:700}
.cd .sw-dc-prov .sw-dc-ns{font-family:var(--font-mono);font-size:12px;opacity:.85}
/* the three verdicts, side by side */
.cd .sw-dc-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cd .sw-dc-v{border:1px solid var(--border);border-top:3px solid var(--k);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0;background:var(--surface)}
.cd .sw-dc-v.is-ok{--k:var(--ok)}
.cd .sw-dc-v.is-warn{--k:var(--warn)}
.cd .sw-dc-v.is-bad{--k:var(--bad)}
.cd .sw-dc-v-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cd .sw-dc-v-hd>div{display:flex;align-items:center;gap:10px;min-width:0}
.cd .sw-dc-v-hd b{font-size:17px;font-weight:800;letter-spacing:-0.01em}
.cd .sw-dc-v-hd small{font-size:12.5px;color:var(--text-3)}
.cd .sw-dc-v p{font-size:14px;line-height:1.5;color:var(--text)}
.cd .sw-dc-v code{font-family:var(--font-mono);font-size:12px;color:var(--text-2)}
.cd .sw-dc-v .pill .i{width:13px;height:13px}
/* tabs under the report */
.cd .sw-dc-tabs{margin-top:8px}
.cd .sw-dc-tabs .tab{font-size:15px;padding:0 16px}
.cd .sw-dc-dot{width:8px;height:8px;border-radius:50%;background:var(--k)}
.cd .sw-dc-dot.is-ok{--k:var(--ok)}
.cd .sw-dc-dot.is-warn{--k:var(--warn)}
.cd .sw-dc-dot.is-bad{--k:var(--bad)}
.cd .sw-dc-pane{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.cd .sw-dc-pane.is-even{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.cd .sw-dc-pane.is-half{grid-template-columns:repeat(2,minmax(0,1fr))}
.cd .sw-dc-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.cd .sw-dc-box{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-width:0}
.cd .sw-dc-bhd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.cd .sw-dc-bhd h4{font-size:15.5px;font-weight:700}
.cd .sw-dc-bhd p{font-size:13px;color:var(--text-2);margin-top:2px;line-height:1.45}
.cd .sw-dc-bpad{padding:16px 18px}
.cd .sw-dc-rec{display:flex;align-items:flex-start;gap:10px}
.cd .sw-dc-rec .record{flex:1 1 auto;font-size:12.5px}
/* SPF: the lookup meter and the include tree */
.cd .sw-dc-meter{display:flex;align-items:center;gap:18px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface-sunken)}
.cd .sw-dc-meter-n{flex:none}
.cd .sw-dc-meter-n span{display:block;font-size:12px;font-weight:600;color:var(--text-2)}
.cd .sw-dc-meter-n b{font-size:26px;font-weight:800;letter-spacing:-0.02em}
.cd .sw-dc-meter-n b small{font-size:14px;font-weight:700;color:var(--text-2);margin-left:4px}
.cd .sw-dc-meter.is-warn .sw-dc-meter-n b{color:var(--warn-ink)}
.cd .sw-dc-meter.is-bad .sw-dc-meter-n b{color:var(--bad-ink)}
.cd .sw-dc-meter-r{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.cd .sw-dc-meter-r p{font-size:13px;color:var(--text-2)}
.cd .sw-dc-cells{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.cd .sw-dc-cells i{height:12px;border-radius:2px;background:var(--border)}
.cd .sw-dc-cells.is-warn i.on{background:var(--warn)}
.cd .sw-dc-cells.is-ok i.on{background:var(--ok)}
.cd .sw-dc-cells.is-bad i.on{background:var(--bad)}
.cd .sw-dc-tree{display:flex;flex-direction:column}
.cd .sw-dc-tr{display:grid;grid-template-columns:minmax(0,1fr) 90px 100px 180px;gap:12px;align-items:center;padding:10px 18px;border-top:1px solid var(--border);font-size:13px}
.cd .sw-dc-tr:first-child{border-top:0}
.cd .sw-dc-tr.is-hd{padding-top:10px;padding-bottom:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--surface)}
.cd .sw-dc-tr.is-hd span:not(:first-child){text-align:right}
.cd .sw-dc-tr.is-kid{background:var(--surface-sunken);padding-top:7px;padding-bottom:7px}
.cd .sw-dc-tr.is-kid .sw-dc-host{padding-left:30px}
.cd .sw-dc-tr.is-dup{background:var(--warn-tint);box-shadow:3px 0 0 var(--warn) inset}
.cd .sw-dc-tr.is-tot{background:var(--surface-sunken);font-weight:700}
.cd .sw-dc-host{display:flex;align-items:center;gap:6px;min-width:0;font-family:var(--font-mono);font-size:12.5px}
.cd .sw-dc-host code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cd .sw-dc-host .pill{font-family:var(--font-sans);height:20px;padding:0 8px;font-size:11px;flex:none}
.cd .sw-dc-tw{width:20px;height:20px;display:grid;place-items:center;border:0;background:transparent;border-radius:4px;color:var(--text-2);padding:0;flex:none;cursor:pointer}
.cd .sw-dc-tw .i{width:14px;height:14px}
.cd .sw-dc-tw.is-none{visibility:hidden}
.cd .sw-dc-tr .is-n{text-align:right;font-weight:600}
.cd .sw-dc-tr .is-q{text-align:right;color:var(--text-2)}
.cd .sw-dc-run{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-weight:700;font-size:12.5px}
.cd .sw-dc-run i{width:90px;height:5px;border-radius:3px;background:var(--border);overflow:hidden;flex:none}
.cd .sw-dc-run i::before{content:"";display:block;height:100%;width:var(--v);background:var(--k,var(--ok))}
.cd .sw-dc-run.is-warn{--k:var(--warn);color:var(--warn-ink)}
.cd .sw-dc-run.is-bad{--k:var(--bad);color:var(--bad-ink)}
.cd .sw-dc-all{padding:10px 18px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-2)}
.cd .sw-dc-all code{font-family:var(--font-mono);font-size:12px;color:var(--text)}
.cd .sw-dc-stop{padding:10px 18px;border-top:1px dashed var(--border-strong);font-size:12.5px;color:var(--text-3);font-style:italic}
/* checks and findings */
.cd .sw-dc-checks{display:flex;flex-direction:column}
.cd .sw-dc-ck{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:8px 18px;font-size:13px;line-height:1.45;align-items:start}
.cd .sw-dc-ck .i{width:16px;height:16px;margin-top:1px}
.cd .sw-dc-ck.is-ok .i{color:var(--ok-ink)}
.cd .sw-dc-ck.is-ok{color:var(--text-2)}
.cd .sw-dc-ck.is-warn{background:var(--warn-tint);box-shadow:3px 0 0 var(--warn) inset;padding-top:12px;padding-bottom:12px}
.cd .sw-dc-ck.is-warn .i{color:var(--warn-ink)}
.cd .sw-dc-ck.is-bad{background:var(--bad-tint);box-shadow:3px 0 0 var(--bad) inset}
.cd .sw-dc-ck.is-bad .i{color:var(--bad-ink)}
.cd .sw-dc-ck b{font-weight:700;color:var(--text)}
.cd .sw-dc-ck p{margin-top:3px;color:var(--text-2)}
.cd .sw-dc-ck code{font-family:var(--font-mono);font-size:12px}
.cd .sw-dc-ck-sep{padding:10px 18px 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.cd .sw-dc-finds{display:flex;flex-direction:column;gap:10px}
.cd .sw-dc-find{border:1px solid var(--border);border-left:3px solid var(--k);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.cd .sw-dc-find.is-error{--k:var(--bad)}
.cd .sw-dc-find.is-warning{--k:var(--warn)}
.cd .sw-dc-find.is-info{--k:var(--primary)}
.cd .sw-dc-find-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cd .sw-dc-find-hd .pill{height:20px;padding:0 8px;font-size:11px}
.cd .sw-dc-find-hd .tag{font-size:11px}
.cd .sw-dc-find p{font-size:13.5px;line-height:1.5}
.cd .sw-dc-fix{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start;font-size:13px}
.cd .sw-dc-fix>span{font-weight:700;color:var(--text-2);font-size:12px;padding-top:2px}
.cd .sw-dc-fix code{font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
.cd .sw-dc-fix .record{padding:8px 10px;font-size:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cd .sw-dc-fix .record .btn{flex:none;height:24px;padding:0 8px;font-family:var(--font-sans)}
.cd .sw-dc-rfc{font-size:12.5px}
.cd .sw-dc-rfc .i{width:12px;height:12px}
/* DMARC: tag by tag */
.cd .sw-dc-tags{display:flex;flex-direction:column}
.cd .sw-dc-tg{display:grid;grid-template-columns:62px minmax(0,1.1fr) minmax(0,1.3fr);gap:12px;align-items:center;padding:10px 18px;border-top:1px solid var(--border);font-size:13px}
.cd .sw-dc-tg:first-child{border-top:0}
.cd .sw-dc-tg.is-hd{padding-top:10px;padding-bottom:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.cd .sw-dc-tg .tag{justify-self:start;font-size:12px}
.cd .sw-dc-tg code{font-family:var(--font-mono);font-size:12.5px;overflow-wrap:anywhere}
.cd .sw-dc-tg .is-mean{color:var(--text-2);line-height:1.45}
.cd .sw-dc-tg.is-def{color:var(--text-3)}
.cd .sw-dc-tg.is-def code{color:var(--text-3)}
.cd .sw-dc-tg.is-def .tag{opacity:.7}
.cd .sw-dc-tg .sw-dc-dflt{font-family:var(--font-sans);font-size:11.5px;margin-left:6px;color:var(--text-3)}
.cd .sw-dc-tg.is-warn{background:var(--warn-tint);box-shadow:3px 0 0 var(--warn) inset}
.cd .sw-dc-tg.is-gone code{text-decoration:line-through;color:var(--text-3)}
.cd .sw-dc-tg .pill{height:20px;padding:0 8px;font-size:11px;margin-left:6px;font-family:var(--font-sans)}
.cd .sw-dc-dests{display:flex;flex-direction:column}
.cd .sw-dc-dest{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 18px;border-top:1px solid var(--border);font-size:13px}
.cd .sw-dc-dest:first-child{border-top:0}
.cd .sw-dc-dest code{font-family:var(--font-mono);font-size:12.5px;overflow-wrap:anywhere}
.cd .sw-dc-dest small{display:block;font-size:12px;color:var(--text-3);margin-top:2px}
.cd .sw-dc-dest .pill{height:22px;font-size:11.5px}
/* DKIM: the ten selectors probed, the keys found, check another */
.cd .sw-dc-probe{display:flex;flex-wrap:wrap;gap:6px}
.cd .sw-dc-probe .chip{height:26px;gap:5px;color:var(--text-3)}
.cd .sw-dc-probe .chip .i{width:12px;height:12px}
.cd .sw-dc-probe .chip.is-on{background:var(--ok-tint);border-color:color-mix(in srgb,var(--ok) 40%,var(--border));color:var(--ok-ink);font-weight:700}
.cd .sw-dc-keys{display:flex;flex-direction:column}
.cd .sw-dc-probe-wrap{border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.cd .sw-dc-kr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) 150px minmax(0,1.8fr);gap:14px;align-items:center;padding:12px 18px;border-top:1px solid var(--border);font-size:13px}
.cd .sw-dc-kr.is-hd{border-top:0;padding-top:10px;padding-bottom:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.cd .sw-dc-kr code{font-family:var(--font-mono);font-size:12.5px;overflow-wrap:anywhere}
.cd .sw-dc-kr small{display:block;font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.4}
.cd .sw-dc-kr small code{font-size:11.5px;color:var(--text-2)}
.cd .sw-dc-kr .tag{font-size:11px;margin-right:6px}
.cd .sw-dc-kr .pill{height:22px;font-size:11.5px}
.cd .sw-dc-kr.is-bad{background:var(--bad-tint);box-shadow:3px 0 0 var(--bad) inset}
.cd .sw-dc-another{display:flex;flex-direction:column;gap:10px}
.cd .sw-dc-another .input-group{max-width:520px}
.cd .sw-dc-another .sw-dc-suffix{display:flex;align-items:center;padding:0 12px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);background:var(--surface-sunken);border:1px solid var(--border-control);border-left:0;border-right:0;white-space:nowrap}
.cd .sw-dc-another .input{font-family:var(--font-mono);font-size:13px;max-width:140px;border-top-right-radius:0;border-bottom-right-radius:0}
.cd .sw-dc-another .btn{border-top-left-radius:0;border-bottom-left-radius:0}
.cd .sw-dc-note{font-size:12.5px;color:var(--text-3);line-height:1.5}
.cd .sw-dc-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-radius:var(--radius);background:var(--primary-tint);color:var(--primary-ink);font-size:14px}
.cd .sw-dc-cta b{color:var(--text)}
/* the tools that stay, below the report */
.cd .sw-dc-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;margin-top:24px}
.cd .sw-dc-stack{display:flex;flex-direction:column;gap:20px;min-width:0}
/* phones */
@media (max-width: 900px){
.cd.cd .sw-dc{padding:18px 16px;gap:16px}
.cd.cd .sw-dc-h2{font-size:21px}
.cd.cd .sw-dc-form .input,.cd.cd .sw-dc-form .btn{height:48px}
.cd.cd .sw-dc-form .btn{padding:0 18px}
.cd.cd .sw-dc-share{width:100%}
.cd.cd .sw-dc-url{flex:1 1 auto}
.cd.cd .sw-dc-sum{grid-template-columns:minmax(0,1fr);gap:10px}
.cd.cd .sw-dc-v{padding:14px}
.cd.cd .sw-dc-tabs .tab{padding:0 12px;flex:1 1 0;justify-content:center}
.cd.cd .sw-dc-pane,.cd.cd .sw-dc-pane.is-even,.cd.cd .sw-dc-pane.is-half{grid-template-columns:minmax(0,1fr);gap:16px}
.cd.cd .sw-dc-meter{flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px}
.cd.cd .sw-dc-tr{grid-template-columns:minmax(0,1fr) 34px 64px;gap:8px;padding:10px 12px}
.cd.cd .sw-dc-tr>.is-q{display:none}
.cd.cd .sw-dc-tr.is-hd span:nth-child(3){display:none}
.cd.cd .sw-dc-tr.is-kid .sw-dc-host{padding-left:18px}
.cd.cd .sw-dc-run i{display:none}
.cd.cd .sw-dc-host{font-size:12px;align-items:flex-start}
.cd.cd .sw-dc-host code{white-space:normal;overflow-wrap:anywhere}
.cd.cd .sw-dc-pfx{display:none}
.cd.cd .sw-dc-host .pill{display:none}
.cd.cd .sw-dc-hide-m{display:none}
.cd.cd .sw-dc-bhd,.cd.cd .sw-dc-bpad{padding:14px}
.cd.cd .sw-dc-ck{padding-left:14px;padding-right:14px}
.cd.cd .sw-dc-all{padding:10px 12px}
.cd.cd .sw-dc-more{grid-template-columns:minmax(0,1fr)}
}

/* ==== site: written by hand. scripts/port-design-css.py keeps everything below ==== */

/* Home story: the scroll reveal (WebsiteRound3.md). index.html sets data-reveal only when motion is allowed. */
.cd .sw-ps-blk[data-reveal]{transition:opacity .3s ease-out,transform .3s ease-out}
.cd .sw-ps-blk[data-reveal="wait"]{opacity:0;transform:translateY(12px)}
@media (prefers-reduced-motion: reduce){.cd .sw-ps-blk[data-reveal]{opacity:1;transform:none;transition:none}}

/* Check a domain: a card or tab dot with no answer yet has a neutral colour (the ported rules colour only a verdict). */
.cd .sw-dc-v,.cd .sw-dc-dot{--k:var(--border-strong)}
.cd .sw-dc-v .sk{display:block;height:12px}
.cd .sw-dc .sk-rows{display:flex;flex-direction:column;gap:10px}
.cd .sw-dc .sk-rows .sk{display:block;height:12px}
/* Includes inside includes, indented by depth (--d is set on the row). */
.cd .sw-dc-tr.is-kid .sw-dc-host{padding-left:calc(30px * var(--d,1))}
.cd .sw-dc-tabs .tab{gap:8px}
.cd .sw-dc .field-error{margin-top:-10px}
.cd .sw-dc-another .field-error{margin-top:0}
.cd .sw-dc .callout .btn{margin-left:8px}
@media (max-width: 900px){
.cd.cd .sw-dc-tr.is-kid .sw-dc-host{padding-left:calc(18px * var(--d,1))}
/* The DKIM key table on a phone: the selector, then record and key side by side, then the status. */
.cd.cd .sw-dc-kr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;padding:12px 14px}
.cd.cd .sw-dc-kr.is-hd{display:none}
.cd.cd .sw-dc-kr>div:first-child,.cd.cd .sw-dc-kr>div:nth-child(4){grid-column:1 / -1}
.cd.cd .sw-dc-another .input-group{flex-wrap:wrap}
.cd.cd .sw-dc-another .input{max-width:none;flex:1 1 100px}
.cd.cd .sw-dc-cta{flex-direction:column;align-items:flex-start}
}
/* The runtime wraps each {{ value }} in span.sc-interp; the meter's label rule (span: block, 12px) must not reach it. */
.cd .sw-dc-meter-n b .sc-interp{display:inline;font-size:inherit;font-weight:inherit;color:inherit}
/* The lookup meter when the SPF record fails for another reason: grey, the count kept. */
.cd .sw-dc-cells.is-muted i.on{background:var(--chart-gray)}
.cd .sw-dc-recnote{margin-top:10px}