/* ============================================================
   Google AI Overview Checker. Tool-specific styles.
   Base shell, hero, buttons, FAQ, and CTA come from
   redirect-checker.css (loaded first).
   Angular clip-path corners only — never border-radius.
   Hex literals for semantic status colors: green #2ee6a6,
   amber #fcd34d, red #ff5d6c.
   --neon-green / --glow-green are dashboard-only tokens,
   absent from the public shell — not referenced here.
   ============================================================ */

/* ---- Form ---------------------------------------------------------------- */

.aio-form-wrap { margin: 40px 0 16px; }

.aio-form { display: flex; flex-direction: column; gap: 16px; }

.aio-field { display: flex; flex-direction: column; gap: 6px; }

.field-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.field-label .field-req { font-weight: 400; color: var(--neon-cyan); }
.field-label .field-opt { font-weight: 400; color: var(--text-muted); }

.field-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.aio-input {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 15px;
    background: rgba(13, 13, 20, 0.85);
    border: 1px solid rgba(0, 245, 212, 0.3);
    clip-path: var(--clip-badge);
    color: var(--text-primary);
    transition: border-color .2s, box-shadow .2s;
}
.aio-input:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15);
}

.aio-form .btn-primary { align-self: flex-start; }

.rate-limit-note { font-size: 12px; margin: 2px 0 0; }

@media (max-width: 768px) {
    .aio-form .btn-primary { align-self: stretch; width: 100%; text-align: center; }
}

@media (max-width: 600px) {
    .aio-input { font-size: 16px; clip-path: none; }
}

/* ---- Output -------------------------------------------------------------- */

.aio-output { margin-top: 36px; scroll-margin-top: 120px; }

/* ---- Verdict banner ------------------------------------------------------ */

.aio-verdict {
    padding: 20px 22px;
    margin-bottom: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left-width: 4px;
    clip-path: var(--clip-card);
    background: rgba(13, 13, 20, 0.5);
}

.aio-verdict--present { border-left-color: var(--neon-cyan); }
.aio-verdict--absent  { border-left-color: #fcd34d; }

/* Specificity bump — prevents redirect-checker.css `.tools-page p` muting
   the verdict headline to 70% white. */
.tools-page .aio-verdict-headline {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}

.aio-cited-status {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 5px 12px;
    clip-path: var(--clip-badge);
    border: 1px solid transparent;
}
.aio-cited-status--cited {
    color: #2ee6a6;
    background: rgba(46, 230, 166, 0.08);
    border-color: rgba(46, 230, 166, 0.3);
}
.aio-cited-status--not-cited {
    color: #fcd34d;
    background: rgba(252, 211, 77, 0.07);
    border-color: rgba(252, 211, 77, 0.25);
}

/* ---- Answer text block --------------------------------------------------- */

.aio-answer {
    margin-bottom: 22px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 245, 212, 0.15);
    border-left: 3px solid rgba(0, 245, 212, 0.4);
    clip-path: var(--clip-card);
    background: rgba(0, 245, 212, 0.03);
}

/* Specificity bump — same muting risk as headline. */
.tools-page .aio-answer-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--neon-cyan);
    margin: 0 0 10px;
}

.tools-page .aio-answer-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary, #c6c9d4);
    margin: 0;
}

/* ---- Sources list -------------------------------------------------------- */

.aio-sources-list { margin-bottom: 20px; }

.aio-sources-caption {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.aio-source-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    clip-path: var(--clip-badge);
    background: rgba(20, 22, 30, 0.5);
}
.aio-source-row--target {
    border-color: rgba(46, 230, 166, 0.4);
    background: rgba(46, 230, 166, 0.05);
}

.aio-source-pos {
    flex: 0 0 auto;
    width: 30px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--text-muted);
    line-height: 1.4;
}
.aio-source-row--target .aio-source-pos { color: #2ee6a6; }

.aio-source-body { flex: 1 1 auto; min-width: 0; }

/* Primary: always-present domain label */
.aio-source-domain-label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}
.aio-source-row--target .aio-source-domain-label { color: #2ee6a6; }

/* Secondary: page title — only rendered when it meaningfully differs from domain */
.aio-source-title {
    margin-top: 2px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary, #c6c9d4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* URL — monospace clickable link */
.aio-source-url {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neon-cyan);
    opacity: .8;
    text-decoration: none;
    word-break: break-all;
}
.aio-source-url:hover { opacity: 1; text-decoration: underline; }
.aio-source-row--target .aio-source-url { color: #2ee6a6; opacity: 1; }

.aio-source-tag {
    flex: 0 0 auto;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #041014;
    background: #2ee6a6;
    padding: 3px 9px;
    clip-path: var(--clip-badge);
    white-space: nowrap;
}

/* ---- Note (muted footnote) ----------------------------------------------- */

.aio-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    clip-path: var(--clip-badge);
}

/* ---- Honesty callout (in "why it matters" prose) ------------------------- */
/* Lifts the "a citation is not a backlink" disclosure out of the prose wall so
   the page's central honest claim is the thing the eye lands on. Full-white body
   on a faint cyan panel — deliberately brighter than the surrounding 70% prose. */

.aio-callout {
    margin: 22px 0;
    padding: 18px 22px;
    border: 1px solid rgba(0, 245, 212, 0.25);
    clip-path: var(--clip-card);
    background: rgba(0, 245, 212, 0.05);
}
.tools-page .aio-callout-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--neon-cyan);
    margin: 0 0 8px;
}
.tools-page .aio-callout p:last-child {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
}

/* ---- Result-moment CTA (rendered after a completed check) ---------------- */

.aio-result-cta {
    margin: 24px 0 4px;
    padding: 22px 24px;
    border: 1px solid rgba(0, 245, 212, 0.3);
    clip-path: var(--clip-card);
    background: linear-gradient(180deg, rgba(0, 245, 212, 0.06), rgba(13, 13, 20, 0.4));
}
.tools-page .aio-result-cta-headline {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}
.tools-page .aio-result-cta-body {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary, #c6c9d4);
}

/* ---- Error state --------------------------------------------------------- */

.aio-error-msg {
    padding: 16px 20px;
    border: 1px solid rgba(255, 93, 108, 0.4);
    clip-path: var(--clip-badge);
    background: rgba(255, 93, 108, 0.07);
}

/* ---- CTA stack (token / offer line) -------------------------------------- */

.cta-stack {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--neon-cyan);
    margin: 4px 0 16px;
}

/* ---- Actions ------------------------------------------------------------- */

.aio-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 600px) {
    .aio-actions { flex-direction: column; }
    .aio-actions .btn-secondary { width: 100%; text-align: center; }
    .aio-result-cta .btn-primary { display: block; width: 100%; text-align: center; }
    .product-cta a.btn-primary,
    .product-cta a.btn-secondary {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0 0 10px;
    }
    .aio-source-tag { display: none; } /* avoid overflow on tiny screens */
}