/* ============================================================
   NBT HOST — INSTRUMENTE GRATUITE (site/instrumente/*.html, generate de server/genereaza-instrumente.py)
   Legat doar din paginile din instrumente/, după style.css + host.css + ghiduri.css (hero-ul, foaia albă .gd-body,
   cardurile .gd-card, blocurile de cod .gd-code/.gd-copy și câmpurile .f-g/.f-c vin de acolo). Strict alb-negru,
   ca restul site-ului: starea unui rezultat se citește din iconiță și din cuvânt, nu din culoare.
   Prefixul it- e liber în tot site-ul (verificat 22.10.2026: niciun .it-* în CSS sau JS).
   1. Formularul din hero   2. Rezultatele (DNS, domeniu)   3. Generatorul SPF / DMARC   4. Responsive
   ============================================================ */

/* ---------- 1. FORM IN THE HERO ---------- */
.it-form{position:relative;display:flex;align-items:center;gap:10px;width:100%;max-width:740px;margin-top:38px;
  padding:8px 8px 8px 24px;border-radius:var(--r-pill);overflow:hidden;transition:box-shadow var(--t1) var(--e)}
.it-form>*{position:relative;z-index:2}
.it-form:focus-within{box-shadow:var(--g-in),0 0 0 2px var(--w72),0 0 0 7px rgb(255 255 255/.06),0 24px 60px -28px rgb(0 0 0/.95)}
.it-form-i{width:20px;height:20px;flex:none;fill:none;stroke:var(--w72);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.it-form input{flex:1;min-width:0;height:56px;background:transparent;border:0;outline:0;color:#fff;font:inherit;font-size:17px;
  -webkit-appearance:none;appearance:none}
.it-form input::placeholder{color:var(--w56)}
.it-form .btn{flex:none}
.it-form .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.it-opts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin-top:16px;
  font-size:13px;color:var(--w56)}
.it-opts label{display:inline-flex;align-items:center;gap:10px}
.it-opts input{width:150px;max-width:46vw;height:38px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--w18);
  background:rgb(255 255 255/.03);color:#fff;font-family:var(--fm);font-size:13px;outline:0}
.it-opts input:focus{border-color:var(--w72)}
.it-hint{margin-top:14px;font-size:13px;line-height:1.6;color:var(--w56);max-width:60ch}
.it-hint code,.it-res code{font-family:var(--fm);font-size:.92em}

/* ---------- 2. RESULTS ---------- */
.it-res{position:relative;padding:0 var(--pad) clamp(72px,8vw,120px);scroll-margin-top:calc(var(--hd-h) + 16px)}
.it-res[hidden]{display:none}
.it-in{max-width:1180px;margin-inline:auto}
.it-live{min-height:1px}
.it-busy{display:flex;align-items:center;gap:14px;padding:22px 0;font-size:15px;color:var(--w72)}
.it-busy::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--w18);
  border-top-color:#fff;animation:it-spin .9s linear infinite}
@keyframes it-spin{to{transform:rotate(360deg)}}

/* summary: domain, counts, copy */
.it-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:22px 26px;
  border-radius:var(--r-l);margin-bottom:clamp(14px,1.6vw,22px)}
.it-sum>*{position:relative;z-index:2}
.it-sum-d{min-width:0}
.it-sum-d small{display:block;font-family:var(--fd);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--w56);margin-bottom:6px}
.it-sum-d b{display:block;font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:400;letter-spacing:-.02em;overflow-wrap:anywhere}
.it-sum-d p{margin-top:6px;font-size:14px;line-height:1.55;color:var(--w72)}
.it-sum-n{display:flex;flex-wrap:wrap;gap:8px}
.it-sum-n>span{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 14px;border-radius:var(--r-pill);
  border:1px solid var(--w12);font-size:13px;color:var(--w72)}
.it-sum-n b{font-family:var(--fd);font-weight:400;color:#fff}
.it-sum-a{display:flex;flex-wrap:wrap;gap:10px}

/* one card per record type */
.it-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:start}
.it-card{position:relative;min-width:0;border-radius:var(--r-l);padding:clamp(20px,2.2vw,28px)}
.it-card>*{position:relative;z-index:2}
.it-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid var(--w08)}
.it-card h3{font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:400;letter-spacing:-.02em;line-height:1.25}
.it-card h3 small{display:block;margin-top:4px;font-family:var(--fm);font-size:12px;letter-spacing:0;color:var(--w56);overflow-wrap:anywhere}
.it-card-wide{grid-column:1/-1}

/* the state: an icon + a word, so it reads without colour */
.it-st{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:4px 11px 4px 5px;border-radius:var(--r-pill);
  border:1px solid var(--w18);font-family:var(--fd);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--w72);white-space:nowrap}
.it-ic{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-family:var(--fb);
  font-size:11px;font-weight:700;letter-spacing:0;line-height:1;text-transform:none}
.it-ok .it-ic{background:#fff;color:#0a0a0a}
.it-warn .it-ic{border:1.5px solid #fff;color:#fff}
.it-bad .it-ic{background:#0a0a0a;color:#fff;box-shadow:0 0 0 1.5px #fff,0 0 0 4px rgb(255 255 255/.18)}
.it-info .it-ic{border:1px dashed var(--w56);color:var(--w72)}
.it-st.it-bad{border-color:var(--w56);color:#fff}

.it-recs{display:grid;gap:6px;margin-bottom:14px}
.it-recs li{padding:9px 12px;border-radius:10px;background:rgb(255 255 255/.035);border:1px solid var(--w05);
  font-family:var(--fm);font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.88);overflow-wrap:anywhere;word-break:break-word}
.it-recs li .k{color:var(--w56);margin-right:8px}
.it-recs-e{font-size:14px;color:var(--w56);margin-bottom:14px}
.it-dx{display:grid;gap:10px}
.it-dx li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font-size:14px;line-height:1.6;color:var(--w72)}
.it-dx li .it-ic{margin-top:.15em}
.it-dx li b{color:#fff;font-weight:600}
.it-dx a{color:#fff;text-decoration:underline;text-decoration-color:var(--w30);text-underline-offset:3px}
.it-dx a:hover{text-decoration-color:#fff}
.it-err{padding:22px 26px;border-radius:var(--r-l);font-size:15px;line-height:1.6;color:var(--w72)}
.it-err>*{position:relative;z-index:2}
.it-err b{color:#fff}

/* domain availability: one row per name */
.it-doms{display:grid;gap:clamp(12px,1.4vw,18px)}
.it-dom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:22px 26px;border-radius:var(--r-l)}
.it-dom>*{position:relative;z-index:2}
.it-dom-n{min-width:0}
.it-dom-n b{display:block;font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:400;letter-spacing:-.02em;overflow-wrap:anywhere;margin-bottom:8px}
.it-dom-n p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--w72)}
.it-dom-n p a{color:#fff;text-decoration:underline;text-decoration-color:var(--w30);text-underline-offset:3px}
.it-dom-a{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}

/* ---------- 3. SPF / DMARC GENERATOR ---------- */
.it-gen{padding:0 var(--pad) clamp(72px,8vw,120px)}
.it-gen-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:start}
.it-panel{position:relative;min-width:0;border-radius:var(--r-l);padding:clamp(22px,2.4vw,32px)}
.it-panel>*{position:relative;z-index:2}
.it-panel h2{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:400;letter-spacing:-.03em;line-height:1.15;margin-bottom:8px}
.it-panel>p{font-size:14px;line-height:1.6;color:var(--w56);margin-bottom:22px}
.it-panel fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
.it-panel legend{display:block;margin-bottom:12px;font-family:var(--fd);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--w56)}
.it-panel .f-g{margin-bottom:16px}
.it-panel .f-g small{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--w56)}
.it-chk{display:grid;gap:8px}
.it-chk label{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:14px;
  border:1px solid var(--w08);background:rgb(255 255 255/.02);cursor:pointer;font-size:14px;line-height:1.5;color:var(--w72);
  transition:border-color var(--t1) var(--e),background var(--t1) var(--e)}
.it-chk label:hover{border-color:var(--w30)}
.it-chk label:has(input:checked){border-color:var(--w42);background:rgb(255 255 255/.05);color:#fff}
.it-chk input{width:18px;height:18px;margin:.15em 0 0;accent-color:#fff}
.it-chk code{font-family:var(--fm);font-size:12px;color:var(--w56);overflow-wrap:anywhere}
.it-chk span{min-width:0}
.it-seg{display:flex;flex-wrap:wrap;gap:8px}
.it-seg label{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--w12);font-size:13.5px;color:var(--w72);cursor:pointer;transition:border-color var(--t1) var(--e),background var(--t1) var(--e)}
.it-seg input{position:absolute;opacity:0;width:1px;height:1px}
.it-seg label:has(input:checked){background:#fff;border-color:#fff;color:#0a0a0a}
.it-seg label:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}
.it-out{margin-top:6px;padding-top:20px;border-top:1px solid var(--w08)}
.it-out .gd-code{margin:0 0 12px}
.it-out .gd-code pre{white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}
.it-out-n{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin-bottom:12px;font-size:13px;color:var(--w56)}
.it-out-n dt{font-family:var(--fd);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding-top:.35em}
.it-out-n dd{font-family:var(--fm);font-size:13px;color:#fff;overflow-wrap:anywhere}
.it-msgs{display:grid;gap:8px}
.it-msgs li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:13.5px;line-height:1.55;color:var(--w72)}

/* the tools index: three big cards */
.it-ix .gd-card{min-height:clamp(240px,20vw,290px)}
.it-ix .gd-card .prod-ic{width:46px;height:46px}

/* ---------- 4. RESPONSIVE ---------- */
@media (max-width:980px){
  .it-grid,.it-gen-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .it-form{flex-wrap:wrap;padding:8px;border-radius:var(--r-l);gap:6px}
  .it-form-i{display:none}
  .it-form input{flex:1 1 100%;height:50px;padding:0 14px;font-size:16px}
  .it-form .btn{flex:1 1 100%;justify-content:center}
  .it-sum,.it-dom,.it-err{padding:18px 18px}
  .it-dom{grid-template-columns:minmax(0,1fr)}
  .it-dom-a{justify-content:flex-start}
  .it-card-h{flex-direction:column;gap:10px}
  .it-panel{padding:20px 18px}
}
@media (prefers-reduced-motion:reduce){
  .it-busy::before{animation-duration:2.4s}
}

/* the explanation under the tool: the guides' white sheet (.gd-body.inv + .gd-art), one centred column */
.it-body{padding:clamp(56px,7vw,110px) var(--pad) clamp(72px,8vw,130px)}
.it-body .gd-art{margin-inline:auto}
.it-ns{margin-top:18px;font-size:14px;color:var(--w72)}