/* AI Ghost Job Detector: page specific styles. Reuses .wrap, .eyebrow, .sec-title, .lede, .btn,
   .field, .kit-form, .hp-wrap, .form-status, .hero-slab, .slab-glow from site.css, .tg-dark and
   .tg-gate-* from tool-guide.css, .faq-list, .faq-card, .faq-icon from blog.css, and
   .rkm-tools-grid, .rkm-tool-card, .rkm-chip, .rkm-dialog-backdrop, .rkm-cta-slab,
   .rkm-section-final from resume-keyword-matcher.css (the shared cross-tool component files
   every tool page already includes), so nothing here duplicates those. */

/* [hidden] needs !important here because the shared .rkm-dialog-backdrop and this file's own
   .gjd-* classes set display explicitly, which otherwise beats the UA stylesheet's
   [hidden]{display:none} at equal specificity, so without this those elements would show before
   any JS ever reveals them. Mirrors resume-keyword-matcher.css's own scoped rule for its page. */
body[data-tool="ai-ghost-job-detector"] [hidden]{display:none!important}

.gjd-section{padding-top:48px;padding-bottom:48px}
.gjd-alt{background:var(--bg-alt)}

/* ---------- hero ---------- */
.gjd-hero{text-align:center}
.gjd-h1{margin:16px 0 0;font:700 clamp(32px,6vw,60px)/1.05 "Syne","DM Sans",sans-serif;letter-spacing:-.02em}
.gjd-intro{max-width:640px;margin:16px auto 0}
.gjd-frame{margin:40px auto 0;padding:14px;border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--violet-2),var(--violet));box-shadow:var(--shadow-lg)}
@media (min-width:480px){.gjd-frame{padding:20px}}
.gjd-frame-in{background:#fff;border-radius:calc(var(--radius-lg) - 14px);padding:20px;text-align:left}
@media (min-width:480px){.gjd-frame-in{border-radius:calc(var(--radius-lg) - 20px)}}
@media (min-width:640px){.gjd-frame-in{padding:32px}}
.gjd-footnote{margin:20px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.gjd-footnote p{margin:0}
.gjd-footnote time{color:var(--muted-2)}

/* ---------- form ---------- */
.gjd-form{display:flex;flex-direction:column;gap:20px}
.gjd-row2{display:grid;gap:16px}
@media (min-width:640px){.gjd-row2{grid-template-columns:1fr 1fr}}
.gjd-help{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--muted);display:flex;align-items:flex-start;gap:6px}
.gjd-listing-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.gjd-counter{font:600 13px/1 "DM Sans",sans-serif;color:var(--muted-2)}
.gjd-counter.ok{color:var(--ink)}
.gjd-counter.over{color:var(--error)}
.gjd-optional-label{margin:0;font:700 14px/1.3 "DM Sans",sans-serif;color:var(--ink)}
.gjd-row3{display:grid;gap:12px;margin-top:10px}
@media (min-width:640px){.gjd-row3{grid-template-columns:repeat(3,1fr)}}
.gjd-mini-field label{font-size:12px;font-weight:600;color:var(--muted)}
.gjd-mini-field select{height:46px;font-size:14px}
.gjd-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid var(--line)}
.gjd-actions-left{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gjd-sample-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;padding:10px 10px;font:700 15px/1 "DM Sans",sans-serif;color:var(--ink);cursor:pointer;border-radius:var(--radius-sm)}
.gjd-sample-link:hover{background:var(--bg-alt)}
.gjd-store-note{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.gjd-privacy-note{margin:0;padding:12px 14px;border-radius:12px;background:var(--bg-alt);font-size:13px;line-height:1.5;color:var(--muted)}

/* ---------- Layer 1 result ---------- */
.gjd-result{margin-top:28px;display:flex;flex-direction:column;gap:20px}
.gjd-l1{background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:22px}
@media (min-width:768px){.gjd-l1{flex-direction:row;padding:28px}}
.gjd-l1-left{flex:0 0 auto;padding-bottom:18px;border-bottom:1px solid var(--line)}
@media (min-width:768px){.gjd-l1-left{width:38%;padding-bottom:0;border-bottom:0;border-right:1px solid var(--line);padding-right:24px}}
.gjd-l1-right{flex:1;min-width:0}
.gjd-risk-label{margin:0;font:700 11px/1 "DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.gjd-risk-row{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.gjd-risk-word{margin:0;font:700 28px/1.1 "Syne","DM Sans",sans-serif;color:var(--ink)}
.gjd-risk-word.high{color:var(--error)}
.gjd-risk-pill{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:999px;font:700 12px/1 "DM Sans",sans-serif;text-transform:uppercase;background:var(--bg-alt);color:var(--muted)}
.gjd-risk-pill.high{background:rgba(229,72,77,.12);color:var(--error)}
.gjd-risk-pill.medium{background:var(--violet-2);color:var(--ink)}
.gjd-risk-pill.low{background:var(--green-2);color:var(--ink)}
.gjd-meter{display:flex;gap:6px;margin-top:16px;max-width:280px}
.gjd-meter-seg{flex:1;height:10px;border-radius:999px;background:var(--bg-alt)}
.gjd-meter-seg.on-high{background:var(--error)}
.gjd-meter-seg.on-medium{background:var(--violet)}
.gjd-meter-seg.on-low{background:var(--green)}
.gjd-headline{margin:14px 0 0;font:600 15px/1.5 "DM Sans",sans-serif;color:var(--ink)}
.gjd-disclaimer{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.gjd-signals-h{margin:0 0 12px;font:700 18px/1.3 "Syne","DM Sans",sans-serif}
.gjd-compact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gjd-compact-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg-alt)}
.gjd-compact-name{display:flex;align-items:center;gap:8px;font:700 14px/1.3 "DM Sans",sans-serif;min-width:0}
.gjd-status-dot{flex:none;width:8px;height:8px;border-radius:50%}
.gjd-status-dot.triggered{background:var(--error)}
.gjd-status-dot.watch{background:var(--violet)}
.gjd-compact-reason{font-size:13px;color:var(--muted);flex:1 1 220px}
.gjd-status-chip{display:inline-flex;flex:none;align-items:center;min-height:22px;padding:0 10px;border-radius:999px;font:700 11px/1 "DM Sans",sans-serif;text-transform:uppercase}
.gjd-status-chip.triggered{background:rgba(229,72,77,.12);color:var(--error)}
.gjd-status-chip.watch{background:var(--violet-2);color:var(--ink)}
.gjd-topstep{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:16px;border-radius:14px;background:var(--ink);color:#fff}
.gjd-topstep strong{display:block;margin-bottom:2px;color:var(--green);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.gjd-topstep p{margin:0;font-size:14px;line-height:1.5;color:#fff}

/* ---------- progress strip ---------- */
.gjd-progress{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:center;padding:14px 18px;border-radius:999px;background:var(--bg-alt);font:600 13px/1 "DM Sans",sans-serif}
.gjd-progress-step{display:flex;align-items:center;gap:8px;color:var(--muted)}
.gjd-progress-step.done{color:var(--ink)}
.gjd-progress-dot{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--muted-2);border:1px solid var(--line)}
.gjd-progress-step.done .gjd-progress-dot{background:var(--green);color:var(--ink);border-color:var(--green)}

/* ---------- full report ---------- */
.gjd-report{margin-top:0;display:flex;flex-direction:column;gap:20px}
.gjd-card{background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow-md)}
@media (min-width:640px){.gjd-card{padding:28px}}
.gjd-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.gjd-card-h{margin:0;font:700 20px/1.3 "Syne","DM Sans",sans-serif}
.gjd-ai-pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:999px;background:var(--bg-alt);color:var(--muted);font:700 11px/1 "DM Sans",sans-serif;text-transform:uppercase}
.gjd-ai-pill.ok{background:var(--green-2);color:var(--ink)}
.gjd-ai-box{padding:16px;border-radius:14px;background:var(--bg-alt);font-size:15px;line-height:1.6;color:var(--ink)}
.gjd-ai-skeleton{display:flex;flex-direction:column;gap:8px}
.gjd-ai-skeleton span{display:block;height:14px;border-radius:7px;background:rgba(14,43,111,.1);animation:gjdPulse 1.3s ease-in-out infinite}
@keyframes gjdPulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.gjd-ai-skeleton span{animation:none}}

.gjd-signal-grid{display:grid;gap:16px}
@media (min-width:640px){.gjd-signal-grid{grid-template-columns:1fr 1fr}}
.gjd-signal-card{border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.gjd-signal-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gjd-signal-name{margin:0;font:700 15px/1.3 "DM Sans",sans-serif}
.gjd-signal-line{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.gjd-signal-line strong{color:var(--ink)}

.gjd-qlist{display:flex;flex-direction:column;gap:10px}
.gjd-qrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:var(--bg-alt)}
.gjd-qtext{margin:0;font-size:15px;color:var(--ink);flex:1;min-width:0}
.gjd-qcopy{flex:none;min-height:40px}

.gjd-check-list{display:flex;flex-direction:column;gap:2px}
.gjd-check-row{display:flex;align-items:flex-start;gap:12px;padding:12px 8px;border-radius:10px;cursor:pointer;min-height:44px}
.gjd-check-row:hover{background:var(--bg-alt)}
.gjd-check-row input{appearance:none;flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;border:2px solid var(--muted-2);background:#fff;cursor:pointer;position:relative}
.gjd-check-row input:checked{background:var(--ink);border-color:var(--ink)}
.gjd-check-row input:checked::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.gjd-check-row span{font-size:14px;line-height:1.5;color:var(--ink)}

.gjd-report-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}

/* ---------- next step ---------- */
.gjd-next{background:var(--green-2);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;gap:20px}
@media (min-width:768px){.gjd-next{flex-direction:row;align-items:center;justify-content:space-between}}
.gjd-next-copy{max-width:560px}
.gjd-next-h{margin:6px 0 0;font:700 clamp(22px,3vw,30px)/1.15 "Syne","DM Sans",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.gjd-next-copy p{margin:8px 0 0;color:var(--ink);font-size:15px;line-height:1.5}

/* ---------- how it works ---------- */
.gjd-steps{display:grid;gap:16px;margin-top:28px}
@media (min-width:640px){.gjd-steps{grid-template-columns:repeat(3,1fr)}}
.gjd-step-card{background:#fff;border-radius:20px;padding:22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px}
.gjd-step-num{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 16px/1 "Syne","DM Sans",sans-serif}
.gjd-step-card h3{margin:0;font:700 17px/1.3 "Syne","DM Sans",sans-serif}
.gjd-step-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

/* ---------- what we check ---------- */
.gjd-check-grid{display:grid;gap:16px;margin-top:28px}
@media (min-width:640px){.gjd-check-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.gjd-check-grid{grid-template-columns:repeat(4,1fr)}}
.gjd-wc-card{background:#fff;border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px}
.gjd-wc-icon{width:40px;height:40px;border-radius:12px;background:var(--violet-2);display:grid;place-items:center;color:var(--ink)}
.gjd-wc-card:nth-child(3n+2) .gjd-wc-icon{background:var(--green-2)}
.gjd-wc-card:nth-child(3n) .gjd-wc-icon{background:rgba(108,124,255,.22)}
.gjd-wc-name{margin:0;font:700 15px/1.3 "DM Sans",sans-serif}
.gjd-wc-means{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.gjd-wc-how{margin-top:auto;padding-top:6px;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- example ---------- */
.gjd-example-caption{margin-top:12px;font-size:13px;color:var(--muted-2)}

/* ---------- limits (dark) ---------- */
.gjd-limits-grid{display:grid;gap:20px;margin-top:22px}
@media (min-width:640px){.gjd-limits-grid{grid-template-columns:1fr 1fr}}
.gjd-limits-col{background:rgba(255,255,255,.07);border-radius:16px;padding:20px}
.gjd-limits-col h3{margin:0 0 12px;font:700 17px/1.3 "Syne","DM Sans",sans-serif;color:#fff}
.gjd-limits-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.gjd-limits-col li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82)}
.gjd-limits-closing{margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;color:rgba(255,255,255,.72)}

/* ---------- what to do ---------- */
.gjd-todo-grid{display:grid;gap:16px;margin-top:24px}
@media (min-width:640px){.gjd-todo-grid{grid-template-columns:1fr 1fr}}
.gjd-todo-card{background:#fff;border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px}
.gjd-todo-num{font:700 20px/1 "Syne","DM Sans",sans-serif;color:var(--violet)}
.gjd-todo-card h3{margin:0;font:700 16px/1.3 "Syne","DM Sans",sans-serif}
.gjd-todo-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.gjd-warn-row{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.gjd-warn-text{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.gjd-warn-link{font:700 14px/1 "DM Sans",sans-serif;color:var(--ink)}

/* ---------- final CTA: uses the shared .hero-slab/.rkm-cta-slab/.rkm-section-final rules
   already loaded from site.css and resume-keyword-matcher.css, same as the other two tools ---------- */

/* ---------- Turnstile container, inserted by ghost-job-detector.js. With appearance
   "interaction-only" the widget itself stays invisible and empty until Cloudflare actually
   needs to show a challenge, so this never needs a fixed height; it just needs to sit in normal
   flow, in the DOM, not display:none or clipped, so a real challenge has room to render and a
   visitor can actually see and use it. ---------- */
.gjd-turnstile{margin:4px 0 0}
.gjd-turnstile:empty{margin:0}

/* ---------- QA state switcher, preview only (never in _site) ---------- */
.gjd-qa{position:fixed;bottom:16px;right:16px;z-index:40;width:220px;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow-md);display:none;flex-direction:column;gap:6px}
.gjd-qa.is-visible{display:flex}
.gjd-qa-title{font:700 10px/1 "DM Sans",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);padding:0 2px}
.gjd-qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.gjd-qa button{font-size:11px;padding:6px 6px;border-radius:8px;border:1px solid var(--line);background:var(--bg-alt);color:var(--ink);cursor:pointer;text-align:left}
.gjd-qa button:hover{background:var(--violet-2)}