/* Stack and Value — side-by-side comparison styles (Track 5).
 * Standalone file: loaded from default.hbs alongside the theme's own CSS.
 * Scoped to .sv-compare so it cannot leak into other post content.
 * Colours inherit from the theme where possible; explicit fallbacks keep the
 * table readable even if theme variables change. No animations, so there is
 * nothing to disable for prefers-reduced-motion — the rule below is a guard
 * for any future transition added here. */

.sv-compare {
    margin: 2em 0;
    font-size: 1.5rem;
    line-height: 1.5;
}

.sv-compare-title {
    font-weight: 700;
    font-size: 1.9rem;
    margin: 0 0 0.6em;
}

.sv-compare-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em 1.5em;
    align-items: flex-start;
    margin-bottom: 1em;
}

.sv-compare-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    align-items: center;
}

.sv-compare-fieldset legend {
    font-weight: 700;
    margin-right: 0.25em;
    padding: 0;
}

.sv-compare-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    cursor: pointer;
    white-space: normal;
}

.sv-compare-check input {
    width: 1.1em;
    height: 1.1em;
    accent-color: var(--ghost-accent-color, #15171a);
    cursor: pointer;
}

.sv-compare-reset {
    background: transparent;
    border: 1px solid #c5c5c5;
    border-radius: 4px;
    padding: 0.25em 0.9em;
    font: inherit;
    font-size: 0.9em;
    cursor: pointer;
    color: inherit;
}

.sv-compare-reset:hover,
.sv-compare-reset:focus-visible {
    border-color: var(--ghost-accent-color, #15171a);
}

/* Horizontal scroll lives inside this container only: the page itself
 * never scrolls sideways, and the table keeps its natural width. */
.sv-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.sv-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
    vertical-align: top;
}

.sv-compare-table caption {
    text-align: left;
    font-weight: 700;
    padding: 0.75em 1em;
    border-bottom: 1px solid #ddd;
}

.sv-compare-table th,
.sv-compare-table td {
    padding: 0.6em 0.9em;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: top;
}

.sv-compare-table thead th {
    border-bottom: 2px solid #ccc;
    white-space: normal;
}

.sv-compare-table tbody th {
    font-weight: 700;
    white-space: nowrap;
}

.sv-compare-badge {
    display: inline-block;
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 0.25em;
}

/* "Highlight differences": only the rows that actually differ get a
 * background. Identical rows stay plain, so the highlight means something. */
.sv-compare-table tr.sv-row-diff td {
    background: #fff8e1;
}

.sv-compare-table tr.sv-row-diff th {
    background: #fff3c4;
}

.sv-compare-note {
    font-size: 0.9em;
    color: #666;
    margin: 0.75em 0 0;
}

/* Hidden by JS only after the interactive table has been built. If the JS
 * or this CSS fails to load, the static table simply stays visible. */
.sv-compare-hidden {
    display: none !important;
}

/* Dark mode follows the device setting, matching the site's existing
 * dark-mode.css approach (prefers-color-scheme). */
@media (prefers-color-scheme: dark) {
    .sv-compare-scroll {
        border-color: #3a3a3a;
    }

    .sv-compare-table th,
    .sv-compare-table td {
        border-bottom-color: #2e2e2e;
    }

    .sv-compare-table thead th {
        border-bottom-color: #444;
    }

    .sv-compare-table tr.sv-row-diff td {
        background: #3a3210;
    }

    .sv-compare-table tr.sv-row-diff th {
        background: #463d12;
    }

    .sv-compare-note {
        color: #aaa;
    }

    .sv-compare-reset {
        border-color: #555;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-compare,
    .sv-compare * {
        transition: none !important;
        animation: none !important;
    }
}