/**
 * YC Tables — front-end base styles.
 * Responsive behaviour (stacked / scroll / list) is injected per-table as a
 * scoped media query so each table can carry its own breakpoint.
 */

.yc-table-wrap {
	--yc-border: #e2e4e7;
	--yc-header-bg: #f6f7f7;
	--yc-stripe: #fbfbfc;
	--yc-radius: 8px;
	margin: 0 0 1.5rem;
	max-width: 100%;
}

.yc-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95rem;
	line-height: 1.5;
	border: 1px solid var(--yc-border);
	border-radius: var(--yc-radius);
	overflow: hidden;
}

.yc-table caption {
	text-align: left;
	font-weight: 600;
	padding: 0.5rem 0;
}

.yc-table thead th {
	background: var(--yc-header-bg);
	text-align: left;
	font-weight: 600;
}

.yc-table th,
.yc-table td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--yc-border);
	vertical-align: top;
}

.yc-table tbody tr:nth-child(even) {
	background: var(--yc-stripe);
}

.yc-table tbody tr:last-child td,
.yc-table tbody tr:last-child th {
	border-bottom: 0;
}

/* The per-table data-label is hidden on wide screens; the scoped media query
   reveals it for stacked / list modes below the table's breakpoint. */
.yc-table td::before,
.yc-table th[data-label]::before {
	content: none;
}