/* The free tools: /tools/ and the four checkers. The palette is the site's:
   #143d2e ink, #3c6b58 soft ink, #17805a accent, #d5eede lines, white cards on
   mint. Status colours: green pass, amber warning, red problem, grey for a
   check that did not finish, which is never drawn as a pass. */

.tool-hero{background:linear-gradient(180deg,#f2fdf7 0%,#e2f7ec 70%,#d3f1e1 100%);border-bottom:1px solid #d5eede}
.tool-hero .in{max-width:860px;margin:0 auto;padding:22px 24px 44px;text-align:center}
.crumbs{font-size:13px;color:#5f8a76;text-align:start;margin:0 0 26px}
.crumbs a{color:#3c6b58;text-decoration:none}
.crumbs a:hover{color:#143d2e;text-decoration:underline}
.eyebrow{margin:0 0 8px;font:700 12px 'Gabarito',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#17805a}
.tool-hero h1{margin:0;font:800 clamp(32px,5.4vw,52px)/1.05 'Gabarito',sans-serif;letter-spacing:-.02em;text-wrap:balance}
.tool-hero .lede{margin:14px auto 0;max-width:62ch;font-size:17px;line-height:1.55;color:#3c6b58}

.tool-form{margin:28px auto 0;max-width:620px;text-align:start}
.tool-form .row{display:flex;gap:10px;align-items:flex-end}
.tool-form .field{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.tool-form .field.sel{flex:0 0 190px}
.tool-form .field span{font-size:12.5px;font-weight:700;color:#3c6b58;padding-inline-start:4px}
.tool-form input{width:100%;height:52px;padding:0 16px;border:1.5px solid #cfe6d9;border-radius:14px;background:#fff;
  font:500 16px 'Instrument Sans',sans-serif;color:#143d2e;box-shadow:0 3px 12px rgba(20,61,46,.06)}
.tool-form input::placeholder{color:#93b3a3}
.tool-form input:focus{outline:none;border-color:#17805a;box-shadow:0 0 0 4px rgba(23,128,90,.14)}
.tool-form input[aria-invalid="true"]{border-color:#c2412d;box-shadow:0 0 0 4px rgba(194,65,45,.12)}
.tool-form button{height:52px;padding:0 24px;border:0;border-radius:14px;background:#17805a;color:#fff;
  font:700 15.5px 'Gabarito',sans-serif;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.tool-form button:hover{background:#136b4b}
.tool-form button:focus-visible{outline:3px solid #143d2e;outline-offset:2px}
.tool-form button[disabled]{background:#6aa98d;cursor:progress}
.tool-form .spin{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:toolspin .8s linear infinite}
@keyframes toolspin{to{transform:rotate(360deg)}}
.field-error{margin:8px 4px 0;color:#b03a26;font-size:14px;font-weight:600}
.hero-extra{max-width:620px;margin:14px auto 0;text-align:start}
.hero-extra .hint{font-size:14px;color:#3c6b58}
.hero-extra .hint summary{cursor:pointer;font-weight:600;color:#17805a;list-style:none;display:inline-block}
.hero-extra .hint summary::-webkit-details-marker{display:none}
.hero-extra .hint summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  margin-inline-end:7px;border-radius:50%;background:#d5eede;color:#143d2e;font-size:12px}
.hero-extra .hint p{margin:8px 0 0;line-height:1.55}
.hero-extra .note{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #d5eede;
  border-inline-start:4px solid #17805a;font-size:14px;line-height:1.55;color:#3c6b58}

.tool-main{max-width:860px;margin:0 auto;padding:30px 24px 10px}
.tool-result:empty{display:none}
.tool-result{display:flex;flex-direction:column;gap:16px;margin-bottom:26px}
.card{background:#fff;border-radius:18px;padding:20px 22px;box-shadow:0 4px 16px rgba(20,61,46,.07)}
.card>h2,.card .head h2{margin:0;font:800 18px 'Gabarito',sans-serif}
.card .head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card .head .tag{font:700 12.5px 'Instrument Sans',sans-serif;padding:3px 10px;border-radius:999px;margin-inline-start:8px}
.copy{border:1px solid #d5eede;background:#fff;border-radius:10px;padding:6px 13px;font:600 13px 'Instrument Sans',sans-serif;
  color:#143d2e;cursor:pointer}
.copy:hover{border-color:#8fd4ad}
.findings .guide{display:inline-block;margin-top:2px;color:#17805a;font-weight:600;text-decoration:none}
.findings .guide:hover{text-decoration:underline}
.card.next{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card.next p{margin:0;font:700 16px 'Gabarito',sans-serif}
.code{margin:0;padding:12px 14px;border-radius:12px;background:#f3faf6;border:1px solid #e1f0e7;
  font:500 13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#143d2e;
  white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left}
.meta{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:#5f8a76}

.verdict{display:flex;gap:14px;align-items:flex-start;border-radius:18px;padding:18px 20px;border:1px solid}
.verdict .ic{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font:800 16px 'Gabarito',sans-serif}
.verdict .lb{margin:0 0 2px;font:700 11.5px 'Gabarito',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.verdict h2{margin:0;font:800 clamp(18px,2.4vw,21px)/1.25 'Gabarito',sans-serif;overflow-wrap:anywhere}
.verdict p{margin:6px 0 0;font-size:15px;line-height:1.55}
.verdict.pass{background:#e4f6ec;border-color:#b9e4cb}.verdict.pass .ic{background:#17805a}.verdict.pass .lb{color:#17805a}
.verdict.warn{background:#fdf3e1;border-color:#f1d5a1}.verdict.warn .ic{background:#b7791f}.verdict.warn .lb{color:#9a6316}
.verdict.warn h2{color:#5b3b0b}
.verdict.fail{background:#fbe9e5;border-color:#f0c2b8}.verdict.fail .ic{background:#c2412d}.verdict.fail .lb{color:#a5341f}
.verdict.fail h2{color:#5c1c11}
.verdict.error{background:#eef1ef;border-color:#d6dcd8}.verdict.error .ic{background:#7b8a83}.verdict.error .lb{color:#5d6b65}
.verdict.error h2{color:#2f3c36}
.verdict .retry{margin-top:12px;border:1px solid #c6cfca;background:#fff;border-radius:10px;padding:8px 14px;
  font:600 14px 'Instrument Sans',sans-serif;color:#143d2e;cursor:pointer}

.pill{display:inline-block;flex:none;min-width:58px;text-align:center;padding:3px 8px;border-radius:7px;
  font:700 11px 'Gabarito',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pill.pass,.st.clean{background:#e4f6ec;color:#17805a}
.pill.info{background:#eaf1fb;color:#2c5d9b}
.pill.warn{background:#fdf0d8;color:#9a6316}
.pill.fail,.st.listed{background:#fbe2dc;color:#a5341f}
.pill.error,.st.error,.st.refused{background:#eceeed;color:#5d6b65}
.findings{list-style:none;margin:0;padding:0}
.findings li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid #eef4f0;font-size:15px;line-height:1.5}
.findings li:first-child{border-top:0;padding-top:4px}
.findings .rfc{margin-inline-start:auto;flex:none;font:500 12px ui-monospace,Menlo,monospace;color:#17805a;white-space:nowrap}

.meter{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.meter b{font:800 26px 'Gabarito',sans-serif}
.meter b small{font-size:15px;color:#5f8a76}
.bar{height:10px;border-radius:999px;background:#e6efe9;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:#17805a}
.bar.warn i{background:#c98a24}.bar.fail i{background:#c2412d}
.sub{margin:10px 0 0;font-size:13.5px;color:#5f8a76;line-height:1.5}

.tree{list-style:none;margin:0;padding:0}
.tree ul{list-style:none;margin:8px 0 0;padding-inline-start:22px}
.tree li{margin-top:8px}
.tree .node{border:1px solid #e1f0e7;border-radius:12px;background:#f8fcfa;padding:10px 12px}
.tree .node summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tree .node summary::-webkit-details-marker{display:none}
.tree .node summary::before{content:"▸";color:#17805a;font-size:12px;transition:transform .15s}
.tree details[open]>summary::before{transform:rotate(90deg)}
.tree .leaf::before{content:"·";color:#9bb8aa;margin-inline-end:6px}
.tree .dn{font:700 13.5px ui-monospace,Menlo,monospace;color:#143d2e;overflow-wrap:anywhere}
.tree .lk{font-size:12.5px;color:#5f8a76;margin-inline-start:6px}
.tree .rec{margin:6px 0 0;font:500 12.5px/1.55 ui-monospace,Menlo,monospace;color:#3c6b58;overflow-wrap:anywhere;direction:ltr;text-align:left}
.tree .err{margin:6px 0 0;font-size:13px;color:#a5341f}

.table{overflow-x:auto}
.table table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{text-align:start;font:700 11.5px 'Gabarito',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#5f8a76;
  padding:8px 10px;border-bottom:1px solid #e1f0e7}
.table td{padding:11px 10px;border-bottom:1px solid #eef4f0;vertical-align:top;line-height:1.5}
.table td.k,.table td.v{font:600 13.5px ui-monospace,Menlo,monospace;color:#143d2e;overflow-wrap:anywhere}
.table td.v{color:#17805a;font-weight:500}
.table td small{display:block;font:500 12px ui-monospace,Menlo,monospace;color:#5f8a76}
.table td.s{text-align:end;white-space:nowrap}
.st{display:inline-block;padding:3px 10px;border-radius:7px;font:700 11px 'Gabarito',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.counts div{border-radius:14px;padding:12px 14px}
.counts b{display:block;font:800 24px 'Gabarito',sans-serif}
.counts span{font-size:13.5px;font-weight:600}
.counts .l{background:#fbe9e5;color:#a5341f}.counts .c{background:#e4f6ec;color:#17805a}.counts .e{background:#eef1ef;color:#5d6b65}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair div{border:1px solid #e1f0e7;border-radius:12px;padding:12px 14px;background:#f8fcfa;font-size:14px;line-height:1.5;color:#3c6b58}
.pair b{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;font:700 15px 'Gabarito',sans-serif;color:#143d2e}
.pair code{font:500 12.5px ui-monospace,Menlo,monospace;color:#17805a}
.addr{list-style:none;margin:0;padding:0}
.addr li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #eef4f0;font:500 13.5px ui-monospace,Menlo,monospace;
  overflow-wrap:anywhere}
.addr li:first-child{border-top:0}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kv div{border:1px solid #e1f0e7;border-radius:12px;padding:10px 12px;background:#f8fcfa}
.kv span{display:block;font-size:12px;font-weight:700;color:#5f8a76;text-transform:uppercase;letter-spacing:.06em}
.kv b{font:800 18px 'Gabarito',sans-serif}

.skeleton .ln{height:14px;border-radius:7px;background:linear-gradient(90deg,#e8f2ec 25%,#f4faf6 50%,#e8f2ec 75%);
  background-size:200% 100%;animation:shimmer 1.2s infinite;margin:10px 0}
@keyframes shimmer{to{background-position:-200% 0}}

.tool-article{max-width:720px;margin:20px auto 0}
.tool-article h2,.faq h2,.errors h2,.other h2,.full-test h2{font:800 clamp(21px,3vw,26px)/1.2 'Gabarito',sans-serif;letter-spacing:-.01em;margin:34px 0 10px}
.tool-article p{font-size:16.5px;line-height:1.68;color:#3c6b58;margin:0 0 12px}
.full-test{display:flex;gap:18px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:40px 0 0;
  background:#143d2e;color:#d9efe3;border-radius:20px;padding:24px 26px}
.full-test h2{color:#fff;margin:0 0 6px}
.full-test p{margin:0;font-size:15px;line-height:1.6;max-width:56ch}
.full-test .actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.full-test .btn,.card.next .btn{display:inline-block;background:#8fd4ad;color:#143d2e;text-decoration:none;font:700 15px 'Gabarito',sans-serif;
  padding:13px 22px;border-radius:12px;white-space:nowrap}
.full-test .btn:hover,.card.next .btn:hover{background:#b5e6ca}
.full-test .link{color:#cfe8da;font-size:14px;font-weight:600}
.faq{max-width:720px;margin:10px auto 0}
.faq details{border-bottom:1px solid #d5eede}
.faq summary{cursor:pointer;list-style:none;padding:15px 30px 15px 0;position:relative;font:600 16.5px 'Instrument Sans',sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;inset-inline-end:6px;top:22px;width:9px;height:9px;
  border-right:2px solid #7ba18f;border-bottom:2px solid #7ba18f;transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(225deg);top:25px}
.faq p{margin:0 0 15px;font-size:16px;line-height:1.62;color:#3c6b58}

.tool-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:6px 0 0}
.tool-cards a{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:18px;padding:20px;text-decoration:none;
  color:#143d2e;box-shadow:0 4px 16px rgba(20,61,46,.07);border:1px solid transparent;transition:box-shadow .15s,border-color .15s}
.tool-cards a:hover{border-color:#8fd4ad;box-shadow:0 8px 24px rgba(20,61,46,.12)}
.tool-cards a:focus-visible{outline:3px solid #17805a;outline-offset:2px}
.tool-cards .badge{align-self:flex-start;font:800 11px 'Gabarito',sans-serif;letter-spacing:.08em;color:#146f4e;background:#e4f6ec;
  border-radius:8px;padding:6px 8px}
.tool-cards h2,.tool-cards strong{margin:4px 0 0;font:800 19px 'Gabarito',sans-serif}
.tool-cards span{font-size:14.5px;line-height:1.5;color:#3c6b58}
.tool-cards .go{margin-top:auto;padding-top:6px;color:#17805a;font-weight:700}
.tool-cards.small{grid-template-columns:repeat(3,minmax(0,1fr))}
.errors{max-width:720px;margin:10px auto 0}
.errors ul{margin:0;padding:0;list-style:none}
.errors li{border-bottom:1px solid #d5eede}
.errors a{display:block;padding:13px 0;font:600 16px 'Instrument Sans',sans-serif;color:#146f4e;text-decoration:none}
.errors a:hover{text-decoration:underline}
.other{margin-top:20px}

@media (max-width:900px){.tool-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .tool-hero .in{padding:16px 16px 32px}
  .tool-main{padding:22px 16px 8px}
  .tool-form .row{flex-direction:column;align-items:stretch}
  .tool-form .field.sel{flex:auto}
  .tool-form button{justify-content:center}
  .tool-cards,.tool-cards.small{grid-template-columns:1fr}
  .counts{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .counts b{font-size:20px}
  .pair{grid-template-columns:1fr}
  .table .t{display:none}
  .table td,.table th{padding-inline:6px}
  .findings li{flex-wrap:wrap;gap:6px 10px}
  .findings .rfc{margin-inline-start:0}
  .card{padding:16px}
  .full-test{padding:20px}
  .full-test .actions{align-items:flex-start}
}