/* ============================================================
   PropFirmMap Score-hero card layer (2026-06). Loads AFTER firm-cards.css
   to make the score the centerpiece. Premium-light, tokens-based.
   ============================================================ */

/* ---- the reusable score unit ---- */
.pfm-score { display: flex; align-items: center; gap: 12px; }
.pfm-score__dial {
    position: relative; flex: 0 0 auto;
    width: 64px; height: 64px; border-radius: 50%;
    background: conic-gradient(var(--tier) calc(var(--pct) * 1%), #ececf6 0);
    display: flex; align-items: center; justify-content: center;
}
.pfm-score__dial::after {
    content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff;
}
.pfm-score__num {
    position: relative; z-index: 1; font-size: 22px; font-weight: 800;
    color: var(--color-text-primary, #1a1a2e); line-height: 1;
}
.pfm-score__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pfm-score__label { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: #8b84ad; }
.pfm-score__sub { display: flex; align-items: center; gap: 7px; }
.pfm-score__of { font-size: 12px; color: #b3adc9; font-weight: 600; }
.pfm-score__grade { font-size: 12px; font-weight: 800; color: #fff; padding: 1px 9px; border-radius: 20px; }

/* pillar mini-bars (revealed on hover for cards) */
.pfm-score__pillars { display: none; gap: 3px; margin-left: auto; align-self: stretch; align-items: flex-end; padding-bottom: 4px; }
.pfm-score__pbar { width: 6px; height: 30px; background: #f0eef8; border-radius: 3px; overflow: hidden; display: flex; align-items: flex-end; }
.pfm-score__pbar > span { display: block; width: 100%; border-radius: 3px; }

/* hero size on cards: full-width band */
.pfm-score--hero {
    background: linear-gradient(180deg, #fbfaff, #f5f3ff);
    border: 1px solid #efeafb; border-radius: 13px;
    padding: 12px 14px; margin-bottom: 14px;
}
.pfm-score--hero .pfm-score__pillars { display: flex; }

/* small size for tables / compact rows */
.pfm-score--sm { gap: 8px; }
.pfm-score--sm .pfm-score__dial { width: 44px; height: 44px; }
.pfm-score--sm .pfm-score__dial::after { inset: 4px; }
.pfm-score--sm .pfm-score__num { font-size: 16px; }
.pfm-score--sm .pfm-score__label { font-size: 10px; }

/* ---- remove the old small star chip if it lingers ---- */
.firm-card .firm-card__score { display: none; }

/* ---- "+ Compare" button on the card ---- */
.firm-card__compare-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: #5a49bf;
    background: #f1eefb; border: 1px solid #e0d9f5; border-radius: 8px;
    padding: 6px 12px; cursor: pointer; transition: all 0.15s ease;
}
.firm-card__compare-btn:hover { background: #e7e0fb; }
.firm-card__compare-btn.is-selected { background: #5a49bf; color: #fff; border-color: #5a49bf; }
.firm-card__compare-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
.firm-card__compare-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }