/* pages/home/table.css
   Home: the typical-requirements comparison table.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

/* Requirements table. Scrolls sideways rather than squashing on phones.
   overflow-y is pinned because setting overflow-x alone makes the other axis
   compute to auto, and then anything that grows the content even slightly puts a
   vertical scrollbar on the table and clips the bottom row. */
.table-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

.req-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	min-width: 720px;
}

.req-table th, .req-table td {
	border: 1px solid var(--line);
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
}

.req-table thead th {
	background: var(--navy);
	color: #fff;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.req-table tbody th {
	background: var(--soft); font-weight: 600; color: var(--ink);
}

.req-table tbody td {
	font-weight: 300; color: var(--ink-2);
}

.req-table tbody tr:hover td { background: #FBFCFD; }