/* BGS Database — front-end styles.
 *
 * On this single-site deployment most table/stats presentation lives in the
 * site's global styles (Appearance → Editor → Styles → Additional CSS), so it
 * is maintained in one place. The rules below are the exception: they style
 * the plugin's search-first mode (added in 1.4.0) and ship with the plugin so
 * the feature works out of the box on any theme. Site CSS may still override
 * any of it.
 */

/* --- Statistics element grid (1.5.0+) ----------------------------------- */

.bgs-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 132px;
	gap: 14px;
	grid-auto-flow: dense;
	margin: 0 0 26px;
}

.bgs-w1 { grid-column: span 1; }
.bgs-w2 { grid-column: span 2; }
.bgs-w3 { grid-column: span 3; }
.bgs-w4 { grid-column: span 4; }
.bgs-h1 { grid-row: span 1; }
.bgs-h2 { grid-row: span 2; }
.bgs-h3 { grid-row: span 3; }
.bgs-h4 { grid-row: span 4; }

.bgs-el {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	/* One knob for card corners: set --bgs-radius in the theme to match the
	   site. 4px is the plugin default so the cards do not read as a different
	   design language next to an ordinary content box. */
	border-radius: var( --bgs-radius, 4px );
	padding: 14px 16px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bgs-el-empty {
	display: none;
}

.bgs-el-label,
.bgs-el-title {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary, #75601b);
}

.bgs-el-title {
	color: #6d5716;
	margin-bottom: 8px;
}

.bgs-el-value {
	margin: 2px 0;
	font-family: Georgia, serif;
	font-size: 34px;
	line-height: 1.05;
	color: #75601b;
}

.bgs-el-sub {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--wp--preset--color--neutral, #6e6c62);
}

/* Charts and the map flex-fill the rest of the cell. */
.bgs-el-box {
	position: relative;
	flex: 1;
	min-height: 0;
}

.bgs-el-box canvas {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

.bgs-el-mapbox svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.bgs-el-legend {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
	margin-top: 8px;
	font-size: 10px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral, #6e6c62);
	flex: none;
}

.bgs-el-legend-bar {
	width: 90px;
	height: 8px;
	border-radius: 4px;
}

/* Tablet: two columns; wide elements span both. */
@media (max-width: 1024px) {
	.bgs-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bgs-w3,
	.bgs-w4 {
		grid-column: span 2;
	}
}

/* Phones: everything stacks single-column in block order. */
@media (max-width: 781px) {
	.bgs-stats-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.bgs-el {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
	}

	.bgs-el-chart-year,
	.bgs-el-chart-category,
	.bgs-el-stat-schools {
		min-height: 260px;
	}

	.bgs-el-stat-map {
		min-height: 300px;
	}
}

/* --- Search-first mode ------------------------------------------------- */

.bgs-sf-box {
	position: relative;
}

.bgs-sf-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	opacity: 0.5;
	pointer-events: none;
}

.bgs-sf-input {
	width: 100%;
	box-sizing: border-box;
	/* Form controls do not inherit the page font; without this the field and
	   its placeholder render in the browser default while the page is not. */
	font-family: inherit;
	font-size: 1.15em;
	padding: 16px 20px 16px 52px;
	border: 2px solid rgba(0, 0, 0, 0.15);
	/* 8px by decision (1.20.10): softer than the 4px --bgs-radius the rest of
	   the plugin uses, deliberately. Do not fold into a radius sweep. */
	border-radius: 8px;
	background: #fff;
}

.bgs-sf-input:focus {
	outline: none;
	border-color: #eac035;
	box-shadow: 0 0 0 5px rgba(234, 192, 53, 0.14);
}

.bgs-sf-input::placeholder {
	color: var(--wp--preset--color--neutral, #6e6c62);
	opacity: 1;
}

/* Hide the native WebKit clear/decoration so the box stays clean. */
.bgs-sf-input::-webkit-search-decoration {
	display: none;
}

.bgs-sf-hint {
	font-size: 0.85em;
	color: #7b7970;
	margin: 10px 0 0;
}

.bgs-sf-browse {
	font-size: 0.85em;
	color: #7b7970;
	margin: 14px 0 0;
}

.bgs-sf-browse-link {
	font-weight: 600;
}

.bgs-sf-results {
	margin-top: 18px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	/* Matches .bgs-sf-input above; see the note there. */
	border-radius: 8px;
	overflow: hidden;
}

.bgs-sf-meta {
	padding: 10px 18px;
	background: rgba(0, 0, 0, 0.035);
	font-size: 0.85em;
	color: #55524a;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bgs-sf-head {
	display: grid;
	grid-template-columns: var(--bgs-sf-cols, 2fr 1fr 1fr 1fr);
	gap: 16px;
	padding: 9px 18px;
	background: rgba(0, 0, 0, 0.02);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #7b7970;
}

.bgs-sf-row {
	display: grid;
	grid-template-columns: var(--bgs-sf-cols, 2fr 1fr 1fr 1fr);
	gap: 16px;
	align-items: center;
	padding: 13px 18px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 0.92em;
}

.bgs-sf-row:last-child {
	border-bottom: none;
}

.bgs-sf-row:hover {
	background: rgba(234, 192, 53, 0.07);
}

.bgs-sf-cell {
	min-width: 0;
	overflow-wrap: break-word;
}

.bgs-sf-primary {
	font-weight: 600;
}

/* Per-cell labels only appear in the stacked (narrow) layout. */
.bgs-sf-label {
	display: none;
}

.bgs-sf-results mark {
	background: #f6e6ad;
	color: inherit;
	border-radius: 2px;
	padding: 0 1px;
}

.bgs-sf-more {
	padding: 12px;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.bgs-sf-more-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 0.9em;
	font-weight: 600;
	color: #75601b;
}

.bgs-sf-more-btn:hover {
	text-decoration: underline;
}

/* Narrow screens: each result becomes a stacked card with inline labels. */
@media (max-width: 781px) {
	.bgs-sf-head {
		display: none;
	}

	.bgs-sf-row {
		display: block;
		padding: 14px 18px;
	}

	.bgs-sf-cell {
		margin: 0 0 6px;
	}

	.bgs-sf-cell:last-child {
		margin-bottom: 0;
	}

	.bgs-sf-primary {
		font-size: 1.05em;
		margin-bottom: 8px;
	}

	.bgs-sf-label {
		display: block;
		font-size: 0.68em;
		font-weight: 700;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #7b7970;
		margin-bottom: 1px;
	}

	.bgs-sf-primary .bgs-sf-label {
		display: none;
	}
}

/* ==========================================================================
   Filter row layout (1.7.0)

   Keeps every filter on a single line at desktop widths. Scoped one level
   deeper than the base .bgs-filters rules so this wins wherever those base
   rules have been copied into a theme stylesheet.
   ========================================================================== */
.bgs-wrap .bgs-filters { flex-wrap: nowrap; align-items: flex-end; }
/* Short value lists (years, state codes) do not need the room that school and
   field-of-study lists do, so they take a fixed narrow basis and the long ones
   share whatever is left. The wide/narrow class comes from the renderer. */
.bgs-wrap .bgs-filter-field { flex: 1 1 0; min-width: 0; max-width: none; }
.bgs-wrap .bgs-filter-field--narrow { flex: 0 0 108px; }
.bgs-wrap .bgs-filter-field--wide { flex: 1 1 0; }
.bgs-wrap .bgs-filter { width: 100%; max-width: none; }

@media (max-width: 640px) {
	.bgs-wrap .bgs-filters { flex-wrap: wrap; }
	.bgs-wrap .bgs-filter-field,
	.bgs-wrap .bgs-filter-field--narrow,
	.bgs-wrap .bgs-filter-field--wide { flex: 1 1 45%; }
}

/* ==========================================================================
   Searchable combo boxes (1.7.0)

   Long filter lists (School, Field of Study) are upgraded from a plain
   <select> to a type-to-search listbox by assets/js/frontend.js. The
   original <select> stays in the DOM as the value holder, so anything
   listening for its change event keeps working.
   ========================================================================== */
.bgs-combo { position: relative; }

.bgs-combo-input {
	box-sizing: border-box;
	width: 100%;
	padding: 5px 30px 5px 8px;
	line-height: normal;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid #d6d5d1;
	border-radius: 4px;
}

/* Match native select height so labels line up across the filter row. */
.bgs-wrap .bgs-filter,
.bgs-wrap .bgs-combo-input {
	box-sizing: border-box;
	height: 30px;
	font-size: 14px;
	line-height: 18px;
}

.bgs-combo-input:focus-visible { outline: 2px solid #75601b; outline-offset: 1px; }

.bgs-combo-clear {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: none;
	padding: 2px 5px;
	font-size: 15px;
	line-height: 1;
	color: #7b7970;
	background: none;
	border: 0;
	cursor: pointer;
}

.bgs-combo.is-set .bgs-combo-clear { display: block; }
.bgs-combo-clear:hover { color: #0f0b02; }

.bgs-combo-list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	max-height: 260px;
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	list-style: none;
	background: #fff;
	border: 1px solid #d6d5d1;
	border-radius: 4px;
	box-shadow: 0 8px 20px rgba(15, 11, 2, 0.12);
}

.bgs-combo-list[hidden] { display: none; }

.bgs-combo-option {
	padding: 6px 10px;
	font-size: 14px;
	line-height: 1.35;
	cursor: pointer;
}

.bgs-combo-option[aria-selected="true"] { font-weight: 600; }
.bgs-combo-option.is-active,
.bgs-combo-option:hover { background: #f6f6f4; }

.bgs-combo-note {
	padding: 6px 10px;
	font-size: 12.5px;
	color: #7b7970;
}

/* The underlying select stays reachable to scripts but out of the tab order. */
.bgs-filter.bgs-combo-source {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * DataTables accent colors.
 *
 * DataTables paints three things from two variables: the four processing dots,
 * the row hover wash and the selected row. Its defaults are Bootstrap blue for
 * the dots and selection, and a 3.5% black wash for hover.
 *
 * The dots are decorative graphics, so they take the brighter palette variant.
 * Rows carry text, so they take the section tint instead — at full strength the
 * bright variants drop body text to 3.5:1 to 4.1:1, below the 4.5:1 that
 * Section 508 requires. On the tints, body text holds 6.5:1 to 7.7:1 and links
 * hold at least 4.5:1.
 *
 * Colors follow the section a table sits in, and fall back to the primary gold.
 *
 * Tints reference theme.json directly. The dot, hover and ordering values cannot:
 * DataTables needs bare r, g, b triplets so it can apply its own alpha, and CSS
 * cannot convert a hex custom property into one. Those triplets are therefore
 * mirrored here and must be updated if the palette moves. To make them follow
 * theme.json too, resolve them in PHP the way BGS_Render::category_palette does.
 * --------------------------------------------------------------------------- */
.bgs-wrap{
	--gw-dt-selected: var(--wp--preset--color--tertiary, #FEFCF5); /* fallback until PHP resolves it */
}

/* Repaint the selected row with the tint rather than the dot color. */
.bgs-wrap table.dataTable > tbody > tr.selected > *{
	box-shadow: inset 0 0 0 9999px var(--gw-dt-selected) !important;
	color: var(--wp--preset--color--body, #4C493F) !important;
}
.bgs-wrap table.dataTable > tbody > tr.selected a{
	color: var(--wp--preset--color--secondary, #75601B) !important;
}
.bgs-wrap table.dataTable.row-border > tbody > tr.selected + tr.selected > td,
.bgs-wrap table.dataTable.display > tbody > tr.selected + tr.selected > td{
	border-top-color: rgba(15, 11, 2, .12) !important;
}


/* Per-section values are resolved from theme.json in PHP and printed inline;
   see BGS_Render::table_accent_css() and the bgs_table_accent_sections filter. */


/* ==========================================================================
   Expanded view (1.13.0)

   One section, consolidated from the four that grew during development. Notes
   worth keeping:
     - .bgs-el had no positioning context of its own, so it gains one here for
       the expand button to sit in.
     - The overlay panel also carries .bgs-wrap, because the filter and element
       rules are scoped to that class and the legacy path physically moves the
       page's filter row into the panel.
     - .bgs-lb sits below the map tooltip. Both were at 99999 and the overlay,
       being the later sibling, won, so hovering a state drew the tooltip behind
       the panel.
     - The title clears a bottom border and a pseudo-element it inherits from
       the site's h2 styling.
   ========================================================================== */

/* --- the expand button --------------------------------------------------- */
.bgs-el,
.bgs-lb-host {
	position: relative;
}

.bgs-el-expand {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 6px;
	background: #fff;
	color: #75601b;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.bgs-el:hover .bgs-el-expand,
.bgs-lb-host:hover .bgs-el-expand,
.bgs-el-expand:focus-visible {
	opacity: 1;
}

/* Touch devices have no hover, so the affordance has to be permanent. */
@media ( hover: none ) {
	.bgs-el-expand {
		opacity: 1;
	}
}

.bgs-el-expand:hover {
	background: #faf5e6;
}

.bgs-el-expand svg,
.bgs-lb-close svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- the overlay --------------------------------------------------------- */
html.bgs-lb-active {
	overflow: hidden;
}

.bgs-lb {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.bgs-lb[hidden] {
	display: none;
}

.bgs-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 15, 11, 2, 0.55 );
}

.bgs-lb-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min( 1100px, 100% );
	max-width: none;
	max-height: calc( 100vh - 48px );
	/* Scroll the panel when it is taller than the viewport (short/mobile
	   screens), so the map and the chart note below it stay reachable. */
	overflow-y: auto;
	margin: 0;
	padding: 18px 20px 20px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.3 );
}

.bgs-lb-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.bgs-lb-title {
	margin: 0;
	padding-bottom: 0;
	border-bottom: 0 !important;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: #2c2a24;
}

.bgs-lb-title::after,
.bgs-lb-title::before {
	content: none !important;
}

/*
 * Title and count share a baseline-aligned row. The count is a separate line of
 * type rather than part of the heading, so the gold rule between them is drawn
 * as a pseudo-element pinned to that shared baseline: a border on the count box
 * would have to stretch the box to get any height, and stretching it pushes the
 * text off the title baseline.
 */
.bgs-lb-heading {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	row-gap: 6px;
	min-width: 0;
}

.bgs-lb-count {
	position: relative;
	margin: 0 0 0 12px;
	/* 12px of air, then the 2px rule, then 12px again. */
	padding-left: 14px;
	font-size: 16px;
	line-height: 1.35;
	color: var( --wp--preset--color--body, #4c493f );
	white-space: nowrap;
}

.bgs-lb-count[hidden] {
	display: none;
}

.bgs-lb-count b {
	font-weight: 700;
	color: var( --wp--preset--color--heading, #0f0b02 );
	font-variant-numeric: tabular-nums;
}

.bgs-lb-count::before {
	content: '';
	position: absolute;
	left: 0;
	/* Inter's descender, so the rule stops on the baseline, not below it. */
	bottom: 3px;
	width: 2px;
	/* Cap height of the 24px title. */
	height: 17px;
	background: var( --wp--preset--color--primary, #eac035 );
}

.bgs-lb-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.bgs-lb-reset {
	height: 30px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var( --wp--preset--color--secondary, #75601b );
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.14 );
	border-radius: 4px;
	cursor: pointer;
}

.bgs-lb-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 6px;
	background: #fff;
	color: #4c493f;
	cursor: pointer;
}

.bgs-lb-reset:hover,
.bgs-lb-close:hover {
	background: var( --wp--preset--color--students-tint, #faf5e6 );
}

/* --- the control row ----------------------------------------------------- */
.bgs-lb-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	align-items: flex-end;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 0.5px solid rgba( 0, 0, 0, 0.12 );
}

.bgs-lb-controls:empty {
	display: none;
}

.bgs-lb-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.bgs-lb-field-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary, #75601b);
}

.bgs-lb-field-label b {
	font-weight: 700;
	color: #4c493f;
}

.bgs-lb-toggle {
	display: flex;
}

.bgs-lb-toggle button {
	height: 34px;
	padding: 0 12px;
	font-size: 13px;
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	background: #fff;
	color: #4c493f;
	cursor: pointer;
}

.bgs-lb-toggle button:first-child {
	border-radius: 4px 0 0 4px;
}

.bgs-lb-toggle button:last-child {
	border-radius: 0 4px 4px 0;
	margin-left: -1px;
}

.bgs-lb-toggle button[aria-pressed="true"] {
	background: var( --wp--preset--color--secondary, #75601b );
	border-color: var( --wp--preset--color--secondary, #75601b );
	color: #fff;
}

/* --- sliders ------------------------------------------------------------- */
.bgs-lb-range,
.bgs-lb-dual-input {
	-webkit-appearance: none;
	appearance: none;
	height: 18px;
	margin: 0;
	background: none;
}

.bgs-lb-range {
	width: 150px;
}

.bgs-lb-range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: var( --wp--preset--color--outline, #e2ded1 );
}

.bgs-lb-range::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: var( --wp--preset--color--outline, #e2ded1 );
}

.bgs-lb-range::-webkit-slider-thumb,
.bgs-lb-dual-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -6px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var( --wp--preset--color--secondary, #75601b );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.18 );
	cursor: pointer;
	pointer-events: auto;
}

.bgs-lb-range::-moz-range-thumb,
.bgs-lb-dual-input::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var( --wp--preset--color--secondary, #75601b );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.18 );
	cursor: pointer;
	pointer-events: auto;
}

/* --- the year range ------------------------------------------------------ */
.bgs-lb-years {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bgs-lb-dual {
	position: relative;
	width: 210px;
	height: 18px;
}

.bgs-lb-dual-track {
	position: absolute;
	left: 0;
	right: 0;
	top: 7px;
	height: 4px;
	border-radius: 2px;
	background: var( --wp--preset--color--outline, #e2ded1 );
}

.bgs-lb-dual-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 2px;
	background: var( --wp--preset--color--primary, #eac035 );
}

.bgs-lb-dual.is-all .bgs-lb-dual-fill {
	background: var( --wp--preset--color--outline, #cfc9b6 );
}

/* Both inputs lie over the one track. Only their thumbs take the pointer, so
   whichever thumb is nearer the click is the one that moves. */
.bgs-lb-dual-input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 18px;
	pointer-events: none;
}

.bgs-lb-dual-input::-webkit-slider-runnable-track {
	height: 4px;
	background: none;
}

.bgs-lb-dual-input::-moz-range-track {
	height: 4px;
	background: none;
}

.bgs-lb-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #4c493f;
	white-space: nowrap;
	cursor: pointer;
}

.bgs-lb-check input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var( --wp--preset--color--secondary, #75601b );
}

/* --- the element in the panel -------------------------------------------- */
/* Legacy panels have no per-element controls, so they move the page's own
   filter row in instead. */
.bgs-lb-filters {
	margin-bottom: 14px;
}

.bgs-lb-filters:empty {
	display: none;
}

.bgs-lb-body {
	display: flex;
	flex: 1;
	min-height: 0;
}

/* The card chrome belongs to the grid, not to the overlay: in the panel the
   element is just its chart. Height is explicit because the grid row that used
   to size it is no longer its parent. */
.bgs-lb-body .bgs-el,
.bgs-lb-body .bgs-lb-host {
	flex: 1;
	height: min( 68vh, 620px );
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: none;
}

.bgs-lb-el .bgs-el-title,
.bgs-lb-el .bgs-el-expand {
	display: none;
}

/* An element that filters down to nothing is hidden by .bgs-el-empty, which in
   the overlay would leave a blank panel. */
.bgs-lb-body .bgs-el-empty {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.bgs-lb-body .bgs-el-empty > * {
	display: none;
}

.bgs-lb-body .bgs-el-empty::after {
	content: "No records match these filters.";
	font-size: 14px;
	color: var(--wp--preset--color--neutral, #6e6c62);
}

/* The tooltip sets its own z-index inline, so the overlay yields to it rather
   than a rule here trying to out-rank an inline style. */
.bgs-map-tooltip {
	z-index: 100001 !important;
}

@media ( max-width: 781px ) {
	.bgs-lb {
		padding: 12px;
	}

	.bgs-lb-panel {
		max-height: calc( 100vh - 24px );
		padding: 14px;
	}

	.bgs-lb-title {
		font-size: 18px;
	}

	.bgs-lb-controls {
		gap: 10px 14px;
	}

	.bgs-lb-range {
		width: 120px;
	}

	.bgs-lb-dual {
		width: 165px;
	}

	.bgs-lb-years {
		gap: 10px;
	}

	.bgs-lb-body .bgs-el,
	.bgs-lb-body .bgs-lb-host {
		height: min( 60vh, 460px );
	}
}


/* The combo the plugin builds for long lists needs room in the control row. */
.bgs-lb-field .bgs-combo {
	min-width: 260px;
}

.bgs-lb-field .bgs-combo-list {
	z-index: 5;
}

/* ==========================================================================
   DataTables 3.0: numeric column headers

   3.0 gives numeric columns dt-type-numeric, which right-aligns the cells and
   reverses the header row so the sort arrow sits on the right of a right-aligned
   column. These tables left-align every column, so the reversal put the arrow on
   the wrong side of Year alone. Both are pinned back to match the other columns.
   ========================================================================== */
table.bgs-table th.dt-type-numeric,
table.bgs-table td.dt-type-numeric {
	text-align: left;
}

table.bgs-table th.dt-type-numeric div.dt-column-header,
table.bgs-table th.dt-type-numeric div.dt-column-footer {
	flex-direction: row;
}

/* Accessible horizontal scrolling (2026-08-01): replaces DataTables scrollX,
   which split the table and failed the Section 508 audit. */
.bgs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bgs-scroll:focus-visible{outline:2px solid var(--wp--preset--color--secondary);outline-offset:2px}
.bgs-scroll > table.dataTable{min-width:640px}

/* Stat label colors (2026-08-01, Section 508 audit): the light gold and gray
   literals failed 4.5:1 on white; both now follow the theme palette with
   compliant fallbacks. */

/* Stacked heading: no vertical rule when the count is on its own line. */
@media (max-width: 640px) {
	.bgs-lb-count {
		margin-left: 0;
		padding-left: 0;
		white-space: normal;
	}

	.bgs-lb-count::before {
		display: none;
	}
}


/* Estimate note under the enlarged By Discipline chart. Sits below the plot,
   inside the panel, at caption size so it reads as a footnote rather than as a
   warning. Constrained to a comfortable measure and left-aligned with the
   chart. */
/* The note sits under the enlarged chart and must not compete with it for
   height. Two things make that work: the note never shrinks, and the chart is
   allowed to. A flex child defaults to min-height:auto, which puts a floor
   under the chart equal to its content and pushes the note out of the panel on
   a short window - clearing that floor on the body and the element inside it is
   what stops the two overlapping. Width is left to the panel: the note is one
   short paragraph spanning a wide chart, and capping it mid-panel just looked
   like a mistake. */
.bgs-lb-body {
	/* ST-87 / ST-88 (2026-08-09): on a short/mobile viewport, letting the body
	   shrink pushed the fixed-height chart (overflow:visible) down onto the note.
	   Hold the body at its content height (flex-shrink 0) and let the panel
	   scroll instead (overflow-y on .bgs-lb-panel). The note stays below. */
	flex: 1 0 auto;
	min-height: 0;
}

.bgs-lb-body .bgs-el,
.bgs-lb-body .bgs-el-box {
	min-height: 0;
}

/* In the grid an element takes a fixed height from its size class (bgs-h4 here,
   four rows). Enlarged it must not: the panel is what decides the height, and
   keeping the grid height is what pushed the chart through the note on a short
   window. Height auto is not the answer either - a canvas has no intrinsic
   height, so the panel collapsed to nothing. The height is therefore stated
   outright: it tracks the viewport, stops at the 620px the grid uses so nothing
   changes on a tall screen, and never goes below 220px, which is the point at
   which ten bars stop being readable. The 260px subtracted is the panel
   chrome - title, filter row, the note itself. Chart.js redraws to the new box. */
.bgs-lb-body .bgs-lb-el {
	height: clamp( 220px, calc( 100vh - 260px ), 620px );
}

/* The map is artwork with a fixed 940x588 aspect, not a canvas: on a narrow
   screen it scales to the width, and the viewport-derived height above then
   leaves a tall band of dead space above and below it while pushing the
   legend out of the panel. Below 782px the map element sizes itself instead -
   the box takes the artwork's aspect ratio (it is position:relative with an
   absolutely-filled svg, so it needs a real height of its own) and the legend
   follows immediately under it. Charts keep the height above, because a
   canvas has no intrinsic height. */
@media ( max-width: 781px ) {
	.bgs-lb-body .bgs-lb-el.bgs-el-stat-map {
		height: auto;
	}

	.bgs-lb-body .bgs-el-stat-map .bgs-el-mapbox {
		flex: 0 0 auto;
		height: auto;
		aspect-ratio: 940 / 588;
	}
}

.bgs-lb-note {
	flex: 0 0 auto;
	margin: 14px 0 0;
	max-width: none;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--neutral, #6e6c62);
}
@media (max-width:599px){
  .bgs-lb-note{font-size:12.5px}
}


/* ============================================================
   THEME-ORIGINATED RULES  (consolidated 2026-08-16)
   These previously lived in goldwater/style.css, which loads
   after this file. They are kept last and in their original
   source order so the cascade matches the pre-consolidation
   behaviour exactly. Do not reorder or interleave them with
   the rules above.
   ============================================================ */

/* BGS base (moved from plugin) */
.bgs-wrap {margin:1.5em 0;}
.bgs-filters {display:flex;flex-wrap:wrap;gap:12px 18px;margin-bottom:1em;padding:12px 14px;background:rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.08);border-radius:6px;}
.bgs-filter-field {display:flex;flex-direction:column;gap:4px;font-size:0.85em;min-width:110px;max-width:260px;}
.bgs-filter-label {font-weight:600;opacity:0.75;}
.bgs-filter {box-sizing:border-box;width:100%;max-width:100%;}
.bgs-wrap .bgs-filter,
.bgs-wrap .dt-length select {-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 10px center !important;background-size:12px 8px !important;padding:5px 30px 5px 8px !important;}
.bgs-wrap table.bgs-table {width:100%;border-collapse:collapse;}
.bgs-wrap table.bgs-table th,
.bgs-wrap table.bgs-table td {padding:8px 10px;text-align:left;vertical-align:top;}
.bgs-wrap table.bgs-table thead th {border-bottom:2px solid currentColor;font-weight:700;}
.bgs-wrap table.bgs-table tbody tr {border-bottom:1px solid rgba(0,0,0,0.08);}
.bgs-wrap .dt-search,
.bgs-wrap .dt-length {margin-bottom:0.75em;}
.bgs-wrap .dt-search input {padding:4px 8px;min-width:220px;max-width:100%;}
.bgs-wrap .dt-length label {display:inline-flex;align-items:center;white-space:nowrap;}
.bgs-wrap .dt-info,
.bgs-wrap .dt-paging {margin-top:0.75em;}
@media (max-width:781px) {
  .bgs-wrap table.bgs-table {display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
}
.bgs-stats {--bgs-accent:var(--wp--preset--color--primary,var(--wp--preset--color--primary));--bgs-accent-dark:var(--wp--preset--color--secondary,var(--wp--preset--color--secondary));--bgs-heading:var(--wp--preset--color--heading,var(--wp--preset--color--heading));--bgs-body:var(--wp--preset--color--body,var(--wp--preset--color--body));--bgs-muted:var(--wp--preset--color--neutral,var(--wp--preset--color--neutral));--bgs-panel:var(--wp--preset--color--quaternary,var(--wp--preset--color--quaternary));--bgs-card:var(--wp--preset--color--background);--bgs-border:rgba(0,0,0,0.07);margin-bottom:1.75em;padding:22px;background:var(--bgs-panel);border-radius:4px;}
.bgs-stats-loading {margin:0;color:var(--bgs-muted);font-size:0.9em;}
.bgs-stat-top {display:grid;grid-template-columns:5fr 7fr;gap:16px;}
.bgs-stat-tiles {display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start;}
.bgs-stat-card,
.bgs-stat-tile {background:var(--bgs-card);border:1px solid var(--bgs-border);border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.bgs-stat-tile {padding:16px 18px;}
.bgs-stat-label {margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--bgs-body);}
.bgs-stat-value {margin:0;font-size:34px;line-height:1.1;font-weight:600;color:var(--bgs-accent-dark);}
.bgs-stat-sub {margin:6px 0 0;font-size:13px;color:var(--bgs-muted);}
.bgs-chart-card {padding:18px 20px;}
.bgs-chart-wide {margin-top:16px;}
.bgs-chart-card h3 {margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--bgs-accent-dark);}
.bgs-chart-box {position:relative;height:220px;}
.bgs-chart-box-tall {height:300px;}
@media (max-width:781px) {
  .bgs-stat-top {grid-template-columns:1fr;}
}
@media (max-width:480px) {
  .bgs-stat-tiles {grid-template-columns:1fr 1fr;}
  .bgs-stat-value {font-size:28px;}
}
@media (max-width:599px) {
  .bgs-stats {padding:16px;}
  .bgs-stat-top,
  .bgs-stat-tiles {gap:12px;}
}
@media (max-width:781px) {
  .bgs-chart-box-tall {height:360px;}
}
/* end BGS mobile */
.bgs-stats .bgs-stat-value {font-family:"Playfair Display",serif;font-weight:600;letter-spacing:-0.01em;}
.bgs-wrap .bgs-stats {margin-bottom:4rem;}
.bgs-wrap table.bgs-table thead tr th {font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--wp--preset--color--body);white-space:nowrap;border-bottom:2px solid rgba(0,0,0,0.12);padding-top:6px;padding-bottom:10px;}
.bgs-wrap table.bgs-table td {font-size:16px;}
.bgs-wrap table.bgs-table tbody tr:hover {background:rgba(234,192,53,0.08);}
.bgs-wrap thead th .dt-column-order::before,
.bgs-wrap thead th .dt-column-order::after {font-size:9px !important;right:0;color:var(--wp--preset--color--neutral) !important;opacity:.4 !important;}
/* DataTables 3 draws its own sort arrows as CSS triangles on these same
* two pseudo-elements. The chevron glyphs written for DataTables 1.x only
* replaced their content, not their borders, so both rendered - two sets of
* arrows per column, the glyph sitting low and out of line. Hand the arrows
* back to DataTables and keep the neutral colour chosen during the 508
* contrast work. Its hover outline is also suppressed; the header already
* signals sortability through the arrows and the pointer cursor. */
.bgs-wrap thead th .dt-column-order::before {content:" " !important;border-bottom-color:var(--wp--preset--color--neutral) !important;}
.bgs-wrap thead th .dt-column-order::after {content:" " !important;border-top-color:var(--wp--preset--color--neutral) !important;}
.bgs-wrap thead th.dt-orderable-asc:hover,
.bgs-wrap thead th.dt-orderable-desc:hover {outline:none !important;}
.bgs-wrap thead th.dt-ordering-asc .dt-column-order::before {opacity:1 !important;color:var(--wp--preset--color--secondary) !important;}
.bgs-wrap thead th.dt-ordering-desc .dt-column-order::after {opacity:1 !important;color:var(--wp--preset--color--secondary) !important;}
.bgs-wrap .bgs-filters {background:var(--wp--preset--color--quaternary,var(--wp--preset--color--quaternary));border:1px solid rgba(0,0,0,0.06);border-radius:4px;padding:14px 16px;}
.bgs-wrap .bgs-filter-label {text-transform:uppercase;letter-spacing:.07em;font-size:11px;font-weight:600;color:var(--wp--preset--color--body);opacity:1;}
.bgs-wrap .dt-search input.dt-input {border:1px solid rgba(0,0,0,0.18);border-radius:4px;background-color:var(--wp--preset--color--background);padding:7px 10px 7px 32px;min-width:250px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6c62' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;background-size:15px;}
.bgs-wrap .dt-search input.dt-input,
.bgs-wrap .bgs-filter,
.bgs-wrap .dt-length select,
.bgs-wrap .bgs-combo-input {border: 1px solid var(--wp--preset--color--outline); border-radius: 4px; background-color: var(--wp--preset--color--background);}
.bgs-wrap .dt-search input.dt-input,
.bgs-wrap .bgs-filter,
.bgs-wrap .dt-length select,
.bgs-wrap .bgs-combo-input {font-family: var(--wp--preset--font-family--inter); font-size: 14px; min-height: 32px;}
.bgs-wrap .dt-search input.dt-input:focus,
.bgs-wrap .bgs-filter:focus,
.bgs-wrap .dt-length select:focus,
.bgs-wrap .bgs-combo-input:focus {outline: none; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 2px var(--wp--preset--color--primary), 0 0 0 3px var(--wp--preset--color--secondary);}
.bgs-wrap .dt-length select {width:auto; min-width:3.5em; max-width:100%; margin-left:10px; border:1px solid var(--wp--preset--color--outline) !important; border-radius:4px !important; background-color:var(--wp--preset--color--background);}
.bgs-wrap .dt-length label,
.bgs-wrap .dt-info {text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600;color:var(--wp--preset--color--neutral);}
.bgs-wrap .dt-paging .dt-paging-button {padding:4px 10px; border-radius:4px;}
.bgs-wrap .dt-paging .dt-paging-button.current {background:var(--wp--preset--color--primary) !important;color:var(--wp--preset--color--heading) !important;border-color:var(--wp--preset--color--primary) !important;}
@media (min-width:782px) {
  .bgs-wrap .bgs-stat-tiles {align-content:stretch;grid-template-rows:1fr 1fr;}
  .bgs-wrap .bgs-stat-tiles .bgs-stat-tile {display:flex;flex-direction:column;justify-content:center;}
}
/* end BGS *//* BGS map+schools */
.bgs-stat-mid {display:grid;grid-template-columns:7fr 5fr;gap:18px;margin-top:18px;}
.bgs-stat-mid-single {grid-template-columns:1fr;}
.bgs-map svg {width:100%;height:auto;display:block;}
.bgs-map-legend {display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11px;color:var(--wp--preset--color--neutral,var(--wp--preset--color--neutral));text-transform:uppercase;letter-spacing:.06em;}
.bgs-map-legend-bar {flex:1;height:10px;border-radius:5px;background:linear-gradient(90deg,#faf3d8,#dcbf55,var(--wp--preset--color--secondary));}
.bgs-schools-card {display:flex;flex-direction:column;}
.bgs-pie-wrap {flex:1;display:flex;align-items:center;justify-content:center;width:100%;}
.bgs-pie-wrap .bgs-chart-box-tall {width:100%;height:360px;}
.bgs-map-tooltip {position:fixed;pointer-events:none;background:var(--wp--preset--color--heading);color:var(--wp--preset--color--background);padding:6px 10px;border-radius:6px;font-size:12px;line-height:1.3;opacity:0;transform:translate(-50%,-130%);white-space:nowrap;z-index:99999;transition:opacity 0.15s;}
@media (max-width:781px) {
  .bgs-stat-mid {grid-template-columns:1fr;}
}
/* ---- Scholars (DataTables) pager — match query-loop pagination. DataTables ships !important hover styles, so these must out-rank them ---- */
.bgs-wrap .dt-container .dt-paging .dt-paging-button {border: 1px solid var(--wp--preset--color--outline) !important; border-radius: 4px; background: var(--wp--preset--color--background) !important; color: var(--wp--preset--color--heading) !important; font-size: 14px; line-height: 1; padding: 8px 12px; margin-left: 6px; transition: background-color 0.15s ease, border-color 0.15s ease;}
.bgs-wrap .dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {background: var(--wp--preset--color--quaternary) !important; border-color: var(--wp--preset--color--neutral) !important; color: var(--wp--preset--color--heading) !important;}
.bgs-wrap .dt-container .dt-paging .dt-paging-button.current,
.bgs-wrap .dt-container .dt-paging .dt-paging-button.current:hover {background: var(--wp--preset--color--primary) !important; border-color: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--heading) !important; font-weight: 600;}
.bgs-wrap .dt-container .dt-paging .dt-paging-button.disabled,
.bgs-wrap .dt-container .dt-paging .dt-paging-button.disabled:hover,
.bgs-wrap .dt-container .dt-paging .dt-paging-button.disabled:active {background: var(--wp--preset--color--background) !important; border-color: var(--wp--preset--color--outline) !important; color: var(--wp--preset--color--heading) !important; opacity: .4; cursor: default;}
@media (max-width:781px) {
  /* Directory data cells are dense on small screens; drop the 16px
     body size to 14px on mobile. Overrides .bgs-wrap table.bgs-table td
     above. */
  .bgs-wrap table.bgs-table td {font-size:14px;}
}
@media (hover:none) {
  /* iOS Safari zooms on focus of any input under 16px. Raise the
     directory search box and the filter combo inputs to 16px on touch
     devices only, so desktop control sizing is unchanged. */
  .bgs-wrap .dt-search input.dt-input,
  .bgs-wrap .bgs-combo-input {font-size:16px;}
}