/* calculator.css */

.value-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.feedback-icon {
    margin-left: 6px;
    cursor: pointer;
    opacity: 0.3;
    font-size: 0.9rem;
    vertical-align: middle;
}

.feedback-icon:hover {
    opacity: 1;
}

/* Hide per-dino value column but keep it in DOM for JS */
.value-cell,
.value-header {
    display: none;
}

.range {
    display: none;
}

.fairness-card {
    border-radius: 12px;
    padding: 10px 12px 12px;
    border: 2px solid var(--ug-black);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    background: var(--ug-green);
    color: #111827;
}

.fairness-result {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0.4rem 0.6rem 0.6rem 0.6rem;
    text-align: center;
}

.fairness-desc {
    font-size: 0.68rem;
    margin: 0 0.6rem 0.4rem 0.6rem;
    text-align: center;
}

/* Tone helpers (used by calculator result cells) */
.tone-strong-green {
    background-color: var(--ug-green) !important;
    color: var(--ug-black) !important;
}

.tone-light-green {
    background-color: var(--ug-green-dark) !important;
    color: var(--ug-white) !important;
}

.tone-amber {
    background-color: var(--ug-yellow) !important;
    color: var(--ug-black) !important;
}

.tone-pale-red {
    background-color: #F18E6D !important;
    color: var(--ug-black) !important;
}

.tone-strong-red {
    background-color: var(--ug-red) !important;
    color: var(--ug-white) !important;
}

/* Share/Copy buttons */
/* Share/Copy buttons */
.share-row {
    display: none;
    /* shown only when valid trade */
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
    /* Ensure it is flex when shown (js overrides this usually but good to have) */
    flex-wrap: wrap;
    /* Allow wrapping */
}

.share-row .btn {
    margin-top: 0;
}

#limit-indicator {
    width: 100%;
    /* Force new line */
    text-align: center;
    margin-top: 4px;
}