/* ============================================================
   /tools - free developer tools
   Uses the design tokens from style.css only.
   ============================================================ */

.tool-page{max-width:880px;margin:0 auto;padding-top:1.5rem;min-width:0}
.tool-index{max-width:1100px}
.tool-head{margin-bottom:1.6rem}
.tool-lede{font-size:0.95rem;line-height:1.7;opacity:0.75;max-width:70ch}
.tool-muted{opacity:0.6;font-size:0.82rem}
.tool-break{overflow-wrap:anywhere;word-break:break-word}
.tool-warn{color:var(--yellow)}

/* ---- Form panel ---- */
.tool-panel{
  padding:1.4rem 1.5rem;border:1px solid var(--lc-strong);border-radius:var(--radius-lg);
  background:var(--surface);margin-bottom:1.5rem;
}
.tool-form{display:flex;flex-direction:column;gap:1rem;min-width:0}
.tool-field{display:flex;flex-direction:column;gap:0.4rem;min-width:0;flex:1}
.tool-field[hidden]{display:none}
.tool-row{display:flex;gap:1rem;flex-wrap:wrap}
.tool-row > .tool-field{flex:1 1 220px}
.tool-row > .tool-grow{flex:3 1 260px}
.tool-row > .tool-narrow{flex:1 1 160px}
.tool-label{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ac);opacity:0.9}
.tool-input{
  width:100%;padding:0.7rem 0.85rem;border-radius:var(--radius);border:1px solid var(--lc-strong);
  background:var(--bg-alt);color:var(--white);font-family:var(--fm);font-size:0.88rem;line-height:1.5;
  outline:none;transition:border-color var(--transition);
}
.tool-input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-dim)}
.tool-input::placeholder{color:var(--tx);opacity:0.45}
.tool-textarea{resize:vertical;min-height:9rem;white-space:pre;overflow:auto}
.tool-mono{font-size:0.82rem}
.tool-actions{display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap}
.tool-actions .btn{font-weight:600}
.tool-hint{font-size:0.75rem;opacity:0.55;line-height:1.5}
.tool-hint a{color:var(--ac)}
.tool-modes{border:0;display:flex;flex-wrap:wrap;gap:0.4rem 1.2rem;align-items:center}
.tool-modes legend{margin-bottom:0.45rem;width:100%}
.tool-radio{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.85rem;cursor:pointer}
.tool-radio input{accent-color:var(--ac)}
.tool-chips{display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center}
.tool-chip{
  font-family:var(--fm);font-size:0.72rem;padding:0.25rem 0.6rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--lc-strong);background:transparent;color:var(--tx);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all var(--transition);
}
.tool-chip:hover{border-color:var(--ac);color:var(--ac)}

/* ---- Alerts ---- */
.tool-alert{
  padding:0.85rem 1rem;border-radius:var(--radius);margin:0 0 1.5rem;font-size:0.88rem;line-height:1.6;
  border:1px solid var(--lc-strong);background:var(--bg-alt);overflow-wrap:anywhere;
}
.tool-alert strong{color:var(--white)}
.tool-alert-bad{border-color:rgba(255,107,107,0.45);background:var(--red-dim)}
.tool-alert-warn{border-color:rgba(255,209,102,0.45);background:var(--yellow-dim)}

/* ---- Results ---- */
.tool-results{
  display:flex;flex-direction:column;gap:0.9rem;margin-bottom:2.5rem;padding:1.4rem 1.5rem;
  border:1px solid rgba(107,138,255,0.35);border-radius:var(--radius-lg);background:var(--bg-alt);min-width:0;
}
.tool-results[hidden]{display:none}
.tool-results-title{font-family:var(--fh);font-size:1.2rem;color:var(--white);font-weight:400;display:flex;
  flex-wrap:wrap;align-items:center;gap:0.6rem;line-height:1.35;min-width:0}
.tool-sub{font-family:var(--fh);font-weight:400;font-size:1rem;color:var(--white);margin-top:0.8rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.6rem}
.tool-explain{font-size:0.9rem;line-height:1.65}
.tool-pill,.tool-tag{
  display:inline-block;font-family:var(--fm);font-size:0.68rem;letter-spacing:0.06em;padding:0.15rem 0.55rem;
  border-radius:999px;background:var(--ac-dim);color:var(--ac);vertical-align:middle;white-space:nowrap;
}
.tool-tag.is-ok{background:rgba(39,201,63,0.14);color:#5fdc74}
.tool-tag.is-warn{background:var(--yellow-dim);color:var(--yellow)}
.tool-tag.is-bad{background:var(--red-dim);color:var(--red)}
.tool-tag.is-info{background:var(--ac-dim);color:var(--ac)}
.tool-list{display:flex;flex-direction:column;gap:0.35rem;font-size:0.85rem;padding-left:1.1rem;list-style:disc}
.tool-list li::marker{color:var(--ac)}
.tool-list code,.tool-kv code,.tool-explain code,.spf-terms code,.spf-record code,.hdr-check code,.hdr-cache code,
.tool-verdict code{color:var(--ac);font-size:0.82rem}
.tool-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0.45rem 1.2rem;font-size:0.85rem;margin:0}
.tool-kv dt{opacity:0.6}
.tool-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tool-kv-wide{padding:0.9rem 1rem;border:1px solid var(--lc);border-radius:var(--radius);background:var(--bg)}
.tool-kv-wide code{color:var(--white)}
.tool-nowrap{white-space:nowrap}
.tool-taglist{display:flex;flex-direction:column;gap:0.55rem;list-style:none;padding:0;font-size:0.84rem}
.tool-taglist li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:0.2rem 1rem;
  padding:0.5rem 0.7rem;border:1px solid var(--lc);border-radius:var(--radius);background:var(--bg-alt)}
.tool-taglist code{color:var(--ac);font-size:0.8rem}
.tool-taglist span{opacity:0.75;font-size:0.8rem;line-height:1.55}
.tool-details{border:1px solid var(--lc);border-radius:var(--radius);padding:0.7rem 0.9rem;background:var(--bg)}
.tool-details summary{cursor:pointer;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ac)}
.tool-details[open] summary{margin-bottom:0.7rem}
.tool-card-box{border:1px solid var(--lc);border-radius:var(--radius);padding:1rem 1.1rem;background:var(--bg);
  display:flex;flex-direction:column;gap:0.6rem;min-width:0}
.tool-card-box .tool-sub{margin-top:0}
.tool-table{gap:0}
.tool-table td:first-child{white-space:nowrap}
.tool-table code{font-size:0.82rem}

/* Code output */
.tool-code{border:1px solid rgba(107,138,255,0.2);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.tool-code[hidden]{display:none}
.tool-code-head{display:flex;justify-content:space-between;align-items:center;padding:0.45rem 0.9rem;
  border-bottom:1px solid var(--lc);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ac)}
.tool-code pre{margin:0;border:0;border-radius:0;padding:1rem 1.1rem;background:var(--bg-alt)}
.tool-code pre code{white-space:pre;word-break:normal}
.tool-copy{font-family:var(--fm);font-size:0.68rem;padding:0.15rem 0.55rem;border-radius:var(--radius);cursor:pointer;
  background:transparent;color:var(--tx);border:1px solid var(--lc-strong);text-transform:none;letter-spacing:0}
.tool-copy:hover{color:var(--ac);border-color:var(--ac)}
.tool-notes h3{font-family:var(--fh);font-weight:400;font-size:0.95rem;color:var(--white);margin-bottom:0.4rem}
.tool-notes ul{list-style:disc;padding-left:1.1rem;display:flex;flex-direction:column;gap:0.3rem;font-size:0.84rem;opacity:0.85}

/* robots: verdict + numbered file */
.tool-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem 1rem;padding:1rem 1.1rem;
  border-radius:var(--radius);border:1px solid var(--lc-strong);min-width:0}
.tool-verdict.is-ok{border-color:rgba(39,201,63,0.45);background:rgba(39,201,63,0.08)}
.tool-verdict.is-bad{border-color:rgba(255,107,107,0.5);background:var(--red-dim)}
.tool-verdict-word{font-family:var(--fh);font-size:1.5rem;color:var(--white)}
.tool-verdict.is-ok .tool-verdict-word{color:#5fdc74}
.tool-verdict.is-bad .tool-verdict-word{color:var(--red)}
.tool-verdict-detail{font-size:0.85rem;min-width:0;overflow-wrap:anywhere}
.tool-lines{counter-reset:ln;font-size:0.78rem;line-height:1.55;max-height:28rem;overflow:auto;list-style:none;padding:0}
.tool-lines li{counter-increment:ln;display:flex;gap:0.8rem;padding:0 0.3rem;border-radius:3px}
.tool-lines li::before{content:counter(ln);min-width:2.6em;text-align:right;opacity:0.35;flex-shrink:0}
.tool-lines li code{font-size:0.78rem;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.tool-lines li.is-hit{background:var(--ac-dim)}
.tool-lines li.is-hit code{color:var(--white)}

/* subnet: binary */
.tool-binary{display:flex;flex-direction:column;gap:0.35rem;font-size:0.8rem;overflow-x:auto}
.tool-binary-row{display:flex;gap:0.8rem;align-items:baseline;white-space:nowrap}
.tool-binary-label{min-width:5.5rem;opacity:0.6}
.tool-binary code{font-size:0.8rem;letter-spacing:0.02em}
.b-net{color:var(--ac)}
.b-host{color:var(--tx);opacity:0.55}

/* checks (SPF/DMARC/DKIM) */
.tool-checks{display:flex;flex-direction:column;gap:0.45rem;font-size:0.86rem;line-height:1.55;list-style:none;padding:0}
.tool-check{display:flex;gap:0.6rem;align-items:flex-start;min-width:0}
.tool-check-mark{flex-shrink:0;width:1.35rem;height:1.35rem;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:0.75rem;font-weight:700;background:var(--ac-dim);color:var(--ac)}
.is-ok > .tool-check-mark,.is-ok .tool-check-mark{background:rgba(39,201,63,0.16);color:#5fdc74}
.is-warn > .tool-check-mark,.is-warn .tool-check-mark{background:var(--yellow-dim);color:var(--yellow)}
.is-bad > .tool-check-mark,.is-bad .tool-check-mark{background:var(--red-dim);color:var(--red)}
.tool-meter{height:6px;border-radius:999px;background:var(--lc);overflow:hidden}
.tool-meter span{display:block;height:100%;border-radius:999px;background:var(--ac)}
.tool-meter .is-ok{background:#5fdc74}
.tool-meter .is-warn{background:var(--yellow)}
.tool-meter .is-bad{background:var(--red)}
.spf-node{display:flex;flex-direction:column;gap:0.4rem;min-width:0}
.spf-child{margin:0.5rem 0 0.3rem;padding-left:0.9rem;border-left:2px solid var(--lc-strong)}
.spf-node-head{font-size:0.85rem;display:flex;flex-wrap:wrap;gap:0.6rem;align-items:baseline}
.spf-node-head code{color:var(--white)}
.spf-record{font-size:0.82rem}
.spf-terms{display:flex;flex-direction:column;gap:0.5rem;list-style:none;padding:0;font-size:0.82rem}
.spf-terms > li{min-width:0}
.spf-ips{font-size:0.78rem;line-height:1.9;overflow-wrap:anywhere}
.spf-ips code{color:var(--tx);opacity:0.8;font-size:0.76rem;margin-right:0.35rem}
.spf-explain{display:block;opacity:0.65;font-size:0.78rem;margin-top:0.1rem}

/* selector tester */
.sel-matches{display:flex;flex-direction:column;gap:0.7rem;list-style:none;padding:0;margin:0}
.sel-match{border:1px solid var(--lc);border-radius:var(--radius);padding:0.7rem 0.9rem;background:var(--bg);min-width:0}
.sel-match-head{font-size:0.75rem;color:var(--ac);margin-bottom:0.3rem;overflow-wrap:anywhere}
.sel-match-text{font-size:0.85rem;color:var(--white);overflow-wrap:anywhere;margin-bottom:0.4rem}
.sel-match pre{margin:0;padding:0.6rem 0.75rem;max-height:14rem;overflow:auto}
.sel-match pre code{font-size:0.76rem;white-space:pre-wrap;overflow-wrap:anywhere}

/* http headers */
.hdr-chain{display:flex;flex-direction:column;gap:0.5rem;list-style:none;padding:0;font-size:0.84rem}
.hdr-hop{display:flex;flex-wrap:wrap;gap:0.3rem 0.7rem;align-items:baseline;min-width:0;padding:0.55rem 0.75rem;
  border:1px solid var(--lc);border-radius:var(--radius);background:var(--bg)}
.hdr-loc{flex-basis:100%}
.hdr-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.7rem;list-style:none;padding:0}
.hdr-check{border:1px solid var(--lc);border-radius:var(--radius);padding:0.8rem 0.95rem;background:var(--bg);
  display:flex;flex-direction:column;gap:0.4rem;font-size:0.84rem;line-height:1.55;min-width:0}
.hdr-check.is-ok{border-color:rgba(39,201,63,0.3)}
.hdr-check.is-warn{border-color:rgba(255,209,102,0.3)}
.hdr-check.is-bad{border-color:rgba(255,107,107,0.35)}
.hdr-check-head{display:flex;align-items:center;gap:0.55rem;color:var(--white);min-width:0;overflow-wrap:anywhere}
.hdr-check .tool-muted{font-size:0.76rem}
.hdr-cache{display:flex;flex-direction:column;gap:0.6rem;list-style:none;padding:0;font-size:0.84rem}
.hdr-cache ul{list-style:disc;padding-left:1.1rem;margin-top:0.25rem;opacity:0.8}
.hdr-all td:first-child{white-space:nowrap}

/* ---- Guide + FAQ (article-body does the typography) ---- */
.tool-guide{margin-top:1rem}
.tool-guide > h2:first-child{margin-top:0.5rem}
.tool-guide ol{list-style:decimal}
.tool-guide ul{list-style:disc}
.tool-faq{display:flex;flex-direction:column;gap:0.3rem}
.tool-faq h3{font-size:1rem;margin-top:1rem}
.tool-faq p{font-size:0.95rem}

.tool-more{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--lc)}
.tool-more-list{display:flex;flex-wrap:wrap;gap:0.5rem;list-style:none;padding:0;margin:0}
.tool-more-list a{display:inline-block;padding:0.35rem 0.8rem;border:1px solid var(--lc-strong);border-radius:999px;
  font-size:0.78rem;color:var(--tx);transition:all var(--transition)}
.tool-more-list a:hover{border-color:var(--ac);color:var(--ac)}

/* ---- /tools hub ---- */
.tool-index-head{padding:1.5rem 1rem 1rem}
.tool-index-head .page-subtitle{max-width:68ch}
.tool-section-title{font-family:var(--fh);font-size:0.75rem;font-weight:400;text-transform:uppercase;letter-spacing:0.12em;
  color:var(--tx);opacity:0.8;margin:1.5rem 0 0.9rem;padding-bottom:0.45rem;border-bottom:1px solid var(--lc)}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.tool-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-card{
  display:flex;flex-direction:column;gap:0.7rem;padding:1.35rem 1.4rem;border:1px solid var(--lc-strong);
  border-radius:var(--radius-lg);background:var(--surface);color:inherit;text-decoration:none;min-width:0;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.tool-card:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,0.28);color:inherit}
.tool-card-title{font-family:var(--fh);font-size:1.05rem;color:var(--white);line-height:1.3;transition:color var(--transition)}
.tool-card:hover .tool-card-title{color:var(--ac)}
.tool-card-desc{font-size:0.84rem;line-height:1.6;opacity:0.65;flex:1}
.tool-card-go{font-size:0.75rem;color:var(--ac);padding-top:0.7rem;border-top:1px solid var(--lc)}
.tool-card-alt{background:var(--bg-alt)}
.tool-index-guide{max-width:800px;margin-top:2.5rem}

@media(max-width:900px){
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .tool-page{padding-top:0.8rem}
  .tool-panel,.tool-results{padding:1.1rem 1rem}
  .hdr-checks{grid-template-columns:minmax(0,1fr)}
  .tool-grid,.tool-grid-2{grid-template-columns:minmax(0,1fr)}
  .tool-kv{grid-template-columns:minmax(0,1fr);gap:0.1rem}
  .tool-kv dd{margin-bottom:0.5rem}
  .tool-taglist li{grid-template-columns:minmax(0,1fr)}
  .tool-verdict-word{font-size:1.25rem}
}
@media(max-width:400px){
  .tool-panel,.tool-results{padding:1rem 0.8rem}
  .tool-card-box{padding:0.85rem 0.8rem}
  .tool-code pre{padding:0.8rem}
}