/*
 * Responsive Tables for TablePress: front-end styles.
 * Generated by tools/build-css.mjs from src/css. Do not edit this file directly.
 */

/* ==========================================================================
   Undo site-wide "scrolling tables" CSS
   Some sites have custom CSS such as `.tablepress { display: block; overflow-x: auto; white-space: nowrap; }`
   (e.g. in the Enfold theme's Quick CSS) to make every table scroll. Scroll, Collapse, and Modal handle every
   screen size themselves, so that is reset for them here. Stack and Flip only reset it below their breakpoint
   (see the breakpoint rules), so that above it, their tables behave like any other table on the site.
   ========================================================================== */

.tablepress.tpr-mode-scroll,
.tablepress.tpr-mode-collapse,
.tablepress.tpr-mode-modal {
	display: table;
	overflow: visible;
}

/* Let the text wrap again. (Scroll mode keeps the site's choice, as it scrolls anyway.) */
.tablepress:is(.tpr-mode-collapse, .tpr-mode-modal) > :where(thead, tbody, tfoot) > tr > * {
	white-space: normal;
}

/* ==========================================================================
   Scroll mode
   ========================================================================== */

.tpr-scroll-wrapper {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	margin-bottom: 1rem;
}

.tpr-scroll-wrapper > .tablepress {
	margin-bottom: 0;
}

[data-tpr-scroller]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   Scroll buttons (Scroll mode, and DataTables' "Horizontal Scrolling")
   ========================================================================== */

.tpr-scroll-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 0.25rem;
	margin: 0 0 0.25rem;
}

.tpr-scroll-buttons[hidden] {
	display: none;
}

.tpr-scroll-buttons > button.tpr-scroll-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #dddddd;
	border-radius: 50%;
	background: #ffffff;
	color: #111111;
	box-shadow: none;
	line-height: 1;
	cursor: pointer;
}

.tpr-scroll-buttons > button.tpr-scroll-button:hover:not(:disabled) {
	background: #f3f3f3;
}

.tpr-scroll-buttons > button.tpr-scroll-button:disabled {
	opacity: 0.4;
	cursor: default;
}

.tpr-scroll-buttons > button.tpr-scroll-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tpr-scroll-button svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* ==========================================================================
   Modal mode (the popup comes from the DataTables Responsive extension)
   ========================================================================== */

/* Show the popup above sticky theme headers. (`body` outranks the DataTables stylesheet, which loads later.) */
body div.dtr-modal {
	z-index: 100000;
}

/* A larger close button, for touch screens. */
body div.dtr-modal div.dtr-modal-close {
	width: 2rem;
	height: 2rem;
	font-size: 1.5rem;
	line-height: 1.8rem;
}

body div.dtr-modal div.dtr-modal-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

table.tpr-modal-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

table.tpr-modal-table td {
	padding: 0.5rem;
	border: none;
	border-top: 1px solid #dddddd;
	text-align: start;
	vertical-align: top;
}

table.tpr-modal-table tr:first-child td {
	border-top: none;
}

table.tpr-modal-table td:first-child {
	font-weight: bold;
}

/* Breakpoint: all (all screen sizes) */
/* ==========================================================================
   Stack mode: each row becomes a list of "column heading: value" pairs.
   ========================================================================== */

.tablepress.tpr-mode-stack.tpr-bp-all {
	display: flex;
	flex-direction: column;
	overflow: visible; /* Also undoes site-wide "scrolling tables" CSS (see frontend.css). */
}

.tablepress.tpr-mode-stack.tpr-bp-all > colgroup {
	display: none;
}

/* E.g. the "Edit" link for logged-in editors: keep it below the table. */
.tablepress.tpr-mode-stack.tpr-bp-all > caption {
	order: 1;
}

/* Hide the header row visually, but keep it available to screen readers. */
.tablepress.tpr-mode-stack.tpr-bp-all > thead {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tablepress.tpr-mode-stack.tpr-bp-all > :where(tbody, tfoot),
.tablepress.tpr-mode-stack.tpr-bp-all > :where(tbody, tfoot) > tr {
	display: block;
	content-visibility: visible; /* TablePress sets `auto` on rows, which makes block rows jump while scrolling. */
}

.tablepress.tpr-mode-stack.tpr-bp-all > :where(tbody, tfoot) > tr:not(:first-child) > :first-child {
	border-top-width: 2px;
}

.tablepress.tpr-mode-stack.tpr-bp-all > :where(tbody, tfoot) > tr > * {
	display: block;
	text-align: start;
	white-space: normal; /* Undoes site-wide `white-space: nowrap` on tables. */
	overflow-wrap: anywhere;
}

/*
 * The cell becomes a two-column CSS table: the label (::before) is one cell, and all of the cell's own content
 * is automatically wrapped in a second, anonymous cell. This works with any content, e.g. line breaks, links, or lists.
 */
.tablepress.tpr-mode-stack.tpr-bp-all > :where(tbody, tfoot) > tr > [data-tpr-label] {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-collapse: separate; /* Tables inherit `collapse`, which would ignore the cell padding. */
	border-spacing: 0;
	overflow-wrap: anywhere; /* Long email addresses or links would otherwise run off the screen. */
}

.tablepress.tpr-mode-stack.tpr-bp-all > :where(tbody, tfoot) > tr > [data-tpr-label]::before {
	content: attr(data-tpr-label);
	display: table-cell;
	width: 40%;
	padding-inline-end: var(--padding, 0.5rem);
	font-weight: bold;
	vertical-align: top;
	white-space: normal;
	overflow-wrap: break-word;
}

/* ==========================================================================
   Flip mode: rows become columns, and the table scrolls sideways.
   All cells become items of one CSS grid, so that cells in the same "row" always have the same height.
   ========================================================================== */

.tablepress.tpr-mode-flip.tpr-bp-all {
	display: grid;
	grid-template-rows: repeat(var(--tpr-flip-rows, 1), auto);
	grid-auto-flow: column;
	grid-auto-columns: max-content; /* As wide as the content, up to the cell's max-width. */
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	container-type: inline-size; /* Lets the cells below size themselves relative to the table's width (`cqi`). */
}

.tablepress.tpr-mode-flip.tpr-bp-all > :where(thead, tbody, tfoot),
.tablepress.tpr-mode-flip.tpr-bp-all > :where(thead, tbody, tfoot) > tr {
	display: contents;
}

.tablepress.tpr-mode-flip.tpr-bp-all > colgroup {
	display: none;
}

/* E.g. the "Edit" link for logged-in editors: move it to the end. */
.tablepress.tpr-mode-flip.tpr-bp-all > caption {
	order: 1;
	grid-row: 1 / -1;
}

.tablepress.tpr-mode-flip.tpr-bp-all > :where(thead, tbody, tfoot) > tr > * {
	max-width: min(16rem, 60vw); /* Fallback for browsers without container units. */
	max-width: min(16rem, 60cqi);
	border-top: none;
	border-bottom: 1px solid var(--border-color, #dddddd);
	border-inline-start: 1px solid var(--border-color, #dddddd);
	white-space: normal; /* Undoes site-wide `white-space: nowrap` on tables. */
	overflow-wrap: break-word;
}

/* The headings column: narrower, so that a full record fits next to it on a phone. */
.tablepress.tpr-mode-flip.tpr-bp-all > thead > tr > * {
	max-width: min(12rem, 40vw);
	max-width: min(12rem, 40cqi);
}

/* Keep the headings column in view while scrolling. */
.tablepress.tpr-mode-flip.tpr-bp-all > thead > tr:only-child > * {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
}

/* DataTables' "No matching records" message spans the whole grid column. */
.tablepress.tpr-mode-flip.tpr-bp-all > tbody > tr > .dt-empty {
	grid-row: 1 / -1;
}

/* Breakpoint: desktop (screens up to 1199.98px) */
@media (max-width: 1199.98px) {
	/* ==========================================================================
	   Stack mode: each row becomes a list of "column heading: value" pairs.
	   ========================================================================== */

	.tablepress.tpr-mode-stack.tpr-bp-desktop {
		display: flex;
		flex-direction: column;
		overflow: visible; /* Also undoes site-wide "scrolling tables" CSS (see frontend.css). */
	}

	.tablepress.tpr-mode-stack.tpr-bp-desktop > colgroup {
		display: none;
	}

	/* E.g. the "Edit" link for logged-in editors: keep it below the table. */
	.tablepress.tpr-mode-stack.tpr-bp-desktop > caption {
		order: 1;
	}

	/* Hide the header row visually, but keep it available to screen readers. */
	.tablepress.tpr-mode-stack.tpr-bp-desktop > thead {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.tablepress.tpr-mode-stack.tpr-bp-desktop > :where(tbody, tfoot),
	.tablepress.tpr-mode-stack.tpr-bp-desktop > :where(tbody, tfoot) > tr {
		display: block;
		content-visibility: visible; /* TablePress sets `auto` on rows, which makes block rows jump while scrolling. */
	}

	.tablepress.tpr-mode-stack.tpr-bp-desktop > :where(tbody, tfoot) > tr:not(:first-child) > :first-child {
		border-top-width: 2px;
	}

	.tablepress.tpr-mode-stack.tpr-bp-desktop > :where(tbody, tfoot) > tr > * {
		display: block;
		text-align: start;
		white-space: normal; /* Undoes site-wide `white-space: nowrap` on tables. */
		overflow-wrap: anywhere;
	}

	/*
	 * The cell becomes a two-column CSS table: the label (::before) is one cell, and all of the cell's own content
	 * is automatically wrapped in a second, anonymous cell. This works with any content, e.g. line breaks, links, or lists.
	 */
	.tablepress.tpr-mode-stack.tpr-bp-desktop > :where(tbody, tfoot) > tr > [data-tpr-label] {
		display: table;
		width: 100%;
		table-layout: fixed;
		border-collapse: separate; /* Tables inherit `collapse`, which would ignore the cell padding. */
		border-spacing: 0;
		overflow-wrap: anywhere; /* Long email addresses or links would otherwise run off the screen. */
	}

	.tablepress.tpr-mode-stack.tpr-bp-desktop > :where(tbody, tfoot) > tr > [data-tpr-label]::before {
		content: attr(data-tpr-label);
		display: table-cell;
		width: 40%;
		padding-inline-end: var(--padding, 0.5rem);
		font-weight: bold;
		vertical-align: top;
		white-space: normal;
		overflow-wrap: break-word;
	}

	/* ==========================================================================
	   Flip mode: rows become columns, and the table scrolls sideways.
	   All cells become items of one CSS grid, so that cells in the same "row" always have the same height.
	   ========================================================================== */

	.tablepress.tpr-mode-flip.tpr-bp-desktop {
		display: grid;
		grid-template-rows: repeat(var(--tpr-flip-rows, 1), auto);
		grid-auto-flow: column;
		grid-auto-columns: max-content; /* As wide as the content, up to the cell's max-width. */
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		container-type: inline-size; /* Lets the cells below size themselves relative to the table's width (`cqi`). */
	}

	.tablepress.tpr-mode-flip.tpr-bp-desktop > :where(thead, tbody, tfoot),
	.tablepress.tpr-mode-flip.tpr-bp-desktop > :where(thead, tbody, tfoot) > tr {
		display: contents;
	}

	.tablepress.tpr-mode-flip.tpr-bp-desktop > colgroup {
		display: none;
	}

	/* E.g. the "Edit" link for logged-in editors: move it to the end. */
	.tablepress.tpr-mode-flip.tpr-bp-desktop > caption {
		order: 1;
		grid-row: 1 / -1;
	}

	.tablepress.tpr-mode-flip.tpr-bp-desktop > :where(thead, tbody, tfoot) > tr > * {
		max-width: min(16rem, 60vw); /* Fallback for browsers without container units. */
		max-width: min(16rem, 60cqi);
		border-top: none;
		border-bottom: 1px solid var(--border-color, #dddddd);
		border-inline-start: 1px solid var(--border-color, #dddddd);
		white-space: normal; /* Undoes site-wide `white-space: nowrap` on tables. */
		overflow-wrap: break-word;
	}

	/* The headings column: narrower, so that a full record fits next to it on a phone. */
	.tablepress.tpr-mode-flip.tpr-bp-desktop > thead > tr > * {
		max-width: min(12rem, 40vw);
		max-width: min(12rem, 40cqi);
	}

	/* Keep the headings column in view while scrolling. */
	.tablepress.tpr-mode-flip.tpr-bp-desktop > thead > tr:only-child > * {
		position: sticky;
		inset-inline-start: 0;
		z-index: 1;
	}

	/* DataTables' "No matching records" message spans the whole grid column. */
	.tablepress.tpr-mode-flip.tpr-bp-desktop > tbody > tr > .dt-empty {
		grid-row: 1 / -1;
	}
}

/* Breakpoint: tablet (screens up to 979.98px) */
@media (max-width: 979.98px) {
	/* ==========================================================================
	   Stack mode: each row becomes a list of "column heading: value" pairs.
	   ========================================================================== */

	.tablepress.tpr-mode-stack.tpr-bp-tablet {
		display: flex;
		flex-direction: column;
		overflow: visible; /* Also undoes site-wide "scrolling tables" CSS (see frontend.css). */
	}

	.tablepress.tpr-mode-stack.tpr-bp-tablet > colgroup {
		display: none;
	}

	/* E.g. the "Edit" link for logged-in editors: keep it below the table. */
	.tablepress.tpr-mode-stack.tpr-bp-tablet > caption {
		order: 1;
	}

	/* Hide the header row visually, but keep it available to screen readers. */
	.tablepress.tpr-mode-stack.tpr-bp-tablet > thead {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.tablepress.tpr-mode-stack.tpr-bp-tablet > :where(tbody, tfoot),
	.tablepress.tpr-mode-stack.tpr-bp-tablet > :where(tbody, tfoot) > tr {
		display: block;
		content-visibility: visible; /* TablePress sets `auto` on rows, which makes block rows jump while scrolling. */
	}

	.tablepress.tpr-mode-stack.tpr-bp-tablet > :where(tbody, tfoot) > tr:not(:first-child) > :first-child {
		border-top-width: 2px;
	}

	.tablepress.tpr-mode-stack.tpr-bp-tablet > :where(tbody, tfoot) > tr > * {
		display: block;
		text-align: start;
		white-space: normal; /* Undoes site-wide `white-space: nowrap` on tables. */
		overflow-wrap: anywhere;
	}

	/*
	 * The cell becomes a two-column CSS table: the label (::before) is one cell, and all of the cell's own content
	 * is automatically wrapped in a second, anonymous cell. This works with any content, e.g. line breaks, links, or lists.
	 */
	.tablepress.tpr-mode-stack.tpr-bp-tablet > :where(tbody, tfoot) > tr > [data-tpr-label] {
		display: table;
		width: 100%;
		table-layout: fixed;
		border-collapse: separate; /* Tables inherit `collapse`, which would ignore the cell padding. */
		border-spacing: 0;
		overflow-wrap: anywhere; /* Long email addresses or links would otherwise run off the screen. */
	}

	.tablepress.tpr-mode-stack.tpr-bp-tablet > :where(tbody, tfoot) > tr > [data-tpr-label]::before {
		content: attr(data-tpr-label);
		display: table-cell;
		width: 40%;
		padding-inline-end: var(--padding, 0.5rem);
		font-weight: bold;
		vertical-align: top;
		white-space: normal;
		overflow-wrap: break-word;
	}

	/* ==========================================================================
	   Flip mode: rows become columns, and the table scrolls sideways.
	   All cells become items of one CSS grid, so that cells in the same "row" always have the same height.
	   ========================================================================== */

	.tablepress.tpr-mode-flip.tpr-bp-tablet {
		display: grid;
		grid-template-rows: repeat(var(--tpr-flip-rows, 1), auto);
		grid-auto-flow: column;
		grid-auto-columns: max-content; /* As wide as the content, up to the cell's max-width. */
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		container-type: inline-size; /* Lets the cells below size themselves relative to the table's width (`cqi`). */
	}

	.tablepress.tpr-mode-flip.tpr-bp-tablet > :where(thead, tbody, tfoot),
	.tablepress.tpr-mode-flip.tpr-bp-tablet > :where(thead, tbody, tfoot) > tr {
		display: contents;
	}

	.tablepress.tpr-mode-flip.tpr-bp-tablet > colgroup {
		display: none;
	}

	/* E.g. the "Edit" link for logged-in editors: move it to the end. */
	.tablepress.tpr-mode-flip.tpr-bp-tablet > caption {
		order: 1;
		grid-row: 1 / -1;
	}

	.tablepress.tpr-mode-flip.tpr-bp-tablet > :where(thead, tbody, tfoot) > tr > * {
		max-width: min(16rem, 60vw); /* Fallback for browsers without container units. */
		max-width: min(16rem, 60cqi);
		border-top: none;
		border-bottom: 1px solid var(--border-color, #dddddd);
		border-inline-start: 1px solid var(--border-color, #dddddd);
		white-space: normal; /* Undoes site-wide `white-space: nowrap` on tables. */
		overflow-wrap: break-word;
	}

	/* The headings column: narrower, so that a full record fits next to it on a phone. */
	.tablepress.tpr-mode-flip.tpr-bp-tablet > thead > tr > * {
		max-width: min(12rem, 40vw);
		max-width: min(12rem, 40cqi);
	}

	/* Keep the headings column in view while scrolling. */
	.tablepress.tpr-mode-flip.tpr-bp-tablet > thead > tr:only-child > * {
		position: sticky;
		inset-inline-start: 0;
		z-index: 1;
	}

	/* DataTables' "No matching records" message spans the whole grid column. */
	.tablepress.tpr-mode-flip.tpr-bp-tablet > tbody > tr > .dt-empty {
		grid-row: 1 / -1;
	}
}

/* Breakpoint: phone (screens up to 767.98px) */
@media (max-width: 767.98px) {
	/* ==========================================================================
	   Stack mode: each row becomes a list of "column heading: value" pairs.
	   ========================================================================== */

	.tablepress.tpr-mode-stack.tpr-bp-phone {
		display: flex;
		flex-direction: column;
		overflow: visible; /* Also undoes site-wide "scrolling tables" CSS (see frontend.css). */
	}

	.tablepress.tpr-mode-stack.tpr-bp-phone > colgroup {
		display: none;
	}

	/* E.g. the "Edit" link for logged-in editors: keep it below the table. */
	.tablepress.tpr-mode-stack.tpr-bp-phone > caption {
		order: 1;
	}

	/* Hide the header row visually, but keep it available to screen readers. */
	.tablepress.tpr-mode-stack.tpr-bp-phone > thead {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.tablepress.tpr-mode-stack.tpr-bp-phone > :where(tbody, tfoot),
	.tablepress.tpr-mode-stack.tpr-bp-phone > :where(tbody, tfoot) > tr {
		display: block;
		content-visibility: visible; /* TablePress sets `auto` on rows, which makes block rows jump while scrolling. */
	}

	.tablepress.tpr-mode-stack.tpr-bp-phone > :where(tbody, tfoot) > tr:not(:first-child) > :first-child {
		border-top-width: 2px;
	}

	.tablepress.tpr-mode-stack.tpr-bp-phone > :where(tbody, tfoot) > tr > * {
		display: block;
		text-align: start;
		white-space: normal; /* Undoes site-wide `white-space: nowrap` on tables. */
		overflow-wrap: anywhere;
	}

	/*
	 * The cell becomes a two-column CSS table: the label (::before) is one cell, and all of the cell's own content
	 * is automatically wrapped in a second, anonymous cell. This works with any content, e.g. line breaks, links, or lists.
	 */
	.tablepress.tpr-mode-stack.tpr-bp-phone > :where(tbody, tfoot) > tr > [data-tpr-label] {
		display: table;
		width: 100%;
		table-layout: fixed;
		border-collapse: separate; /* Tables inherit `collapse`, which would ignore the cell padding. */
		border-spacing: 0;
		overflow-wrap: anywhere; /* Long email addresses or links would otherwise run off the screen. */
	}

	.tablepress.tpr-mode-stack.tpr-bp-phone > :where(tbody, tfoot) > tr > [data-tpr-label]::before {
		content: attr(data-tpr-label);
		display: table-cell;
		width: 40%;
		padding-inline-end: var(--padding, 0.5rem);
		font-weight: bold;
		vertical-align: top;
		white-space: normal;
		overflow-wrap: break-word;
	}

	/* ==========================================================================
	   Flip mode: rows become columns, and the table scrolls sideways.
	   All cells become items of one CSS grid, so that cells in the same "row" always have the same height.
	   ========================================================================== */

	.tablepress.tpr-mode-flip.tpr-bp-phone {
		display: grid;
		grid-template-rows: repeat(var(--tpr-flip-rows, 1), auto);
		grid-auto-flow: column;
		grid-auto-columns: max-content; /* As wide as the content, up to the cell's max-width. */
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		container-type: inline-size; /* Lets the cells below size themselves relative to the table's width (`cqi`). */
	}

	.tablepress.tpr-mode-flip.tpr-bp-phone > :where(thead, tbody, tfoot),
	.tablepress.tpr-mode-flip.tpr-bp-phone > :where(thead, tbody, tfoot) > tr {
		display: contents;
	}

	.tablepress.tpr-mode-flip.tpr-bp-phone > colgroup {
		display: none;
	}

	/* E.g. the "Edit" link for logged-in editors: move it to the end. */
	.tablepress.tpr-mode-flip.tpr-bp-phone > caption {
		order: 1;
		grid-row: 1 / -1;
	}

	.tablepress.tpr-mode-flip.tpr-bp-phone > :where(thead, tbody, tfoot) > tr > * {
		max-width: min(16rem, 60vw); /* Fallback for browsers without container units. */
		max-width: min(16rem, 60cqi);
		border-top: none;
		border-bottom: 1px solid var(--border-color, #dddddd);
		border-inline-start: 1px solid var(--border-color, #dddddd);
		white-space: normal; /* Undoes site-wide `white-space: nowrap` on tables. */
		overflow-wrap: break-word;
	}

	/* The headings column: narrower, so that a full record fits next to it on a phone. */
	.tablepress.tpr-mode-flip.tpr-bp-phone > thead > tr > * {
		max-width: min(12rem, 40vw);
		max-width: min(12rem, 40cqi);
	}

	/* Keep the headings column in view while scrolling. */
	.tablepress.tpr-mode-flip.tpr-bp-phone > thead > tr:only-child > * {
		position: sticky;
		inset-inline-start: 0;
		z-index: 1;
	}

	/* DataTables' "No matching records" message spans the whole grid column. */
	.tablepress.tpr-mode-flip.tpr-bp-phone > tbody > tr > .dt-empty {
		grid-row: 1 / -1;
	}
}
