/* ===========================================================================
   InstaWP FREE TOOLS — plugin/theme detector + plugin analyzer (green-skin)
   Used by: tools/index.html (hub) + plugin-detector.html + plugin-analyzer.html
   Load order: style.css -> ../directory/directory.css -> tools.css -> kit.css
   Reuses kit (.k-field/.k-listrow/.k-status/.k-callout) + directory (.d-card) +
   style.css tokens; this file adds the tool form + results layout.
   =========================================================================== */

/* ===================== TOOL INPUT CARD =============================== */
.tool-card{max-width:700px;margin:0 auto;background:var(--surf-card);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--e2);padding:clamp(20px,3vw,30px);text-align:left}
.tool-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.tool-f{flex:1;min-width:230px;display:flex;align-items:center;gap:10px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-md);padding:0 14px}
.tool-f svg{width:17px;height:17px;color:var(--muted);flex:none}
.tool-f input{border:0;background:transparent;outline:none;width:100%;padding:13px 0;
  font-family:var(--mono);font-size:.92rem;color:var(--heading)}
.tool-form .btn{flex:none;white-space:nowrap}
.tool-or{display:flex;align-items:center;gap:12px;margin:13px 0;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.tool-or::before,.tool-or::after{content:'';flex:1;height:1px;background:var(--border-2)}
.tool-upload{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border:1.5px dashed var(--border);
  border-radius:var(--r-md);color:var(--muted);font-size:.9rem;cursor:pointer;transition:border-color .15s,color .15s}
.tool-upload:hover{border-color:rgba(17,191,133,.45);color:var(--green-deep)}
.tool-upload svg{width:17px;height:17px}
.tool-hint{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:13px}

/* ===================== RESULTS ====================================== */
.tool-results{max-width:840px;margin:36px auto 0}
.tool-rhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tool-rhead .u{font-family:var(--mono);font-size:.82rem;color:var(--heading);font-weight:600}
.tool-rhead .u b{color:var(--green-deep)}

/* detected THEME highlight */
.det-theme{display:flex;align-items:center;gap:16px;border:1px solid rgba(17,191,133,.3);
  background:var(--green-tint);border-radius:var(--r-md);padding:16px 18px;margin-bottom:22px}
.det-theme .ic{flex:none;width:46px;height:46px;border-radius:11px;background:#fff;border:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;color:var(--green-deep)}
.det-theme .ic svg{width:22px;height:22px}
.det-theme .m{flex:1;min-width:0}
.det-theme .lbl{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--green-deep)}
.det-theme h3{font-size:1.15rem;font-weight:700;color:var(--heading);line-height:1.2;margin-top:2px}

/* detected PLUGINS list */
.det-sub{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.det-list{display:flex;flex-direction:column;gap:8px}
.det-row{display:flex;align-items:center;gap:14px;padding:11px 14px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--surf-card);transition:border-color .15s}
.det-row:hover{border-color:rgba(17,191,133,.32)}
.det-row .ci{flex:none;width:34px;height:34px;border-radius:9px;background:var(--green-tint);border:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--green-deep)}
.det-row .nm{flex:1;min-width:0}
.det-row .nm b{display:block;font-weight:700;color:var(--heading);font-size:.95rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.det-row .nm .sl{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.det-row .btn{flex:none}

/* ===================== ANALYZER REPORT ============================== */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.rep-cell{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surf-card);padding:15px 16px;box-shadow:var(--e1)}
.rep-cell .k{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rep-cell .v{font-family:var(--font);font-weight:800;font-size:1.5rem;color:var(--heading);margin-top:5px;line-height:1;font-variant-numeric:tabular-nums}
.rep-cell .v small{font-size:.8rem;font-weight:600;color:var(--muted)}
.rep-sec{margin-bottom:22px}
.rep-sec h3{font-family:var(--font);font-size:1.05rem;font-weight:700;color:var(--heading);margin-bottom:12px}
.rep-rows{display:flex;flex-direction:column;gap:8px}

/* ===================== TOOL HUB ===================================== */
.tool-hub{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.tool-hub{grid-template-columns:1fr}}
.tool-tile{display:flex;flex-direction:column;background:var(--surf-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:26px;box-shadow:var(--e1);transition:transform .18s,box-shadow .18s,border-color .18s}
.tool-tile:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(17,191,133,.32)}
.tool-tile .ic{width:46px;height:46px;border-radius:12px;background:var(--green-tint);border:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;color:var(--green-deep);margin-bottom:16px}
.tool-tile .ic svg{width:23px;height:23px}
.tool-tile h3{font-size:1.2rem;font-weight:700;color:var(--heading);letter-spacing:-.01em}
.tool-tile p{font-size:.95rem;color:var(--body);line-height:1.55;margin:9px 0 18px;flex:1}
.tool-tile .go{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--green-deep);display:inline-flex;align-items:center;gap:7px}
.tool-tile .go svg{width:15px;height:15px}

/* ===================== DNS TOOLS (checker + ns lookup) ============== */
/* record-type <select> in the tool form (matches .tool-f) */
.tool-sel{flex:none;display:flex;align-items:center;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:0 6px 0 12px}
.tool-sel select{border:0;background:transparent;outline:none;cursor:pointer;font-family:var(--mono);
  font-size:.86rem;color:var(--heading);padding:13px 22px 13px 0;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:15px}
@media(max-width:560px){.tool-sel{flex:1;min-width:100%}.tool-sel select{width:100%}}

/* grouped record list */
.dns-group{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surf-card);
  box-shadow:var(--e1);margin-bottom:14px;overflow:hidden}
.dns-ghead{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border);
  background:var(--bg)}
.dns-gdesc{font-size:.86rem;color:var(--body);font-weight:500;flex:1;min-width:0}
.dns-gcount{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--muted);
  background:var(--surf-card);border:1px solid var(--border-2);border-radius:20px;padding:2px 10px}
.dns-rows{display:flex;flex-direction:column}
.dns-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--border)}
.dns-row:first-child{border-top:0}
.dns-val{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.86rem;
  font-weight:500;color:var(--heading);word-break:break-all;line-height:1.5}
.dns-metardata{font-family:var(--mono);font-size:.72rem;color:var(--green-deep);background:var(--green-tint);
  border:1px solid var(--border-2);border-radius:6px;padding:2px 8px;white-space:nowrap}
.dns-ttl{font-family:var(--mono);font-size:.72rem;color:var(--muted);white-space:nowrap}
.dns-sub{flex-basis:100%;font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.6;
  padding-top:2px}
.dns-copy{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px solid var(--border);border-radius:7px;background:var(--surf-card);color:var(--muted);cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.dns-copy:hover{color:var(--green-deep);border-color:rgba(17,191,133,.4)}
.dns-copy svg{width:14px;height:14px}
.dns-copy.ok{color:#fff;background:var(--green-bright);border-color:var(--green-bright)}
.dns-copy.ok svg{display:none}
.dns-copy.ok::after{content:'\2713';font-size:.8rem;font-weight:700;line-height:1}

/* record-type badges (results + legend) */
.dns-tag{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.66rem;
  font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:6px;white-space:nowrap;
  background:var(--green-tint);color:var(--green-deep);border:1px solid var(--border-2)}
.dns-tag.t-a,.dns-tag.t-aaaa{background:rgba(17,191,133,.12);color:#0a7a57;border-color:rgba(17,191,133,.3)}
.dns-tag.t-cname{background:rgba(56,132,255,.12);color:#2563c9;border-color:rgba(56,132,255,.28)}
.dns-tag.t-mx{background:rgba(139,92,246,.13);color:#6d28d9;border-color:rgba(139,92,246,.28)}
.dns-tag.t-ns{background:rgba(13,148,136,.13);color:#0f766e;border-color:rgba(13,148,136,.28)}
.dns-tag.t-txt{background:rgba(234,160,16,.15);color:#b45309;border-color:rgba(234,160,16,.32)}
.dns-tag.t-soa{background:rgba(100,116,139,.14);color:#475569;border-color:rgba(100,116,139,.3)}
.dns-tag.t-caa{background:rgba(244,63,94,.12);color:#be123c;border-color:rgba(244,63,94,.26)}
.dns-tag.t-ptr{background:rgba(99,102,241,.13);color:#4f46e5;border-color:rgba(99,102,241,.28)}

/* two-button CTA row inside .d-sandbox */
.d-sb-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* static legend on the DNS Checker page */
.dns-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:760px;margin:0 auto}
@media(max-width:640px){.dns-legend{grid-template-columns:1fr}}
.dns-leg{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--surf-card);box-shadow:var(--e1)}
.dns-leg .dns-tag{flex:none;margin-top:1px}
.dns-leg span:last-child{font-size:.88rem;color:var(--body);line-height:1.5}

/* ===================== TOOL BREADCRUMB (dark hero) ================== */
.phero .tool-crumb{font-family:var(--mono);font-size:.72rem;color:rgba(234,242,238,.55);margin-bottom:18px}
.phero .tool-crumb a{color:var(--green-x);transition:color .15s}
.phero .tool-crumb a:hover{color:var(--green-bright)}
.phero .tool-crumb span{margin:0 6px;opacity:.5}