/* ==========================================================================
   Complete Ranking — tools.css
   Shared styles for the free tool pages (/tools/<slug>/). Loaded after site.css.
   Maps the tools' original class names onto the Complete Ranking design tokens.
   ========================================================================== */
:root{--brand-dark:#1A31CF;--brand-lite:#6C7DFF}

.tool-page{font-size:16px}
.tool-page .container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.tool-page .section{padding:clamp(48px,4vw + 24px,88px) 0}
.tool-page .section--tool-hero{padding-bottom:0}
.tool-page .section--light{background:var(--bg-2)}
.tool-page .section--dark{background:var(--dark);color:#E8ECF7}
.tool-page .text-center{text-align:center}
.tool-page .text-muted{color:var(--muted)}
.tool-page .highlight{color:var(--brand);font-family:var(--font-serif);font-style:italic;font-weight:400}
.tool-page h2{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);margin-bottom:8px}
.tool-page h3{font-size:1.2rem}
.tool-page h4{font-size:1.02rem}
.tool-page p{line-height:1.6}
.tool-page .section__sub{font-size:1.02rem;color:var(--muted);margin:12px auto 0;max-width:620px;line-height:1.7}
.tool-page .tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:0;margin-bottom:16px;border-radius:0;background:none;color:var(--brand)}
.tool-page .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--brand-tint)}
.tool-page .tag--white{color:var(--lime)}
.tool-page .tag--dark{color:var(--muted)}
.tool-page ul{list-style:none}

/* Buttons from the original tool markup */
.tool-page .btn{height:auto;min-height:46px;padding:12px 22px;border-radius:999px;font-size:.95rem}
.tool-page .btn--primary{background:var(--brand);color:#fff}
.tool-page .btn--primary:hover{background:var(--brand-600)}
.tool-page .btn--outline,.tool-page .btn--outline-dark{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.tool-page .btn--outline:hover,.tool-page .btn--outline-dark:hover{border-color:var(--ink);background:var(--surface);box-shadow:none;color:var(--ink)}
.tool-page .btn--sm{min-height:38px;padding:8px 16px;font-size:.88rem}
.tool-page .btn svg{width:16px;height:16px}
.tool-page button{font-family:var(--font-sans)}

/* Tool layout */
.tool-page .tool__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px;align-items:start}
.tool-page .tool__form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--shadow-sm)}
.tool-page .tool__form h3{font-size:1.15rem;margin-bottom:20px}
.tool-page .tool__output{position:sticky;top:calc(var(--header-h) + 20px)}
.tool-page .tool__output h3{font-size:1.15rem;margin-bottom:14px}

/* Form controls */
.tool-page .form-group{margin-bottom:18px}
.tool-page .form-group:last-child{margin-bottom:0}
.tool-page .form-group label{display:block;font-size:.88rem;font-weight:550;color:var(--ink-2);margin-bottom:8px}
.tool-page input[type="text"],.tool-page input[type="url"],.tool-page input[type="number"],.tool-page input[type="email"],.tool-page input[type="date"],.tool-page input[type="search"],.tool-page select,.tool-page textarea{
  width:100%;padding:12px 14px;font-size:.95rem;font-family:var(--font-sans);font-weight:450;color:var(--ink);
  border:1px solid var(--line-2);border-radius:12px;background:var(--surface);transition:border-color .2s,box-shadow .2s}
.tool-page input:focus,.tool-page select:focus,.tool-page textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.tool-page textarea{resize:vertical;min-height:110px;line-height:1.6}
.tool-page .form-group small{display:block;margin-top:6px;color:var(--faint);font-size:.8rem}
.tool-page .form-group .char-count{float:right;font-size:.8rem;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.tool-page .form-group .char-count.warn{color:var(--amber)}
.tool-page .form-group .char-count.over{color:var(--red)}
.tool-page .form-check{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tool-page .form-check input{width:16px;height:16px;accent-color:var(--brand)}
.tool-page .form-check label{font-size:.9rem;font-weight:500;color:var(--ink-2);margin:0}

/* Output */
.tool-page .output-card{background:var(--dark);border-radius:var(--r-lg);padding:26px 24px;color:#E8ECF7}
.tool-page .output-card h3{color:#fff;margin-bottom:14px;font-size:1.08rem}
.tool-page .output-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.tool-page .output-header h3{margin-bottom:0}
.tool-page .code-block{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:12px;padding:18px;overflow:auto;font-family:var(--font-mono);font-size:.8rem;line-height:1.7;color:#DDE3F5;white-space:pre-wrap;word-break:break-all;max-height:520px}
.tool-page .code-block .tag-name{color:#8FA0FF}
.tool-page .code-block .attr-name{color:#F2C46B}
.tool-page .code-block .attr-value{color:var(--lime)}
.tool-page .code-block .punctuation{color:#7E88A3}
.tool-page .copy-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#fff;color:var(--ink);border:none;border-radius:999px;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .2s;font-family:var(--font-sans)}
.tool-page .copy-btn:hover{background:var(--lime)}
.tool-page .copy-btn.copied{background:var(--green);color:#fff}
.tool-page .copy-btn svg{width:14px;height:14px}

/* Preview cards */
.tool-page .preview-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:16px}
.tool-page .preview-box--dark{background:var(--dark-2);border-color:var(--dark-line);color:#E8ECF7}
.tool-page .serp-preview{background:#fff;border-radius:12px;padding:22px;border:1px solid var(--line);font-family:Arial,sans-serif}
.tool-page .serp-preview__url{font-size:14px;color:#202124;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.tool-page .serp-preview__url .favicon{width:18px;height:18px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-size:10px}
.tool-page .serp-preview__url .breadcrumb{color:#4d5156;font-size:12px}
.tool-page .serp-preview__title{font-size:20px;color:#1a0dab;line-height:1.3;margin-bottom:4px;cursor:pointer;font-family:Arial,sans-serif;letter-spacing:0}
.tool-page .serp-preview__title:hover{text-decoration:underline}
.tool-page .serp-preview__desc{font-size:14px;color:#4d5156;line-height:1.58}
.tool-page .og-preview{background:#fff;border-radius:12px;border:1px solid #dadde1;overflow:hidden;max-width:500px}
.tool-page .og-preview__image{height:260px;background:#e4e6eb;display:flex;align-items:center;justify-content:center;color:#999;font-size:.9rem}
.tool-page .og-preview__body{padding:12px 16px;border-top:1px solid #dadde1}
.tool-page .og-preview__domain{font-size:12px;color:#606770;text-transform:uppercase;margin-bottom:4px}
.tool-page .og-preview__title{font-size:16px;font-weight:600;color:#1d2129;line-height:1.3;margin-bottom:4px}
.tool-page .og-preview__desc{font-size:14px;color:#606770;line-height:1.4}
.tool-page .tw-preview{background:#000;border-radius:16px;border:1px solid #2f3336;overflow:hidden;max-width:500px;color:#e7e9ea}
.tool-page .tw-preview__image{height:260px;background:#16181c;display:flex;align-items:center;justify-content:center;color:#71767b;font-size:.9rem}
.tool-page .tw-preview__body{padding:12px 16px}
.tool-page .tw-preview__domain{font-size:13px;color:#71767b;margin-bottom:2px}
.tool-page .tw-preview__title{font-size:15px;font-weight:700;line-height:1.3;margin-bottom:2px}
.tool-page .tw-preview__desc{font-size:15px;color:#71767b;line-height:1.4}

/* How-to */
.tool-page .howto__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:36px;text-align:left}
.tool-page .howto__step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.tool-page .howto__num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;background:var(--brand-tint);color:var(--brand);border-radius:9px;font-family:var(--font-mono);font-weight:500;font-size:.8rem;margin-bottom:16px}
.tool-page .howto__step h4{font-size:1.02rem;margin-bottom:8px}
.tool-page .howto__step p{font-size:.92rem;color:var(--muted)}
.tool-page .related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:32px}
.tool-page .related__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.tool-page .cta__actions{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}

/* Old animation class: always visible */
.tool-page .fade-up{opacity:1!important;transform:none!important}

@media (max-width:1024px){
  .tool-page .tool__grid{grid-template-columns:1fr}
  .tool-page .tool__output{position:static}
}
@media (max-width:640px){
  .tool-page .tool__form{padding:22px 18px}
  .tool-page .output-card{padding:20px 16px}
}