/* compare.css
 * Task 3: minimal, self-contained styling for Render\ComparisonView's
 * side-by-side comparison table. No @import / external fonts / CDN -- safe
 * under a strict CSP. Not enqueued here -- wiring wp_enqueue_style() into
 * the shortcode is a later task, same as calculator.css.
 */

.pcg-cmp-table {
    width: 100%;
    max-width: 900px;
    margin: 1.5rem auto;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.pcg-cmp-table th,
.pcg-cmp-table td {
    padding: 0.6rem 0.9rem;
    text-align: right;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}

.pcg-cmp-table th:first-child,
.pcg-cmp-table td:first-child {
    text-align: left;
}

.pcg-cmp-metric-header,
.pcg-cmp-col-header {
    background: #f5f5f5;
    font-weight: bold;
}

.pcg-cmp-metric-label {
    font-weight: 600;
    white-space: nowrap;
}

.pcg-cmp-error-cell {
    text-align: center;
    font-style: italic;
    color: #a33;
    vertical-align: middle;
}

/* Highlight for the best-take-home column: applied to both its header
 * cell and its take-home value cell (see ComparisonView's docblock). */
.pcg-cmp-best {
    background: #e6f4ea;
    box-shadow: inset 0 0 0 2px #2e7d32;
}

th.pcg-cmp-best {
    color: #1b5e20;
}

/* Delta suffix shown inline next to a non-baseline column's value. */
.pcg-cmp-delta {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
}

.pcg-cmp-delta-positive {
    color: #1b5e20;
    background: #e6f4ea;
}

.pcg-cmp-delta-negative {
    color: #b3261e;
    background: #fdecea;
}

.pcg-cmp-delta-neutral {
    color: #555;
    background: #f0f0f0;
}

/* Small screens: allow the table to scroll horizontally rather than
 * squeezing columns unreadably narrow. */
@media (max-width: 600px) {
    .pcg-cmp-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}