/*
 * Profitly's own styles: only what the theme, Bootstrap and django-spire do
 * not provide. Colours come from the --profitly-* and --bs-* custom properties
 * the theme defines (static_files/django_spire/scss/_theme.scss).
 */

/*
 * The brand sets white cards on the lavender canvas so number columns stay
 * calm. django-spire tints its cards instead, so this puts them back on white.
 */
.card {
    background-color: var(--bs-body-bg);
}

/* Progress is lime, and white does not read on lime, so the tick on it is navy. */
.stepper-step.is-done .stepper-mark {
    background-color: var(--profitly-lime);
    border-color: var(--profitly-lime);
    color: var(--profitly-navy);
}

.pf-lime-highlight {
    background: linear-gradient(transparent 55%, var(--profitly-lime) 55%);
    padding: 0 .15em;
}

.pf-blurred {
    filter: blur(10px);
    user-select: none;
}

.pf-reveal-number {
    font-family: var(--profitly-heading-font);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pf-confidence-dot {
    border-radius: 50%;
    display: inline-block;
    height: .5rem;
    width: .5rem;
}

.pf-confidence-dot.hi { background: var(--profitly-violet); }
.pf-confidence-dot.med { background: var(--profitly-yellow); }
.pf-confidence-dot.low { background: var(--profitly-amber); }

.pf-help {
    background: var(--profitly-lavender);
    border: 0;
    border-radius: 50%;
    color: var(--profitly-violet);
    font-size: .7rem;
    font-weight: 700;
    height: 1.1rem;
    line-height: 1.1rem;
    padding: 0;
    text-align: center;
    width: 1.1rem;
}

.btn-lime {
    --bs-btn-bg: var(--profitly-lime);
    --bs-btn-border-color: var(--profitly-lime);
    --bs-btn-color: var(--profitly-navy);
    --bs-btn-hover-bg: #B1F25C;
    --bs-btn-hover-border-color: #B1F25C;
    --bs-btn-hover-color: var(--profitly-navy);
    font-weight: 700;
}