/* /compare — the "best way to learn Chinese" comparison hub and method picker (D44).
   Small on purpose: the page is Bootstrap plus the few things Bootstrap has no utility for. */

/* ---------- The five jobs ---------- */
.cmp-jobs > li {
    margin-bottom: 0.5rem;
}

.cmp-jobs > li:last-child {
    margin-bottom: 0;
}

/* ---------- The plan ---------- */

/* The step number is written by compare-picker.js from the VISIBLE steps, so a filtered plan
   reads 1, 2, 3 rather than opening at "step 4" as though something were missing. */
.cmp-step-num {
    color: var(--bs-primary, #0d6efd);
}

.cmp-free-links {
    line-height: 1.9;
}

.cmp-step-tools {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: 0.75rem;
}

.cmp-step-tool + .cmp-step-tool {
    margin-top: 0.75rem;
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
    padding-top: 0.75rem;
}

/* ---------- The comparison table ---------- */

/* Four prose columns need room; .table-responsive scrolls them on a phone rather than
   crushing the two columns that carry the actual assessment. */
.cmp-table td,
.cmp-table th {
    vertical-align: top;
    font-size: 0.925rem;
}

.cmp-table caption {
    caption-side: bottom;
}

.cmp-group {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* Our own row is marked so a reader is told rather than left to notice. */
.cmp-us > th,
.cmp-us > td {
    background-color: rgba(13, 110, 253, 0.05);
}

[data-bs-theme="dark"] .cmp-us > th,
[data-bs-theme="dark"] .cmp-us > td {
    background-color: rgba(13, 110, 253, 0.14);
}