/* aeo-audit: aeo-delta — score-change pills, paired score bars, and
 * resolved/new finding bands used on compare.php (scan-to-scan delta view).
 *
 * Re-uses the .aeo-finding palette but flips intent: resolved = green band,
 * new = red band. Dark-mode-aware. Honours prefers-reduced-motion.
 */

/* ----- Score-change pill ------------------------------------------------- */
.aeo-delta__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.aeo-delta__pill iconify-icon {
    font-size: 0.875rem;
    line-height: 1;
}
.aeo-delta__pill--up {
    background-color: #ecfdf5;
    color: #047857;
}
.dark .aeo-delta__pill--up {
    background-color: #064e3b;
    color: #a7f3d0;
}
.aeo-delta__pill--down {
    background-color: #fef2f2;
    color: #b91c1c;
}
.dark .aeo-delta__pill--down {
    background-color: #4c0f0f;
    color: #fecaca;
}
.aeo-delta__pill--flat {
    background-color: rgb(243 244 246);
    color: rgb(75 85 99);
}
.dark .aeo-delta__pill--flat {
    background-color: rgb(55 65 81);
    color: rgb(209 213 219);
}

/* ----- Paired score bar (from / to) -------------------------------------- */
.aeo-delta__bar-pair {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.aeo-delta__bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}
.aeo-delta__bar-row-label {
    flex: 0 0 2.5rem;
    color: rgb(107 114 128);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.aeo-delta__bar-row-track {
    position: relative;
    flex: 1 1 auto;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(229 231 235);
    overflow: hidden;
}
.dark .aeo-delta__bar-row-track {
    background-color: rgb(75 85 99);
}
.aeo-delta__bar-row-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 800ms ease;
}
.aeo-delta__bar-row-fill--from {
    background-color: rgb(156 163 175);
}
.aeo-delta__bar-row-fill--to {
    background-color: var(--bg-primary);
}
.aeo-delta__bar-row-value {
    flex: 0 0 2.25rem;
    text-align: right;
    color: rgb(55 65 81);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.dark .aeo-delta__bar-row-value { color: rgb(229 231 235); }

@media (prefers-reduced-motion: reduce) {
    .aeo-delta__bar-row-fill { transition: none; }
}

/* ----- Resolved / new finding bands -------------------------------------- */
/* Re-uses the .aeo-finding shape (page-detail) but with green band for
 * resolved findings and red band for new ones. */
.aeo-delta__finding {
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background-color: rgb(249 250 251);
    margin-bottom: 0.5rem;
    border-left: 3px solid rgb(209 213 219);
}
.dark .aeo-delta__finding {
    background-color: rgb(38 38 38);
    border-left-color: rgb(75 85 99);
}
.aeo-delta__finding-title {
    font-weight: 500;
    font-size: 0.8125rem;
    color: rgb(31 41 55);
}
.dark .aeo-delta__finding-title { color: rgb(229 231 235); }
.aeo-delta__finding-meta {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: rgb(107 114 128);
    font-variant-numeric: tabular-nums;
}
.aeo-delta__finding--resolved {
    border-left-color: #22c55e;
    background-color: #f0fdf4;
}
.dark .aeo-delta__finding--resolved {
    background-color: #0f3a1a;
}
.aeo-delta__finding--new {
    border-left-color: #ef4444;
    background-color: #fef2f2;
}
.dark .aeo-delta__finding--new {
    background-color: #3a1212;
}

/* ----- Two-column layout for resolved/new on the same page card --------- */
.aeo-delta__finding-card {
    border: 1px solid var(--border-base);
    border-radius: 0.75rem;
    background-color: #ffffff;
    padding: 1rem;
    margin-bottom: 1rem;
}
.dark .aeo-delta__finding-card {
    background-color: rgb(31 41 55);
    border-color: rgb(75 85 99);
}
.aeo-delta__finding-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.aeo-delta__finding-card-url {
    font-size: 0.8125rem;
    color: rgb(31 41 55);
    font-weight: 500;
    word-break: break-all;
    flex: 1 1 auto;
    min-width: 0;
}
.dark .aeo-delta__finding-card-url { color: rgb(229 231 235); }
.aeo-delta__finding-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .aeo-delta__finding-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.aeo-delta__finding-col-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: rgb(107 114 128);
    margin-bottom: 0.5rem;
}
.aeo-delta__finding-col-head--resolved { color: #047857; }
.dark .aeo-delta__finding-col-head--resolved { color: #a7f3d0; }
.aeo-delta__finding-col-head--new { color: #b91c1c; }
.dark .aeo-delta__finding-col-head--new { color: #fecaca; }

.aeo-delta__module-group {
    margin-bottom: 0.625rem;
}
.aeo-delta__module-group:last-child { margin-bottom: 0; }
.aeo-delta__module-label {
    font-size: 0.6875rem;
    color: rgb(107 114 128);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

/* ----- Empty / hint copy on accordion bodies ---------------------------- */
.aeo-delta__empty {
    padding: 0.75rem 1rem;
    color: rgb(156 163 175);
    font-size: 0.8125rem;
    font-style: italic;
}