/* aeo-audit: dashboard-upsell — JSON Schema App cross-promo card + inline CTA pill (D-090) */

.aeo-upsell {
    border-radius: 0.5rem;
    /* background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-primary-light) 35%, #38bdf8 100%); */
    /* Round 11 — stronger purple-tinted shadow so the card "pops" off the page */
    box-shadow: 0 14px 36px -10px rgba(126, 58, 242, 0.55);
    overflow: hidden;
    position: relative;
}

.aeo-upsell__inner {
    gap: 1rem;
    height: 100%;
    display: flex;
    column-gap: 1.25rem;
    background: #ffffff;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
}

.dark .aeo-upsell__inner { background: #1f2937; }

.aeo-upsell__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    /* Round 11 — soft diagonal gradient on the icon tile so it reads as a
     * branded mark, not just a faint tint. */
    background: linear-gradient(135deg, rgba(126, 58, 242, 0.18) 0%, rgba(56, 189, 248, 0.18) 100%);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    flex-shrink: 0;
}
.dark .aeo-upsell__icon {
    background: linear-gradient(135deg, rgba(141, 74, 255, 0.28) 0%, rgba(56, 189, 248, 0.22) 100%);
    color: #a78bfa;
}

.aeo-upsell__copy { min-width: 0; }

.aeo-upsell__headline {
    /* Round 11 — bumped 1.125rem → 1.375rem and weight 700 → 800 so the
     * loss-framing line reads as a headline, not body copy. */
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--txt-strong);
    margin: 0 0 0.25rem 0;
}
.dark .aeo-upsell__headline { color: #ffffff; }

.aeo-upsell__body {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--txt-muted);
    margin: 0;
}
.dark .aeo-upsell__body { color: #d1d5db; }

/* Round 10 Phase A — three-up stats strip below the body copy.
 * Round 11 — restructured each stat as a tinted chip (horizontal value+label
 * inside a small purple pill) so the strip reads as 3 chips, not 3 lines of
 * text. Inline-flex chip with bold value + normal-weight label. */
.aeo-upsell__stats {
    list-style: none;
    margin: 0.875rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.aeo-upsell__stat {
    display: inline-flex;
    align-items: baseline;
    column-gap: 0.375rem;
    padding: 0.3125rem 0.6875rem;
    border-radius: 8px;
    background-color: rgb(var(--bg-primary-rgb) / 0.10);
    line-height: 1.2;
}
.dark .aeo-upsell__stat { background-color: rgb(var(--bg-primary-rgb) / 0.20); }
.aeo-upsell__stat-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--bg-primary);
    font-variant-numeric: tabular-nums;
}
.dark .aeo-upsell__stat-value { color: #c4b5fd; }
.aeo-upsell__stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(75 85 99);
}
.dark .aeo-upsell__stat-label { color: rgb(209 213 219); }

.aeo-upsell__action { flex-shrink: 0; }

@keyframes aeo-upsell-pulse {
    0%, 100% { box-shadow: 0 4px 14px -4px rgba(126, 58, 242, 0.55); }
    50%      { box-shadow: 0 4px 22px -2px rgba(126, 58, 242, 0.85); }
}

@media (max-width: 767px) {
    .aeo-upsell__inner {
        grid-template-columns: auto 1fr;
        row-gap: 1rem;
    }
    .aeo-upsell__action {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
    }
}

/* ---------- Inline CTA pill rendered next to schema findings ---------- */

.aeo-schema-cta-pill {
    display: inline-flex;
    align-items: center;
    column-gap: 0.375rem;
    margin-top: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(126, 58, 242, 0.1);
    color: var(--bg-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(126, 58, 242, 0.25);
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.aeo-schema-cta-pill:hover,
.aeo-schema-cta-pill:focus-visible {
    background: var(--bg-primary);
    color: #ffffff;
    border-color: var(--bg-primary);
}
.dark .aeo-schema-cta-pill { background: rgba(141, 74, 255, 0.18); color: #c4b5fd; border-color: rgba(141, 74, 255, 0.4); }
.dark .aeo-schema-cta-pill:hover,
.dark .aeo-schema-cta-pill:focus-visible { background: #8d4aff; color: #ffffff; border-color: #8d4aff; }

@media (prefers-reduced-motion: reduce) {
    .aeo-upsell__cta { animation: none; transition: none; }
    .aeo-schema-cta-pill { transition: none; }
}

/* ---------- Round 12 — D-093 hero-tier modifier + D-094 router chrome ---------- */

/* .aeo-upsell--hero adds a "schema/speed gap detected" badge above the
 * headline + bumps headline size + more vertical padding. Round 11 base
 * chrome (3px gradient ring, stronger shadow, chip stats, larger CTA) is
 * preserved — this modifier compounds on top of it. */
.aeo-upsell--hero .aeo-upsell__inner {
    gap: 1rem;
    padding: 1.75rem 1.75rem 1.5rem 1.75rem;
}
@media (max-width: 767px) {
    .aeo-upsell--hero .aeo-upsell__inner {
        grid-template-areas:
            "badge badge"
            "icon  copy"
            "action action";
        grid-template-columns: auto 1fr;
    }
}
.aeo-upsell--hero .aeo-upsell__icon   { grid-area: icon; }
.aeo-upsell--hero .aeo-upsell__copy   { grid-area: copy; }
.aeo-upsell--hero .aeo-upsell__action { grid-area: action; }

.aeo-upsell__badge {
    grid-area: badge;
    display: inline-flex;
    align-items: center;
    column-gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background-color: rgb(var(--bg-primary-rgb) / 0.18);
    color: var(--bg-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    width: max-content;
}
.dark .aeo-upsell__badge {
    background-color: rgb(var(--bg-primary-rgb) / 0.28);
    color: #c4b5fd;
}
.aeo-upsell__badge iconify-icon { font-size: 0.875rem; }

.aeo-upsell--hero .aeo-upsell__headline {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.25;
}

/* .aeo-upsell-hero-grid — State A two-card side-by-side. Stack on mobile. */
.aeo-upsell-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 1023px) {
    .aeo-upsell-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Round 13 (D-095) — `.aeo-upsell-clear*` rules deleted. The State D
 * "✓ all clear" success block was removed when the hero went static. Clean
 * sites now see the same dual cross-sell as everyone else. */

/* .aeo-upsell-reinforce-grid — Round 13 dual mini-card recap. Mirrors
 * .aeo-upsell-hero-grid shape (2-col on desktop, stack below 1024px). */
.aeo-upsell-reinforce-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 1023px) {
    .aeo-upsell-reinforce-grid {
        grid-template-columns: 1fr;
    }
}

/* .aeo-schema-cta-pill--speed — Layer 2 inline pill variant for Website Speedy.
 * Same chrome as the schema pill (D-094 routing-asymmetry note: visual
 * symmetry preserved even though routing logic isn't symmetric). */
.aeo-schema-cta-pill--speed iconify-icon { font-size: 0.875rem; }

/* .aeo-upsell--reinforce — D-093 Phase 3 compact recap variant. Single-row
 * layout (icon | one-line headline | CTA), tighter padding than the hero. */
.aeo-upsell--reinforce { padding: 2px; }
.aeo-upsell--reinforce .aeo-upsell__inner {
    grid-template-areas: "icon copy action";
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
    row-gap: 0;
    padding: 0.75rem 1.125rem;
    align-items: center;
}
.aeo-upsell--reinforce .aeo-upsell__icon { grid-area: icon; width: 40px; height: 40px; font-size: 1.375rem; }
.aeo-upsell--reinforce .aeo-upsell__copy   { grid-area: copy; }
.aeo-upsell--reinforce .aeo-upsell__action { grid-area: action; }
.aeo-upsell--reinforce .aeo-upsell__headline {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
}
.aeo-upsell--reinforce .aeo-upsell__cta {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    animation: none;     /* no pulse on the secondary surface */
    box-shadow: 0 4px 14px -6px rgba(126, 58, 242, 0.4);
}
@media (max-width: 767px) {
    .aeo-upsell--reinforce .aeo-upsell__inner {
        grid-template-areas:
            "icon copy"
            "action action";
        grid-template-columns: auto 1fr;
        row-gap: 0.625rem;
    }
    .aeo-upsell--reinforce .aeo-upsell__action { justify-self: stretch; }
    .aeo-upsell--reinforce .aeo-upsell__cta { width: 100%; justify-content: center; }
}