/* Rate Desk — sits on top of custom.css / Bootstrap */

.rate-desk h1 {
    font-size: clamp(2rem, 5vw, 3rem);
}

.rate-input {
    background-color: #ecfdf3;
    border-color: #86efac;
}

.rate-input:focus {
    background-color: #f0fdf4;
    border-color: #22c55e;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.2);
}

.rate-stat,
.rate-delta,
.rate-chip {
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
    height: 100%;
}

.rate-stat p,
.rate-delta p,
.rate-chip p {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}

.rate-stat strong,
.rate-delta strong,
.rate-chip strong {
    display: block;
    margin-top: 0.35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.rate-stat-target {
    background: #dcfce7;
    color: #166534;
}

.rate-stat-margin {
    background: #fee2e2;
    color: #991b1b;
}

.rate-stat-posted {
    background: #dbeafe;
    color: #1e3a8a;
}

.rate-delta,
.rate-chip {
    background: #fff;
    border: 1px solid #e5e7eb;
}

.rate-delta strong.is-up {
    color: #166534;
}

.rate-delta strong.is-down {
    color: #991b1b;
}

.rate-desk .table {
    --bs-table-bg: transparent;
}

.rate-desk .table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 600;
}

.rate-calc > div {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.rate-calc > div:last-child {
    border-bottom: 0;
}

.rate-calc span {
    font-weight: 600;
}

.rate-calc code {
    color: #6b7280;
    font-size: 0.8rem;
}

.rate-calc strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (min-width: 768px) {
    .rate-calc > div {
        grid-template-columns: 9rem 1fr 7.5rem;
        align-items: baseline;
        gap: 0.75rem;
    }

    .rate-calc strong {
        text-align: right;
    }
}

@media (max-width: 575.98px) {
    .rate-stat strong,
    .rate-chip strong {
        font-size: 1.25rem;
    }
}