/*
 * deal-dna.css — Deal DNA Radar Chart
 * Batch 44: Styles for the 5-dimension SVG pentagon card injected into strategy panels.
 *
 * Zero hardcoded colors — CSS custom properties only.
 * Integrates with the glass-card pattern from base.css.
 *
 * Layout notes:
 *   - pi-dashboard is flex column; .lf-dna-card inserts after .dash-kpi-row
 *   - Card is 220px wide and floats right within the flex column via align-self
 *   - Mobile ≤640px: card full width, no float, chart scales to 140×140px
 */

/* ============================================================
   DNA CARD — GLASS CARD BASE
   Uses .glass-card from base.css for backdrop-filter, border,
   border-radius, and subtle background. This class is added in JS.
   Additional overrides below.
   ============================================================ */
.lf-dna-card {
    /* Override glass-card border-radius to match panel cards (--radius-sm = 8px) */
    border-radius: var(--radius-sm);
    /* Width constraint */
    width: 220px;
    /* Float right within the flex column — aligned to right side of panel */
    align-self: flex-end;
    /* Remove base glass-card transition delay on initial render */
    padding: 10px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Subtle gold border accent to match DNA theme */
    border-color: var(--gold-alpha-10);
    flex-shrink: 0;
}

.lf-dna-card:hover {
    border-color: var(--gold-alpha-20);
}

/* ============================================================
   CARD HEADER — "DEAL DNA" EYEBROW BADGE
   ============================================================ */
.dna-card__header {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted);
    text-transform: uppercase;
    /* Gold left accent bar */
    padding-left: 6px;
    border-left: 2px solid var(--gold-500);
    line-height: 1;
}

/* ============================================================
   CHART CONTAINER
   180×180px wrapper — SVG fills 100% of container.
   ============================================================ */
.dna-card__chart {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dna-card__chart-inner {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG fills its container */
.dna-chart__svg {
    display: block;
    width: 180px;
    height: 180px;
    overflow: visible; /* Allow labels to render outside SVG bounds */
}

/* ============================================================
   DIMENSION SCORE PILLS ROW
   5 pills in a row: label + score number
   ============================================================ */
.dna-card__pills {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

/* Individual pill */
.dna-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 0.55rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: default;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: opacity 0.15s ease;
}

/* Pill label (abbreviated dimension name) */
.dna-pill__label {
    opacity: 0.75;
}

/* Pill score number */
.dna-pill__score {
    font-weight: var(--weight-bold);
    font-size: 0.6rem;
    letter-spacing: -0.01em;
}

/* ── Score tier coloring via data-tier attribute ─────────── */

/* HIGH tier (score ≥7) — gold */
.dna-pill[data-tier="high"] {
    background: var(--gold-alpha-10);
    border-color: var(--gold-alpha-30);
    color: var(--gold-500);
}

/* MID tier (score 4–6) — muted text */
.dna-pill[data-tier="mid"] {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--text-muted);
}

/* LOW tier (score <4) — red */
.dna-pill[data-tier="low"] {
    background: var(--color-negative-bg);
    border-color: var(--color-negative-border);
    color: var(--color-negative);
}

/* ============================================================
   RESPONSIVE — MOBILE ≤640px
   ============================================================ */
@media (max-width: 640px) {
    .lf-dna-card {
        /* Full width on mobile — no float/align-self constraint */
        width: 100%;
        align-self: stretch;
    }

    /* Scale chart down to 140×140px on mobile */
    .dna-card__chart {
        width: 140px;
        height: 140px;
    }

    .dna-card__chart-inner {
        width: 140px;
        height: 140px;
    }

    /*
     * SVG uses viewBox="0 0 180 180" so it scales proportionally.
     * Setting width/height to 140px causes the SVG to scale down
     * from 180px → 140px (77.8% scale) while preserving the math.
     */
    .dna-chart__svg {
        width: 140px;
        height: 140px;
    }

    /* Pills wrap on small screens */
    .dna-card__pills {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}