/* ============================================================================
   AEO area pages - visual taxonomy for time windows
   Used by /invest/<slug>, /invest/m/<slug>, and /guides/investing-in-...
   See templates/components/aeo_window_badge.html and the section legend bar.
   ============================================================================ */

.aeo-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    border-radius: 3px;
    vertical-align: middle;
    cursor: help;
    user-select: none;
    border: 1px solid transparent;
}

.aeo-badge-now      { background: #e3f2fd; color: #0b4f8a; border-color: #bbdefb; }
.aeo-badge-12m      { background: #fff3e0; color: #8a4a00; border-color: #ffe0b2; }
.aeo-badge-acs      { background: #ede7f6; color: #4527a0; border-color: #d1c4e9; }
.aeo-badge-blended  { background: #f5f5f5; color: #424242; border-color: #e0e0e0; }

/* As-of line shown directly under each section <h2>. */
.aeo-section-asof {
    margin: 0 0 1rem 0;
    color: #6c757d;
    font-size: 0.85rem;
    font-style: italic;
}
.aeo-section-asof time { font-style: normal; font-weight: 500; }

/* Top-of-page legend strip explaining the three badges. */
.aeo-legend-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0.9rem;
    margin: 0 0 1.25rem 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #495057;
}
.aeo-legend-bar .aeo-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.aeo-legend-bar .aeo-legend-item .aeo-badge { margin-left: 0; }

/* Compare-table row-group header. */
.aeo-rowgroup th {
    background: #f1f3f5 !important;
    color: #495057;
    font-weight: 600;
    font-size: 0.85rem;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    text-align: left;
    border-top: 2px solid #dee2e6 !important;
}

/* Mobile tightening. */
@media (max-width: 576px) {
    .aeo-legend-bar { font-size: 0.78rem; gap: 0.5rem; padding: 0.5rem 0.7rem; }
    .aeo-badge { font-size: 0.65rem; padding: 0.1rem 0.35rem; margin-left: 0.3rem; }
}