/* ==========================================================================
   Free AI Visibility Audit card
   Uses the tokens already defined in home.css (--ink, --accent, --r-lg …),
   so it inherits the site theme rather than redefining any colours.
   ========================================================================== */

/* Tighter than the 6rem .section default so the card sits closer to the
   proof strip above it — but NOT 0. The nav is position:sticky at ~64px
   tall, and every other section relies on its own top padding to keep the
   heading clear of it. Removing the padding entirely is what put the
   heading underneath the nav on #ai-audit.
   scroll-margin-top handles it properly regardless of padding: the browser
   stops short by this much when jumping to the anchor. */
.audit-section {
    padding-top: 4.5rem;
    scroll-margin-top: 84px;
}

.audit-card {
    max-width: 720px;
    margin: 40px auto 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px;
}

.audit-state {
    animation: auditIn .35s ease both;
}

/* The browser's own [hidden] rule is display:none at the lowest possible
   specificity, so ANY selector that sets display on one of these states
   silently defeats it. #audit-loading-state below sets display:flex, which
   is how the spinner ended up visible on page load. Both of these are
   guards against that: the attribute selector re-asserts the intent, and
   the :not([hidden]) qualifier below keeps the flex rule from applying at
   all while hidden. */
.audit-state[hidden] {
    display: none;
    animation: none;
}

@keyframes auditIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ── Input ───────────────────────────────────────────────────────────── */

.audit-form {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.audit-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 0 4px 0 16px;
    transition: border-color .15s, box-shadow .15s;
}

.audit-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-light);
}

.audit-input-prefix {
    color: var(--muted);
    font-size: 15px;
    user-select: none;
    padding-right: 2px;
}

.audit-input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    padding: 15px 12px 15px 0;
    min-width: 0;
}

.audit-input::placeholder { color: var(--muted); }

.audit-input-plain {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 14px 16px;
    transition: border-color .15s, box-shadow .15s;
}

.audit-input-plain:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-light);
}

.audit-submit { white-space: nowrap; }

/* Honeypot — off-screen rather than display:none, since some bots skip
   hidden fields but happily fill positioned ones. */
.audit-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.audit-note {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--muted);
    text-align: center;
}

.audit-note-sm { font-size: 12.5px; margin-top: 10px; }

.audit-error {
    margin-top: 12px;
    font-size: 14px;
    color: #d13438;
    text-align: center;
}

/* ── Loading ─────────────────────────────────────────────────────────── */

#audit-loading-state:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 32px 0;
}

.audit-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: auditSpin .7s linear infinite;
}

@keyframes auditSpin { to { transform: rotate(360deg); } }

.audit-loading-text {
    color: var(--ink2);
    font-size: 15px;
    min-height: 1.5em;
}

/* ── Results ─────────────────────────────────────────────────────────── */

.audit-result-head {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border);
}

.audit-score-ring {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

.audit-score-ring svg { transform: rotate(-90deg); }

.ring-track {
    fill: none;
    stroke: var(--border);
    stroke-width: 9;
}

.ring-fill {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1);
}

.ring-good { stroke: var(--green); }
.ring-mid  { stroke: var(--yellow); }
.ring-bad  { stroke: #d13438; }

.audit-score-num {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.audit-score-num strong {
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
}

.audit-score-num span {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
}

.audit-verdict { min-width: 0; }

.audit-domain-label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
    word-break: break-all;
}

.audit-verdict h3 {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 5px;
}

.audit-verdict p { color: var(--ink2); font-size: 15px; }

/* ── Findings ────────────────────────────────────────────────────────── */

.audit-findings {
    list-style: none;
    margin: 22px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audit-finding {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--r);
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 14.5px;
    color: var(--ink);
}

.audit-sev {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
}

.sev-critical { border-color: #f6d5d6; background: #fdf4f4; }
.sev-critical .audit-sev { background: #fde3e4; color: #b32227; }

.sev-high .audit-sev { background: var(--yellow-light); color: #9a6b00; }
.sev-medium .audit-sev { background: var(--accent-light); color: var(--accent-dark); }
.sev-low .audit-sev { background: var(--border); color: var(--ink2); }

.audit-finding-title { font-weight: 500; }

/* ── Email gate ──────────────────────────────────────────────────────── */

.audit-gate {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.audit-gate-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
    text-align: center;
}

.audit-gate-form {
    display: flex;
    gap: 10px;
}

.audit-gate-form .audit-input-plain { flex: 1; }
.audit-gate-btn { white-space: nowrap; }

.audit-gate-done {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.audit-check {
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green);
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audit-gate-done > p { color: var(--ink2); margin-bottom: 20px; }

.audit-next {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 22px 24px;
    text-align: left;
}

.audit-next-lead {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.audit-next-sub {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink2);
    margin-bottom: 16px;
}

.audit-again {
    display: block;
    margin: 20px auto 0;
    background: none;
    border: 0;
    color: var(--muted);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.audit-again:hover { color: var(--ink2); }

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .audit-card { padding: 26px 20px; }

    .audit-form,
    .audit-gate-form { flex-direction: column; }

    .audit-result-head {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }

    .audit-domain-label { word-break: break-word; }
}