/* ============================================================================
   Free CIS Deduction Checker — diagnostic-only styles
   Layered ON TOP of ../style.css (loaded first) so it reuses every design
   token, button, nav and section primitive. Same ink + amber palette, Inter
   type, soft depth. Only the checker-specific UI lives here.
   ========================================================================== */

/* nav free badge */
.free-tag{
  font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#1a1206;background:var(--accent);padding:2px 7px;border-radius:999px;margin-left:6px;
  vertical-align:middle;
}

/* hero spacing for the embedded tool */
.dx-hero{padding-bottom:48px}
.dx-hero h1{margin-top:14px}

/* ---------- the tool shell (mirrors the homepage .mock chrome) ---------- */
.dx-tool{
  max-width:620px;margin:40px auto 0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.dx-tool-bar{
  background:var(--ink);color:#fff;padding:12px 18px;display:flex;align-items:center;gap:9px;
  font-size:.84rem;font-weight:600;
}
.dx-tool-bar .dot{
  width:30px;height:24px;border-radius:6px;background:var(--accent);color:var(--ink);
  font-weight:900;font-size:.66rem;display:grid;place-items:center;
}
.dx-tool-bar .lock{margin-left:auto;color:var(--slate-3);font-size:.72rem;font-weight:500}
.dx-tool-body{padding:26px 26px 30px}
@media(max-width:520px){.dx-tool-body{padding:20px 18px 24px}}

/* ---------- form ---------- */
.dx-form{display:grid;gap:18px}
.dx-field{display:grid;gap:7px}
.dx-field label{font-weight:700;font-size:.95rem;color:var(--ink-2)}
.dx-field label .hint{display:inline;font-weight:400;color:var(--slate-2);font-size:.85rem}

.dx-field input,
.dx-field select{
  font-family:inherit;font-size:1.02rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r);
  padding:13px 15px;width:100%;transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
.dx-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;cursor:pointer;
}
.dx-field input:focus,
.dx-field select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(224,130,10,.16);
}

.dx-money{position:relative;display:flex;align-items:center}
.dx-money .dx-prefix{
  position:absolute;left:15px;color:var(--slate-2);font-weight:700;font-size:1.02rem;pointer-events:none;
}
.dx-money input{padding-left:30px}

.dx-status-note{font-size:.84rem;color:var(--slate-2);line-height:1.45;margin-top:-1px}
.dx-field-optional{
  background:var(--bg);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:16px 16px 16px;margin-top:2px;
}
.dx-hint-line{font-size:.82rem;color:var(--slate-2);line-height:1.45}

.dx-err{font-size:.85rem;color:var(--err);font-weight:600}

.dx-form .btn-block{margin-top:4px}

/* ---------- result panel ---------- */
.dx-result{
  margin-top:24px;border-top:1px solid var(--line);padding-top:24px;
  animation:dxFade .35s ease both;
}
@keyframes dxFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.dx-result-head{
  font-size:1.18rem;line-height:1.4;font-weight:600;color:var(--ink-2);margin-bottom:18px;
}
.dx-result-head strong{color:var(--ink);font-weight:800}

.dx-breakdown{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 16px;margin-bottom:18px;
}
.dx-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 0;border-bottom:1px dashed var(--line);font-size:.96rem;color:var(--slate);
}
.dx-line:last-child{border-bottom:none}
.dx-line .num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2);white-space:nowrap}
.dx-line.total{border-top:2px solid var(--line-2);border-bottom:none;margin-top:2px}
.dx-line.total span:first-child{font-weight:700;color:var(--ink-2)}
.dx-line .num.accent{color:var(--accent-d);font-weight:900;font-size:1.1rem}

/* the vivid right-vs-wrong comparison */
.dx-compare{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px;
}
.dx-compare-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 16px;font-size:.95rem;
}
.dx-compare-row.right{background:var(--ok-soft)}
.dx-compare-row.wrong{background:#fff4f4;border-top:1px solid var(--line)}
.dx-compare-row .tag{font-weight:700;font-size:.88rem}
.dx-compare-row .tag.ok{color:var(--ok)}
.dx-compare-row .tag.bad{color:var(--err)}
.dx-compare-row .amt{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.05rem}
.dx-compare-row.right .amt{color:var(--ok)}
.dx-compare-row.wrong .amt{color:var(--err)}
.dx-compare-delta{
  padding:11px 16px;background:var(--ink);color:#cfd9e4;font-size:.9rem;line-height:1.5;
}
.dx-compare-delta b{color:var(--accent)}

/* user's own figure verdict */
.dx-your{
  display:flex;gap:11px;align-items:flex-start;
  padding:14px 16px;border-radius:var(--r);font-size:.96rem;line-height:1.5;margin-bottom:18px;
}
.dx-your .i{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-weight:900;font-size:.9rem}
.dx-your.ok{background:var(--ok-soft);color:#14532d}
.dx-your.ok .i{background:var(--ok);color:#fff}
.dx-your.bad{background:#fff4f4;color:#7f1d1d}
.dx-your.bad .i{background:var(--err);color:#fff}
.dx-your b{font-weight:800}

/* genuine flags list */
.dx-flags{
  border:1px solid var(--accent-line);background:var(--accent-soft);
  border-radius:var(--r);padding:16px 18px;margin-bottom:18px;
}
.dx-flags-head{font-weight:800;color:var(--ink);font-size:.95rem;margin-bottom:9px}
.dx-flags ul{list-style:none;display:grid;gap:9px}
.dx-flags li{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;line-height:1.5;color:#7a4a06}
.dx-flags li .ic{flex:none;font-weight:900;line-height:1.4}
.dx-flags li.err .ic{color:var(--err)}
.dx-flags li.warn .ic{color:var(--accent-d)}

/* the tailored CTA */
.dx-cta{
  background:var(--ink);border-radius:var(--r-lg);padding:26px 24px;text-align:center;
  box-shadow:var(--shadow);
}
.dx-cta-head{
  color:#fff;font-weight:800;font-size:1.22rem;line-height:1.32;letter-spacing:-.02em;
  max-width:34ch;margin:0 auto 10px;
}
.dx-cta-sub{
  color:#aebccd;font-size:.96rem;line-height:1.55;max-width:50ch;margin:0 auto 20px;
}
.dx-cta .btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 28px rgba(224,130,10,.4)}
.dx-cta-micro{color:#7f93a8;font-size:.8rem;line-height:1.5;margin-top:14px;max-width:48ch;margin-left:auto;margin-right:auto}

/* ---------- the rule section ---------- */
.dx-rules{background:var(--bg)}
.dx-rule-grid{display:grid;gap:18px;margin-top:42px}
@media(min-width:760px){.dx-rule-grid{grid-template-columns:repeat(3,1fr)}}
.dx-rule-card{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:30px 22px 24px;box-shadow:var(--shadow-sm);transition:.18s;
}
.dx-rule-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-line)}
.dx-rule-card .step{
  position:absolute;top:-14px;left:22px;width:30px;height:30px;border-radius:9px;
  background:var(--accent);color:var(--ink);font-weight:900;display:grid;place-items:center;box-shadow:var(--shadow);
}
.dx-rule-card h3{font-size:1.08rem;margin-bottom:7px}
.dx-rule-card p{font-size:.94rem;color:var(--slate);line-height:1.55}
.dx-rule-card p b{color:var(--ink-2)}