/* aeo-audit: aeo-score-strip — Round 23 score strip with circular SVG gauge.
 *
 * Replaces the prior plain-text Page Score block + standalone severity filter
 * chip block (both removed in Round 23 per D-105's severity-surface unification).
 *
 * Single severity surface, dual-purpose by context:
 *   - Per-module pages: severity counts ARE the filter (.aeo-filter-chip
 *     elements that page-detail.js binds to).
 *   - Overview: severity counts are read-only stats (.aeo-score-strip__sev--readonly).
 *
 * Tokens: existing severity hexes, D-081 ScoreBand modifiers, brand purple.
 * NO new color tokens.
 */

.aeo-score-strip {
    /* outer card chrome composed via the card .border .rounded-lg classes
     * already on the partial's outer <div>. This block only owns the inner
     * layout. */

    /* Equal-height with the promo card beside it: the left column is a flex
     * column (page-detail.php), so the card grows to fill the column height the
     * grid stretches to. The card is itself a centered flex column so the
     * grouped content (gauge row + breakdown bar + summary) sits vertically
     * centered and the spare height splits evenly top and bottom instead of
     * pooling into one void at the bottom. When the row stacks on narrow screens
     * the column is no longer stretched, so the centering is a no-op. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aeo-score-strip__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
}

/* ─── Left zone: gauge + labels ─────────────────────────────────────────── */

.aeo-score-strip__gauge-block {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 0 0 auto;
}

.aeo-score-strip__gauge {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.aeo-score-strip__gauge-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.aeo-score-strip__gauge-track {
    stroke: rgb(229 231 235);
}
:is(.dark .aeo-score-strip__gauge-track) {
    stroke: rgb(64 64 64);
}

/* Foreground arc — color tracks ScoreBand (D-081) on the parent .__gauge */
.aeo-score-strip__gauge-fill {
    stroke: rgb(115 115 115); /* fallback */
    transition: stroke-dashoffset 0.8s cubic-bezier(.22,1,.36,1), stroke 0.3s ease;
}
.aeo-score-strip__gauge.aeo-band--great   .aeo-score-strip__gauge-fill { stroke: #22c55e; }
.aeo-score-strip__gauge.aeo-band--good    .aeo-score-strip__gauge-fill { stroke: #3b82f6; }
.aeo-score-strip__gauge.aeo-band--ok      .aeo-score-strip__gauge-fill { stroke: #f59e0b; }
.aeo-score-strip__gauge.aeo-band--bad     .aeo-score-strip__gauge-fill { stroke: #ef4444; }
.aeo-score-strip__gauge.aeo-band--pending .aeo-score-strip__gauge-fill { stroke: rgb(163 163 163); }

.aeo-score-strip__gauge-text {
    font-size: 24px;
    font-weight: 800;
    fill: rgb(23 23 23);
    font-family: inherit;
    letter-spacing: -0.02em;
}
:is(.dark .aeo-score-strip__gauge-text) {
    fill: #ffffff;
}

.aeo-score-strip__labels {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.aeo-score-strip__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(115 115 115);
}
:is(.dark .aeo-score-strip__eyebrow) {
    color: rgb(163 163 163);
}

.aeo-score-strip__ai-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(82 82 82);
}
:is(.dark .aeo-score-strip__ai-label) { color: rgb(212 212 212); }
.aeo-score-strip__ai-label.aeo-band--great { color: #15803d; }
.aeo-score-strip__ai-label.aeo-band--good  { color: #1e40af; }
.aeo-score-strip__ai-label.aeo-band--ok    { color: #b45309; }
.aeo-score-strip__ai-label.aeo-band--bad   { color: #b91c1c; }
:is(.dark .aeo-score-strip__ai-label.aeo-band--great) { color: #86efac; }
:is(.dark .aeo-score-strip__ai-label.aeo-band--good)  { color: #93c5fd; }
:is(.dark .aeo-score-strip__ai-label.aeo-band--ok)    { color: #fbbf24; }
:is(.dark .aeo-score-strip__ai-label.aeo-band--bad)   { color: #fca5a5; }

/* ─── Middle zone: severity counts ───────────────────────────────────────── */

.aeo-score-strip__sevs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    justify-content: flex-start;
}

/* Common severity pill chrome (interactive button OR read-only span) */
.aeo-score-strip__sev {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    border: 1px solid transparent;
}

.aeo-score-strip__sev-count {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.aeo-score-strip__sev-label {
    font-weight: 600;
}

/* Severity hue per band — matches Round 21 A1 + R20b finding-card palette */
.aeo-score-strip__sev--critical { background-color: #fee2e2; color: #b91c1c; }
.aeo-score-strip__sev--warning  { background-color: #fef3c7; color: #b45309; }
.aeo-score-strip__sev--info     { background-color: #dbeafe; color: #1d4ed8; }
.aeo-score-strip__sev--pass     { background-color: #dcfce7; color: #166534; }
:is(.dark .aeo-score-strip__sev--critical) { background-color: rgba(239,68,68,0.16);  color: #fca5a5; }
:is(.dark .aeo-score-strip__sev--warning)  { background-color: rgba(245,158,11,0.16); color: #fbbf24; }
:is(.dark .aeo-score-strip__sev--info)     { background-color: rgba(59,130,246,0.16); color: #93c5fd; }
:is(.dark .aeo-score-strip__sev--pass)     { background-color: rgba(34,197,94,0.16);  color: #86efac; }

/* Interactive severity button (per-module pages) — composed with .aeo-filter-chip
 * so existing page-detail.js click handlers bind without code changes. */
button.aeo-score-strip__sev {
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.05s ease;
    font-family: inherit;
}
button.aeo-score-strip__sev:hover { filter: brightness(0.96); }
button.aeo-score-strip__sev:active { transform: translateY(1px); }
button.aeo-score-strip__sev[aria-pressed="true"] {
    border-color: currentColor;
    box-shadow: 0 0 0 2px rgb(var(--bg-primary-rgb, 124 58 237) / 0.18);
}

/* Read-only stat (Overview) — explicitly non-interactive */
.aeo-score-strip__sev--readonly {
    cursor: default;
}

/* "Show all" reset button — small underline link style */
.aeo-score-strip__sev-all {
    background: transparent;
    border: none;
    color: rgb(115 115 115);
    text-decoration: underline;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-family: inherit;
}
.aeo-score-strip__sev-all:hover { color: rgb(23 23 23); }
:is(.dark .aeo-score-strip__sev-all) { color: rgb(163 163 163); }
:is(.dark .aeo-score-strip__sev-all):hover { color: #ffffff; }

/* ─── Right zone: Re-scan button ─────────────────────────────────────────── */

.aeo-score-strip__rescan {
    flex: 0 0 auto;
    margin: 0;
}

/* ─── Breakdown: segmented severity bar + summary (Option A height balancer) ─
 * Sits below the top row, separated by a 0.5px border. Segment widths are set
 * inline (computed proportions); hues reuse the same severity family used by
 * the gauge fills and chips above. No new color tokens. */

.aeo-score-strip__breakdown {
    border-top: 0.5px solid rgb(229 231 235);
    padding: 0.625rem 1.25rem 0.875rem;
}
:is(.dark .aeo-score-strip__breakdown) {
    border-top-color: rgb(64 64 64);
}

/* The bar is a fixed-height flex track. Height is set on BOTH the track and the
 * segments (not height:100% on the children) so the row can never collapse to
 * 0, and line-height:0 kills inline whitespace between the spans. */
.aeo-score-strip__bar {
    display: flex;
    width: 100%;
    height: 8px;
    min-height: 8px;
    line-height: 0;
    border-radius: 9999px;
    overflow: hidden;
    background-color: rgb(243 244 246);
}
:is(.dark .aeo-score-strip__bar) {
    background-color: rgb(38 38 38);
}

.aeo-score-strip__bar-seg {
    display: block;
    height: 8px;
    align-self: stretch;
    flex-shrink: 0;
}
.aeo-score-strip__bar-seg--critical { background-color: #ef4444; }
.aeo-score-strip__bar-seg--warning  { background-color: #f59e0b; }
.aeo-score-strip__bar-seg--info     { background-color: #3b82f6; }
.aeo-score-strip__bar-seg--pass     { background-color: #22c55e; }
.aeo-score-strip__bar-seg--empty    { background-color: transparent; }

.aeo-score-strip__summary {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(115 115 115);
    font-variant-numeric: tabular-nums;
}
:is(.dark .aeo-score-strip__summary) {
    color: rgb(163 163 163);
}

/* ─── Mobile: stack vertically ───────────────────────────────────────────── */

@media (max-width: 768px) {
    .aeo-score-strip__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.875rem;
    }
    .aeo-score-strip__gauge-block { justify-content: center; }
    .aeo-score-strip__sevs { justify-content: center; }
    .aeo-score-strip__rescan { display: flex; justify-content: center; }
    .aeo-score-strip__rescan .btn { width: 100%; justify-content: center; }
}