/**
 * deal-score.css — Deal Score Ring Card
 * Batch 39: 5-component animated scoring ring for PI header
 *
 * Depends on: base.css (design tokens)
 * No hardcoded colors — all via CSS custom properties from base.css
 */

/* ============================================================
   DEAL SCORE CARD — PI HEADER INLINE
   ============================================================ */
.lf-deal-score-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    flex-shrink: 0;
    gap: 4px;
    padding: 6px 8px;
    position: relative;
    /* Visible in intel/workspace states; hidden in landing via body class below */
}

/* Hidden in landing state */
body.lf-state-landing .lf-deal-score-card {
    display: none;
}

/* ============================================================
   RING WRAPPER — centers number over conic-gradient ring
   ============================================================ */
.deal-score__ring {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    /* Conic gradient: --score-pct% filled with --score-color, rest is dark */
    background: conic-gradient(
        var(--score-color, var(--text-muted)) calc(var(--score-pct, 0) * 1%),
        var(--surface-dark, rgba(5, 22, 34, 0.80)) calc(var(--score-pct, 0) * 1%)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.1s linear;
}

/* Inner cutout to create ring donut effect */
.deal-score__ring::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--bg-abyss-mid);
    z-index: 0;
}

/* ============================================================
   SCORE NUMBER
   ============================================================ */
.deal-score__number {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--score-color, var(--text-muted));
    letter-spacing: var(--tracking-tight);
    /* Inherit --score-color from .deal-score__ring parent */
}

/* ============================================================
   DEAL SCORE LABEL
   ============================================================ */
.deal-score__label {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}

/* ============================================================
   SIGNAL LINES — 3 compact rows below ring
   ============================================================ */
.deal-score__signals {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    width: 100%;
    margin-top: 2px;
}

.deal-score__signal {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    line-height: 1.2;
    white-space: nowrap;
}

.deal-score__signal-icon {
    font-size: 0.6rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Value signal icon colors */
.deal-score__signal--up    .deal-score__signal-icon { color: var(--color-positive); }
.deal-score__signal--neutral .deal-score__signal-icon { color: var(--text-muted); }
.deal-score__signal--down  .deal-score__signal-icon { color: var(--color-negative); }

/* Risk dot */
.deal-score__risk-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.deal-score__risk-dot--low      { background: var(--color-positive); }
.deal-score__risk-dot--moderate { background: var(--gold-500); }
.deal-score__risk-dot--high     { background: var(--color-negative); }

/* ============================================================
   COUNT-UP ANIMATION STATE
   ============================================================ */
.deal-score--animating .deal-score__ring {
    /* Smooth ring fill transition during count-up */
    transition: none;
}

/* ============================================================
   QUICK MODE SCORE WRAP — replaces the placeholder scaffold
   ============================================================ */
.lf-qm-score-wrap .lf-deal-score-card {
    width: auto;
    padding: 12px 16px;
    align-items: center;
}

.lf-qm-score-wrap .deal-score__ring {
    width: 96px;
    height: 96px;
}

.lf-qm-score-wrap .deal-score__ring::before {
    inset: 14px;
}

.lf-qm-score-wrap .deal-score__number {
    font-size: 2.2rem;
}

.lf-qm-score-wrap .deal-score__label {
    font-size: 0.65rem;
}

.lf-qm-score-wrap .deal-score__signals {
    align-items: center;
    margin-top: 6px;
}