/* aeo-audit: aeo-compare — namespace for compare.php (scan-to-scan delta).
 *
 * Round 32 introduces this file to:
 *   1. Fix the per-module-bars grid: previous markup used Tailwind
 *      `gap-x-8` which isn't compiled in our style.css (D-079a's exact
 *      warning pattern). .aeo-compare__module-bars owns explicit gap.
 *   2. Replace the brand-purple "to" bar fill with score-band colors
 *      (D-081 compliance). The bar fill now reads from
 *      .aeo-band--{great|good|ok|bad|pending} composed onto the track.
 *   3. Provide a re-skinned collapsible section pattern
 *      (.aeo-compare__group) that matches page-detail's visual rhythm
 *      instead of borrowing aeo-step2__group from the wizard's namespace.
 *   4. Lay out the module-grouped finding-delta IA: each section
 *      collapses; severity-filter chips at top apply across all sections.
 *
 * Reuses tokens from page-detail.php's R20-R23 vocabulary:
 *   - .aeo-band--* (score bands)
 *   - .aeo-finding / .aeo-finding--{sev} (severity-coloured finding rows)
 *   - .aeo-finding__sev-pill--{sev} (severity pill chip)
 *   - .aeo-overview__section / __section-head / __section-title
 *   - .aeo-filter-chip (shared filter primitive)
 *   - .aeo-delta__pill / __pill--{up|down|flat} (score-change pill)
 */

/* ============================================================
 * 1. Section heading (shared with overview's section pattern)
 * ============================================================ */
.aeo-compare__section {
    margin-bottom: 2rem;
}
.aeo-compare__section:last-child {
    margin-bottom: 0;
}
.aeo-compare__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.aeo-compare__section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: rgb(31 41 55);
}
.dark .aeo-compare__section-title { color: rgb(243 244 246); }
.aeo-compare__section-title iconify-icon {
    color: var(--txt-primary);
    font-size: 1.25rem;
}
.aeo-compare__section-hint {
    font-size: 0.75rem;
    color: rgb(107 114 128);
}
.dark .aeo-compare__section-hint { color: rgb(156 163 175); }

/* ============================================================
 * 2. Site-delta tile grid
 * ============================================================ */
.aeo-compare__site-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
    .aeo-compare__site-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.aeo-compare__site-tile {
    border: 1px solid rgb(229 231 235);
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 1.25rem;
}
.dark .aeo-compare__site-tile {
    background-color: rgb(31 41 55);
    border-color: rgb(75 85 99);
}
.aeo-compare__site-tile-eyebrow {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(156 163 175);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.aeo-compare__site-tile-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.aeo-compare__site-tile-now {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    color: rgb(31 41 55);
    font-variant-numeric: tabular-nums;
}
.dark .aeo-compare__site-tile-now { color: rgb(243 244 246); }
.aeo-compare__site-tile-was {
    font-size: 0.875rem;
    color: rgb(156 163 175);
    font-variant-numeric: tabular-nums;
}
.aeo-compare__site-tile-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

/* ============================================================
 * 3. Per-module bars (named-grid replacement for gap-x-8)
 * ============================================================ */
.aeo-compare__module-bars-card {
    border: 1px solid rgb(229 231 235);
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 1.25rem;
}
.dark .aeo-compare__module-bars-card {
    background-color: rgb(31 41 55);
    border-color: rgb(75 85 99);
}
.aeo-compare__module-bars-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: rgb(31 41 55);
}
.dark .aeo-compare__module-bars-title { color: rgb(243 244 246); }

.aeo-compare__module-bars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 2rem;
}
@media (min-width: 768px) {
    .aeo-compare__module-bars {
        grid-template-columns: repeat(2, 1fr);
    }
}

.aeo-compare__module-bar-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.aeo-compare__module-bar-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(31 41 55);
}
.dark .aeo-compare__module-bar-label { color: rgb(229 231 235); }

/* Per-bar pair (from / to) — track + fill + numeric value.
 * D-081: the "to" fill reads color from .aeo-band--* composed onto track. */
.aeo-compare__bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}
.aeo-compare__bar-row-key {
    flex: 0 0 2.5rem;
    color: rgb(107 114 128);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 0.6875rem;
}
.aeo-compare__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-compare__bar-row-track {
    background-color: rgb(75 85 99);
}
.aeo-compare__bar-row-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 800ms ease;
    background-color: rgb(156 163 175); /* default = "from" baseline gray */
}
/* Score-band variants on the track override the fill color (D-081). */
.aeo-compare__bar-row-track.aeo-band--great > .aeo-compare__bar-row-fill { background-color: var(--clr-success, #16a34a); }
.aeo-compare__bar-row-track.aeo-band--good  > .aeo-compare__bar-row-fill { background-color: #65a30d; }
.aeo-compare__bar-row-track.aeo-band--ok    > .aeo-compare__bar-row-fill { background-color: #ca8a04; }
.aeo-compare__bar-row-track.aeo-band--bad   > .aeo-compare__bar-row-fill { background-color: #dc2626; }
.aeo-compare__bar-row-track.aeo-band--pending {
    background-image: repeating-linear-gradient(
        45deg,
        rgb(229 231 235) 0,
        rgb(229 231 235) 6px,
        rgb(243 244 246) 6px,
        rgb(243 244 246) 12px
    );
}
.aeo-compare__bar-row-track.aeo-band--pending > .aeo-compare__bar-row-fill {
    background-color: rgb(156 163 175);
}
.dark .aeo-compare__bar-row-track.aeo-band--great > .aeo-compare__bar-row-fill { background-color: #4ade80; }
.dark .aeo-compare__bar-row-track.aeo-band--good  > .aeo-compare__bar-row-fill { background-color: #84cc16; }
.dark .aeo-compare__bar-row-track.aeo-band--ok    > .aeo-compare__bar-row-fill { background-color: #fbbf24; }
.dark .aeo-compare__bar-row-track.aeo-band--bad   > .aeo-compare__bar-row-fill { background-color: #f87171; }

.aeo-compare__bar-row-value {
    flex: 0 0 2.25rem;
    text-align: right;
    color: rgb(55 65 81);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
}
.dark .aeo-compare__bar-row-value { color: rgb(229 231 235); }

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

/* ============================================================
 * 4. Severity-filter bar
 * ============================================================ */
.aeo-compare__filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-radius: 0.5rem;
}
.dark .aeo-compare__filter-bar {
    background-color: rgb(38 38 38);
    border-color: rgb(75 85 99);
}
.aeo-compare__filter-bar-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(156 163 175);
    font-weight: 600;
    margin-right: 0.25rem;
}

/* ============================================================
 * 5. Collapsible group sections (page-delta + finding-delta)
 * ============================================================ */
.aeo-compare__groups {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.aeo-compare__group {
    border: 1px solid rgb(229 231 235);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #ffffff;
}
.dark .aeo-compare__group {
    background-color: rgb(31 41 55);
    border-color: rgb(75 85 99);
}
.aeo-compare__group-summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.aeo-compare__group-summary::-webkit-details-marker { display: none; }
.aeo-compare__group-summary:hover {
    background-color: rgb(249 250 251);
}
.dark .aeo-compare__group-summary:hover {
    background-color: rgb(55 65 81);
}
.aeo-compare__group-icon {
    font-size: 1.125rem;
    color: var(--txt-primary);
    flex-shrink: 0;
}
.aeo-compare__group-label {
    flex: 1 1 auto;
    font-weight: 600;
    color: rgb(31 41 55);
    font-size: 0.9375rem;
}
.dark .aeo-compare__group-label { color: rgb(243 244 246); }

/* Count badges in summary — composable per intent (resolved/new/total). */
.aeo-compare__group-counts {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.aeo-compare__count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
.aeo-compare__count--resolved {
    background-color: #ecfdf5;
    color: #047857;
}
.dark .aeo-compare__count--resolved {
    background-color: rgba(34, 197, 94, 0.18);
    color: #a7f3d0;
}
.aeo-compare__count--new {
    background-color: #fef2f2;
    color: #b91c1c;
}
.dark .aeo-compare__count--new {
    background-color: rgba(239, 68, 68, 0.18);
    color: #fecaca;
}
.aeo-compare__count--neutral {
    background-color: rgb(243 244 246);
    color: rgb(75 85 99);
}
.dark .aeo-compare__count--neutral {
    background-color: rgb(55 65 81);
    color: rgb(209 213 219);
}

.aeo-compare__group-chevron {
    font-size: 1.125rem;
    color: rgb(156 163 175);
    transition: transform 200ms ease;
    flex-shrink: 0;
}
.aeo-compare__group[open] .aeo-compare__group-chevron {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .aeo-compare__group-chevron { transition: none; }
}

.aeo-compare__group-body {
    padding: 0.5rem 1rem 1rem;
    border-top: 1px solid rgb(243 244 246);
}
.dark .aeo-compare__group-body { border-top-color: rgb(55 65 81); }

/* Hide the entire group when filter has emptied it */
.aeo-compare__group.is-filtered-empty {
    display: none;
}

/* ============================================================
 * 6. Finding-delta module section internals
 * ============================================================ */
/* Two-column grid: Resolved (left) / New (right). Stacks on narrow. */
.aeo-compare__finding-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 0.5rem;
}
@media (min-width: 768px) {
    .aeo-compare__finding-cols {
        grid-template-columns: 1fr 1fr;
    }
}

/* Column wrapper inside .aeo-compare__finding-cols grid. Min-width:0 lets
 * the URL groups inside truncate cleanly without forcing the grid to
 * overflow at narrow widths. */
.aeo-compare__finding-col {
    min-width: 0;
}
.aeo-compare__finding-col-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: rgb(107 114 128);
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid rgb(229 231 235);
}
.dark .aeo-compare__finding-col-head {
    border-bottom-color: rgb(75 85 99);
}
.aeo-compare__finding-col-head iconify-icon {
    font-size: 0.875rem;
}
.aeo-compare__finding-col-head--resolved { color: #047857; }
.dark .aeo-compare__finding-col-head--resolved { color: #6ee7b7; }
.aeo-compare__finding-col-head--new      { color: #b91c1c; }
.dark .aeo-compare__finding-col-head--new      { color: #fca5a5; }

.aeo-compare__finding-col-empty {
    padding: 0.625rem 0.75rem;
    color: rgb(156 163 175);
    font-size: 0.8125rem;
    font-style: italic;
}

/* Per-URL group inside a column — keeps the "where did this change?" axis
 * visible without re-introducing the page-grouping wall. */
.aeo-compare__url-group {
    margin-bottom: 0.875rem;
}
.aeo-compare__url-group:last-child { margin-bottom: 0; }
.aeo-compare__url-group-head {
    font-size: 0.6875rem;
    color: rgb(107 114 128);
    margin-bottom: 0.375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.dark .aeo-compare__url-group-head { color: rgb(156 163 175); }

/* Compact finding row inside compare's columns. Reuses .aeo-finding--{sev}
 * for the severity left-band but is denser than page-detail's full card. */
.aeo-compare__finding {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border-left: 3px solid rgb(209 213 219);
    background-color: rgb(249 250 251);
    margin-bottom: 0.375rem;
}
.aeo-compare__finding:last-child { margin-bottom: 0; }
.dark .aeo-compare__finding {
    background-color: rgb(38 38 38);
    border-left-color: rgb(75 85 99);
}
.aeo-compare__finding--critical { border-left-color: #ef4444; background-color: #fef2f2; }
.dark .aeo-compare__finding--critical { background-color: rgba(239, 68, 68, 0.12); }
.aeo-compare__finding--warning  { border-left-color: #f59e0b; background-color: #fffbeb; }
.dark .aeo-compare__finding--warning  { background-color: rgba(245, 158, 11, 0.12); }
.aeo-compare__finding--info     { border-left-color: #3b82f6; background-color: #eff6ff; }
.dark .aeo-compare__finding--info     { background-color: rgba(59, 130, 246, 0.12); }
.aeo-compare__finding--pass     { border-left-color: #22c55e; background-color: #f0fdf4; }
.dark .aeo-compare__finding--pass     { background-color: rgba(34, 197, 94, 0.12); }

.aeo-compare__finding-body {
    flex: 1 1 auto;
    min-width: 0;
}
.aeo-compare__finding-title {
    font-weight: 500;
    font-size: 0.8125rem;
    color: rgb(31 41 55);
    line-height: 1.35;
}
.dark .aeo-compare__finding-title { color: rgb(229 231 235); }
.aeo-compare__finding-meta {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: rgb(107 114 128);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.aeo-compare__finding-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Severity pill chip used inside finding meta */
.aeo-compare__finding-sev-pill {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}
.aeo-compare__finding-sev-pill--critical { background-color: #ef4444; }
.aeo-compare__finding-sev-pill--warning  { background-color: #f59e0b; }
.aeo-compare__finding-sev-pill--info     { background-color: #3b82f6; }
.aeo-compare__finding-sev-pill--pass     { background-color: #22c55e; }

/* When a severity filter is active, hide non-matching findings and
 * URL groups that have no remaining children. */
.aeo-compare__finding.is-hidden { display: none; }
.aeo-compare__url-group.is-empty { display: none; }
.aeo-compare__finding-col-empty.is-hidden { display: none; }

/* ============================================================
 * 7. Page-delta accordion (re-skin of the page-status groups)
 * ============================================================ */
.aeo-compare__page-table {
    width: 100%;
    font-size: 0.8125rem;
    border-collapse: collapse;
}
.aeo-compare__page-table thead tr {
    text-align: left;
    border-bottom: 1px solid rgb(229 231 235);
}
.dark .aeo-compare__page-table thead tr { border-bottom-color: rgb(75 85 99); }
.aeo-compare__page-table th {
    padding: 0.5rem 0.75rem;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: rgb(156 163 175);
}
.aeo-compare__page-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid rgb(243 244 246);
    vertical-align: top;
}
.dark .aeo-compare__page-table td { border-bottom-color: rgb(55 65 81); }
.aeo-compare__page-table tbody tr:last-child td { border-bottom: 0; }
.aeo-compare__page-url {
    max-width: 26rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(31 41 55);
}
.dark .aeo-compare__page-url { color: rgb(229 231 235); }
.aeo-compare__page-cell-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
 * 8. Empty / hint copy
 * ============================================================ */
.aeo-compare__empty {
    padding: 1rem;
    font-size: 0.875rem;
    color: rgb(107 114 128);
    border: 1px dashed rgb(229 231 235);
    border-radius: 0.5rem;
}
.dark .aeo-compare__empty {
    color: rgb(156 163 175);
    border-color: rgb(75 85 99);
}