/* The category comparison table.
 *
 * On /catalogue/<category>/, below the cards. The cards say what each product
 * is; this says how they differ, which is the question somebody browsing a
 * category of seventeen enclosures actually has.
 *
 * Written to be readable with the script switched off: the whole table is in
 * the HTML, every checkbox is ticked, and nothing is hidden. compare.js only
 * adds the filtering.
 */

.mx { margin-top: 1.75rem; }

.mx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .9rem; }
.mx-btn {
    padding: .42rem .95rem;
    border: 1px solid var(--c-line-firm);
    border-radius: 999px;
    background: transparent;
    color: var(--c-sub);
    font: 600 .68rem 'IBM Plex Mono', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.mx-btn:hover { color: var(--c-accent); border-color: var(--c-accent); }
.mx-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
/* Nothing until the script fills it in, so no empty gap without JavaScript. */
.mx-count { color: var(--c-sub); font-size: .82rem; }
.mx-count:empty { display: none; }

.mx-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-line-thin);
    border-radius: 14px;
    background: var(--c-surface);
}
.mx-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .86rem; }
/* Each spec column gets room to hold a value on a line or two. Nine columns
   squeezed into the page width wrapped "4x M3 + 1x M5 threaded inserts" over
   six lines and made every row four times taller than it needed to be; the
   container scrolls sideways instead. */
.mx-table td { min-width: 9.5rem; }
.mx-table th, .mx-table td {
    padding: .7rem .9rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
    border-bottom: 1px solid var(--c-line-soft);
}
.mx-table thead th {
    /* Not sticky. A sticky header inside a horizontally scrolling container
       slides under the site header, which is itself fixed, and the two
       overlap. The table is short enough to read without one. */
    background: var(--c-tint-2);
    color: var(--c-quiet);
    font: 600 .66rem 'IBM Plex Mono', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.mx-table td { color: var(--c-ink); }
.mx-table tbody tr:last-child th, .mx-table tbody tr:last-child td { border-bottom: none; }
.mx-table th[scope="row"] { min-width: 15rem; font-weight: 500; }

/* The pickers live above the table, not in it: a row that hides itself takes
   its own checkbox with it, and then only "select all" can bring it back. */
.mx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.mx-legend { padding: 0; margin-bottom: .55rem; color: var(--c-sub); font: 600 .66rem 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.mx-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .38rem .8rem;
    border: 1px solid var(--c-line-mid);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-sub);
    font-size: .82rem;
    line-height: 1.3;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.mx-chip input { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--c-accent); }
.mx-chip:has(input:checked) { border-color: var(--c-accent); background: var(--c-tint); color: var(--c-ink); }
.mx-chip:hover { border-color: var(--c-accent); }
.mx-chip:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.mx-table th[scope="row"] a { color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line-firm); }
.mx-table th[scope="row"] a:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* Set by compare.js, never in the markup: with no script every row and every
   column stays visible. */
.mx-table tr.is-out { display: none; }
.mx-table .is-same { display: none; }

.mx-na { color: var(--c-sub); }

@media (max-width: 768px) {
    .mx-table { min-width: 34rem; font-size: .8rem; }
    .mx-table th, .mx-table td { padding: .6rem .65rem; }
    .mx-table td { min-width: 8rem; }
    .mx-table th[scope="row"] { min-width: 11rem; }
}