/**
 * Repair parts guide (page-repair-guide.php — /repair-parts-guide/). Documentation-route tokens:
 * search input, chips (base .chip), the bordered panel with a mono table head, the brass part tag.
 *
 *   .repair__lede        intro under the H1, 15px #4a5058, max 720px
 *   .repair__search      input + outline button in a row
 *   .repair__chips       label + chips (maker, then type)
 *   .repair__panel       bordered panel, horizontal scroll, keyboard reachable
 *   .repair__table       min-width 760px, mono 11px head, 13px body, model column Barlow 18px
 *   .repair-row__tag     the MEPCO part number as a brass tag
 *   .repair__empty       no-match card inside the panel
 *   .repair__none        "table being loaded" card when there are no rows at all
 */

.repair__lede { margin: 0 0 28px; max-width: 720px; color: var(--text-2); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.repair__cols { margin-top: 4px; }
.repair__search { display: flex; gap: 10px; margin: 0 0 18px; }
.repair__search-input { flex: 1 1 auto; }
.repair__search-btn { flex: 0 0 auto; }
.repair__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.repair__chips-label { margin-right: 4px; }
.repair__chips .chip { padding: 6px 14px; font-size: 12px; }
.repair__chips .chip:hover { background: var(--panel); }
.repair__chips .chip.is-on:hover { background: var(--navy); }

.repair__panel { margin: 20px 0 16px; background: var(--panel); border: 1px solid var(--line); overflow-x: auto; }
.repair__panel:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.repair__table { width: 100%; min-width: 760px; border-collapse: collapse; }
.repair__table th, .repair__table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.repair__table thead th { font: 11px var(--font-mono); color: var(--muted); letter-spacing: .1em; white-space: nowrap; background: var(--white); }
.repair__table td { font-size: 13px; line-height: 1.45; color: var(--text); }
.repair__table tbody tr:last-child th, .repair__table tbody tr:last-child td { border-bottom: 0; }
.repair__table tbody tr:hover { background: var(--white); }
.repair-row__model { font: 700 18px/1.1 var(--font-display); color: var(--ink); white-space: nowrap; }
.repair-row__tag { background: var(--orange); color: var(--ink); font-size: 12px; }
.repair-row__alt, .repair-row__notes { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.repair-row__link { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--orange-text); font-size: 13px; }
.repair-row__link:hover { text-decoration: underline; }
.repair__count { padding: 10px 16px; color: var(--muted); border-top: 1px solid var(--line-2); }
.repair__empty { padding: 28px 20px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.repair__empty[hidden] { display: none; }
.repair__empty-title { margin: 0; }
.repair__empty-body { margin: 0 0 6px; max-width: 560px; color: var(--text-2); font-size: 14px; }
.repair__empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.repair__empty-ask { font-weight: 600; color: var(--orange-text); font-size: 13px; }
.repair__guide { margin: 0; font-size: 14px; }
.repair__guide .text-link, .repair__empty-ask { color: var(--orange-text); }
.repair__guide .text-link:hover { text-decoration: underline; }
.repair__none { padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 720px; }
.repair__none-title { margin: 0; }
.repair__none-text { margin: 0 0 6px; color: var(--text-2); font-size: 14px; }

@media (max-width: 900px) {
	/* Stack each row into a card with a label per cell (the family comparison table does the same). */
	.repair__panel { overflow: visible; }
	.repair__table { min-width: 0; display: block; }
	.repair__table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.repair__table tbody, .repair__table tr, .repair__table th { display: block; }
	.repair__table tr { padding: 14px 16px 16px; border-bottom: 1px solid var(--line-2); }
	.repair__table tr[hidden] { display: none; }
	.repair__table th, .repair__table td { padding: 0; border: 0; }
	.repair-row__model { padding-bottom: 8px; white-space: normal; }
	.repair__table td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 12px; align-items: baseline; padding: 4px 0; }
	.repair__table td::before { content: attr(data-label); font: 11px var(--font-mono); color: var(--muted); letter-spacing: .1em; }
	.repair__table td > * { grid-column: 2; }          /* every child of the cell sits in the value column */
	.repair-row__tag { justify-self: start; }
	.repair-row__alt, .repair-row__notes, .repair-row__link { margin-top: 2px; }
	.repair__table td:empty { display: none; }
	.repair__search { flex-wrap: wrap; }
	.repair__search-input { flex-basis: 100%; }
	.repair__search-btn, .repair__chips .chip { min-height: 44px; display: inline-flex; align-items: center; }
}