/* =================================================================
   BUILDING INFO PANEL — CONTRIBUTION + UPGRADE GAINS
   =================================================================

   Additive only. The rest of the .bp-* block lives in hudPanels.css; these
   are the rules for the two things the panel gained: the third stat slot now
   reporting what a structure contributes instead of its grid coordinate, and
   the current -> next comparison on the upgrade block.

   Loaded after hudPanels.css so the .bp-stat-value override below wins
   without needing extra specificity.
   ================================================================= */

/* The contribution value carries a unit ("50/hr", "15 units", "Offline"),
   which is a longer string than the "1" or "12, 4" the slot used to hold.
   .bp-stat-value is 0.88rem with white-space: nowrap and an ellipsis, and at
   390px each of the three slots is only ~104px wide — "1,600/hr" clips there.
   Stepping this one slot down keeps the widest real value (a level-3 Material
   Depot upgraded under full economy research) inside its box. */
.bp-stat-value.bp-output {
    font-size: 0.78rem;
}

/* "Offline". Named is-muted, but not painted with --color-text-muted:
   that token measures 4.03:1 on this panel and fails AA body text
   (docs/TYPE-LEGIBILITY.md). Quiet here means secondary. */
.bp-stat-value.bp-output.is-muted {
    color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------
   UPGRADE GAINS
   ----------------------------------------------------------------- */

.bp-gains {
    list-style: none;
    margin: 0 0 8px;
    padding: 6px 8px;
    background: rgba(26, 39, 68, 0.5);
    border: 1px solid var(--color-primary-700);
    border-radius: 5px;
}

.bp-gain {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    /* 0.74rem rendered at 11.8px. This block is the entire case for spending
       on an upgrade, so it goes to the 12px floor and the list gives back the
       difference in line-height instead. */
    font-size: 0.78rem;
    line-height: 1.4;
}

.bp-gain-label {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    /* Truncate the label rather than the numbers if the row runs out of
       room: "Materials outp…  30/hr -> 60/hr" still tells the player what
       they are buying, where a truncated figure would not. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-gain-value {
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.bp-gain-arrow {
    color: var(--color-text-secondary);
    padding: 0 1px;
}

/* The number the player is actually buying. Green, matching .bp-cost.bp-free
   and the health bar — in this panel green already means "in your favour". */
.bp-gain-to {
    color: var(--color-accent-green-light);
    font-weight: var(--font-semibold);
}