.ocm-table{width:100%;border-collapse:collapse;margin-bottom:1.5em}
.ocm-table th,.ocm-table td{border:1px solid #ccc;padding:8px 12px}
.ocm-table thead th{background:#f5f5f5}

.ocm-member-list{margin:0;padding:0}
.ocm-member{border:1px solid #ccc;border-radius:6px;margin-bottom:1rem;padding:.5rem 1rem}
.ocm-member summary{cursor:pointer;font-weight:600;list-style:none}
.ocm-member-details{margin-top:.75rem}

/* ──────────────────────────────────────────────
   Small‑screen layout for [committee_members] table
   ────────────────────────────────────────────── */
@media (max-width: 640px) {

	/* Let the table take up the full width and behave like stacked “cards” */
	.ocm-table {
		border: 0;
	}

	.ocm-table thead {
		/* Hide the header row – we’ll recreate the
		   header text with generated content on each cell */
		position: absolute;
		left: -9999px;
		top: -9999px;
	}

	.ocm-table tr {
		display: block;
		margin: 0 0 1.2rem 0;   /* breathing room between rows */
		border: 1px solid #ccc; /* a subtle outline around each “card” */
		padding: 0.8rem;
	}

	.ocm-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 0;
		border-bottom: 1px solid #e0e0e0;
		padding: 0.35rem 0;
	}

	.ocm-table td:last-child {
		border-bottom: 0;  /* no divider after final line */
	}

	/* Insert the header text in front of every datum */
	.ocm-table td::before {
		content: attr(data-label);
		font-weight: 600;
		flex-basis: 40%;      /* label column */
	}

	.ocm-table td a {
		word-break: break-all; /* prevent long e‑mails from overflowing */
	}
}