/* AEO Overview surface — M2.WU 2.6
 *
 * Layout restored to v5 prototype (docs/aeo/prototypes/iato-aeo-overview-v5.html):
 *   - Top stat-card row (4 cards)
 *   - "Two scores, two scopes" explainer panel
 *   - Single 6-card sub-score grid with Google/Other/All face-filter pills
 *   - 2-col priorities (lg:col-span-2) + trend (lg:col-span-1)
 *
 * Theme system: AEO surfaces consume the dashboard-wide variable system
 * passively. Default tokens below resolve under light mode; the [data-mode="dark"]
 * block re-defines them for dark. The existing toggle in My Account
 * (setThemeMode() at dashboard-ui.js:18) is the single source of truth — this
 * WU adds no new toggle UI per M2.WU 2.6 Locked Decision #8.
 */

/* === IATO design tokens (carried forward from v5 prototype) ============= */
:root {
    --face-google: #2563eb;
    --face-other: #a855f7;
    --aeo-theme: #2563eb;
    --aeo-theme-hover: #1d4ed8;
    --aeo-theme-light: #dbeafe;
    --aeo-bg-primary: #f3f4f6;
    --aeo-bg-secondary: #ffffff;
    --aeo-bg-tertiary: #f9fafb;
    --aeo-bg-hover: #f3f4f6;
    --aeo-text-primary: #111827;
    --aeo-text-secondary: #374151;
    --aeo-text-tertiary: #6b7280;
    --aeo-text-muted: #9ca3af;
    --aeo-border-color: #e5e7eb;
    --aeo-border-light: #f3f4f6;
    --aeo-card-bg: #ffffff;
}
[data-mode="dark"] {
    --aeo-bg-primary: #000000;
    --aeo-bg-secondary: #0a0a0a;
    --aeo-bg-tertiary: #141414;
    --aeo-bg-hover: #1a1a1a;
    --aeo-text-primary: #ffffff;
    --aeo-text-secondary: #e5e7eb;
    --aeo-text-tertiary: #a1a1aa;
    --aeo-text-muted: #71717a;
    --aeo-border-color: #27272a;
    --aeo-border-light: #3f3f46;
    --aeo-card-bg: #0a0a0a;
    --aeo-theme-light: rgba(37, 99, 235, 0.16);
}

/* === Header row ========================================================= */
.aeo-overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.aeo-overview-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--aeo-text-primary);
}
.aeo-overview-subtitle {
    font-size: 0.875rem;
    color: var(--aeo-text-tertiary);
}
.aeo-overview-subtitle .aeo-last-scan-empty { color: var(--aeo-text-muted); }
.aeo-overview-subtitle .aeo-link {
    color: var(--aeo-theme);
    cursor: pointer;
}
.aeo-overview-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* === Buttons (lifted from prototype lines 146-160) ====================== */
.aeo-btn-primary {
    background: var(--aeo-theme);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.aeo-btn-primary:hover:not(:disabled) { background: var(--aeo-theme-hover); }
.aeo-btn-primary:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.aeo-btn-secondary {
    background: var(--aeo-card-bg);
    color: var(--aeo-text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: 1px solid var(--aeo-border-color);
    transition: all 0.15s;
}
.aeo-btn-secondary:hover:not(:disabled) {
    background: var(--aeo-bg-hover);
    color: var(--aeo-text-primary);
}
.aeo-btn-secondary:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* === Top stat-card row (4 cards) ======================================== */
.aeo-stat-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .aeo-stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .aeo-stat-row { grid-template-columns: repeat(4, 1fr); }
}
.aeo-stat-card {
    background: var(--aeo-card-bg);
    border: 1px solid var(--aeo-border-color);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5rem;
}
.aeo-stat-num {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.aeo-stat-num.aeo-stat-num-pending {
    color: var(--aeo-text-muted);
}
.aeo-stat-label {
    font-size: 0.875rem;
    color: var(--aeo-text-tertiary);
    margin-top: 2px;
}
.aeo-stat-caption {
    font-size: 0.75rem;
    color: var(--aeo-text-muted);
    margin-top: 2px;
}
.aeo-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* === Panel cards (explainer, layer-grid, priorities, trend) ============= */
.aeo-panel {
    background: var(--aeo-card-bg);
    border: 1px solid var(--aeo-border-color);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
.aeo-panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--aeo-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.aeo-panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--aeo-text-primary);
}
.aeo-panel-body { padding: 1.25rem; }

/* Explainer panel — blue left-border */
.aeo-explainer {
    border-left: 3px solid var(--aeo-theme);
}
.aeo-explainer-body {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--aeo-text-secondary);
    line-height: 1.55;
}
.aeo-explainer-body strong {
    color: var(--aeo-text-primary);
    font-weight: 600;
}
.aeo-explainer-body .muted { color: var(--aeo-text-tertiary); }
.aeo-face-google-text { color: var(--face-google); font-weight: 500; }
.aeo-face-other-text { color: var(--face-other); font-weight: 500; }

/* === Face-filter pills =================================================== */
.aeo-face-filter {
    display: inline-flex;
    gap: 2px;
    background: var(--aeo-bg-tertiary);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--aeo-border-color);
}
.aeo-face-pill {
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 500;
    background: transparent;
    color: var(--aeo-text-tertiary);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.aeo-face-pill:hover { color: var(--aeo-text-primary); }
.aeo-face-pill.active {
    background: var(--aeo-card-bg);
    color: var(--aeo-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
[data-mode="dark"] .aeo-face-pill.active { background: var(--aeo-bg-hover); }
.aeo-face-pill .aeo-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.aeo-face-pill[data-face="google"] .aeo-pill-dot { background: var(--face-google); }
.aeo-face-pill[data-face="other"] .aeo-pill-dot { background: var(--face-other); }
.aeo-face-pill[data-face="all"] .aeo-pill-dot {
    background: linear-gradient(90deg, var(--face-google) 50%, var(--face-other) 50%);
}

/* === Sub-score grid (single grid, 6 cards) ============================== */
.aeo-layer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .aeo-layer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .aeo-layer-grid { grid-template-columns: repeat(6, 1fr); }
}
.aeo-subscore-card {
    background: var(--aeo-card-bg);
    border: 1px solid var(--aeo-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    display: block;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.aeo-subscore-card:hover { border-color: var(--aeo-theme); }
.aeo-subscore-card .aeo-layer-label {
    font-size: 0.7rem;
    color: var(--aeo-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aeo-applies-dots {
    display: inline-flex;
    gap: 3px;
}
.aeo-applies-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.aeo-applies-dot.g { background: var(--face-google); }
.aeo-applies-dot.o { background: var(--face-other); }
.aeo-applies-dot.muted { opacity: 0.18; }

/* Single-face view (g / o selected): one big number */
.aeo-subscore-card .aeo-face-score {
    display: none;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}
.aeo-subscore-card .aeo-face-score .aeo-num {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.aeo-subscore-card .aeo-face-score.google { color: var(--face-google); }
.aeo-subscore-card .aeo-face-score.other { color: var(--face-other); }
.aeo-subscore-card .aeo-face-score .aeo-num.aeo-num-missing { color: var(--aeo-text-muted); }

/* Stacked view (All selected): two rows, smaller numbers */
.aeo-subscore-card .aeo-face-stack { display: none; flex-direction: column; gap: 8px; }
.aeo-subscore-card .aeo-face-stack .aeo-face-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.aeo-subscore-card .aeo-face-stack .aeo-face-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aeo-text-tertiary);
    font-weight: 500;
}
.aeo-subscore-card .aeo-face-stack .aeo-face-row .aeo-num {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.aeo-subscore-card .aeo-face-stack .aeo-face-row.unmeasured .aeo-num {
    color: var(--aeo-text-muted);
}

/* Progress bar (single-face only) */
.aeo-progress-track {
    height: 6px;
    background: var(--aeo-border-color);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}
.aeo-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease, background 0.2s ease;
    background: var(--aeo-text-muted);
}

/* "Not measured" caption (single-face on a non-applicable card) */
.aeo-not-measured {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--aeo-text-muted);
    padding-top: 4px;
}
.aeo-not-measured svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* === Face-filter selection machinery ===================================== */
/* All selected (default): show stacked view, hide progress bar */
#aeo-layer-grid[data-face="all"] .aeo-subscore-card .aeo-face-stack { display: flex; }
#aeo-layer-grid[data-face="all"] .aeo-subscore-card .aeo-progress-track { display: none; }

/* Google selected */
#aeo-layer-grid[data-face="google"] .aeo-subscore-card[data-google] .aeo-face-score.google { display: flex; }
#aeo-layer-grid[data-face="google"] .aeo-subscore-card[data-google] .aeo-progress-fill { background: var(--face-google); }
#aeo-layer-grid[data-face="google"] .aeo-subscore-card:not([data-google]) { opacity: 0.45; }
#aeo-layer-grid[data-face="google"] .aeo-subscore-card:not([data-google]) .aeo-not-measured { display: flex; }
#aeo-layer-grid[data-face="google"] .aeo-subscore-card:not([data-google]) .aeo-progress-track { display: none; }

/* Other selected */
#aeo-layer-grid[data-face="other"] .aeo-subscore-card[data-other] .aeo-face-score.other { display: flex; }
#aeo-layer-grid[data-face="other"] .aeo-subscore-card[data-other] .aeo-progress-fill { background: var(--face-other); }
#aeo-layer-grid[data-face="other"] .aeo-subscore-card:not([data-other]) { opacity: 0.45; }
#aeo-layer-grid[data-face="other"] .aeo-subscore-card:not([data-other]) .aeo-not-measured { display: flex; }
#aeo-layer-grid[data-face="other"] .aeo-subscore-card:not([data-other]) .aeo-progress-track { display: none; }

/* === Two-column row: priorities + trend ================================= */
.aeo-bottom-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 1024px) {
    .aeo-bottom-row { grid-template-columns: 2fr 1fr; }
}

/* === Priorities table (data-table) ====================================== */
.aeo-data-table {
    width: 100%;
    border-collapse: collapse;
}
.aeo-data-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--aeo-border-color);
    color: var(--aeo-text-secondary);
    vertical-align: top;
}
.aeo-data-table tr:last-child td { border-bottom: none; }
.aeo-data-table tr:hover td { background: var(--aeo-bg-hover); }
.aeo-data-table tr { cursor: default; }
.aeo-data-table .aeo-row-num {
    width: 30px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--aeo-text-tertiary);
}
.aeo-data-table .aeo-row-title {
    font-weight: 500;
    color: var(--aeo-text-primary);
    line-height: 1.35;
}
.aeo-data-table .aeo-row-desc {
    font-size: 0.75rem;
    color: var(--aeo-text-tertiary);
    margin-top: 2px;
    line-height: 1.4;
}
.aeo-data-table .aeo-cell-layer { width: 110px; }
.aeo-data-table .aeo-cell-faces { width: 140px; }
.aeo-row-faces {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Layer pill — colored per layer string in the priority response */
.aeo-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.aeo-layer-access { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.aeo-layer-tokens { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.aeo-layer-capability { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.aeo-layer-content { background: rgba(56, 189, 248, 0.12); color: #0ea5e9; }
.aeo-layer-discovery { background: rgba(56, 189, 248, 0.12); color: #0ea5e9; }
.aeo-layer-visibility { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
.aeo-layer-other { background: var(--aeo-bg-tertiary); color: var(--aeo-text-tertiary); }

/* Face pills inside table rows (low-key vs. the gauge variants) */
.aeo-row-face {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
}
.aeo-row-face-google {
    background: rgba(37, 99, 235, 0.12);
    color: var(--face-google);
    border-color: rgba(37, 99, 235, 0.25);
}
.aeo-row-face-other {
    background: rgba(168, 85, 247, 0.12);
    color: var(--face-other);
    border-color: rgba(168, 85, 247, 0.25);
}

.aeo-priorities-empty {
    padding: 1.5rem 1.25rem;
    font-size: 0.875rem;
    color: var(--aeo-text-tertiary);
    text-align: center;
}

.aeo-priorities-error {
    margin: 1rem 1.25rem;
    font-size: 0.875rem;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
}

/* === Trend chart panel =================================================== */
.aeo-trend-canvas-host {
    position: relative;
    height: 140px;
    width: 100%;
}
.aeo-trend-axis-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--aeo-text-muted);
    margin-top: 8px;
}
.aeo-trend-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--aeo-border-color);
    font-size: 0.78rem;
}
.aeo-trend-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--aeo-text-tertiary);
}
.aeo-trend-legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.aeo-trend-legend-swatch.google { background: var(--face-google); }
.aeo-trend-legend-swatch.other  { background: var(--face-other); }
.aeo-trend-caption {
    font-size: 0.8125rem;
    color: var(--aeo-text-tertiary);
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}
.aeo-trend-empty {
    font-size: 0.875rem;
    color: var(--aeo-text-tertiary);
    text-align: center;
    padding: 1.5rem 1rem;
}
.aeo-trend-error {
    font-size: 0.875rem;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin: 0;
}

/* === State pane (full-page error states; preserved from WU 2.3) ========= */
.aeo-state-pane {
    background: var(--aeo-card-bg);
    border: 1px solid var(--aeo-border-color);
    border-radius: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--aeo-text-tertiary);
}
.aeo-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--aeo-text-secondary);
    margin-bottom: 0.5rem;
}
.aeo-state-body {
    font-size: 0.875rem;
    color: var(--aeo-text-tertiary);
    max-width: 32rem;
    margin: 0 auto;
}

/* === Skeleton bones (preserved from WU 2.3) ============================= */
.aeo-skeleton {
    background: linear-gradient(90deg,
        var(--aeo-border-light) 0%,
        var(--aeo-border-color) 50%,
        var(--aeo-border-light) 100%);
    background-size: 200% 100%;
    animation: aeoShimmer 1.2s ease-in-out infinite;
    border-radius: 0.375rem;
}
@keyframes aeoShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
 * AEO Access tab — M3.WU 3.3
 *
 * Matrix UI: rows = pages, columns = agents (9-UA preset), cells = status
 * badges. Matrix and badge styles ported from
 * docs/aeo/iato-ai-visibility-prototype-v4.html lines 166-170 (the .data-table
 * block), adapted to use --aeo-* tokens for parity with the existing aeo.css
 * file rather than the prototype's bare --text-*/--border-* names. Visual
 * output identical; variable-resolution layer differs.
 *
 * Token-only UA differentiation per M3_PLAYBOOK §Open follow-ups #12:
 *   Three robots.txt-only tokens (Google-Extended, anthropic-ai,
 *   Applebot-Extended) render with italic column header + "robots.txt only"
 *   subtitle so the visual stands out without inventing a badge component.
 *
 * Click handler stub for WU 3.6: cells are role="button"; the click opens
 * a placeholder modal. WU 3.6 swaps the modal body for the real
 * view-as-agent panel without touching the table render path.
 * ========================================================================== */

/* Matrix container layout */
.aeo-matrix-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.aeo-matrix-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.aeo-matrix-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--aeo-text-primary);
    margin: 0 0 0.25rem;
}
.aeo-matrix-subtitle {
    font-size: 0.875rem;
    color: var(--aeo-text-tertiary);
    margin: 0;
}

/* Scroll wrapper — matrix can be wide (9 UA columns + url column) */
.aeo-matrix-scroll {
    background: var(--aeo-card-bg);
    border: 1px solid var(--aeo-border-color);
    border-radius: 0.5rem;
    overflow-x: auto;
}

/* === data-table — ported from prototype lines 166-170 ==================== */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--aeo-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--aeo-border-color);
    background: var(--aeo-bg-tertiary);
}
.data-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--aeo-border-color);
    color: var(--aeo-text-secondary);
}
.data-table tr:last-child td {
    border-bottom: none;
}
.data-table tr:hover td {
    background: var(--aeo-bg-hover);
}

/* Page URL column — sticky-left for wide tables, monospace */
.aeo-matrix-url-col {
    min-width: 16rem;
    max-width: 24rem;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

/* Token-only UA column variant — italic name + "robots.txt only" subtitle */
.ua-col.ua-token-only em {
    font-style: italic;
    color: var(--aeo-text-secondary);
}
.ua-subtitle {
    display: block;
    font-size: 0.625rem;
    color: var(--aeo-text-tertiary);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 0.125rem;
    font-style: normal;
}

/* Cell — click target for the WU 3.6 view-as-agent panel */
.aeo-matrix-cell {
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.aeo-matrix-cell:hover {
    background: var(--aeo-bg-hover);
}
.aeo-matrix-cell:focus-visible {
    outline: 2px solid var(--aeo-theme);
    outline-offset: -2px;
}

/* Status badges — mirror page_agent_access.status ENUM
 * (ok / blocked / partial / http_403 / http_429 / timeout / error)
 * plus synthesized 'no_data' for missing (page, agent) pairs. */
.aeo-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.aeo-status-badge.status-ok {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}
.aeo-status-badge.status-blocked,
.aeo-status-badge.status-http_403 {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}
.aeo-status-badge.status-http_429 {
    color: #b45309;
    background: rgba(234, 179, 8, 0.16);
}
.aeo-status-badge.status-partial {
    color: #854d0e;
    background: rgba(234, 179, 8, 0.16);
}
.aeo-status-badge.status-timeout {
    color: #c2410c;
    background: rgba(249, 115, 22, 0.14);
}
.aeo-status-badge.status-error {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}
.aeo-status-badge.status-no_data {
    color: var(--aeo-text-muted);
    background: var(--aeo-border-light);
}
[data-mode="dark"] .aeo-status-badge.status-ok       { color: #34d399; background: rgba(16, 185, 129, 0.18); }
[data-mode="dark"] .aeo-status-badge.status-blocked,
[data-mode="dark"] .aeo-status-badge.status-http_403 { color: #f87171; background: rgba(239, 68, 68, 0.18); }
[data-mode="dark"] .aeo-status-badge.status-http_429,
[data-mode="dark"] .aeo-status-badge.status-partial  { color: #fbbf24; background: rgba(234, 179, 8, 0.22); }
[data-mode="dark"] .aeo-status-badge.status-timeout  { color: #fb923c; background: rgba(249, 115, 22, 0.20); }
[data-mode="dark"] .aeo-status-badge.status-error    { color: #f87171; background: rgba(239, 68, 68, 0.18); }
[data-mode="dark"] .aeo-status-badge.status-no_data  { color: var(--aeo-text-muted); background: rgba(255, 255, 255, 0.04); }

/* Pagination controls below the matrix */
.aeo-matrix-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.25rem 0.25rem;
    font-size: 0.875rem;
    color: var(--aeo-text-tertiary);
}
.aeo-matrix-pagination .aeo-matrix-pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.aeo-matrix-pagination button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Cell-detail stub modal — WU 3.6 swaps its body content in place */
.aeo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.aeo-modal {
    background: var(--aeo-card-bg);
    color: var(--aeo-text-primary);
    border: 1px solid var(--aeo-border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    max-width: 28rem;
    width: calc(100% - 2rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.aeo-modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.aeo-modal-body {
    font-size: 0.875rem;
    color: var(--aeo-text-secondary);
    margin: 0 0 1rem;
}
.aeo-modal-actions {
    display: flex;
    justify-content: flex-end;
}

/* Empty-state pane — matrix renders zero pages */
.aeo-matrix-empty {
    background: var(--aeo-card-bg);
    border: 1px solid var(--aeo-border-color);
    border-radius: 0.5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--aeo-text-tertiary);
}
.aeo-matrix-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--aeo-text-secondary);
    margin: 0 0 0.5rem;
}
.aeo-matrix-empty-body {
    font-size: 0.875rem;
    max-width: 32rem;
    margin: 0 auto;
}
/* ==== end M3.WU 3.3 ==== */

/* ==========================================================================
 *  M3.WU 3.4 + 3.6 (paired) — robots-analysis modal + view-as side panel.
 *
 *  D5 convention (operator-pinned session-5; carry to WU 3.5 + M4+ panels):
 *  - Tokens only (var(--aeo-*)); no hardcoded colors. The legacy
 *    .aeo-modal-overlay backdrop (rgba(0,0,0,0.45)) is inherited by the
 *    centered shape — leaving that as-is is WU-3.3 scope; both new shapes
 *    consume var(--aeo-*) tokens for all content surfaces.
 *  - Three-way dismiss handled in JS (Escape / click-outside / explicit
 *    close button).
 *  - Focus trap + restoration handled in JS.
 *  - ARIA attributes (role=dialog, aria-modal=true, aria-labelledby) wired
 *    in the panel scaffold helper.
 *
 *  Future detail panels (WU 3.5 JS-rendering test, M4 file-presence, etc.)
 *  should reuse the .aeo-side-panel container shape and the .aeo-panel-*
 *  inner classes; the panel-helper JS (`_openPanel`) is the convention.
 * ========================================================================== */

/* Matrix header — add an actions slot for the robots-analysis trigger */
.aeo-matrix-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ─── Shared panel inner shell (used by both shapes) ───────────────────── */
.aeo-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--aeo-border-color);
    margin-bottom: 1rem;
}
.aeo-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--aeo-text-primary);
    margin: 0;
}
.aeo-panel-close {
    background: transparent;
    border: 0;
    color: var(--aeo-text-tertiary);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}
.aeo-panel-close:hover {
    background: var(--aeo-bg-hover);
    color: var(--aeo-text-primary);
}
.aeo-panel-close:focus-visible {
    outline: 2px solid var(--aeo-theme);
    outline-offset: 2px;
}
.aeo-panel-body {
    font-size: 0.875rem;
    color: var(--aeo-text-secondary);
}
.aeo-panel-section + .aeo-panel-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--aeo-border-light);
}

/* ─── Side-sliding panel (WU 3.6 view-as — convention-establishing) ───── */
.aeo-side-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);  /* matches legacy backdrop weight */
    display: flex;
    justify-content: flex-end;
    z-index: 9999;
}
.aeo-side-panel {
    background: var(--aeo-card-bg);
    color: var(--aeo-text-primary);
    border-left: 1px solid var(--aeo-border-color);
    width: min(28rem, 100vw);
    height: 100vh;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    box-shadow: -8px 0 24px -8px rgba(0, 0, 0, 0.18);
    /* Slide-in: animate from off-canvas to in-canvas. Respects prefers-
       reduced-motion via the global override below. */
    animation: aeo-side-panel-slidein 220ms ease-out;
}
@keyframes aeo-side-panel-slidein {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .aeo-side-panel { animation: none; }
}

/* ─── view-as panel inner shapes ──────────────────────────────────────── */
.aeo-panel-statusrow {
    margin-bottom: 1rem;
}
.aeo-panel-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}
.aeo-panel-dt {
    font-weight: 500;
    color: var(--aeo-text-tertiary);
    margin: 0;
}
.aeo-panel-dd {
    margin: 0;
    color: var(--aeo-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    word-break: break-word;
}
.aeo-panel-trunc {
    background: var(--aeo-theme-light);
    color: var(--aeo-text-primary);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
}
.aeo-panel-excerpt {
    margin-bottom: 0.75rem;
    border: 1px solid var(--aeo-border-color);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--aeo-bg-tertiary);
}
.aeo-panel-excerpt > summary {
    cursor: pointer;
    color: var(--aeo-text-secondary);
    font-weight: 500;
    user-select: none;
}
.aeo-panel-pre {
    margin: 0.5rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--aeo-text-primary);
    max-height: 18rem;
    overflow-y: auto;
}
.aeo-panel-empty {
    color: var(--aeo-text-tertiary);
    font-style: italic;
    margin: 0;
}
.aeo-panel-error {
    color: var(--aeo-text-primary);
    background: var(--aeo-theme-light);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin: 0;
}

/* ─── robots-analysis modal inner shapes ──────────────────────────────── */
.aeo-panel-pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.aeo-panel-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--aeo-border-color);
    background: var(--aeo-bg-tertiary);
    color: var(--aeo-text-secondary);
}
.aeo-panel-pill.ok {
    background: var(--aeo-theme-light);
    color: var(--aeo-text-primary);
    border-color: var(--aeo-theme);
}
.aeo-panel-pill.warn {
    background: var(--aeo-bg-hover);
    color: var(--aeo-text-primary);
    border-color: var(--aeo-text-tertiary);
}
.aeo-panel-pill.neutral {
    color: var(--aeo-text-tertiary);
}
.aeo-panel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.aeo-panel-table th,
.aeo-panel-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--aeo-border-light);
}
.aeo-panel-table th {
    color: var(--aeo-text-tertiary);
    font-weight: 500;
}
.aeo-panel-agent {
    color: var(--aeo-text-primary);
    font-weight: 500;
}
.aeo-panel-agent .ua-subtitle {
    display: block;
    font-size: 0.6875rem;
    color: var(--aeo-text-tertiary);
    font-weight: 400;
    font-style: normal;
}

/* The robots-analysis modal reuses the existing .aeo-modal-overlay backdrop
 * (centered shape) from WU 3.3 — only the inner panel shell + content
 * classes above are net-new for this WU. */

/* ==== end M3.WU 3.4 + 3.6 ==== */


/* ==== M3.WU 3.5 — JS rendering probe ===================================== */

/* Per-cell probe trigger button — small icon-style affordance rendered
 * alongside the status badge inside every matrix cell. Discoverability
 * affordance: every cell shows the icon; all open the same page-scoped
 * panel (the probe is page-scoped, not per-agent). */
.aeo-probe-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    background: var(--aeo-bg-tertiary);
    color: var(--aeo-text-secondary);
    border: 1px solid var(--aeo-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}
.aeo-probe-trigger:hover {
    background: var(--aeo-theme-light);
    color: var(--aeo-text-primary);
    border-color: var(--aeo-theme);
}
.aeo-probe-trigger:focus-visible {
    outline: 2px solid var(--aeo-theme);
    outline-offset: 1px;
}
.aeo-probe-trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Probe result — CSR-only sentence list rendered after a successful probe. */
.aeo-probe-csr-list {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
    list-style: disc;
    font-size: 0.8125rem;
    color: var(--aeo-text-secondary);
}
.aeo-probe-csr-list li {
    margin-bottom: 0.25rem;
    word-break: break-word;
}

/* Section heading inside probe panel — small uppercase label. */
.aeo-panel-h3 {
    margin: 1rem 0 0.5rem 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aeo-text-tertiary);
}
.aeo-panel-h3:first-child {
    margin-top: 0;
}

/* ==== end M3.WU 3.5 ===================================================== */