/* Free tools (/tools/*). The shell, tokens, buttons and fields come from /assets/site.css
   (linked first); this file only holds the tool-page layout and result components. */

.tool-page { padding: calc(var(--nav-h) + 56px) 0 var(--section-y); }
.wrap { max-width: 840px; margin: 0 auto; padding: 0 var(--gutter); }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--body-gray); }
.crumbs a:hover { color: var(--teal); }
.tool-page h1 {
    font-size: clamp(34px, 3vw + 18px, 54px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 16px;
}
.tool-page h1 span { color: var(--teal); }
.lede { font-size: 19px; color: var(--body-gray); max-width: 62ch; margin-bottom: 32px; }
.lede a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* Input */
.tool { margin-bottom: 8px; }
.input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input-row:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-line); }
.input-row input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 18px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 17px;
    color: var(--text);
}
.input-row input::placeholder { color: #949494; }
.input-row .btn { min-width: 132px; }
.btn:disabled { cursor: wait; }
.spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(11, 31, 28, 0.3);
    border-top-color: var(--teal-ink);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.trust-line { margin-top: 12px; font-size: 13px; color: var(--muted); }

.error {
    display: none;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(239, 91, 103, 0.1);
    border: 1px solid rgba(239, 91, 103, 0.3);
    border-radius: var(--r-sm);
    color: var(--error-red);
    font-size: 15px;
}
.error.active { display: block; }

/* Step progress (animated by /assets/site.js while .status is .active) */
.status {
    display: none;
    margin-top: 16px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
}
.status.active { display: block; }
.run-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.run-track { flex: 1; height: 4px; border-radius: 4px; background: #343434; overflow: hidden; }
.run-fill { width: 100%; height: 100%; background: var(--teal); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease-out); }
.run-pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--body-gray); min-width: 4ch; text-align: right; }
.run-steps { list-style: none; display: grid; gap: 8px; }
.run-steps li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.run-steps li::before {
    content: '';
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid #4A4A4A;
    flex-shrink: 0;
}
.run-steps li.active { color: var(--text); }
.run-steps li.active::before { border-color: var(--teal); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.run-steps li.done { color: var(--body-gray); }
.run-steps li.done::before {
    border-color: var(--teal);
    background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F1C' stroke-width='4'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

/* Results */
.results { display: none; margin-top: 32px; }
.results.active { display: block; }
.results .card { margin-bottom: 16px; padding: 24px 28px; }
.results .card h2 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.verdict {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.verdict.bad { color: var(--error-red); }
.verdict.good { color: var(--teal); }
.muted { color: var(--body-gray); font-size: 15px; }
.muted code, .card code { font-family: var(--font-mono); font-size: 0.9em; color: var(--soft-white); }

.checklist { list-style: none; }
.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-subtle);
    font-size: 15px;
}
.check {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
}
.check.pass { background: rgba(46, 226, 199, 0.15); color: var(--teal); }
.check.fail { background: rgba(239, 91, 103, 0.15); color: var(--error-red); }
.check.warn { background: rgba(245, 166, 35, 0.15); color: var(--alert-amber); }
.check-label { color: var(--text); display: block; }
.check-detail { color: var(--muted); font-size: 13px; display: block; font-family: var(--font-mono); }
.tag {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    color: var(--body-gray);
    margin-left: auto;
    white-space: nowrap;
    font-family: var(--font-body);
}
pre.code {
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--soft-white);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 520px;
    overflow: auto;
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Upsell */
.upsell {
    margin-top: 8px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--teal-line);
    border-radius: var(--r-lg);
}
.upsell h3 { font-size: 22px; margin-bottom: 8px; }
.upsell p { color: var(--body-gray); font-size: 16px; max-width: 60ch; }
.upsell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }

/* FAQ / explainer */
.tool-faq { margin-top: 64px; }
.tool-faq h2 { font-size: var(--fs-xl); margin-bottom: 16px; }
.tool-faq code { font-family: var(--font-mono); font-size: 0.9em; color: var(--soft-white); }
.tool-faq ul { padding-left: 20px; display: grid; gap: 8px; }
.tool-faq li::marker { color: var(--teal); }
.related-tools { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.related-tools .card { display: flex; flex-direction: column; gap: 6px; }
.related-tools .card h3 { font-size: 18px; margin: 0; }

@media (max-width: 640px) {
    .tool-page { padding-top: calc(var(--nav-h) + 32px); }
    .input-row { flex-direction: column; align-items: stretch; border-radius: var(--r-md); }
    .input-row .btn { width: 100%; border-radius: var(--r-sm); }
    .results .card, .upsell { padding: 20px; }
    .verdict { font-size: 22px; }
    .related-tools { grid-template-columns: 1fr; }
}