/* ── Favorites page ── agent-only follow, dedicated leaderboard.
   Reuses agents.css table (.agents-table/.cell-agent/.score-chip/.pos-badge/.hcell);
   only the header band, league chip, star cell, and empty state live here. */

.fav-band {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin: 4px 0 14px;
}

/* Personal digest — one-line "since your last visit" headline. Quiet chrome
   (azure-tinted), hidden when nothing changed (rendered only when there's news). */
.fav-digest {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 9px 13px;
    border: 1px solid rgba(var(--b2-rgb), 0.20); border-radius: 10px;
    background: rgba(var(--b2-rgb), 0.05); font-size: 13px;
}
.fav-digest .material-symbols-outlined { font-size: 16px; color: var(--b2-soft); flex-shrink: 0; }
.fav-digest-since {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.fav-digest-body { color: var(--text-muted); }
.fav-digest-body b { color: #fff; font-weight: 700; }
.fav-band-l { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* Keep the heading's own baseline on its text, not its icon, so the count sub
   sits on the same line as "Your Picks". */
.fav-band-l .section-heading { margin: 0; align-items: baseline; }
.fav-band-l .section-heading .material-symbols-outlined { align-self: center; }
.fav-sub { color: var(--text-muted); font-size: 13.5px; }
.fav-sub b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Exposure now — compact long/short/flat read of your picks (1-C) */
.fav-exposure { min-width: 230px; }
.fav-exposure .xk {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 7px;
}
.fav-xbar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.05); }
.fav-xbar span { display: block; height: 100%; }
.fav-xbar .l { background: var(--positive); }
.fav-xbar .s { background: var(--negative); }
.fav-xbar .f { background: rgba(255,255,255,.14); }
.fav-xleg { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.fav-xleg b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); }
.fav-xleg .dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }
.fav-xleg .l .dot { background: var(--positive); }
.fav-xleg .s .dot { background: var(--negative); }
.fav-xleg .f .dot { background: rgba(255,255,255,.28); }

/* League chip — favorites lists agents across leagues, so league is a column
   (the Leagues page groups by it instead). Medal palette per brand tier scale. */
.fav-tier {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    padding: 2px 8px; border-radius: 5px;
}
.fav-tier.major { color: var(--tier-major); background: rgba(var(--tier-major-rgb), .15); }
.fav-tier.minor { color: var(--tier-minor); background: rgba(var(--tier-minor-rgb), .14); }
.fav-tier.bench { color: var(--tier-bench); background: rgba(var(--tier-bench-rgb), .16); }

.agents-table td.fav-star-cell { text-align: right; width: 44px; }

/* Agent identity uses the shared agentIdentity() idiom (ego + bordered mono coin
   pill, common.css). Table-cell layout for .cell-agent is fixed globally in
   agents.css — no favorites override needed. */

/* Score reads one consistent accent — League is a separate column here, so
   coloring the score by tier too (as the grouped Leagues page does) would
   double-encode the same signal. */
.agents-table .score-chip { color: var(--b2-soft); }

/* League move since last visit — small arrow beside the league chip. */
.fav-move { margin-left: 5px; font-size: 11px; font-weight: 800; vertical-align: baseline; }
.fav-move.up { color: var(--positive); }
.fav-move.down { color: var(--negative); }

/* Race to α — overlay chart of the top picks' cumulative return.
   Header matches the Insights section pattern (.section-heading + .section-desc);
   the whole header is a collapse toggle. */
.fav-compare { margin-top: 26px; }
.fav-cmp-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.fav-cmp-toggle .section-heading { margin: 0; }
.fav-cmp-chevron { margin-left: auto; color: var(--text-dim); transition: transform .2s; }
.fav-cmp-toggle:hover .fav-cmp-chevron { color: var(--b2-soft); }
.fav-compare.open .fav-cmp-chevron { transform: rotate(180deg); }
/* Match the Insights .section-desc (azure-soft, glow) — that rule lives in
   agents-insights.css which this page doesn't load, so mirror it here. */
.fav-compare .section-desc {
    font-size: 13px; line-height: 1.5; margin-top: 4px;
    color: var(--b2-soft);
    text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.18), 0 0 20px rgba(var(--b2-rgb), 0.06);
    opacity: 0.92;
}
.fav-cmp-body { margin-top: 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px; background: var(--panel); }
.fav-cmp-chart { width: 100%; height: 240px; }
.fav-cmp-loading { color: var(--text-dim); font-size: 13px; padding: 90px 0; text-align: center; }
/* Legend uses the shared components (.chart-legend/.legend-item/.legend-dot/
   .legend-val, common.css) + portfolio's click-highlight. Only overrides here:
   allow wrapping (shared .chart-legend is nowrap) and tone the value color. */
.fav-cmp-legend { flex-wrap: wrap; gap: 8px 0; margin-bottom: 12px; }
/* Thin divider between items so each agent reads as its own unit (form, not
   color — the dot already carries the series hue). A centered pseudo-element
   line, not border-left, so .legend-clickable's border-radius can't round it. */
.fav-cmp-legend .legend-item { padding: 0 14px; position: relative; }
.fav-cmp-legend .legend-item:first-child { padding-left: 0; }
.fav-cmp-legend .legend-item:not(:first-child)::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 12px; background: rgba(255, 255, 255, 0.14);
}
.fav-cmp-legend .legend-val.tone-pos { color: var(--positive); }
.fav-cmp-legend .legend-val.tone-neg { color: var(--negative); }
.fav-cmp-more { color: var(--text-dim); font-size: 12px; align-self: center; }

/* Empty state — no favorites yet */
.fav-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 72px 20px; border: 1px dashed rgba(255,255,255,.08); border-radius: 14px;
}
.fav-empty .ic { font-size: 30px; color: var(--text-dim); margin-bottom: 12px; line-height: 1; }
.fav-empty h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); }
.fav-empty p { color: var(--text-muted); font-size: 13.5px; max-width: 360px; line-height: 1.6; margin: 0; }