/* TXOGA District Widget — styles.
 * Mirrors the original "By the Numbers" report layout. Colors are exposed as
 * custom properties on .txoga-dw so they can be themed if branding changes. */

/* Bundled condensed display font (Tungsten-style) for the infographic numbers
   and headings — matches the official PDF look. Variable weight 400-700. */
@font-face {
	font-family: 'TXOGA Oswald';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( '../fonts/oswald.woff2' ) format( 'woff2' );
}

/* Anton — heavy condensed display face the client requested, used for the
   banner, section headings and all the big numbers (Oswald stays for labels). */
@font-face {
	font-family: 'TXOGA Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../fonts/anton.woff2' ) format( 'woff2' );
}

.txoga-dw {
	--txoga-red:    #d92038;
	--txoga-navy:   #112240;
	--txoga-blue:   #0085ca;
	--txoga-bg:     #ececec;
	--txoga-white:  #ffffff;
	--txoga-radius: 8px;

	box-sizing: border-box;
	background: transparent;
	padding: 0;
	max-width: 880px;
	margin: 0 auto;
	font-family: Arial, Helvetica, "Segoe UI", sans-serif;
	color: var(--txoga-navy);
	line-height: 1.2;
}

/* ---------- Controls bar (above the infographic) ---------- */
.txoga-dw__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	padding: 2px 0 12px;
	position: relative;
	z-index: 100; /* keep the district dropdown above the infographic below */
}

.txoga-dw__bar .txoga-dw__toolbar {
	margin-left: auto;
	margin-top: 0;
	align-self: flex-end;
}

/* ---------- Scalable infographic stage ---------- */
.txoga-dw__stage-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 6px;
}

.txoga-dw__stage-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 1080px;
	height: 1398px; /* 8.5x11 proportions */
	transform-origin: top left;
}

.txoga-dw *,
.txoga-dw *::before,
.txoga-dw *::after {
	box-sizing: border-box;
}

/* ---------- Header ---------- */
.txoga-dw__header {
	display: flex;
	align-items: center;
	gap: 20px;
	background: transparent;
	padding: 4px 4px 12px;
	margin-bottom: 12px;
	position: relative;
	z-index: 10; /* keep the district dropdown above the panels below */
}

.txoga-dw__brand {
	flex: 0 0 auto;
	/* Fixed logo column: the image fills this, so it can never balloon to its
	   intrinsic 1500px width and squeeze the title. */
	width: 300px;
}

/* !important here defeats theme/Elementor rules like `img { width: 100% }`
   that would otherwise blow the logo up to full size. */
.txoga-dw__logo {
	display: block !important;
	width: 100% !important;
	max-width: 300px !important;
	height: auto !important;
}

.txoga-dw__title {
	flex: 1 1 auto;
	margin: 0;
	text-align: center;
	color: var(--txoga-white);
	font-size: clamp( 22px, 2.4vw, 40px );
	font-weight: 800;
	line-height: 1.1;
}

.txoga-dw__controls {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 260px;
}

.txoga-dw__control {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	margin: 0 !important;
	font-size: 13px;
	color: var(--txoga-navy);
	min-width: 200px;
}

/* Force the label to a fixed height so both controls are identical regardless
   of theme line-height — keeps Chamber and District perfectly aligned. */
.txoga-dw__control > span {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 16px;
	line-height: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--txoga-navy);
}

.txoga-dw__ms {
	position: relative;
	width: 100%;
	margin: 0 !important;
}

.txoga-dw__control select {
	appearance: auto;
	box-sizing: border-box !important;
	width: 100%;
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	margin: 0 !important;
	padding: 7px 10px !important;
	font-size: 14px;
	line-height: 1.2 !important;
	vertical-align: top !important;
	color: var(--txoga-navy);
	background: var(--txoga-white);
	border: 1px solid #c9c9c9;
	border-radius: 3px;
}

/* ---------- Multi-select district slicer ---------- */
.txoga-dw__ms {
	position: relative;
	width: 100%;
}

/* !important throughout so the toggle matches the native <select> box and the
   theme's generic <button> styles (centered, bold, colored fill) can't win. */
.txoga-dw__ms-toggle {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100% !important;
	height: 38px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 7px 10px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--txoga-navy) !important;
	background: var(--txoga-white) !important;
	border: 1px solid #c9c9c9 !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	cursor: pointer;
}

.txoga-dw__ms-toggle:hover {
	border-color: #9a9a9a !important;
	background: var(--txoga-white) !important;
	color: var(--txoga-navy) !important;
}

.txoga-dw__ms-label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.txoga-dw__ms-caret {
	margin-left: 8px;
	color: #6a6a6a;
	font-size: 12px;
}

.txoga-dw__ms-panel {
	position: absolute;
	top: calc( 100% + 3px );
	left: 0;
	right: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	max-height: 320px;
	background: var(--txoga-white);
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.18 );
}

/* The explicit display above would otherwise defeat the [hidden] attribute. */
.txoga-dw__ms-panel[hidden] {
	display: none;
}

.txoga-dw__ms-search {
	display: block;
	box-sizing: border-box;
	width: calc( 100% - 16px );
	margin: 8px 8px 4px;
	padding: 6px 8px;
	font-size: 13px;
	border: 1px solid #d4d4d4;
	border-radius: 3px;
}

.txoga-dw__ms-options {
	overflow-y: auto;
}

.txoga-dw__ms-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	font-size: 14px;
	color: var(--txoga-navy);
	cursor: pointer;
}

.txoga-dw__ms-opt:hover {
	background: #f1f4fb;
}

.txoga-dw__ms-opt input {
	margin: 0;
	flex: 0 0 auto;
}

.txoga-dw__ms-all {
	border-bottom: 1px solid #e6e6e6;
	font-weight: 700;
}

/* ---------- Print / image toolbar ---------- */
.txoga-dw__toolbar {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

.txoga-dw__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--txoga-navy);
	background: var(--txoga-white);
	border: 1px solid #c9c9c9;
	border-radius: 3px;
	cursor: pointer;
}

.txoga-dw__btn:hover {
	border-color: var(--txoga-navy);
	background: #f1f4fb;
}

.txoga-dw__btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.txoga-dw__btn svg {
	flex: 0 0 auto;
}

/* ---------- Body grid ---------- */
.txoga-dw__body {
	display: grid;
	grid-template-columns: 1.05fr 1.55fr 1.55fr 1.55fr;
	gap: 16px;
	align-items: stretch;
}

/* ---------- Production sidebar ---------- */
.txoga-dw__sidebar {
	background: var(--txoga-red);
	border-radius: var(--txoga-radius);
	padding: 18px 16px;
	color: var(--txoga-white);
	text-align: center;
}

.txoga-dw__side-block h3 {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 800;
	color: var(--txoga-white);
	line-height: 1.15;
}

.txoga-dw__side-box {
	background: var(--txoga-white);
	border-radius: var(--txoga-radius);
	padding: 12px 10px;
	margin: 0 auto 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.txoga-dw__side-num {
	color: var(--txoga-red);
	font-size: 26px;
	font-weight: 800;
}

.txoga-dw__side-sub {
	color: var(--txoga-red);
	font-size: 12px;
	font-weight: 600;
}

.txoga-dw__side-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--txoga-white);
}

.txoga-dw__side-vlabel {
	font-size: 12px;
	font-weight: 600;
	color: var(--txoga-white);
	margin-bottom: 2px;
}

.txoga-dw__divider {
	border: 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.55 );
	margin: 16px 8px;
}

/* ---------- Metric panels ---------- */
.txoga-dw__panel {
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	border-radius: var(--txoga-radius);
	padding: 18px 18px 22px;
	display: flex;
	flex-direction: column;
}

.txoga-dw__panel-title {
	margin: 0 0 16px;
	text-align: center;
	color: var(--txoga-white);
	font-size: clamp( 18px, 1.5vw, 26px );
	font-weight: 800;
	line-height: 1.15;
	min-height: 2.3em; /* keep the 3 panels' boxes vertically aligned */
	display: flex;
	align-items: center;
	justify-content: center;
}

.txoga-dw__panel-body {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1 1 auto;
	justify-content: center;
}

.txoga-dw__box {
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 4px;
	padding: 14px 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* The two outline boxes overlap the central red box like the original. */
.txoga-dw__box:first-child {
	border-bottom: 0;
}
.txoga-dw__box:last-child {
	border-top: 0;
}

.txoga-dw__box-num {
	color: var(--txoga-white);
	font-size: clamp( 26px, 2.4vw, 40px );
	font-weight: 800;
	line-height: 1.05;
}

.txoga-dw__box-label {
	color: #c8d2e6;
	font-size: 14px;
	font-weight: 600;
}

.txoga-dw__box--total {
	background: var(--txoga-red);
	border-color: var(--txoga-red);
	border-radius: 14px;
	position: relative;
	z-index: 1;
	/* Slightly wider than the outline boxes so it overlaps them like the original. */
	margin: 0 -7px;
	padding: 18px 10px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.12 );
}

.txoga-dw__box--total .txoga-dw__box-num,
.txoga-dw__box--total .txoga-dw__box-label {
	color: var(--txoga-white);
}

.txoga-dw__noscript {
	padding: 16px;
	color: var(--txoga-navy);
	text-align: center;
}

/* ---------- Elected officials (headshot row, on top, navy) ---------- */
.txoga-dw__members-wrap {
	margin: 2px 0 16px;
}

.txoga-dw__members-wrap[hidden] {
	display: none;
}

.txoga-dw__members {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 14px 30px;
}

.txoga-dw__official {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	width: 150px;
	color: #fff;
}

.txoga-dw__official-photo {
	display: block;
	width: 118px;
	height: 146px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.3 );
}

.txoga-dw__official-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.txoga-dw__official-pos {
	margin-top: 8px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
	color: #c8d2e6;
	text-decoration: underline;
}

.txoga-dw__official-name {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.15;
	color: #fff;
}

.txoga-dw__official-dist {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	color: #c8d2e6;
}

.txoga-dw__official:hover .txoga-dw__official-name {
	text-decoration: underline;
}

/* ================================================================
   Branded export layout (navy portrait) — rendered off-screen and
   rasterized for the PNG (1080x1350) and PDF (8.5x11). Fixed 1080x1350.
   ================================================================ */
.txoga-export {
	width: 1080px;
	height: 1398px; /* 8.5x11 (Letter) proportions, matching the PDF */
	box-sizing: border-box;
	padding: 26px 28px;
	background: #112240;
	color: #fff;
	font-family: 'TXOGA Oswald', 'Arial Narrow', Arial, sans-serif;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Anton (heavy condensed) for the banner, headings and every big number. */
.txoga-export__banner-big,
.txoga-export__banner-sub,
.txoga-export__panel h4,
.txoga-export__pgroup h5,
.txoga-export__shot-cap,
.txoga-export__pbox b,
.txoga-export__vbox b,
.txoga-export__jcell b,
.txoga-export__wcell b,
.txoga-export__gcell b {
	font-family: 'TXOGA Anton', 'TXOGA Oswald', 'Arial Narrow', sans-serif;
	font-weight: 400;
	letter-spacing: 0.5px;
}

.txoga-export * {
	box-sizing: border-box;
}

/* ----- Header: full-width red banner, with the logo tucked into its top-left
   (above a navy strip) and a taller framed headshot overlapping the right,
   exactly like the printed report. ----- */
.txoga-export__header {
	position: relative;
	min-height: 300px;
	margin-bottom: 16px;
}

.txoga-export__banner {
	position: relative;
	margin-top: 58px; /* navy strip above the banner */
	min-height: 250px;
	/* top clears the logo; right clears the headshot */
	padding: 80px 230px 24px 30px;
	background-color: #d92038;
	/* Client-supplied repeating oil & gas icon pattern (dark red on brand red).
	   Scaled to the banner height so icon rows are never cut off top or bottom. */
	background-image: url( '../img/banner-derricks.png' );
	background-repeat: repeat-x;
	background-position: left top;
	background-size: auto 100%;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Soft drop shadow like the printed report (its headings have one baked in).
   text-shadow (not -webkit-text-stroke) so it survives the PNG/PDF export. */
.txoga-export__banner-sub {
	text-align: left;
	font-size: 48px;
	font-weight: 800;
	letter-spacing: 0.5px;
	line-height: 1.02;
	margin-bottom: 16px; /* breathing room above BY THE NUMBERS, like the report */
	text-shadow: 3px 4px 10px rgba( 0, 0, 0, 0.30 );
}

.txoga-export__banner-big {
	text-align: left;
	font-size: 108px;
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: 0.5px;
	text-shadow: 4px 5px 12px rgba( 0, 0, 0, 0.30 );
}

/* Multi-/all-district views have no headshot — reclaim the right padding
   and centre the title. */
.txoga-export--nomember .txoga-export__banner {
	padding-right: 30px;
	align-items: center;
}

.txoga-export--nomember .txoga-export__banner-sub,
.txoga-export--nomember .txoga-export__banner-big {
	text-align: center;
}

/* White logo box, top-left, overlapping the banner corner. */
.txoga-export__logobox {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 128px;
	background: #fff;
	border-radius: 8px;
	padding: 14px 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.txoga-export__logobox img {
	display: block;
	width: 100%;
	height: auto;
}

/* Framed headshot, top-right, taller than the banner. */
.txoga-export__shot {
	position: absolute;
	top: 0;
	right: 0;
	width: 214px;
	height: 300px;
	background: #fff;
	border-radius: 8px;
	padding: 9px;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
}

/* Photo as a cover background (html2canvas has no object-fit support, which
   squished the <img> in exports); it fills all space down to the caption. */
.txoga-export__shot-img {
	width: 100%;
	flex: 1 1 auto;
	background-size: cover;
	background-position: 50% 18%;
	background-repeat: no-repeat;
	border-radius: 4px;
}

.txoga-export__shot-cap {
	margin-top: 8px;
	color: #112240;
	font-weight: 800;
	font-size: 16px;
	text-align: center;
	line-height: 1.05;
}

/* ----- Multi-official headshot row ----- */
.txoga-export__officials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	margin-bottom: 12px;
}

.txoga-export__official {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.txoga-export__official img {
	border-radius: 50%;
	border: 3px solid #fff;
	background: #fff;
	object-fit: cover;
}

.txoga-export__official-name {
	margin-top: 6px;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.1;
	max-width: 150px;
}

.txoga-export__official-dist {
	font-size: 14px;
	color: #c8d2e6;
}

/* ----- Body: production column + right side ----- */
.txoga-export__body {
	display: flex;
	gap: 16px;
	flex: 1 1 auto;
	min-height: 0;
}

.txoga-export__col-left {
	flex: 0 0 322px;
	display: flex;
}

.txoga-export__col-right {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Production (white card, red number boxes) */
.txoga-export__prod {
	flex: 1 1 auto;
	width: 100%;
	background: #fff;
	border-radius: 8px;
	padding: 18px;
	color: #112240;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Production groups: compact (content-sized), evenly distributed down the column. */
.txoga-export__pgroup {
	display: block;
}

/* Navy divider line between production groups, like the report. */
.txoga-export__pgroup + .txoga-export__pgroup::before {
	content: '';
	display: block;
	border-top: 2px solid #112240;
	width: 88%;
	margin: 0 auto 20px;
}

.txoga-export__pgroup h5 {
	margin: 0 0 8px;
	text-align: center;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.05;
	color: #112240;
}

.txoga-export__pbox {
	background: #d92038;
	border-radius: 12px;
	padding: 20px 10px;
	text-align: center;
	color: #fff;
	margin-bottom: 0;
	position: relative;
	z-index: 1; /* sits on top of the joined value box below */
}

.txoga-export__pbox b {
	display: block;
	font-size: 31px;
	font-weight: 800;
	line-height: 1.05;
}

.txoga-export__pbox span {
	display: block;
	font-size: 15px;
	font-weight: 500;
}

/* Joined to the red pill above it (slides underneath), like the report. */
.txoga-export__vbox {
	border: 2px solid #112240;
	border-radius: 12px;
	padding: 24px 10px 12px;
	text-align: center;
	margin: -12px 4px 0;
}

.txoga-export__vbox b {
	display: block;
	font-size: 29px;
	font-weight: 800;
	color: #d92038;
}

.txoga-export__vbox span {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: #112240;
}

.txoga-export__src {
	font-size: 12px;
	font-style: italic;
	color: #6a7488;
	text-align: left;
	line-height: 1.35;
	margin-bottom: 0;
}

/* Metric panels */
.txoga-export__panel {
	border-radius: 8px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.txoga-export__panel h4 {
	margin: 0 0 12px;
	text-align: center;
	font-size: 50px;
	font-weight: 800;
	line-height: 1.02;
	flex: 0 0 auto;
}

.txoga-export__panel--jobs {
	flex: 0 0 auto; /* compact at the top */
	background: #fff;
	color: #112240;
}

/* Wages + GDP fill the rest of the right column. */
.txoga-export__wg {
	flex: 1 1 auto;
	min-height: 0;
}

/* Heading hugs the top; the three compact boxes distribute below with the
   panel colour showing between them (like the PDF). */
.txoga-export__panel--wages,
.txoga-export__panel--gdp {
	justify-content: flex-start;
}

/* One card per panel (white for Wages, navy for GDP); the "total" pill in
   the middle is WIDER than the card and overlaps it, like the report. */
.txoga-export__cells {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	/* space-around (not space-evenly): html2canvas doesn't support space-evenly,
	   which broke the box spacing in PDF/PNG exports. */
	justify-content: space-around;
	min-height: 0;
	border-radius: 12px;
	margin: 6px 14px 12px;
	padding: 4px 0;
}

.txoga-export__panel--wages .txoga-export__cells {
	background: #fff;
	border: 2px solid #112240;
}

.txoga-export__panel--gdp .txoga-export__cells {
	background: #112240;
	border: 2px solid #fff;
}

.txoga-export__panel--jobs h4 {
	color: #112240;
}

/* One wide navy-bordered box; the red "total" pill is taller and breaks out
   of it above and below, like the report. The border is drawn by an inset
   ::before (no negative margins — html2canvas misplaces those in exports). */
.txoga-export__jobsrow {
	position: relative;
	display: flex;
	align-items: center;
	margin: 6px 4px 12px;
}

.txoga-export__jobsrow::before {
	content: '';
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 0;
	right: 0;
	border: 3px solid #112240;
	border-radius: 12px;
}

.txoga-export__jcell {
	flex: 1 1 0;
	position: relative;
	text-align: center;
	border: 0;
	padding: 36px 8px;
}

.txoga-export__jcell b {
	display: block;
	font-size: 36px;
	font-weight: 800;
	color: #d92038;
	line-height: 1;
}

.txoga-export__jcell span {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 600;
	color: #d92038;
}

.txoga-export__jcell--total {
	flex: 1.2 1 0;
	background: #d92038;
	border-radius: 30px;
	margin: 0;
	padding: 28px 8px;
	position: relative;
	z-index: 1;
}

.txoga-export__jcell--total b {
	font-size: 50px;
	color: #fff;
}

.txoga-export__jcell--total span {
	color: #fff;
}

.txoga-export__wg {
	display: flex;
	gap: 16px;
	flex: 1 1 auto;
}

.txoga-export__panel--wages,
.txoga-export__panel--gdp {
	flex: 1 1 0;
	min-width: 0;
}

.txoga-export__panel--wages {
	background: #d92038;
	color: #fff;
}

/* GDP is a red panel like Wages, but with the box fills inverted:
   direct/indirect are solid navy, and the total is the emphasized white box. */
.txoga-export__panel--gdp {
	background: #d92038;
	color: #fff;
}

.txoga-export__wcell,
.txoga-export__gcell {
	background: transparent;
	padding: 10px 8px;
	text-align: center;
	margin: 0;
}

.txoga-export__wcell b {
	display: block;
	font-size: 36px;
	font-weight: 800;
	color: #d92038;
}

.txoga-export__wcell span {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	font-weight: 600;
	color: #d92038;
}

.txoga-export__wcell--total {
	background: #112240;
	border-radius: 16px;
	margin: 0 -14px;
	padding: 18px 8px;
	position: relative;
	z-index: 1;
}

.txoga-export__wcell--total b {
	font-size: 46px;
	color: #fff;
}

.txoga-export__wcell--total span {
	color: #fff;
}

.txoga-export__gcell b {
	display: block;
	font-size: 36px;
	font-weight: 800;
	color: #fff;
}

.txoga-export__gcell span {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.txoga-export__gcell--total {
	background: #fff;
	border-radius: 16px;
	margin: 0 -14px;
	padding: 18px 8px;
	position: relative;
	z-index: 1;
}

.txoga-export__gcell--total b {
	font-size: 46px;
	color: #d92038;
}

.txoga-export__gcell--total span {
	color: #d92038;
}

.txoga-export__panel--wages .txoga-export__src,
.txoga-export__panel--gdp .txoga-export__src {
	color: rgba( 255, 255, 255, 0.7 );
	margin-bottom: 0;
	margin-top: 4px;
}

.txoga-export__panel--jobs .txoga-export__src {
	margin-bottom: 0;
	margin-top: 6px;
}

/* ----- Bottom band: paired "Top Producers / Top Employers" (single district) ----- */
.txoga-export__toplists {
	flex: 0 0 auto;
	display: flex;
	margin-top: 18px;
	padding-top: 4px;
}

.txoga-export__toplist {
	flex: 1 1 0;
	min-width: 0;
	padding: 4px 26px 0;
	text-align: center;
	display: flex;
	flex-direction: column;
}

/* White vertical rule between the two columns, like the report. */
.txoga-export__toplist + .txoga-export__toplist {
	border-left: 2px solid rgba( 255, 255, 255, 0.9 );
}

.txoga-export__toplist h4 {
	margin: 0 0 12px;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	text-shadow: 2px 3px 8px rgba( 0, 0, 0, 0.25 );
}

/* Matching soft shadow on the white panel headings (as in the report). */
.txoga-export__panel--wages h4,
.txoga-export__panel--gdp h4 {
	text-shadow: 2px 3px 8px rgba( 0, 0, 0, 0.25 );
}

.txoga-export__toplist-names {
	margin: 0 0 10px;
	flex: 1 1 auto;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.txoga-export__toplist .txoga-export__src {
	color: rgba( 255, 255, 255, 0.7 );
	margin: 0;
}

/* Branded footer band — fallback for multi-district / all-districts views,
   which have no single-district producer/employer lists. */
.txoga-export__footer {
	flex: 0 0 auto;
	margin-top: 16px;
	padding: 40px 16px 34px;
	text-align: center;
	border-top: 3px solid #d92038;
}

.txoga-export__footer-main {
	display: block;
	font-family: 'TXOGA Anton', 'TXOGA Oswald', 'Arial Narrow', sans-serif;
	font-size: 40px;
	line-height: 1;
	letter-spacing: 1px;
	color: #fff;
}

.txoga-export__footer-sub {
	display: block;
	margin-top: 8px;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: #c8d2e6;
}

/* ---------- Responsive ---------- */
@media ( max-width: 1024px ) {
	.txoga-dw__body {
		grid-template-columns: 1fr 1fr;
	}
	.txoga-dw__sidebar {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 16px;
		text-align: center;
	}
	.txoga-dw__divider {
		display: none;
	}
}

@media ( max-width: 720px ) {
	.txoga-dw__header {
		flex-direction: column;
		gap: 14px;
	}
	.txoga-dw__title {
		order: 2;
	}
	.txoga-dw__controls {
		order: 3;
		width: 100%;
		min-width: 0;
	}
	.txoga-dw__body {
		grid-template-columns: 1fr;
	}
	.txoga-dw__sidebar {
		grid-template-columns: 1fr;
	}
}

/* ---------- Print (browser print dialog -> "Save as PDF") ---------- */
@media print {
	@page {
		size: landscape;
		margin: 8mm;
	}

	/* Isolate the widget: hide the rest of the page, show only the dashboard. */
	body * {
		visibility: hidden !important;
	}
	.txoga-dw,
	.txoga-dw * {
		visibility: visible !important;
	}
	.txoga-dw {
		position: absolute !important;
		left: 0;
		top: 0;
		width: 100% !important;
		padding: 0 !important;
		background: #fff !important;
	}

	/* The controls and toolbar aren't useful on paper. */
	.txoga-dw__controls,
	.txoga-dw__toolbar,
	.txoga-dw__ms-panel {
		display: none !important;
	}

	/* Give the title the space the hidden controls freed up. */
	.txoga-dw__title {
		flex: 1 1 auto;
	}

	/* Avoid splitting cards across pages. */
	.txoga-dw__sidebar,
	.txoga-dw__panel {
		break-inside: avoid;
	}
}