/* Copied from paulobrien.com (public/assets/member-tools.css) by devsite/tools.mjs, in paulobrien.dev's colours. */
/* Member tools (/tools/<slug>/, src/pages/tools/[tool].astro): the page, the members' box and the reports. */

.tm{padding:34px 34px 48px;font-family:var(--ui)}
.tm-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tm-top h1{margin:0;font:800 46px/1.05 var(--ui);letter-spacing:-.03em;color:var(--i-ink,#0b1220)}
.tm-badge{display:inline-flex;align-items:center;gap:7px;font:700 13px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#7a4a00;background:#fdf1d6;border:1px solid #f2d79a;border-radius:999px;padding:6px 12px}
.tm-badge svg{width:15px;height:15px}
.tm .lead{margin:14px 0 0;font:400 21px/1.55 var(--letter);color:var(--i-body,#334155);max-width:820px}
.tm-split{display:grid;background:#fff;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:28px;border-radius:22px;overflow:hidden;border:1px solid #dbe3f0;box-shadow:0 10px 30px rgba(15,30,60,.07)}
.tm-l{background:#fff;padding:34px}
.tm-l label{display:block;font:700 16px var(--ui);margin-bottom:10px;color:#0b1220}
.tm-row{display:flex;gap:10px}
.tm-in{flex:1;display:flex;align-items:center;gap:10px;height:58px;border:2px solid #c9d5ea;border-radius:14px;padding:0 16px;font:400 20px var(--ui);color:#94a3b8;background:#f8fafd}
.tm-go{display:inline-flex;align-items:center;gap:9px;height:58px;padding:0 22px;border-radius:14px;background:#4f46e5;color:#fff;font:700 18px var(--ui);border:0;white-space:nowrap}
.tm-go svg,.tm-in svg{width:20px;height:20px}
.tm-gate{margin-top:22px;display:flex;gap:14px;align-items:flex-start;background:#fffaf0;border:1px solid #f2d79a;border-radius:16px;padding:18px 20px}
.tm-gate .k{flex:0 0 42px;height:42px;border-radius:12px;background:#fdf1d6;color:#9a5b00;display:grid;place-items:center}
.tm-gate .k svg{width:22px;height:22px}
.tm-gate b{display:block;font:700 18px var(--ui);color:#0b1220}
.tm-gate p{margin:4px 0 12px;font:400 16px/1.5 var(--ui);color:#475569}
.tm-gate .btns{display:flex;gap:10px;flex-wrap:wrap}
.tm-gate a{display:inline-flex;align-items:center;gap:8px;font:700 15.5px var(--ui);text-decoration:none;border-radius:11px;padding:10px 16px}
.tm-gate a.p{background:#4f46e5;color:#fff}.tm-gate a.s{border:1.5px solid #c9d5ea;color:#4f46e5;background:#fff}
.tm-gate a svg{width:17px;height:17px}
.tm-small{margin:16px 0 0;font:400 14.5px/1.5 var(--ui);color:#64748b}
.tm-r{background:#f3f6fc;color:#0b1220;border:1px solid #dbe3f0;border-radius:16px;margin:12px;padding:30px 32px;position:relative}
.tm-r .eb{font:600 12.5px var(--mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:#4f46e5}
.tm-r h2{margin:6px 0 16px;font:800 24px var(--ui);color:#0b1220}
.tm-score{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.tm-score .n{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:800 24px var(--ui);background:#4f46e5;color:#fff}
.tm-score span{font:400 15.5px/1.45 var(--ui);color:#475569}
.tm-score b{display:block;color:#0b1220;font-size:18px}
.tm-checks{display:grid;gap:8px}
.tm-c{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #dbe3f0;border-radius:12px;padding:10px 14px;font:500 15.5px var(--ui)}
.tm-c i{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--ui);font-style:normal}
.tm-c i.ok{background:#dcfce7;color:#15803d}.tm-c i.w{background:#fef3c7;color:#b45309}
.tm-c em{margin-left:auto;font-style:normal;font:400 13.5px var(--mono,ui-monospace,monospace);color:#64748b}
.tm-h2{margin:44px 0 16px;font:800 30px var(--ui);letter-spacing:-.02em;color:#0b1220}
.tm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tm-card{border:1px solid #dbe3f0;border-radius:18px;padding:22px 24px;background:#fff}
.tm-card b{display:block;font:700 19px var(--ui);color:#0b1220;margin-bottom:6px}
.tm-card p{margin:0;font:400 16px/1.55 var(--ui);color:#475569}
.tm-also{margin-top:36px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-radius:18px;background:#f3f6fc;padding:20px 24px}
.tm-also b{font:700 18px var(--ui)}.tm-also span{font:400 16px var(--ui);color:#475569}
.tm-also a{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:700 16px var(--ui);color:#4f46e5;text-decoration:none}
@media (max-width:900px){.tm{padding:22px 16px 36px}.tm-top h1{font-size:34px}.tm-split{grid-template-columns:1fr}.tm-l,.tm-r{padding:22px 18px}.tm-row{flex-direction:column}.tm-grid{grid-template-columns:1fr}.tm .lead{font-size:18px}}
.tm-in input{flex:1;min-width:0;border:0;background:transparent;font:400 20px var(--ui);color:#0b1220;outline:none;height:100%}
.tm-in:focus-within{border-color:#4f46e5;background:#fff}
.tm-in input::placeholder{color:#94a3b8}
.tm-go{cursor:pointer}.tm-go:disabled{opacity:.55;cursor:not-allowed}
.tm-form .tm-lab,.tm-l .tm-lab{display:block;font:700 16px var(--ui);margin:0 0 10px;color:#0b1220}
.tm-opts{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.tm-opts fieldset{border:0;padding:0;margin:0;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tm-opts legend{float:left;font:700 14px var(--ui);color:#475569;margin-right:6px}
.tm-opts label{font:500 15.5px var(--ui);color:#0b1220;display:inline-flex;gap:6px;align-items:center}
.tm-drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed #c9d5ea;border-radius:16px;background:#f8fafd;padding:22px 16px;text-align:center;cursor:pointer;margin-bottom:14px}
.tm-drop.small{padding:14px}
.tm-drop.over{border-color:#4f46e5;background:#eef0ff}
.tm-drop input{position:absolute;opacity:0;width:1px;height:1px}
.tm-drop svg{width:26px;height:26px;color:#4f46e5}
.tm-drop b{font:700 16.5px var(--ui);color:#0b1220}.tm-drop span{font:400 14.5px var(--ui);color:#64748b}
.tm-picked{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.tm-picked li{display:flex;justify-content:space-between;gap:10px;font:400 14.5px var(--ui);background:#f3f6fc;border-radius:9px;padding:7px 11px}
.tm-picked li.bad{background:#fef2f2;color:#b91c1c}
.tm-addr{display:flex;align-items:center;gap:10px;min-height:58px;border:2px solid #c9d5ea;border-radius:14px;padding:8px 14px;background:#f8fafd;font:500 17px var(--mono);color:#0b1220;margin-bottom:12px;word-break:break-all}
.tm-addr span{font:400 16px var(--ui);color:#94a3b8}
.tm-err{margin:12px 0 0;color:#b91c1c;font:500 15.5px/1.45 var(--ui)}
.tm-left{margin:12px 0 0;color:#475569;font:400 14.5px var(--ui)}
.tm-gate.paused{background:#f3f6fc;border-color:#dbe3f0}
.tm-out{margin-top:28px}
.tm-mine{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid #dbe3f0;border-radius:18px;background:#fff;padding:16px 20px}
.tm-mine .k{flex:0 0 40px;height:40px;border-radius:12px;background:#eef0ff;color:#4f46e5;display:grid;place-items:center}
.tm-mine .k svg{width:20px;height:20px}
.tm-mine b{font:700 17px var(--ui);color:#0b1220}
.tm-mine span{font:400 15px/1.45 var(--ui);color:#475569}
.tm-mine .txt{flex:1;min-width:220px}
.tm-mine form{display:flex;gap:8px;flex-wrap:wrap}
.tm-mine input{height:42px;border:1.5px solid #c9d5ea;border-radius:10px;padding:0 12px;font:400 16px var(--ui);min-width:200px}
.tm-mine a,.tm-mine button{display:inline-flex;align-items:center;gap:7px;font:700 15px var(--ui);border-radius:10px;padding:10px 14px;text-decoration:none;border:1.5px solid #c9d5ea;color:#4f46e5;background:#fff;cursor:pointer}
.tm-mine button.p{background:#4f46e5;border-color:#4f46e5;color:#fff}
.tm-mine svg{width:16px;height:16px}
/* Reports */
.tr-panel{border:1px solid #dbe3f0;border-radius:20px;background:#fff;padding:24px 26px;margin-bottom:18px}
.tr-panel h2{margin:0 0 6px;font:800 24px/1.2 var(--ui);color:#0b1220}
.tr-panel h3{margin:0 0 8px;font:700 19px var(--ui);color:#0b1220}
.tr-panel p{margin:6px 0;font:400 16px/1.55 var(--ui);color:#334155}
.tr-loading{display:flex;align-items:center;gap:12px;font:500 17px var(--ui);color:#334155}
.tr-spin{width:22px;height:22px;border-radius:50%;border:3px solid #dbe3f0;border-top-color:#4f46e5;animation:trs 0.8s linear infinite;flex:0 0 22px}
@keyframes trs{to{transform:rotate(360deg)}}
.tr-over{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.tr-ring{--c:#4f46e5;width:104px;height:104px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),#e5ebf5 0);display:grid;place-items:center;flex:0 0 104px}
.tr-ring>div{width:82px;height:82px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center}
.tr-ring b{display:block;font:800 26px/1 var(--ui);color:#0b1220}.tr-ring small{font:500 12px var(--ui);color:#64748b}
.tr-ring.pass{--c:#16a34a}.tr-ring.warn{--c:#d97706}.tr-ring.fail{--c:#dc2626}
.tr-over .txt{flex:1;min-width:240px}
.tr-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tr-chip{font:700 13.5px var(--ui);border-radius:999px;padding:5px 11px}
.tr-chip.pass{background:#dcfce7;color:#15803d}.tr-chip.warn{background:#fef3c7;color:#b45309}.tr-chip.fail{background:#fee2e2;color:#b91c1c}.tr-chip.info{background:#e0e7ff;color:#3730a3}
.tr-who{font:400 14.5px/1.5 var(--ui)!important;color:#64748b!important}
.tr-group{margin:26px 0 0}
.tr-group>h3{font:800 22px var(--ui);color:#0b1220;margin:0 0 12px;letter-spacing:-.01em}
.tr-check{border:1px solid #dbe3f0;border-left:5px solid #94a3b8;border-radius:14px;background:#fff;padding:16px 18px;margin-bottom:10px}
.tr-check.pass{border-left-color:#16a34a}.tr-check.warn{border-left-color:#d97706}.tr-check.fail{border-left-color:#dc2626}.tr-check.info{border-left-color:#6366f1}
.tr-head{display:flex;gap:12px;align-items:flex-start}
.tr-ic{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--ui)}
.pass>.tr-head .tr-ic{background:#dcfce7;color:#15803d}.warn>.tr-head .tr-ic{background:#fef3c7;color:#b45309}.fail>.tr-head .tr-ic{background:#fee2e2;color:#b91c1c}.info>.tr-head .tr-ic{background:#e0e7ff;color:#3730a3}
.tr-head h4{margin:2px 0 4px;font:700 17.5px var(--ui);color:#0b1220;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tr-tag{font:700 12px var(--ui);text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.tr-head p{margin:0;font:400 16px/1.55 var(--ui);color:#334155}
.tr-check details{margin:12px 0 0 40px}
.tr-check summary{cursor:pointer;font:700 15px var(--ui);color:#4f46e5}
.tr-check ol{margin:10px 0;padding-left:22px;font:400 15.5px/1.6 var(--ui);color:#334155}
.tr-check pre,.tr-pre{white-space:pre-wrap;word-break:break-all;background:#f3f6fc;border-radius:10px;padding:10px 12px;font:400 13.5px/1.5 var(--mono);color:#334155}
.tr-rec{border:1px solid #dbe3f0;border-radius:12px;background:#f8fafd;padding:12px 14px;margin:10px 0}
.tr-rec dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;align-items:center}
.tr-rec dt{font:700 13.5px var(--ui);color:#475569}
.tr-rec dd{margin:0;display:flex;gap:8px;align-items:center;min-width:0}
.tr-rec code{font:400 14px var(--mono);word-break:break-all;color:#0b1220}
.tr-rec small{display:block;font:400 13px var(--ui);color:#64748b}
.tr-copy{display:inline-flex;align-items:center;gap:5px;font:600 13px var(--ui);color:#4f46e5;background:#fff;border:1px solid #c9d5ea;border-radius:8px;padding:4px 9px;cursor:pointer;flex:0 0 auto}
.tr-copy svg{width:13px;height:13px}
.tr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tr-card{border:1px solid #dbe3f0;border-radius:16px;background:#fff;padding:18px 20px}
.tr-card.wide{grid-column:1/-1}
.tr-card h3{margin:0 0 10px;font:700 17.5px var(--ui);color:#0b1220;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tr-card dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:7px 14px;margin:0}
.tr-card dt{font:600 14.5px var(--ui);color:#64748b}.tr-card dd{margin:0;font:400 15.5px var(--ui);color:#0b1220;word-break:break-word}
.tr-card ul{margin:0;padding-left:18px;font:400 15.5px/1.6 var(--ui)}
.tr-pill{font:700 12.5px var(--ui);border-radius:999px;padding:3px 9px;background:#fef3c7;color:#b45309;margin-left:6px}
.tr-pill.ok{background:#dcfce7;color:#15803d}.tr-pill.bad{background:#fee2e2;color:#b91c1c}
.tr-mono{font-family:var(--mono);font-size:14px}
.tr-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tr-btn{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--ui);border-radius:11px;padding:10px 16px;text-decoration:none;border:1.5px solid #c9d5ea;color:#4f46e5;background:#fff;cursor:pointer}
.tr-btn.p{background:#4f46e5;border-color:#4f46e5;color:#fff}
.tr-btn svg{width:16px;height:16px}
.tr-verdict{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:14px 16px;margin:12px 0;background:#f0fdf4;border:1px solid #bbf7d0}
.tr-verdict.warn,.tr-verdict.caution{background:#fffbeb;border-color:#fde68a}.tr-verdict.bad,.tr-verdict.danger{background:#fef2f2;border-color:#fecaca}
.tr-verdict b{display:block;font:700 17px var(--ui);color:#0b1220}.tr-verdict span{font:400 15.5px/1.5 var(--ui);color:#334155}
.tr-route{list-style:none;margin:16px 0;padding:0;display:grid;gap:0}
.tr-route li{display:grid;grid-template-columns:16px 90px 1fr;gap:12px;align-items:start;padding:8px 0;border-left:3px solid #dbe3f0;margin-left:6px;padding-left:12px;position:relative}
.tr-route li i{position:absolute;left:-9px;top:12px;width:15px;height:15px;border-radius:50%;background:#16a34a;border:3px solid #fff}
.tr-route li.warn i{background:#d97706}.tr-route li.bad i{background:#dc2626}
.tr-route li b{grid-column:2;font:700 15px var(--ui)}.tr-route li div{grid-column:3;font:400 15px/1.45 var(--ui);color:#334155}
.tr-route code{font:500 14px var(--mono);color:#0b1220}
.tr-table{width:100%;border-collapse:collapse;font:400 14.5px var(--ui)}
.tr-table th,.tr-table td{text-align:left;padding:8px 10px;border-bottom:1px solid #e5ebf5;vertical-align:top}
.tr-table th{font-weight:700;color:#475569}
.tr-table td.n,.tr-table th.n{text-align:right}
.tr-scroll{overflow-x:auto}
.tr-files{list-style:none;padding:0;margin:0;display:grid;gap:6px;font:400 15px var(--ui)}
.tr-files li.bad{color:#b91c1c}
.tr-bar{height:10px;border-radius:999px;background:#e5ebf5;overflow:hidden;margin:12px 0}
.tr-bar i{display:block;height:100%;background:#4f46e5;border-radius:999px;transition:width .4s}
.tr-small{font:400 14px/1.5 var(--ui)!important;color:#64748b!important}
@media (max-width:900px){.tr-grid{grid-template-columns:1fr}.tr-panel{padding:18px 16px}.tr-check details{margin-left:0}.tm-in input{font-size:17px}.tr-route li{grid-template-columns:16px 70px 1fr}}
.tm-c i.bad{background:#fee2e2;color:#b91c1c}
.tm-mine[hidden],.tm-out[hidden],.tm-gate[hidden],.tm-left[hidden],.tm-err[hidden]{display:none!important}
.tm-score .n{flex:0 0 64px}@media (max-width:900px){.tm-in{flex:none}.tm-go{justify-content:center}.tm-mine{align-items:flex-start}}
.pv-members-tools{margin-top:40px}.tm-hub-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px;font:800 28px var(--ui);letter-spacing:-.02em;color:#0b1220}.pv-members-tools .lead{margin:0 0 18px}

/* /tools/: a little colour on the icons (cycles through six soft tints) and a compact grid for the members' tools */
.pv-tools .pv-tool:nth-child(6n+1) .ic{background:#eaf0ff;color:#2f5bea}
.pv-tools .pv-tool:nth-child(6n+2) .ic{background:#e7f7ef;color:#16a34a}
.pv-tools .pv-tool:nth-child(6n+3) .ic{background:#fff1e6;color:#ea580c}
.pv-tools .pv-tool:nth-child(6n+4) .ic{background:#f3ecff;color:#7c3aed}
.pv-tools .pv-tool:nth-child(6n+5) .ic{background:#e6f6fb;color:#0891b2}
.pv-tools .pv-tool:nth-child(6n+6) .ic{background:#fdecef;color:#e11d48}
.pv-tools.mini{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;padding-bottom:40px}
.pv-tools.mini .pv-tool{grid-template-columns:40px 1fr;column-gap:12px;row-gap:2px;padding:14px 16px;border-radius:14px;align-items:center}
.pv-tools.mini .pv-tool .ic{width:40px;height:40px;border-radius:11px;grid-row:span 2;align-self:start}
.pv-tools.mini .pv-tool .ic svg.i{width:20px;height:20px}
.pv-tools.mini .pv-tool b{font-size:17px}
.pv-tools.mini .pv-tool span:not(.ic){font-size:14px;line-height:1.45}
.pv-members-tools .tm-hub-h,.pv-members-tools>.lead{padding:0 34px}
.ib-lhead+.pv-tools{padding-top:24px}
.ib-lhead+.pv-members-tools{margin-top:28px}
.pv-open{margin-top:8px}
.pv-tools.mini .pv-tool.soon b em.cs{font:600 12px var(--ui);color:var(--i-soft);margin-left:6px;display:inline}
.tm-free{display:inline-flex;align-items:center;gap:6px;margin:-6px 34px 18px;padding:5px 12px;border-radius:999px;background:#e7f7ef;color:#15803d;font:700 13px var(--ui)}.tm-free svg.i{width:14px;height:14px}
@media (max-width:760px){.pv-members-tools .tm-hub-h,.pv-members-tools>.lead{padding:0 18px}.tm-free{margin-left:18px}}
.tm-gate{margin-top:40px;padding:24px 26px;gap:16px}.tm-gate .btns{margin-top:16px}.tm-gate~.tm-small{margin-top:22px}
/* Signed in (pob_hi cookie, set before first paint): keep the "Free for members" box hidden unless the check says to show it, so it doesn't flash on refresh */
html[data-hi] .tm-gate:not(.on){display:none}
/* Running: the button, its spinner and the progress line under the form */
.tr-spin.sm{width:14px;height:14px;flex:0 0 14px;border-width:2px}
.tm-go .tr-spin,.tr-btn.p .tr-spin{width:18px;height:18px;flex:0 0 18px;border-color:rgba(255,255,255,.35);border-top-color:#fff}
.tm-go.busy:disabled{opacity:.9;cursor:progress}
.tr-btn:disabled{opacity:.7;cursor:progress}
.tm-run{border:1px solid #c9d5ea;background:#f3f6fd;border-radius:14px;padding:12px 16px;margin:14px 0 0}
.tm-run[hidden]{display:none!important}
.tm-run .tr-loading{font:600 15.5px/1.4 var(--ui);color:#1e3a8a;margin:0}
.tm-run .tr-bar{margin:10px 0 2px;height:6px}
.tr-bar.wait i{width:35%!important;animation:trw 1.3s ease-in-out infinite}
@keyframes trw{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){.tr-spin{animation-duration:2.4s}.tr-bar.wait i{animation:none;width:100%!important;opacity:.4}}
.sr-wait{display:inline-flex;gap:8px;align-items:center;color:#64748b}
.tr-copy[aria-pressed=true]{background:#4f46e5;border-color:#4f46e5;color:#fff}
/* Speed test: one country's grading report */
.sr-rep{margin-top:6px}
.sr-g{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:8px;color:#fff;background:#94a3b8}
.sr-g.g-A,.sr-grade.g-A{background:#16a34a}.sr-g.g-B,.sr-grade.g-B{background:#65a30d}.sr-g.g-C,.sr-grade.g-C{background:#ca8a04}.sr-g.g-D,.sr-grade.g-D{background:#ea580c}.sr-g.g-E,.sr-grade.g-E{background:#dc2626}.sr-g.g-F,.sr-grade.g-F{background:#b91c1c}.sr-grade{background:#64748b}
.s-a{color:#16a34a}.s-b{color:#65a30d}.s-c{color:#ca8a04}.s-d{color:#ea580c}.s-e{color:#dc2626}.s-f{color:#b91c1c}
i.s-a{background:#16a34a}i.s-b{background:#65a30d}i.s-c{background:#ca8a04}i.s-d{background:#ea580c}i.s-e{background:#dc2626}i.s-f{background:#b91c1c}
.sr-head{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.sr-shot{flex:0 0 280px;border:1px solid #dbe3f0;border-radius:12px;overflow:hidden;background:#f3f6fc}
.sr-shot.mobile{flex-basis:150px}
.sr-shot img{display:block;width:100%;height:auto}
.sr-txt{flex:1;min-width:240px}
.sr-txt .tr-mono{word-break:break-all}
.sr-info{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 0;font:400 15px var(--ui)}
.sr-info dt{font-weight:600;color:#64748b}.sr-info dd{margin:0;color:#0b1220}
.sr-scores{display:grid;grid-template-columns:150px 1fr 1fr;gap:14px;margin-bottom:18px}
.sr-grade{border-radius:20px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;text-align:center}
.sr-grade b{font:800 64px/1 var(--ui)}.sr-grade small{font:600 14px/1.4 var(--ui);opacity:.95;margin-top:6px}
.sr-tile{border:1px solid #dbe3f0;border-radius:16px;background:#fff;padding:16px 18px}
.sr-tile.wide{grid-column:1/-1}
.sr-tile h3{margin:0 0 6px!important;font:700 15px var(--ui)!important;color:#475569!important}
.sr-big{font:800 30px/1.1 var(--ui);color:#0b1220}
.sr-tile p{margin:6px 0 0;font:400 14px/1.45 var(--ui);color:#64748b}
.sr-meter{height:8px;border-radius:999px;background:#e5ebf5;overflow:hidden;margin-top:8px}.sr-meter i{display:block;height:100%}
.sr-vitals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sr-vital b{display:block;font:800 24px var(--ui)}.sr-vital span{display:block;font:600 14px var(--ui);color:#334155}.sr-vital small{font:400 13px var(--ui);color:#64748b}
.sr-rep .good{color:#16a34a}.sr-rep .ok{color:#d97706}.sr-rep .poor{color:#dc2626}
.sr-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid #e5ebf5;margin:-4px 0 16px;padding-bottom:10px}
.sr-tabs button{font:700 15px var(--ui);border:1.5px solid #c9d5ea;background:#fff;color:#4f46e5;border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap}
.sr-tabs button[aria-selected=true]{background:#4f46e5;border-color:#4f46e5;color:#fff}
.sr-body>h3{margin:22px 0 10px}.sr-body>h3:first-child{margin-top:4px}
.sr-strip,.sr-film{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.sr-film{flex-wrap:wrap}
.sr-strip figure,.sr-film figure{margin:0;flex:0 0 120px}.sr-strip.mobile figure,.sr-film.mobile figure{flex-basis:70px}
.sr-strip img,.sr-film img,.sr-strip .blank{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border:1px solid #dbe3f0;border-radius:6px;background:#fff}
.sr-strip.mobile img,.sr-film.mobile img,.sr-strip.mobile .blank{aspect-ratio:9/16}
.sr-strip figcaption,.sr-film figcaption{font:400 12px var(--ui);color:#64748b;margin-top:4px}
.sr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sr-mix{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#e5ebf5}.sr-mix i{display:block;height:100%}
.sr-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 14px var(--ui)!important}
.sr-legend span{display:inline-flex;align-items:center;gap:6px}.sr-legend span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.sr-legend small{color:#64748b}
.sr-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:currentColor}
.sr-files{word-break:break-all}.sr-files li{margin-bottom:6px}.sr-files small{display:block;color:#64748b}
.sr-wf td{padding:5px 8px;font-size:13.5px}
.sr-wf-name{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-wf tr.bad td{color:#b91c1c}
.sr-tl{min-width:260px;width:40%}.sr-tl>div{position:relative;height:12px;background:#f3f6fc;border-radius:4px}
.sr-tl i{position:absolute;top:2px;height:8px;border-radius:2px}
.ph-blocked{background:#c7c7cf}.ph-dns{background:#2a9d8f}.ph-connect{background:#e76f51}.ph-ssl{background:#9b5de5}.ph-send{background:#94a3b8}.ph-wait{background:#f4a261}.ph-receive{background:#4f46e5}
@media (max-width:900px){.sr-scores{grid-template-columns:1fr 1fr}.sr-grade{grid-column:1/-1;flex-direction:row;gap:16px;padding:14px}.sr-grade small{margin:0;text-align:left}.sr-vitals,.sr-stats{grid-template-columns:1fr}.sr-shot{flex-basis:100%}.sr-shot.mobile{flex-basis:140px}}
/* Mail tester: the member's tests from the last 7 days */
.tm-recent{margin:18px 0 0;padding:14px 16px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.tm-recent[hidden]{display:none!important}
.tm-recent ul{list-style:none;margin:6px 0 8px;padding:0}
.tm-recent li{padding:8px 0;border-bottom:1px solid #e2e8f0;font:400 15px var(--ui)}
.tm-recent li:last-child{border-bottom:0}
.tm-recent a{color:#0f172a;text-decoration:none;font-weight:600}
.tm-recent a:hover{text-decoration:underline}
.tm-sc{display:inline-block;min-width:46px;padding:1px 8px;border-radius:999px;font:700 13px var(--ui);text-align:center;background:#e2e8f0}
.tm-sc.pass{background:#dcfce7;color:#166534}.tm-sc.warn{background:#fef3c7;color:#92400e}.tm-sc.fail{background:#fce7f3;color:#9d174d}
/* Google rank checker */
.tm-rank{display:grid;gap:8px;margin-top:12px}
.tm-rank{gap:10px;margin-top:18px}.tm-rank .tm-lab{margin-top:8px}.tm-rank .tm-row{margin-top:14px}
.tm-port{margin:0 0 14px}
.tm-rank select{font:400 18px var(--ui);height:58px;padding:0 16px;border:2px solid #cbd5e1;border-radius:14px;background:#fff;color:#0b1220;width:100%;max-width:100%}
.tm-rank-top{margin:8px 0 0;padding:0;list-style:none}
.tm-rank-top li{padding:8px 10px;border-bottom:1px solid #e2e8f0;font:400 15px var(--ui)}
.tm-rank-top li b{display:inline-block;min-width:26px;color:#64748b}
.tm-rank-top li.you{background:#ecfdf5;border-radius:8px;font-weight:600}
.tm-rank-top li .tr-pill{margin-left:8px}

/* Icon cards and the 1 > 2 > 3 strip (src/components/IconCards.astro, HowSteps.astro). Six tints take turns. */
.ic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ic-card{--t:#eef0ff;--c:#4f46e5;border:1px solid #dbe3f0;border-radius:18px;padding:22px 24px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ic-card:nth-child(6n+2){--t:#e7f8ee;--c:#15803d}.ic-card:nth-child(6n+3){--t:#fdf1d6;--c:#9a5b00}
.ic-card:nth-child(6n+4){--t:#f1ecff;--c:#6d3fd6}.ic-card:nth-child(6n+5){--t:#ffecef;--c:#c2264b}.ic-card:nth-child(6n){--t:#e3f6f7;--c:#0e7d86}
.ic-k{width:46px;height:46px;border-radius:13px;background:var(--t);color:var(--c);display:grid;place-items:center;margin-bottom:14px}
.ic-k svg{width:23px;height:23px}
.ic-card b{display:block;font:700 19px var(--ui);color:#0b1220;margin-bottom:6px}
.ic-card p{margin:0;font:400 16px/1.55 var(--ui);color:#475569}
@media (hover:hover){.ic-grid .ic-card:hover{transform:translateY(-3px);border-color:#c9d5ea;box-shadow:0 14px 30px rgba(15,30,60,.08)}}

.ic-big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border-radius:22px;padding:14px;background:linear-gradient(135deg,#eef0ff 0%,#f4efff 55%,#e9f8f3 100%)}
.ic-big .ic-card{border:0;background:rgba(255,255,255,.72);padding:24px}
.ic-big .ic-k{width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(36,86,230,.14)}
.ic-big .ic-k svg{width:27px;height:27px}
.ic-big .ic-card b{font-size:20px}

.hs{list-style:none;margin:0;padding:30px 26px;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px;border-radius:22px;background:#f3f6fc;counter-reset:none}
.hs li{position:relative;text-align:center}
.hs-n{position:relative;margin:0 auto 16px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:800 26px var(--ui);color:#fff;background:linear-gradient(135deg,#4f46e5,#6d5cf0);box-shadow:0 10px 22px rgba(36,86,230,.28)}
.hs-k{position:absolute;right:-8px;bottom:-6px;width:30px;height:30px;border-radius:50%;background:#fff;color:#4f46e5;display:grid;place-items:center;box-shadow:0 3px 8px rgba(15,30,60,.14)}
.hs-k svg{width:16px;height:16px}
.hs li:not(:last-child)::after{content:"";position:absolute;top:31px;left:calc(50% + 46px);width:calc(100% + 24px - 92px);border-top:2px dashed #b9c8e6}
.hs li:not(:last-child)::before{content:"";position:absolute;top:27px;left:calc(150% + 24px - 56px);width:9px;height:9px;border-top:2px solid #8fa6d8;border-right:2px solid #8fa6d8;transform:rotate(45deg)}
.hs b{display:block;font:700 19px var(--ui);color:#0b1220;margin-bottom:6px}
.hs p{margin:0 auto;max-width:300px;font:400 16px/1.55 var(--ui);color:#475569}

/* A soft wash of colour behind the heading on the Coming soon pages. */
.tm.pr{background:radial-gradient(380px 220px at 82% 0,rgba(109,92,240,.10),transparent 72%),radial-gradient(320px 200px at 62% 0,rgba(36,86,230,.07),transparent 72%)}

@media (max-width:900px){
  .ic-grid,.ic-big{grid-template-columns:1fr}
  .ic-grid{gap:12px}
  .ic-grid .ic-card{display:flex;gap:14px;align-items:flex-start;padding:18px}
  .ic-grid .ic-k{flex:0 0 42px;width:42px;height:42px;margin:0}
  .ic-big .ic-card{display:flex;gap:14px;align-items:flex-start;padding:18px}
  .ic-big .ic-k{flex:0 0 48px;width:48px;height:48px;margin:0}
  .hs{grid-template-columns:1fr;gap:26px;padding:22px 18px}
  .hs li{display:flex;gap:16px;text-align:left;align-items:flex-start}
  .hs-n{flex:0 0 52px;width:52px;height:52px;margin:0;font-size:22px}
  .hs-k{width:26px;height:26px;right:-7px;bottom:-5px}.hs-k svg{width:14px;height:14px}
  .hs li:not(:last-child)::after{top:62px;left:25px;width:0;height:calc(100% - 40px);border-top:0;border-left:2px dashed #b9c8e6}
  .hs li:not(:last-child)::before{display:none}
  .hs p{margin:0;max-width:none}
}
@media (prefers-reduced-motion:reduce){.ic-card{transition:none}}
/* "Hosted on your own Cloudflare account" pill under the title on apps that install on the member's Cloudflare (Postroom, Blog by Email).
   Words and our own cloud icon only: Cloudflare's trademark rules need written permission to use their logo. */
.tm-host{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;font:600 15px var(--ui);color:#3d4759;background:#fff;border:1px solid #d6dde8;border-radius:999px;padding:7px 14px}
.tm-host svg{width:20px;height:20px;color:#2f5fd8;flex:none}
@media (max-width:600px){.tm-host{font-size:14px;border-radius:14px;padding:7px 12px;margin-top:12px}}

/* SSL checker (4 Nov 2026): where to renew it, then the chain as linked steps. */
.ssl-renew{border-width:2px;border-color:#86efac;background:#f0fdf4}
.ssl-renew.bought{border-color:#fcd34d;background:#fffbeb}.ssl-renew.self{border-color:#fca5a5;background:#fef2f2}
.ssl-renew-h{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.ssl-renew-h h3{margin:2px 0 0;font:800 21px/1.25 var(--ui);color:#0b1220}
.ssl-renew-ic{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#047857;color:#fff}
.ssl-renew.bought .ssl-renew-ic{background:#b45309}.ssl-renew.self .ssl-renew-ic{background:#b91c1c}
.ssl-renew-ic svg{width:22px;height:22px}
.ssl-steps{margin:10px 0;padding-left:22px;font:400 16px/1.6 var(--ui);color:#334155}
.ssl-chain li{grid-template-columns:16px 130px 1fr}
.ssl-chain small{font:400 14px var(--ui);color:#64748b}
@media (max-width:900px){.ssl-chain li{grid-template-columns:16px 1fr}.ssl-chain li div{grid-column:2}}

/* The open mail tester (9 Nov 2026): one centred box with the test address, then the report under it. */
.tm-open .mt-hero{max-width:820px;margin:18px auto 0;text-align:center}
.tm-open .mt-eb{display:inline-flex;align-items:center;gap:8px;margin:0;font:700 14px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#4f46e5}
.tm-open .mt-eb svg{width:18px;height:18px}
.tm-open .mt-hero h1{margin:12px 0 0;font:800 46px/1.08 var(--ui);letter-spacing:-.03em;color:var(--i-ink,#0b1220)}
.tm-open .mt-hero .lead{margin:14px auto 0}
.mt-box{margin:28px auto 0;text-align:left;background:#fff;border:1px solid #dbe3f0;border-radius:22px;box-shadow:0 10px 30px rgba(15,30,60,.07);padding:30px 32px}
.mt-box .tm-row{margin-top:12px}
.mt-addr{min-height:64px;font-size:20px}
.mt-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px;font:400 16.5px/1.5 var(--ui);color:#334155}
.mt-steps b{color:#4f46e5;margin-right:4px}
.mt-ex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.mt-example{margin:0}
.mt-bands h3{margin:6px 0 14px;font:800 22px var(--ui);color:#0b1220}
.mt-bands ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mt-bands li{display:flex;gap:14px;align-items:flex-start;border:1px solid #dbe3f0;border-radius:12px;padding:12px 16px;background:#fff;font:400 16px/1.5 var(--ui);color:#334155}
.mt-bands li svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px;color:#15803d}
.mt-bands li b{display:block;font:700 17px var(--ui);color:#0b1220;margin-bottom:2px}
.mt-bands p{margin:14px 0 0;font:400 15.5px/1.5 var(--ui);color:#64748b}
.mt-example h3{margin:0 0 16px;font:800 22px var(--ui);color:#0b1220}
@media (max-width:860px){.mt-ex{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.tm-open .mt-hero h1{font-size:34px}.mt-box{padding:22px 18px}}