/* ============================================================
   AFP Fund Comparison — side-by-side analytics page.
   Loads on top of afp_data.css. Inherits the navy palette and
   the .afp-card / .afp-section-head / .afp-metric-card shapes.
   ============================================================ */

.afp-compare-toolbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.afp-compare-toolbar > .afp-back { margin-bottom: 0; }
.afp-compare-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Two-fund header: navy chips identifying the funds in the comparison. */
.afp-compare-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}
.afp-compare-chip {
    background: hsl(var(--primary));
    color: #fff;
    border-radius: var(--radius);
    padding: 0.85rem 1.05rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.afp-compare-chip .afp-compare-chip-isin {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}
.afp-compare-chip .afp-compare-chip-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.afp-compare-chip .afp-compare-chip-meta {
    font-size: 0.75rem;
    opacity: 0.78;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
}
.afp-compare-chip .afp-compare-chip-meta span {
    background: rgba(255, 255, 255, 0.18);
    padding: 0.05rem 0.45rem;
    border-radius: 0.35rem;
}
.afp-compare-vs {
    display: flex; align-items: center; justify-content: center;
    color: hsl(var(--muted-foreground));
    font-size: 0.95rem; font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Empty-state center column where the user picks the second fund. */
.afp-compare-picker {
    background: hsl(var(--background));
    border: 2px dashed hsl(var(--border-strong));
    border-radius: var(--radius);
    padding: 0.85rem 1.05rem;
    display: flex; flex-direction: column; gap: 0.45rem;
    color: hsl(var(--muted-foreground));
}
.afp-compare-picker label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin: 0;
}
.afp-compare-picker .afp-compare-search-wrap {
    position: relative;
}
.afp-compare-picker input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    background: #fff;
    color: hsl(var(--ink));
    font-size: 0.85rem;
    box-sizing: border-box;
}
.afp-compare-search-results {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
    z-index: 10;
    display: none;
    margin-top: 0.25rem;
}
.afp-compare-search-results.show { display: block; }
.afp-compare-search-result {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid hsl(var(--border));
    cursor: pointer;
    font-size: 0.83rem;
    color: hsl(var(--ink));
}
.afp-compare-search-result:last-child { border-bottom: none; }
.afp-compare-search-result:hover { background: hsl(var(--background)); }
.afp-compare-search-result .name { font-weight: 600; }
.afp-compare-search-result .meta {
    font-size: 0.72rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.1rem;
}
.afp-compare-search-result code {
    font-size: 0.7rem;
    background: hsl(var(--background));
    color: hsl(var(--primary));
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    margin-right: 0.35rem;
}

/* Period selector — segmented control identical to dashboard AUM trend. */
.afp-compare-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.afp-compare-period-group {
    display: inline-flex;
    background: #fff;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.afp-compare-period-btn {
    padding: 0.35rem 0.85rem;
    background: transparent;
    color: hsl(var(--muted-foreground));
    border: none;
    border-right: 1px solid hsl(var(--border));
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.afp-compare-period-btn:last-child { border-right: none; }
.afp-compare-period-btn:hover { color: hsl(var(--primary)); }
.afp-compare-period-btn.active {
    background: hsl(var(--primary));
    color: #fff;
}
.afp-compare-period-custom {
    display: none;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: hsl(var(--muted-foreground));
}
.afp-compare-period-custom.show { display: inline-flex; }
.afp-compare-period-custom input {
    width: 4rem;
    padding: 0.22rem 0.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* Stats panel: two columns (one per fund) + diff column in the middle. */
.afp-compare-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.afp-compare-stats-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem;
}
.afp-compare-stats-card h6 {
    font-size: 0.75rem;
    font-weight: 700;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.7rem;
}
.afp-compare-stat-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px dashed hsl(var(--border));
    font-size: 0.85rem;
}
.afp-compare-stat-row:last-child { border-bottom: none; }
.afp-compare-stat-row .stat-label { color: hsl(var(--muted-foreground)); font-weight: 500; }
.afp-compare-stat-row .stat-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: hsl(var(--ink));
}
.afp-compare-stat-row .stat-value.pos { color: hsl(var(--chart-2)); }
.afp-compare-stat-row .stat-value.neg { color: hsl(var(--chart-3)); }

/* Charts row: 2x2 grid on desktop, single column on tablet/phone. */
.afp-compare-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
/* Tablet o menos (<1024px — ver _breakpoints.css): se colapsan los grids
   side-by-side; PC mantiene la comparación lado a lado. */
@media (max-width: 1023.98px) {
    .afp-compare-charts { grid-template-columns: 1fr; }
    .afp-compare-stats { grid-template-columns: 1fr; }
    .afp-compare-header { grid-template-columns: 1fr; }
    .afp-compare-vs { display: none; }
}
.afp-compare-chart-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border));
    border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.afp-compare-chart-header {
    background: hsl(var(--primary));
    color: #fff;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex; align-items: center; gap: 0.4rem;
}
.afp-compare-chart-body { padding: 1rem; }
.afp-compare-chart { width: 100%; height: 260px; }

/* Legend pills under each chart. */
.afp-compare-legend {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed hsl(var(--border));
    font-size: 0.75rem; color: hsl(var(--ink));
    font-variant-numeric: tabular-nums;
}
.afp-compare-legend-swatch {
    display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px;
    vertical-align: middle; margin-right: 0.3rem;
}

/* Per-chart legend — sits inside each chart card just under the chart so
   the swatch/curve mapping is visible without scrolling away from the chart.
   Replaces the shared "below both charts" legend strip that made it hard
   to tell which fund owned which curve. Works for both the 2-fund (.afp-
   compare-legend-swatch swatches) and the N-fund (.afp-cm-legend-sw dots)
   variants — only the swatch shape differs. */
.afp-compare-chart-legend {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px dashed hsl(var(--border));
    font-size: 0.75rem; color: hsl(var(--ink));
    font-variant-numeric: tabular-nums;
}
.afp-compare-chart-legend > span {
    display: inline-flex; align-items: center; gap: 0.35rem;
    min-width: 0;
}
.afp-compare-chart-legend small {
    color: hsl(var(--muted-foreground));
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* Metadata side-by-side comparison table. */
.afp-compare-meta {
    background: #fff;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.afp-compare-meta table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.afp-compare-meta thead th {
    background: hsl(var(--background));
    color: hsl(var(--muted-foreground));
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.55rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid hsl(var(--border));
}
.afp-compare-meta tbody td {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid hsl(var(--border));
    vertical-align: top;
}
.afp-compare-meta tbody tr:last-child td { border-bottom: none; }
.afp-compare-meta .field-label {
    font-size: 0.72rem;
    color: hsl(var(--muted-foreground));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.afp-compare-meta .field-value { font-weight: 600; color: hsl(var(--ink)); }
.afp-compare-meta .field-value.dim { color: hsl(var(--muted-foreground)); font-weight: 500; font-style: italic; }

/* Empty state shown when only fund A is set. */
.afp-compare-empty {
    background: #fff;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 2.5rem;
    text-align: center;
    color: hsl(var(--muted-foreground));
    box-shadow: var(--shadow-sm);
}
.afp-compare-empty h4 {
    color: hsl(var(--ink));
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* PDF download button -- navy primary. */
.afp-compare-pdf-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    background: hsl(var(--primary));
    color: #fff;
    border: 1px solid hsl(var(--primary-deep));
    border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 600;
    text-decoration: none;
    transition: opacity 150ms var(--ease);
}
.afp-compare-pdf-btn:hover { color: #fff; opacity: 0.9; text-decoration: none; }
.afp-compare-pdf-btn svg { width: 0.95rem; height: 0.95rem; }

.afp-compare-color-a { color: #2C3E50; }
/* swatch-a / -b are used for the two-fund compare overlay. Both funds are
   Azimut on this path (the picker forces azimut_only=1), so both sit in the
   blue family — navy for A, flat-blue for B — instead of the previous
   navy/orange split. */
/* Single statistics table for the two-fund compare. Visually mirrors the
   meta table but adds a divider row that separates the period block from
   the since-inception block. */
/* Chart range pills (12M/2Y/3Y/5Y/10Y/Since inception). Live inside the
   navy chart header so the active button needs to read against that bg. */
.afp-cmp-chart-range {
    display: inline-flex; gap: 0.25rem;
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 0.18rem;
}
.afp-cmp-chart-btn {
    appearance: none; border: none; background: transparent;
    color: rgba(255,255,255,0.85);
    padding: 0.22rem 0.6rem;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    cursor: pointer; line-height: 1;
    transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.afp-cmp-chart-btn:hover { color: #fff; background: rgba(255,255,255,0.15); }
.afp-cmp-chart-btn.is-active {
    background: #fff; color: hsl(var(--primary));
    box-shadow: 0 1px 2px rgba(15,23,42,0.18);
}

.afp-cmp-stats-table tbody tr.afp-cmp-stats-divider td {
    background: hsl(var(--background));
    color: hsl(var(--primary));
    font-size: 0.78rem;
    padding-top: 0.55rem;
    padding-bottom: 0.45rem;
    letter-spacing: 0.01em;
}
.afp-cmp-stats-table tbody tr.afp-cmp-stats-divider td strong {
    color: hsl(var(--primary));
}
.afp-compare-color-b { color: #1F618D; }
.swatch-a { background: #2C3E50; }
.swatch-b { background: #1F618D; }


/* ============================================================
   AFP MULTI-COMPARE workbench  (page: /compare/multi)
   Adds the N-fund picker, chip rail, legend strip, stats table.
   Reuses the period selector + chart card shapes from the
   2-fund compare so the two pages feel like the same module.
   ============================================================ */

.afp-compare-multi-toolbar {
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
    margin: 0.5rem 0 0.85rem;
    flex-wrap: wrap;
}
.afp-compare-multi-search-wrap {
    position: relative;
    flex: 1 1 320px;
    min-width: 240px;
}
.afp-compare-multi-search-ico {
    position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
    display: flex; align-items: center;
}
.afp-compare-multi-search-ico svg { width: 0.95rem; height: 0.95rem; }
.afp-compare-multi-search-wrap input {
    width: 100%;
    padding: 0.55rem 0.7rem 0.55rem 2.1rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    background: #fff;
    color: hsl(var(--ink));
    box-shadow: var(--shadow-sm);
    transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.afp-compare-multi-search-wrap input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.10);
}
.afp-compare-multi-search-results {
    position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0;
    background: #fff;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 320px;
    overflow-y: auto;
    display: none;
    z-index: 30;
}
.afp-compare-multi-search-results.show { display: block; }

/* The picker row results reuse the existing .afp-compare-search-result
   shape from the 1-on-1 compare so the visual is consistent. */

/* Grouped results (Azimut search): one header per subfund, share classes
   nested underneath as compact rows. Mirrors fund_performance's picker. */
.afp-compare-search-group + .afp-compare-search-group {
    border-top: 1px solid hsl(var(--border));
}
.afp-compare-search-group-header {
    padding: 0.5rem 0.7rem 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: hsl(var(--primary));
    background: hsl(var(--background));
    position: sticky;
    top: 0;
    z-index: 1;
}
.afp-cs-class-row {
    padding: 0.4rem 0.7rem 0.4rem 1.1rem;
    cursor: pointer;
}
.afp-cs-class-row:hover { background: hsl(var(--background)); }
.afp-cs-class-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}
.afp-cs-class {
    font-weight: 700; color: hsl(var(--ink));
}
.afp-cs-ccy {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
    color: #fff;
    background: hsl(var(--primary));
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
}
.afp-cs-ticker {
    font-size: 0.7rem; font-weight: 600;
    color: hsl(var(--muted-foreground));
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
.afp-cs-since {
    font-size: 0.68rem; font-weight: 600;
    color: hsl(var(--muted-foreground));
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}
.afp-cs-isin {
    margin-left: auto;
    font-size: 0.7rem; font-weight: 600;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 4px;
    padding: 0.06rem 0.35rem;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Buttons in the multi-compare toolbar */
.afp-cm-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 600;
    border: 1px solid hsl(var(--border));
    background: #fff;
    color: hsl(var(--ink));
    cursor: pointer;
    transition: opacity 120ms var(--ease), background 120ms var(--ease), border-color 120ms var(--ease);
}
.afp-cm-btn:hover { background: #f8fafc; }
.afp-cm-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.afp-cm-btn svg { width: 0.95rem; height: 0.95rem; }
.afp-cm-btn-ghost { color: hsl(var(--muted-foreground)); }
.afp-cm-btn-ghost:hover { color: hsl(var(--ink)); }

/* Search input with embedded universe switch. The pill toggle lives inside
   the search wrap, the magnifier and input pad themselves to clear it.
   The padding-left gives the typed text enough breathing room from the
   magnifier (was 11rem → too tight; ~1.7rem gap now between icon and text). */
.afp-cm-search-wrap .afp-cm-search-input {
    padding-left: 12.2rem;
}
.afp-cm-search-switch {
    position: absolute;
    left: 0.35rem; top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex; align-items: center;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    padding: 0.18rem;
    gap: 0.15rem;
}
.afp-cm-switch-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.25rem 0.7rem;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.04em;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    border-radius: 999px;
    line-height: 1;
    transition: background-color 160ms var(--ease), color 160ms var(--ease),
                box-shadow 160ms var(--ease);
}
.afp-cm-switch-btn:hover { color: hsl(var(--ink)); }
.afp-cm-switch-btn.is-active {
    color: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,0.12);
}
.afp-cm-switch-azimut.is-active {
    background: #1F618D;  /* dark-blue family for the Azimut switch */
}
.afp-cm-switch-afp.is-active {
    background: hsl(var(--primary));
}
.afp-cm-search-wrap .afp-compare-multi-search-ico {
    left: 10.2rem;  /* magnifier sits right after the switch */
}

/* Celular (<768px — ver _breakpoints.css): stack the Azimut/AFP switch
   ABOVE the search input. El switch pasa a flow normal (no absolute), y el
   input resetea su padding para que la lupa quede en su posición default. */
@media (max-width: 767.98px) {
    .afp-cm-search-wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .afp-cm-search-wrap .afp-cm-search-switch {
        position: static;
        transform: none;
        align-self: flex-start;   /* compact width on top */
    }
    .afp-cm-search-wrap .afp-cm-search-input {
        padding-left: 2.1rem;     /* clear only the magnifier */
        width: 100%;
    }
    .afp-cm-search-wrap .afp-compare-multi-search-ico {
        left: 0.7rem;             /* back to default position */
        top: auto;
        bottom: 0.65rem;           /* aligns with the lower input */
        transform: none;
    }
    .afp-cm-search-wrap .afp-compare-multi-search-results {
        top: calc(100% + 0.25rem);
    }
}

/* Celular (<768px — ver _breakpoints.css): chart-card header con título
   arriba y range buttons debajo. El header live trae inline
   `display:flex; justify-content:space-between`; `flex-direction: column`
   override mete el título en una línea y los buttons wrappean abajo. */
@media (max-width: 767.98px) {
    .afp-compare-chart-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    .afp-cmp-chart-range {
        flex-wrap: wrap;
    }
}

/* Chip rail: one chip per selected fund, removable via the X. Grid layout
   so every chip in a row has the SAME width — long names ellipsize instead
   of pushing the chip wider than its neighbours. */
.afp-compare-multi-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.55rem;
    margin-bottom: 1rem;
}
.afp-compare-multi-chips[data-empty="true"] {
    display: block;
}
.afp-cm-chip {
    --cm-chip-color: #2C3E50;
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 0.6rem 0.5rem 0.7rem;
    background: #fff;
    border: 1px solid hsl(var(--border));
    border-left: 3px solid var(--cm-chip-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    width: 100%;        /* fills its grid cell — every chip ends up the same width */
    min-width: 0;
}
.afp-cm-chip-dot {
    width: 0.55rem; height: 0.55rem;
    border-radius: 999px;
    background: var(--cm-chip-color);
    flex-shrink: 0;
}
.afp-cm-chip-body {
    display: flex; flex-direction: column; gap: 0.15rem;
    min-width: 0; flex: 1;
}
.afp-cm-chip-name {
    font-size: 0.84rem; font-weight: 700; color: hsl(var(--ink));
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.afp-cm-chip-sub {
    display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.4rem;
    font-size: 0.7rem;
    color: hsl(var(--muted-foreground));
}
.afp-cm-chip-sub span {
    background: #f1f5f9;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    line-height: 1.3;
}
.afp-cm-chip-isin {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.02em;
    font-weight: 600;
}
.afp-cm-chip-ccy {
    background: rgba(44, 62, 80, 0.10) !important;
    color: hsl(var(--primary)) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.afp-cm-chip-x {
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    border-radius: 999px;
    width: 1.65rem; height: 1.65rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms var(--ease), color 120ms var(--ease);
}
.afp-cm-chip-x:hover { background: #fef2f2; color: #b91c1c; }
.afp-cm-chip-x svg { width: 0.85rem; height: 0.85rem; }

.afp-compare-multi-empty {
    background: #fff;
    border: 1px dashed hsl(var(--border-strong));
    border-radius: var(--radius);
    padding: 2.25rem 1.5rem;
    text-align: center;
    color: hsl(var(--muted-foreground));
}
.afp-compare-multi-empty h4 {
    color: hsl(var(--ink));
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}
.afp-compare-multi-empty p { font-size: 0.88rem; margin: 0; }

.afp-cm-period-window {
    margin-left: auto;
    font-size: 0.78rem;
    color: hsl(var(--muted-foreground));
}

/* Colour swatch shared by per-chart legends AND stats-table fund cells. */
.afp-cm-legend-sw {
    width: 0.72rem; height: 0.72rem;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;   /* don't let flex parents (table cells) shrink the dot to 0 */
    border: 1px solid rgba(15, 23, 42, 0.08);  /* subtle outline so light colours stay visible */
}

/* Per-fund stats table — same vocabulary as afp-compare-meta but with a
   leading colour swatch and currency badge column. */
.afp-cm-stats-wrap {
    overflow-x: auto;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.afp-cm-stats {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.afp-cm-stats th,
.afp-cm-stats td {
    padding: 0.6rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid hsl(var(--border));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.afp-cm-stats th {
    background: #f8fafc;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
    text-align: right;
}
/* Fund column header / cell: fixed width so the fund labels line up across
   the Periods table AND the Since-inception table. The cell itself stays
   table-cell (no flex) so the colour swatch is rendered as inline-block
   directly in the text flow — that way the dot never gets shrunk by a
   flex layout. Ellipsis on long names is handled by the inner name span. */
.afp-cm-stats th.afp-cm-stats-fund,
.afp-cm-stats td.afp-cm-stats-fund {
    text-align: left;
    width: 16rem;
    min-width: 16rem;
    max-width: 16rem;
    overflow: hidden;
}
.afp-cm-stats tr:last-child td { border-bottom: none; }
.afp-cm-stats td.pos { color: #15803d; font-weight: 600; }
.afp-cm-stats td.neg { color: #b91c1c; font-weight: 600; }
.afp-cm-stats-fund .afp-cm-legend-sw {
    margin-right: 0.5rem;
    vertical-align: middle;
}
.afp-cm-stats-fund-name {
    display: inline-block;
    max-width: calc(16rem - 1.8rem);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: middle;
}
.afp-cm-stats-fund strong {
    display: block;
    color: hsl(var(--ink));
    font-size: 0.86rem;
    line-height: 1.2;
}
.afp-cm-stats-fund small {
    display: block;
    color: hsl(var(--muted-foreground));
    font-size: 0.72rem;
    margin-top: 0.1rem;
}
.afp-cm-stats-fund small code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    background: #f1f5f9;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    color: hsl(var(--ink));
}
.afp-cm-stats-dot {
    width: 0.65rem; height: 0.65rem;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Section subtitle (used on the multi-compare page header). */
.afp-section-subtitle {
    font-size: 0.82rem;
    color: hsl(var(--muted-foreground));
    margin: -0.25rem 0 0.75rem;
}

/* Status banner: signals "ready to compare" state at a glance.
   The dot colour + accent border change with the state class. */
.afp-cm-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    margin: 0 0 0.85rem;
    background: #fff;
    border: 1px solid hsl(var(--border));
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-size: 0.82rem;
    color: hsl(var(--ink));
    transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.afp-cm-status .afp-cm-status-text {
    flex: 1;
}
.afp-cm-status .afp-cm-status-text strong {
    color: hsl(var(--primary));
}
.afp-cm-status-dot {
    width: 0.65rem; height: 0.65rem;
    border-radius: 999px;
    background: hsl(var(--muted-foreground));
    flex-shrink: 0;
}
.afp-cm-status.is-empty {
    border-left-color: hsl(var(--muted-foreground));
    background: #f8fafc;
    color: hsl(var(--muted-foreground));
}
.afp-cm-status.is-empty .afp-cm-status-dot {
    background: hsl(var(--muted-foreground));
}
.afp-cm-status.is-single {
    border-left-color: #d97706;     /* amber — "needs one more" */
    background: #fffbeb;
}
.afp-cm-status.is-single .afp-cm-status-dot {
    background: #d97706;
}
.afp-cm-status.is-ready {
    border-left-color: #15803d;     /* green — comparison live */
    background: #f0fdf4;
}
.afp-cm-status.is-ready .afp-cm-status-dot {
    background: #15803d;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
}

/* Spinner glyph — only visible while the page is fetching new data. */
.afp-cm-status-spinner {
    display: none;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid hsl(var(--border));
    border-top-color: hsl(var(--primary));
    border-radius: 999px;
    animation: afp-cm-spin 700ms linear infinite;
}
.afp-cm-status.is-loading .afp-cm-status-spinner {
    display: inline-block;
}
.afp-cm-status.is-loading {
    background: #eff6ff !important;
    border-left-color: #2563eb !important;
}
.afp-cm-status.is-loading .afp-cm-status-dot {
    background: #2563eb;
}
@keyframes afp-cm-spin {
    to { transform: rotate(360deg); }
}

/* Charts dimming while a refresh is in flight, so the user sees the
   workbench is busy without losing the previous render. */
.afp-compare-charts.is-loading,
.afp-cm-stats-wrap.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 150ms var(--ease);
}