/*
 * JobGetr Markets - data presentation.
 *
 * Loaded only on Markets surfaces and on pages that mount a Markets module.
 * Scope is limited to the JobGetr data primitives introduced with the live
 * Markets integration: availability states, values, changes, cards, the
 * geography control, charts, and the industry/occupation explorers.
 *
 * Newspaper still owns page composition, typography scale, and responsive
 * layout. Nothing here re-implements a theme primitive.
 *
 * Tokens come from the child theme (--jg-*), each with a fallback so a module
 * renders correctly if it is used outside it.
 */

.jg-markets-surface,
.jg-section,
.jg-cards,
.jg-explorer,
.jg-metricpage,
.jg-chart,
.jg-geo,
.jg-state,
.jg-card {
	--jg-ink: var(--jg-navy, #131f49);
	--jg-ink-soft: var(--jg-gray, #717176);
	--jg-line: var(--jg-border, #e4e8ef);
	--jg-brand: var(--jg-accent, #ff6a13);
	--jg-up: var(--jg-positive, #12864f);
	--jg-down: var(--jg-negative, #d92d20);
	--jg-mono: var(--jg-font-mono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace);

	box-sizing: border-box;
}

.jg-markets-surface *,
.jg-explorer *,
.jg-metricpage *,
.jg-card * {
	box-sizing: border-box;
}

/* ====================================================== availability states */
.jg-state {
	margin: 8px 0;
	padding: 8px 11px;
	border-left: 3px solid var(--jg-line);
	background: #f7f8fa;
	font-size: 12px;
	line-height: 1.55;
	color: var(--jg-ink-soft);
}

.jg-state--stale {
	border-left-color: #c8901c;
	background: #fdf7ec;
	color: #7a5a12;
}

.jg-state--unsupported {
	border-left-color: #9aa3b2;
}

.jg-state--unavailable {
	border-left-color: var(--jg-down);
	background: #fdf3f3;
	color: #8a2b2b;
}

/* =============================================================== value/change */
.jg-value {
	font-family: var(--jg-mono);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--jg-ink);
	letter-spacing: -0.02em;
}

.jg-value--empty {
	color: var(--jg-ink-soft);
	font-weight: 500;
}

.jg-value__unit {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-value__note {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

.jg-change {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-family: var(--jg-mono);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.jg-change + .jg-change {
	margin-left: 10px;
}

.jg-change--up {
	color: var(--jg-up);
}

.jg-change--down {
	color: var(--jg-down);
}

.jg-change--flat,
.jg-change--none {
	color: var(--jg-ink-soft);
}

/* Metric-aware reading: color follows whether the movement is generally
   favorable for the labor economy (Markets\Semantics), not the sign. A metric
   with no agreed reading stays neutral. Direction is always also carried by
   the arrow glyph and a screen-reader label. */
.jg-change--favorable {
	color: var(--jg-up);
}

.jg-change--unfavorable {
	color: var(--jg-down);
}

.jg-change--neutral {
	color: var(--jg-ink-soft);
}

.jg-change__arrow {
	font-size: 0.72em;
	line-height: 1;
	margin-right: 1px;
	transform: translateY(-0.08em);
}

.jg-change__cmp {
	font-family: inherit;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--jg-ink-soft);
	text-transform: none;
}

.jg-source {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--jg-ink-soft);
}

/* ======================================================================= cards */
.jg-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--jg-line);
	border: 1px solid var(--jg-line);
}

.jg-cards--compact {
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.jg-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 14px 15px;
	background: #fff;
}

.jg-card__label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-card__label a {
	color: inherit;
	text-decoration: none;
}

.jg-card__label a:hover,
.jg-card__label a:focus {
	color: var(--jg-brand);
}

.jg-card__value {
	min-height: 30px;
}

.jg-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin-top: auto;
}

.jg-card__period {
	font-size: 11px;
	color: var(--jg-ink-soft);
}

.jg-card[data-jg-state="unsupported"],
.jg-card[data-jg-state="withheld"],
.jg-card[data-jg-state="missing"] {
	background: #fbfbfc;
}

@media (max-width: 1018px) {
	.jg-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.jg-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ========================================================== geography control */
.jg-geo {
	display: inline-flex;
	border: 1px solid var(--jg-line);
	background: #fff;
}

.jg-geo__option {
	padding: 7px 15px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--jg-ink-soft);
	text-decoration: none;
	border-right: 1px solid var(--jg-line);
}

.jg-geo__option:last-child {
	border-right: 0;
}

.jg-geo__option:hover,
.jg-geo__option:focus {
	color: var(--jg-brand);
}

.jg-geo__option.is-active {
	background: var(--jg-ink);
	color: #fff;
}

/* =============================================================== section shell */
.jg-markets-surface {
	margin: 0 0 34px;
}

.jg-markets__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--jg-ink);
}

.jg-markets__head h2,
.jg-markets__head h1 {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
}

/* ---- catalog directory headers: /roles/, /occupations/, and (owner
   decision 2026-09-25) /industries/ and /atlanta/, which now duplicate the
   Roles header and spacing. Scoped by the module attribute the templates
   emit; the shared .jg-markets__head base below is unchanged.

   The refinement is weight and air, not a new system: the title takes the
   strength of the /markets/ masthead (30px/800, slightly tightened), the
   block gets real breathing room above and below, and the geography
   selector is pinned to the top of the text rather than floated to its
   vertical middle - which is why it sat level with the title on
   Occupations but drifted down the page on the longer Roles copy. */
[data-jg-module="roles-page"] .jg-markets__head,
[data-jg-module="occupations-page"] .jg-markets__head,
[data-jg-module="industries-page"] .jg-markets__head,
[data-jg-module="atlanta-page"] .jg-markets__head {
	align-items: flex-start;
	gap: 16px 24px;
	padding-top: 22px;
	padding-bottom: 20px;
	margin-bottom: 24px;
}

/* The H1 carries an inline margin:0, so nothing here touches margin; the
   space above comes from the container instead. .entry-title is included
   to out-rank the theme's own title weight without !important. */
[data-jg-module="roles-page"] .jg-markets__head h1.entry-title,
[data-jg-module="occupations-page"] .jg-markets__head h1.entry-title,
[data-jg-module="industries-page"] .jg-markets__head h1.entry-title,
[data-jg-module="atlanta-page"] .jg-markets__head h1.entry-title {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--jg-ink);
}

[data-jg-module="roles-page"] .jg-markets__head .jg-route__lede,
[data-jg-module="occupations-page"] .jg-markets__head .jg-route__lede,
[data-jg-module="industries-page"] .jg-markets__head .jg-route__lede,
[data-jg-module="atlanta-page"] .jg-markets__head .jg-route__lede {
	margin-top: 7px;
	margin-bottom: 0;
	font-size: 15.5px;
	line-height: 1.6;
}

/* The text block may shrink so the selector always keeps its row; the
   lede's own max-width still governs its measure. */
[data-jg-module="roles-page"] .jg-markets__head > div,
[data-jg-module="occupations-page"] .jg-markets__head > div,
[data-jg-module="industries-page"] .jg-markets__head > div,
[data-jg-module="atlanta-page"] .jg-markets__head > div {
	flex: 1 1 auto;
	min-width: 0;
}

[data-jg-module="roles-page"] .jg-markets__head > .jg-geo,
[data-jg-module="occupations-page"] .jg-markets__head > .jg-geo,
[data-jg-module="industries-page"] .jg-markets__head > .jg-geo,
[data-jg-module="atlanta-page"] .jg-markets__head > .jg-geo {
	flex: 0 0 auto;
	margin-top: 4px;
}

@media (max-width: 767px) {
	[data-jg-module="roles-page"] .jg-markets__head,
	[data-jg-module="occupations-page"] .jg-markets__head,
	[data-jg-module="industries-page"] .jg-markets__head,
	[data-jg-module="atlanta-page"] .jg-markets__head {
		gap: 14px;
		padding-top: 16px;
		padding-bottom: 18px;
		margin-bottom: 22px;
	}

	[data-jg-module="roles-page"] .jg-markets__head h1.entry-title,
	[data-jg-module="occupations-page"] .jg-markets__head h1.entry-title,
	[data-jg-module="industries-page"] .jg-markets__head h1.entry-title,
	[data-jg-module="atlanta-page"] .jg-markets__head h1.entry-title {
		font-size: 26px;
	}

	/* Stacked: title, description, then the selector on its own row. */
	[data-jg-module="roles-page"] .jg-markets__head > .jg-geo,
	[data-jg-module="occupations-page"] .jg-markets__head > .jg-geo,
	[data-jg-module="industries-page"] .jg-markets__head > .jg-geo,
	[data-jg-module="atlanta-page"] .jg-markets__head > .jg-geo {
		margin-top: 0;
	}
}

.jg-sectionnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.jg-sectionnav a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--jg-line);
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	color: var(--jg-ink);
	text-decoration: none;
}

.jg-sectionnav a:hover,
.jg-sectionnav a:focus {
	border-color: var(--jg-brand);
	color: var(--jg-brand);
}

.jg-section {
	margin: 0 0 32px;
	scroll-margin-top: 90px;
}

.jg-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.jg-section__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.25;
	color: var(--jg-ink);
}

.jg-section__more {
	font-size: 12px;
	font-weight: 700;
	color: var(--jg-brand);
	text-decoration: none;
}

/* ======================================================================= charts */
.jg-chart {
	margin: 0 0 18px;
}

.jg-chart__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-chart__mount {
	width: 100%;
	min-height: 120px;
	border: 1px solid var(--jg-line);
	background: #fff;
	/* A chart library sizes its own canvas. If one ever lags behind a shrinking
	   container - a rotation, a resize - it must not drag a horizontal
	   scrollbar onto the whole page. */
	overflow: hidden;
}

.jg-chart__mount[data-jg-chart-state="unavailable"] {
	display: none;
}

.jg-chart__caption {
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--jg-ink-soft);
}

/* ===================================================================== tables */
.jg-table--markets {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.jg-table--markets th,
.jg-table--markets td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--jg-line);
	text-align: left;
	vertical-align: top;
}

.jg-table--markets thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #fff;
	border-bottom: 2px solid var(--jg-ink);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
	white-space: nowrap;
}

.jg-table--markets tbody th {
	font-weight: 600;
	color: var(--jg-ink);
}

.jg-table--markets tbody th a {
	color: inherit;
	text-decoration: none;
}

.jg-table--markets tbody th a:hover,
.jg-table--markets tbody th a:focus {
	color: var(--jg-brand);
}

.jg-table--markets .jg-num {
	text-align: right;
	font-family: var(--jg-mono);
	white-space: nowrap;
}

.jg-table--markets .jg-num .jg-value {
	font-size: 14px;
}

.jg-table--markets .jg-num .jg-value__unit {
	display: none;
}

.jg-table--markets .jg-period {
	font-size: 11px;
	color: var(--jg-ink-soft);
	white-space: nowrap;
}

.jg-table--markets .jg-changes {
	text-align: right;
}

.jg-table--markets tbody tr:hover {
	background: #fafbfc;
}

.jg-table--markets tr[data-jg-aggregate="1"] {
	background: #f5f7fa;
	font-weight: 700;
}

/* =================================================================== explorer */
.jg-explorer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 12px;
}

.jg-explorer__filter {
	flex: 1 1 240px;
	max-width: 340px;
	padding: 8px 11px;
	border: 1px solid var(--jg-line);
	font-size: 13px;
	color: var(--jg-ink);
	background: #fff;
}

.jg-explorer__filter:focus {
	outline: 2px solid var(--jg-brand);
	outline-offset: -2px;
}

.jg-explorer__count {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-explorer__scroll {
	max-height: 620px;
	overflow: auto;
	border: 1px solid var(--jg-line);
}

.jg-explorer__legend {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--jg-ink-soft);
}

/* ========================================================== metric detail page */
.jg-metricpage__head {
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--jg-ink);
}

.jg-metricpage__kicker {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-metricpage__title {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.18;
	color: var(--jg-ink);
}

.jg-metricpage__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 24px;
}

.jg-metricpage__lead .jg-value {
	font-size: 40px;
}

.jg-metricpage__changes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	padding-bottom: 5px;
}

.jg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
}

.jg-meta__item {
	flex: 1 1 200px;
	max-width: 340px;
	padding: 10px 13px;
	border: 1px solid var(--jg-line);
	background: #fff;
}

.jg-meta__term {
	display: block;
	margin-bottom: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-meta__value {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: var(--jg-ink);
	overflow-wrap: anywhere;
}

.jg-backlink {
	display: inline-block;
	margin: 22px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--jg-brand);
	text-decoration: none;
}

/* ================================================== homepage module bindings */
.jg-metric__period,
.jg-tile__period {
	font-size: 10px;
	color: var(--jg-ink-soft);
}

.jg-metric[data-jg-state="unsupported"] .jg-metric__value,
.jg-tile[data-jg-state="unsupported"] .jg-tile__value {
	color: var(--jg-ink-soft);
}

.jg-heatmap__cell[data-jg-state="available"] {
	color: #fff;
}

.jg-heatmap__cell[data-jg-state="unavailable"],
.jg-heatmap__cell[data-jg-state="withheld"],
.jg-heatmap__cell[data-jg-state="missing"] {
	background: #f2f4f7;
	color: var(--jg-ink-soft);
}

.jg-watchlist__value {
	display: block;
	margin-top: 2px;
	font-family: var(--jg-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--jg-ink);
}

.jg-rank__item[data-jg-state="empty"] .jg-rank__name {
	color: var(--jg-ink-soft);
}

@media (max-width: 767px) {
	.jg-metricpage__title {
		font-size: 22px;
	}

	.jg-metricpage__lead .jg-value {
		font-size: 30px;
	}

	.jg-explorer__scroll {
		max-height: none;
	}
}

/* ============================================================ JobGetr Research */
/*
 * The research sections on the Markets landing page, and the methodology pages
 * behind them.
 *
 * These reuse the value, change and state primitives above, but deliberately
 * not the .jg-cards backing technique. That technique draws separators by
 * showing a grey container through 1px grid gaps, which is correct only while
 * every cell is filled - true of the BLS grids, never true here, where a
 * section can hold one card. So a research grid is transparent and each card
 * carries its own hairline: identical visual language, no empty cell to leak.
 *
 * Vertical rhythm is one scale, used everywhere in this block:
 *   36px between sections, 18px head to content, 14px between cards,
 *   8px between a heading and the text under it.
 */
.jg-research {
	--jg-ink: var(--jg-navy, #131f49);
	--jg-ink-soft: var(--jg-gray, #717176);
	--jg-line: var(--jg-border, #e4e8ef);
	--jg-brand: var(--jg-accent, #ff6a13);
	--jg-mono: var(--jg-font-mono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace);

	margin: 40px 0 0;
	padding: 26px 0 4px;
	border-top: 2px solid var(--jg-ink);
}

/* ------------------------------------------------------------------- header */
.jg-research__head {
	margin-bottom: 30px;
}

.jg-research__kicker {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-research__title {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.2;
	color: var(--jg-ink);
}

.jg-research__lede {
	margin: 0;
	max-width: 66ch;
	font-size: 13px;
	line-height: 1.65;
	color: var(--jg-ink-soft);
}

/* ------------------------------------------------------------------ section */
.jg-section--research {
	margin: 0 0 36px;
}

.jg-section--research .jg-section__head {
	margin-bottom: 8px;
}

.jg-section--research .jg-section__title {
	font-size: 17px;
	letter-spacing: -0.01em;
}

.jg-section__lede {
	margin: 0 0 18px;
	max-width: 66ch;
	font-size: 13px;
	line-height: 1.65;
	color: var(--jg-ink-soft);
}

/* -------------------------------------------------------------------- badge */
.jg-badge {
	display: inline-block;
	padding: 2px 6px;
	border: 1px solid var(--jg-line);
	border-radius: 2px;
	font-family: var(--jg-font-sans, inherit);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--jg-ink-soft);
	background: #f7f8fa;
}

.jg-badge--beta {
	border-color: #c2d3ec;
	background: #eef4fd;
	color: #24487f;
}

.jg-badge--experimental {
	border-color: #e8d2ac;
	background: #fdf7ec;
	color: #7a5a12;
}

/* ------------------------------------------------------------- research grid */
.jg-cards--research {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 18px;
	/* No shared backing and no outer border: see the note at the top of this
	   block. Empty tracks are simply invisible. */
	background: transparent;
	border: 0;
}

.jg-card--research {
	gap: 0;
	padding: 15px 16px 14px;
	border: 1px solid var(--jg-line);
	background: #fff;
}

/* Label and badge share a line and wrap as a unit. */
.jg-card--research .jg-card__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 7px;
	margin: 0 0 10px;
	min-height: 2.7em;
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--jg-ink-soft);
}

.jg-card--research .jg-card__value {
	min-height: 0;
	margin: 0;
}

.jg-card--research .jg-value {
	font-size: 26px;
}

/* Change sits directly under the value, as its qualifier. The BLS card pushes
   this row to the bottom; a research card has provenance below it, so it stays
   with the number it describes. */
.jg-card--research .jg-card__meta {
	justify-content: space-between;
	align-items: baseline;
	margin: 8px 0 0;
	gap: 3px 12px;
}

.jg-card--research .jg-card__period {
	font-size: 11px;
	color: var(--jg-ink-soft);
}

.jg-card__geo {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

.jg-card__caveat {
	margin: 10px 0 0;
	padding: 8px 10px;
	border-left: 2px solid var(--jg-line);
	background: #fafbfc;
	font-size: 11px;
	line-height: 1.55;
	color: var(--jg-ink-soft);
}

/* Provenance is the card's footer, pinned to the bottom so a row of cards
   lines its source rules up regardless of how much text sits above. */
.jg-card--research .jg-source {
	margin: 14px 0 0;
	padding-top: 9px;
	border-top: 1px solid var(--jg-line);
	font-size: 11px;
	line-height: 1.55;
}

.jg-card--research .jg-source a {
	color: var(--jg-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

.jg-card--research .jg-source a:hover,
.jg-card--research .jg-source a:focus {
	color: var(--jg-brand);
	border-bottom-color: var(--jg-brand);
}

.jg-source__method {
	white-space: nowrap;
	font-weight: 700;
	color: var(--jg-ink) !important;
}

/* --------------------------------------------------------------- withheld */
/*
 * A withheld metric is a decision, not an outage, so it reads as a quiet,
 * finished card: dashed rule, muted placeholder, and the reason stated plainly.
 */
.jg-cards--withheld {
	margin-bottom: 18px;
}

.jg-card--withheld,
.jg-card--research[data-jg-state="withheld"] {
	border-style: dashed;
	background: #fcfcfd;
}

.jg-card--withheld .jg-card__value {
	margin-top: 2px;
}

.jg-card--withheld .jg-value--empty {
	font-size: 22px;
	color: #9aa3b2;
}

.jg-card--withheld .jg-card__caveat {
	margin-top: 12px;
	padding: 0;
	border-left: 0;
	background: transparent;
}

/* ------------------------------------------------------------------ charts */
.jg-section--research .jg-chart {
	margin: 0 0 4px;
}

.jg-section--research .jg-chart__title {
	margin: 0 0 9px;
	font-size: 11px;
	letter-spacing: 0.06em;
}

.jg-section--research .jg-chart__mount {
	background: #fff;
}

.jg-section--research .jg-chart__caption {
	margin-top: 9px;
	max-width: 78ch;
}

/* ----------------------------------------------------------------- notices */
.jg-notice {
	margin: 0 0 12px;
	padding: 14px 16px;
	border: 1px solid var(--jg-line);
	border-left: 3px solid #e8d2ac;
	background: #fdfcfa;
}

.jg-notice__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--jg-ink);
}

.jg-notice__body {
	margin: 0;
	max-width: 74ch;
	font-size: 12px;
	line-height: 1.65;
	color: var(--jg-ink-soft);
}

.jg-notice__body a {
	font-weight: 700;
	color: var(--jg-ink);
}

/* ------------------------------------------------------- methodology page */
.jg-methodology .jg-metricpage__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.jg-methodology .jg-metricpage__title .jg-badge {
	font-size: 10px;
	padding: 3px 7px;
}

.jg-methodology__body {
	max-width: 68ch;
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--jg-ink);
}

.jg-methodology .jg-state {
	max-width: 68ch;
}

.jg-methodology .jg-chart {
	margin-bottom: 20px;
}

.jg-methodology .jg-source {
	max-width: 74ch;
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1018px) {
	.jg-cards--research {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-card--research .jg-card__label {
		min-height: 0;
	}
}

@media (max-width: 600px) {
	.jg-research {
		margin-top: 30px;
		padding-top: 22px;
	}

	.jg-research__head {
		margin-bottom: 24px;
	}

	.jg-research__title {
		font-size: 19px;
	}

	.jg-section--research {
		margin-bottom: 30px;
	}

	.jg-cards--research {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.jg-card--research .jg-value {
		font-size: 24px;
	}

	.jg-methodology .jg-metricpage__title {
		gap: 9px;
	}

	.jg-methodology__body {
		font-size: 14px;
	}
}

/* ================================================================ JobGetr Roles */
/*
 * The role family: the /roles/ directory, the /roles/<slug>/ detail page, and
 * the "Explore by role" section on /markets/ and /atlanta/.
 *
 * Everything reuses the primitives above - values, cards, tables, the
 * geography control, the chart mount. The classes below add only what those
 * surfaces need and nothing else: the role tile, the pay distribution rail,
 * the related-role rows, the directory groups, and one square button.
 */
.jg-rolepage,
.jg-rolesdir,
.jg-roles {
	--jg-ink: var(--jg-navy, #131f49);
	--jg-ink-soft: var(--jg-gray, #717176);
	--jg-line: var(--jg-border, #e4e8ef);
	--jg-brand: var(--jg-accent, #ff6a13);
	--jg-mono: var(--jg-font-mono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace);
}

.jg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 8px 14px;
	border: 1px solid var(--jg-ink);
	background: var(--jg-ink);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.2;
	cursor: pointer;
}

.jg-btn:hover,
.jg-btn:focus {
	background: var(--jg-brand);
	border-color: var(--jg-brand);
	color: #fff;
}

.jg-sectionnav--inline {
	margin: 0;
}

.jg-sectionnav a.is-accent {
	border-color: var(--jg-brand);
	color: var(--jg-brand);
}

/* ---------------------------------------------------------- explore by role */
.jg-roles__search .jg-explorer__filter {
	flex-basis: 320px;
	max-width: 420px;
}

.jg-cards--roles {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jg-roles__tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 150px;
	padding: 14px 15px;
	background: #fff;
	color: var(--jg-ink);
	text-decoration: none;
}

.jg-roles__tile:hover .jg-roles__title,
.jg-roles__tile:focus .jg-roles__title {
	color: var(--jg-brand);
}

.jg-roles__family {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-roles__title {
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--jg-ink);
}

.jg-roles__stats {
	display: flex;
	gap: 18px;
	margin-top: auto;
}

.jg-roles__stat .jg-value {
	font-size: 15px;
}

.jg-roles__stat .jg-value__unit {
	margin-top: 1px;
	font-size: 9px;
}

.jg-roles__cta {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--jg-brand);
}

.jg-roles__families {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 14px 0 0;
}

.jg-roles__families-label {
	margin-right: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

/* -------------------------------------------------------------- role page */
.jg-rolepage__head {
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--jg-ink);
}

.jg-rolepage__identity {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 24px;
}

.jg-rolepage__identity .jg-metricpage__title {
	margin-bottom: 8px;
}

.jg-rolepage__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	font-size: 12px;
	color: var(--jg-ink-soft);
}

.jg-rolepage__meta a {
	color: var(--jg-ink-soft);
	text-decoration: none;
}

.jg-rolepage__meta a:hover,
.jg-rolepage__meta a:focus {
	color: var(--jg-brand);
}

.jg-rolepage__soc {
	font-family: var(--jg-mono);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--jg-ink);
}

.jg-rolepage__hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 32px;
	padding: 18px 0 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--jg-line);
}

.jg-rolepage__hero .jg-value {
	font-size: 44px;
	letter-spacing: -0.03em;
}

.jg-rolepage__hero .jg-value__unit {
	margin-top: 4px;
	font-size: 11px;
}

.jg-rolepage__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px 18px;
	padding-bottom: 6px;
}

.jg-rolepage__provenance {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: right;
}

.jg-rolepage__provenance strong {
	color: var(--jg-ink);
}

.jg-cards--rolestats {
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	margin-bottom: 32px;
}

.jg-cards--rolestats .jg-card__label a {
	color: inherit;
	text-decoration: none;
}

.jg-pay {
	padding: 18px 0 10px;
}

.jg-pay__rail {
	position: relative;
	height: 44px;
	margin: 8px 0 6px;
}

.jg-pay__track {
	position: absolute;
	top: 19px;
	right: 0;
	left: 0;
	height: 6px;
	background: var(--jg-line);
}

.jg-pay__whisker {
	position: absolute;
	top: 21px;
	height: 2px;
	background: #9aa3b2;
}

.jg-pay__iqr {
	position: absolute;
	top: 17px;
	height: 10px;
	background: var(--jg-ink);
}

.jg-pay__tick {
	position: absolute;
	top: 10px;
	width: 2px;
	height: 24px;
	margin-left: -1px;
	background: var(--jg-ink);
}

.jg-pay__tick--median {
	top: 6px;
	width: 3px;
	height: 32px;
	margin-left: -1.5px;
	background: var(--jg-brand);
}

.jg-pay__labels {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px;
	background: var(--jg-line);
	border: 1px solid var(--jg-line);
}

.jg-pay__cell {
	padding: 10px 12px;
	background: #fff;
}

.jg-pay__cell .jg-card__label {
	margin-bottom: 4px;
}

.jg-pay__cell .jg-value {
	font-size: 16px;
}

.jg-pay__cell--median .jg-card__label {
	color: var(--jg-ink);
}

.jg-table--history th,
.jg-table--history td {
	white-space: nowrap;
}

.jg-compare__short {
	display: none;
}

.jg-related {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--jg-line);
	border: 1px solid var(--jg-line);
}

.jg-related--single {
	grid-template-columns: minmax(0, 1fr);
}

.jg-related__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 12px 15px;
	background: #fff;
	color: var(--jg-ink);
	text-decoration: none;
}

.jg-related__item--family {
	grid-column: 1 / -1;
	background: #f7f8fa;
}

.jg-related__item--hit {
	padding: 16px 18px;
}

.jg-related__item:hover .jg-related__name,
.jg-related__item:focus .jg-related__name {
	color: var(--jg-brand);
}

.jg-related__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--jg-ink);
}

.jg-related__item--hit .jg-related__name {
	font-size: 16px;
	font-weight: 700;
}

.jg-related__soc {
	margin-left: 10px;
	font-family: var(--jg-mono);
	font-size: 11px;
	color: var(--jg-ink-soft);
	white-space: nowrap;
}

.jg-related__family {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--jg-ink-soft);
}

.jg-related__arrow {
	font-weight: 700;
	color: var(--jg-brand);
	white-space: nowrap;
}

.jg-rolepage__news {
	margin-top: 8px;
	padding-top: 22px;
	border-top: 1px solid var(--jg-line);
}

.jg-rolepage__news .jg-section__title {
	font-size: 15px;
}

/* --------------------------------------------------------------- directory */
.jg-rolesdir__search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
}

.jg-rolesdir__input {
	flex: 1 1 520px;
	max-width: none;
	padding: 12px 14px;
	font-size: 15px;
}

.jg-rolesdir__search .jg-btn {
	min-height: 44px;
	padding: 12px 18px;
	font-size: 13px;
}

.jg-rolesdir__hint {
	margin: 0 0 24px;
}

.jg-rolesdir__result {
	margin-bottom: 28px;
}

.jg-dir {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.jg-dir__group {
	padding: 14px 16px 12px;
	border: 1px solid var(--jg-line);
	background: #fff;
}

.jg-dir__group[hidden] {
	display: none;
}

.jg-dir__family {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--jg-line);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jg-ink);
}

.jg-dir__family a {
	color: inherit;
	text-decoration: none;
}

.jg-dir__family a:hover,
.jg-dir__family a:focus {
	color: var(--jg-brand);
}

.jg-dir__family .jg-related__soc,
.jg-dir__list .jg-related__soc {
	margin-left: 0;
}

.jg-dir__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-dir__list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #f1f4f7;
	font-size: 12.5px;
	line-height: 1.35;
}

.jg-dir__list li:last-child {
	border-bottom: 0;
}

.jg-dir__list li[hidden] {
	display: none;
}

.jg-dir__list a {
	color: var(--jg-ink);
	text-decoration: none;
}

.jg-dir__list a:hover,
.jg-dir__list a:focus {
	color: var(--jg-brand);
}

.jg-dir__empty {
	margin: 0;
	font-size: 11px;
	color: var(--jg-ink-soft);
}

/* Atlanta: one research section, so the block head is just its kicker. */
.jg-research--atlanta .jg-research__head {
	margin-bottom: 12px;
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1018px) {
	.jg-cards--roles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-dir {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.jg-rolepage__hero {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 14px 0 16px;
		margin-bottom: 18px;
	}

	.jg-rolepage__hero .jg-value {
		font-size: 38px;
	}

	.jg-rolepage__provenance {
		text-align: left;
	}

	.jg-rolepage .jg-chart__mount {
		height: 240px !important;
	}

	.jg-cards--rolestats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* An odd card count would leave the grid backing showing through one
	   empty cell; the last card takes the whole row instead. */
	.jg-cards--rolestats .jg-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.jg-pay__labels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-pay__cell--median {
		grid-column: 1 / -1;
	}

	.jg-compare__long {
		display: none;
	}

	.jg-compare__short {
		display: inline;
	}

	.jg-related {
		grid-template-columns: minmax(0, 1fr);
	}

	.jg-roles__search,
	.jg-rolesdir__search {
		flex-direction: column;
		align-items: stretch;
	}

	.jg-roles__search .jg-explorer__filter,
	.jg-rolesdir__input {
		flex-basis: auto;
		max-width: none;
		min-height: 44px;
	}

	.jg-roles__search .jg-btn,
	.jg-rolesdir__search .jg-btn {
		min-height: 44px;
	}

	.jg-dir {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.jg-cards--roles {
		grid-template-columns: minmax(0, 1fr);
	}

	.jg-roles__tile {
		min-height: 0;
	}
}

/* ============================================================ Markets terminal */
/* The /markets/ page composition (templates/markets/page.php): Bloomberg's
   information density on Newspaper's own grid - a full-width summary band,
   then td-pb-span4 (rail) beside td-pb-span8 (data). Scoped to .jg-mk so
   the other Markets surfaces keep their card presentation. Black type,
   thin gray rules, square corners; green/red only for movement, orange
   only for action. */
.jg-mk,
.jg-mk__body {
	--jg-ink: var(--jg-navy, #131f49);
	--jg-ink-soft: var(--jg-gray, #717176);
	--jg-line: var(--jg-border, #e4e8ef);
	--jg-brand: var(--jg-accent, #ff6a13);
	--jg-up: var(--jg-positive, #12864f);
	--jg-down: var(--jg-negative, #d92d20);
	--jg-mono: var(--jg-font-mono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace);
	--jg-mk-ink: #111318;
	--jg-mk-rule: #e1e4ea;
	--jg-mk-band: #f4f5f7;

	box-sizing: border-box;
	color: var(--jg-mk-ink);
}

.jg-mk *,
.jg-mk__body * {
	box-sizing: border-box;
}

.jg-mk {
	margin: 0 0 4px;
}

/* ---- masthead, on the reference's proportions: title, thin rule,
   small-text geography subnav, divider. One left edge with the content. */
.jg-mk__masthead {
	margin: 0 0 6px;
	padding: 0;
	border-bottom: 1px solid #d9dde5;
}

.jg-mk__masthead .jg-mk__title,
.jg-mk__masthead h1.jg-mk__title {
	margin: 10px 0 0;
	padding: 0 0 6px;
	border-bottom: 1px solid var(--jg-mk-rule);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--jg-mk-ink);
}

/* Markets page only (data-jg-module="markets-page"): a larger, tighter
   headline over a quiet dek, in the site's own fonts. */
[data-jg-module="markets-page"] .jg-mk__masthead h1.jg-mk__title {
	margin-top: 14px;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 44px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
}

.jg-mk__dek {
	max-width: 72ch;
	margin: 10px 0 8px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--jg-mk-rule);
	font-size: 15px;
	line-height: 1.5;
	color: #4a5160;
}

/* ---- U.S. and Atlanta unemployment chart (Markets page): legend above
   the plot; the lines are revealed once, left to right, when the chart
   first comes into view (drawCompare adds the classes; never under
   reduced motion). The complete chart is drawn underneath throughout. */
.jg-mk-compare .jg-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	font-size: 11px;
	color: var(--jg-ink-soft);
}

.jg-mk-compare .jg-chart__key {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.jg-mk-compare .jg-chart__key strong {
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--jg-mk-ink);
}

.jg-mk-compare .jg-chart__swatch {
	display: inline-block;
	width: 14px;
	height: 3px;
	background: var(--jg-accent, #ff6a13);
}

.jg-mk-compare .jg-chart__key--metro .jg-chart__swatch {
	background: #2b6cb0;
}

.jg-mk-compare .jg-chart__plot {
	position: relative;
}

.jg-mk-compare .jg-dash__readout {
	position: absolute;
	top: 6px;
	left: 8px;
	z-index: 2;
	margin: 0;
	padding: 2px 7px;
	border: 1px solid var(--jg-mk-rule);
	background: rgba(255, 255, 255, 0.94);
	font-family: var(--jg-mono);
	font-size: 11px;
	color: var(--jg-mk-ink);
	pointer-events: none;
}

.jg-mk-compare .jg-dash__readout:empty {
	display: none;
}

.jg-mk-compare__note {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--jg-ink-soft);
}

.jg-chart__mount--reveal {
	clip-path: inset(0 100% 0 0);
}

.jg-chart__mount--reveal.is-revealed {
	clip-path: inset(0 0 0 0);
	transition: clip-path 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
	.jg-chart__mount--reveal {
		clip-path: none;
	}
}

/* ---- JobGetr TV in the Markets rail (replaces Get a Market Report). */
.jg-mk-tv .jg-tv {
	border: 1px solid var(--jg-mk-rule);
	border-top: 2px solid var(--jg-mk-ink);
	background: #fff;
}

.jg-mk-tv .jg-tv__head,
.jg-mk-tv .jg-tv__meta {
	padding-left: 10px;
	padding-right: 10px;
}

/* UAT Phase 07F: the orange program label is the terminal's only header
   (an h2 in the kicker's own type), directly above the player. */
.jg-mk-tv .jg-tv__label {
	margin: 0;
	padding: 9px 10px 8px;
	font-family: inherit;
	line-height: 1.3;
}

/* ---- Monthly Job Market Brief and Market Highlights: editorial, no cards. */
.jg-mk-brief {
	margin: 14px 0 18px !important;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--jg-mk-rule);
}

.jg-mk-brief__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 14px;
	margin: 0 0 6px;
}

.jg-mk-brief__title {
	margin: 0;
	padding-left: 10px;
	border-left: 3px solid var(--jg-brand);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-mk-ink);
}

.jg-mk-brief__dateline {
	margin: 0;
	font-size: 11.5px;
	color: var(--jg-ink-soft);
}

.jg-mk-brief__text {
	max-width: 78ch;
	margin: 0 0 12px;
	font-size: 16.5px;
	line-height: 1.6;
	color: #1f2430;
}

.jg-mk-brief__label {
	margin: 0 0 4px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-mk-highlights {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* UAT Phase 07E: no Newspaper list indent (ul li, 21px), so the highlights
   share the left edge of the unemployment chart above them. */
.jg-mk-highlight {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 10px;
	margin-left: 0;
	padding: 7px 0;
	border-top: 1px solid var(--jg-mk-rule);
}

.jg-mk-highlight__text {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--jg-mk-ink);
}

.jg-mk-highlight__meta {
	font-size: 11px;
	color: var(--jg-ink-soft);
	white-space: nowrap;
}

@media (max-width: 1018px) {
	[data-jg-module="markets-page"] .jg-mk__masthead h1.jg-mk__title {
		font-size: 38px;
	}
}

@media (max-width: 767px) {
	[data-jg-module="markets-page"] .jg-mk__masthead h1.jg-mk__title {
		font-size: 32px;
	}

	.jg-mk__dek {
		font-size: 14px;
	}

	.jg-mk-brief__text {
		font-size: 15.5px;
	}

	.jg-mk-highlights {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Geography as a text subnav: small links, the active one underlined. */
.jg-mk .jg-geo {
	display: flex;
	flex-wrap: wrap;
	gap: 0 18px;
	margin: 0;
	border: 0;
	background: transparent;
}

.jg-mk .jg-geo__option {
	position: relative;
	padding: 6px 0 5px;
	border: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	color: var(--jg-ink-soft);
	background: transparent;
	white-space: nowrap;
}

.jg-mk .jg-geo__option::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
}

.jg-mk .jg-geo__option:hover,
.jg-mk .jg-geo__option:focus {
	color: var(--jg-mk-ink);
	background: transparent;
}

.jg-mk .jg-geo__option.is-active {
	color: var(--jg-mk-ink);
	background: transparent;
}

.jg-mk .jg-geo__option.is-active::after {
	background: var(--jg-mk-ink);
}

/* Summary band header: bleeds its light background 8px past the content
   edge so the heading text shares the left edge with the title, the
   subnav and the first box. */
.jg-mk-summary > .jg-mk-head {
	margin: 0 -8px 6px;
	padding: 5px 8px;
	border-top: 1px solid var(--jg-mk-rule);
	border-bottom: 1px solid var(--jg-mk-rule);
}

.jg-mk-summary > .jg-mk-head .jg-mk-head__title {
	font-size: 15px;
}

.jg-mk-summary > .jg-mk-head .jg-mk-head__meta {
	font-size: 10.5px;
	line-height: 1.2;
}

/* ---- section heads: bold black title on a light band with a thin rule */
.jg-mk-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0 0 6px;
	padding: 6px 8px;
	background: var(--jg-mk-band);
	border-bottom: 1px solid var(--jg-mk-rule);
}

.jg-mk-head__title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--jg-mk-ink);
}

.jg-mk-head__kicker {
	display: inline-block;
	margin-right: 6px;
	padding-right: 6px;
	border-right: 1px solid var(--jg-mk-rule);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jg-brand);
	vertical-align: 1px;
}

.jg-mk-head__meta {
	font-size: 11px;
	color: var(--jg-ink-soft);
}

.jg-mk-head__meta--lede {
	flex-basis: 100%;
	line-height: 1.4;
}

.jg-mk-head__more {
	font-size: 11px;
	font-weight: 700;
	color: var(--jg-brand);
	text-decoration: none;
	white-space: nowrap;
}

.jg-mk-head__more:hover,
.jg-mk-head__more:focus {
	text-decoration: underline;
}

.jg-mk-head--rail {
	padding: 5px 8px;
}

.jg-mk-head--rail .jg-mk-head__title {
	font-size: 13.5px;
}

.jg-mk-head--group {
	margin-bottom: 10px;
	border-bottom: 2px solid var(--jg-mk-ink);
}

.jg-mk .jg-section,
.jg-mk__body .jg-section {
	margin: 0 0 22px;
	scroll-margin-top: 80px;
}

/* ---- summary band */
.jg-mk-summary {
	margin-bottom: 16px !important;
}

.jg-mk-summary__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
	gap: 14px;
	align-items: stretch;
}

.jg-mk-boxes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.jg-mk-box {
	min-width: 0;
	padding: 7px 8px 6px;
	border: 1px solid var(--jg-mk-rule);
	background: #fff;
}

.jg-mk-box__label {
	margin: 0 0 2px;
	min-height: 26px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-mk-ink);
}

.jg-mk-box__label a {
	color: inherit;
	text-decoration: none;
}

.jg-mk-box__label a:hover,
.jg-mk-box__label a:focus {
	color: var(--jg-brand);
}

.jg-mk-box__value {
	font-family: var(--jg-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--jg-mk-ink);
	white-space: nowrap;
}

.jg-mk-box__unit {
	font-family: inherit;
	font-size: 9.5px;
	font-weight: 500;
	color: var(--jg-ink-soft);
}

.jg-mk-box__move {
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
}

.jg-mk-box__move .jg-change {
	font-size: 11px;
}

.jg-mk-box__cmp,
.jg-mk-box__period {
	font-size: 9.5px;
	color: var(--jg-ink-soft);
}

.jg-mk-box__spark {
	margin: 4px 0 2px;
	line-height: 0;
}

.jg-mk-box__spark .jg-spark {
	display: block;
	width: 100%;
	height: 28px;
}

.jg-mk-box .jg-spark__line {
	stroke: var(--jg-ink-soft);
}

.jg-mk-box .jg-spark__dot {
	fill: var(--jg-ink-soft);
}

.jg-mk-box--favorable .jg-spark__line {
	stroke: var(--jg-up);
}

.jg-mk-box--favorable .jg-spark__dot {
	fill: var(--jg-up);
}

.jg-mk-box--unfavorable .jg-spark__line {
	stroke: var(--jg-down);
}

.jg-mk-box--unfavorable .jg-spark__dot {
	fill: var(--jg-down);
}

/* Latest / Prior on a card (UAT Phase 07D): the card group is one period
   switch that turns by itself, so there is no control. Value, change, date
   and sparkline crossfade in place (.jg-flip) in 450 ms, the Glance
   charts' easing, so the card never changes size. */
.jg-mk-box__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 6px;
}

.jg-mk-box .jg-flip__face {
	transition-duration: 0.45s;
	transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.jg-mk-box__spark .jg-flip {
	grid-template-columns: minmax(0, 1fr);
}

.jg-mk-box__spark .jg-flip__face {
	display: block;
	min-width: 0;
}

.jg-mk-boxes.is-prior .jg-mk-box[data-jg-flip] .jg-mk-box__period {
	color: #2b6cb0;
}

/* The prior period's line is stroked by that period's own change. */
.jg-mk-box[data-jg-prior-sentiment="favorable"] .jg-flip__face--prior .jg-spark__line {
	stroke: var(--jg-up);
}

.jg-mk-box[data-jg-prior-sentiment="favorable"] .jg-flip__face--prior .jg-spark__dot {
	fill: var(--jg-up);
}

.jg-mk-box[data-jg-prior-sentiment="unfavorable"] .jg-flip__face--prior .jg-spark__line {
	stroke: var(--jg-down);
}

.jg-mk-box[data-jg-prior-sentiment="unfavorable"] .jg-flip__face--prior .jg-spark__dot {
	fill: var(--jg-down);
}

.jg-mk-box[data-jg-prior-sentiment="none"] .jg-flip__face--prior .jg-spark__line,
.jg-mk-box[data-jg-prior-sentiment="neutral"] .jg-flip__face--prior .jg-spark__line {
	stroke: var(--jg-ink-soft);
}

.jg-mk-box[data-jg-prior-sentiment="none"] .jg-flip__face--prior .jg-spark__dot,
.jg-mk-box[data-jg-prior-sentiment="neutral"] .jg-flip__face--prior .jg-spark__dot {
	fill: var(--jg-ink-soft);
}

/* Prior reading as text: screen readers always (.jg-period-compare); on
   screen under reduced motion, where the cards do not turn. */
@media (prefers-reduced-motion: reduce) {
	.jg-mk-box .jg-flip__face {
		transition: none;
	}

	.jg-mk-box .jg-mk-box__prior {
		display: block;
		margin: 3px 0 0;
		font-size: 9.5px;
		line-height: 1.35;
		color: var(--jg-ink-soft);
	}
}

.jg-mk-box__note {
	margin-top: 2px;
	font-size: 10px;
	line-height: 1.35;
	color: var(--jg-ink-soft);
}

.jg-mk-box .jg-value--empty {
	font-size: 14px;
	color: var(--jg-ink-soft);
}

/* ---- heatmap: uniform tiles, colour = the reading of the published change */
.jg-mk-heat {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.jg-mk-heat__title {
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-mk-ink);
}

.jg-mk-heat__sub {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jg-ink-soft);
}

.jg-mk-heat__grid {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(56px, 92px);
	align-content: start;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-mk-heat__tile {
	margin: 0;
	padding: 0;
	min-width: 0;
	background: #dfe3ea;
	color: #2c3140;
}

.jg-mk-heat__tile a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: 54px;
	padding: 6px 6px 5px;
	color: inherit;
	text-decoration: none;
}

.jg-mk-heat__tile a:hover,
.jg-mk-heat__tile a:focus {
	outline: 2px solid var(--jg-mk-ink);
	outline-offset: -2px;
}

/* UAT Phase 08E.1: one step deeper (#1f8a4c, #d9463a were 4.3:1 under
   white text), still plainly green and red. */
.jg-mk-heat__tile--favorable {
	background: #1b7f45;
	color: #fff;
}

.jg-mk-heat__tile--unfavorable {
	background: #c93d32;
	color: #fff;
}

.jg-mk-heat__tile--neutral {
	background: #b9c0cc;
	color: #1d2230;
}

.jg-mk-heat__abbr {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jg-mk-heat__chg {
	font-family: var(--jg-mono);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jg-mk-heat__chg small {
	font-family: inherit;
	font-size: 8.5px;
	font-weight: 600;
	opacity: 0.85;
}

/* ---- compact source lines */
.jg-mk .jg-source--line,
.jg-mk__body .jg-source--line {
	margin: 4px 0 0;
	padding: 0 8px;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--jg-ink-soft);
}

.jg-mk__body .jg-source--caveat {
	margin-top: 2px;
	font-style: italic;
}

.jg-mk .jg-note {
	margin: 4px 0 0;
	padding: 0 8px;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--jg-ink-soft);
}

/* ---- dense terminal tables */
.jg-mk__body .jg-table--dense {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.jg-mk__body .jg-table--dense th,
.jg-mk__body .jg-table--dense td {
	padding: 4px 8px;
	border-bottom: 1px solid var(--jg-mk-rule);
	line-height: 1.3;
	vertical-align: middle;
}

.jg-mk__body .jg-table--dense thead th {
	position: static;
	padding-top: 3px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--jg-mk-ink);
	font-size: 9.5px;
	letter-spacing: 0.05em;
	color: var(--jg-ink-soft);
}

.jg-mk__body .jg-table--dense tbody th {
	font-weight: 600;
	color: var(--jg-mk-ink);
}

.jg-mk__body .jg-table--dense tbody th a {
	color: inherit;
	text-decoration: none;
}

.jg-mk__body .jg-table--dense tbody th a:hover,
.jg-mk__body .jg-table--dense tbody th a:focus {
	color: var(--jg-brand);
}

.jg-mk__body .jg-table--dense tbody tr:hover {
	background: var(--jg-mk-band);
}

.jg-mk__body .jg-table--dense .jg-num {
	font-family: var(--jg-mono);
	font-size: 12px;
	text-align: right;
	white-space: nowrap;
}

.jg-mk__body .jg-table--dense .jg-num .jg-value {
	font-size: 12px;
	font-weight: 700;
	color: var(--jg-mk-ink);
}

.jg-mk__body .jg-table--dense .jg-changes {
	width: 1%;
}

.jg-mk__body .jg-table--dense .jg-change {
	font-size: 11.5px;
	font-weight: 700;
}

.jg-mk__body .jg-table--dense .jg-change--none {
	font-weight: 400;
	color: var(--jg-ink-soft);
}

.jg-mk__body .jg-table--dense .jg-period {
	width: 1%;
	font-size: 10.5px;
	color: var(--jg-ink-soft);
	text-align: right;
	white-space: nowrap;
}

.jg-mk__body .jg-table--dense .jg-badge {
	margin-left: 4px;
	padding: 1px 5px;
	font-size: 8.5px;
	vertical-align: 1px;
}

.jg-mk__body .jg-table--dense tbody th .jg-value--empty {
	color: var(--jg-ink-soft);
}

.jg-mk__body .jg-state {
	margin: 4px 0 6px;
	font-size: 11px;
}

/* ---- feature chart */
.jg-mk__chart .jg-chart {
	margin: 0;
}

.jg-mk__chart .jg-chart__title {
	margin: 0 0 4px;
	padding: 0 8px;
	font-size: 10.5px;
}

.jg-mk__chart .jg-chart__mount {
	border-color: var(--jg-mk-rule);
}

.jg-mk__chart .jg-chart__caption {
	margin: 4px 0 0;
	padding: 0 8px;
	font-size: 10.5px;
}

.jg-mk__research .jg-chart {
	margin: 8px 0 0;
}

.jg-mk__research .jg-chart__title {
	margin: 0 0 4px;
	padding: 0 8px;
	font-size: 10px;
}

.jg-mk__research .jg-chart__caption {
	margin: 4px 0 0;
	padding: 0 8px;
	font-size: 10.5px;
}

.jg-mk__research .jg-cards--withheld {
	margin-top: 8px;
	gap: 6px;
}

.jg-mk__research .jg-card--withheld,
.jg-mk__research .jg-cards--withheld .jg-card {
	padding: 8px 10px;
	border-radius: 0;
	font-size: 11.5px;
}

.jg-mk__research .jg-notice {
	padding: 8px 10px;
	border-radius: 0;
	font-size: 11.5px;
}

.jg-mk__research {
	margin: 0 0 18px;
	padding: 0;
	background: transparent;
}

/* ---- rail */
.jg-mk__rail > * + * {
	margin-top: 16px;
}

/* UAT Phase 08G.2: /markets/ splits its rail around the main column in the
   source (JobGetr TV, main, the rest of the rail) so phones stack in source
   order. On the two-column grid the main column floats right beside JobGetr
   TV and the rest of the rail clears under it: the same one rail as before.
   Phase 08G.2A: the section navigation sits with JobGetr TV, ahead of main. */
@media (min-width: 768px) {
	.td-pb-row.jg-mk__body--source-order > .jg-mk__main {
		float: right;
	}

	.td-pb-row.jg-mk__body--source-order > .jg-mk__rail--rest {
		clear: left;
		margin-top: 16px;
	}
}

.jg-mk-report {
	padding: 0 0 10px;
	border: 1px solid var(--jg-mk-rule);
	border-top: 2px solid var(--jg-mk-ink);
	background: #fff;
}

.jg-mk-report .jg-mk-head {
	margin-bottom: 8px;
	background: transparent;
}

.jg-mk-report__lede,
.jg-mk-report__alt,
.jg-mk-report__fine {
	margin: 0 10px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--jg-mk-ink);
}

.jg-mk-report__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 84px;
	margin: 10px 10px 8px;
	padding: 10px;
	border: 1.5px dashed #b9c0cc;
	background: var(--jg-mk-band);
	text-align: center;
}

.jg-mk-report__drop-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--jg-mk-ink);
}

.jg-mk-report__drop-hint {
	margin: 0;
	font-size: 11px;
	color: var(--jg-ink-soft);
}

.jg-mk-report__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 10px 8px;
}

.jg-mk-report__btn[disabled] {
	opacity: 0.85;
	cursor: not-allowed;
}

.jg-mk-report__badge {
	display: inline-block;
	padding: 2px 7px;
	border: 1px solid var(--jg-brand);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-mk-report__alt {
	font-size: 11.5px;
}

.jg-mk-report__paste {
	color: var(--jg-ink-soft);
	text-decoration: underline;
}

.jg-mk-report__alt a {
	font-weight: 700;
	color: var(--jg-brand);
	text-decoration: none;
}

.jg-mk-report__fine {
	margin-top: 6px;
	font-size: 10.5px;
	color: var(--jg-ink-soft);
}

.jg-mk-report__fine a {
	color: inherit;
	text-decoration: underline;
}

.jg-mk__ad .td_block_wrap {
	margin-bottom: 0;
}

.jg-mk__ad .td-a-rec {
	margin: 0;
	text-align: center;
}

.jg-mk__ad .td-a-rec img {
	max-width: 100%;
	height: auto;
}

.jg-mk__ad:empty,
.jg-mk__ad .td-a-rec:empty {
	display: none;
}

/* The tall rail ad and the editorial list keep their own identities under
   the section nav: the ad sits close beneath it, the stories carry the
   homepage's column title and orange rule. */
.jg-mk__ad--tall .td-a-rec img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.jg-mk__stories .td_block_wrap {
	margin-bottom: 0;
}

.jg-mk__stories .td_module_flex .td-module-container {
	padding-bottom: 0;
}

.jg-mk__stories .td_module_flex .entry-title {
	margin-bottom: 0;
}

/* compact roles: search, dense list, family chips */
.jg-mk__rail .jg-roles--compact {
	margin-bottom: 0;
}

.jg-mk__rail .jg-roles--compact .jg-roles__search {
	margin: 6px 0 4px;
}

.jg-mk__rail .jg-roles--compact .jg-roles__input {
	min-width: 0;
	flex: 1 1 120px;
	font-size: 12px;
}

.jg-mk__rail .jg-roles--compact .jg-btn {
	padding: 7px 10px;
	font-size: 11px;
}

.jg-roles__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--jg-mk-rule);
}

.jg-roles__list li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--jg-mk-rule);
}

.jg-roles__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--jg-mk-ink);
	text-decoration: none;
}

.jg-roles__list a:hover,
.jg-roles__list a:focus {
	color: var(--jg-brand);
	background: var(--jg-mk-band);
}

.jg-roles__list-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jg-roles__list-pay {
	flex: 0 0 auto;
	font-family: var(--jg-mono);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.jg-mk__rail .jg-roles--compact .jg-roles__families {
	margin-top: 8px;
	padding: 0 8px;
}

.jg-mk__rail .jg-roles--compact .jg-roles__families-label {
	font-size: 10px;
}

.jg-mk__rail .jg-roles--compact .jg-sectionnav--inline a {
	padding: 3px 7px;
	font-size: 11px;
}

/* section nav in the rail */
.jg-mk__nav .jg-sectionnav {
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
}

.jg-mk__nav .jg-sectionnav li {
	margin: 0;
	border-bottom: 1px solid var(--jg-mk-rule);
}

.jg-mk__nav .jg-sectionnav a {
	display: block;
	padding: 4px 8px;
	border: 0;
	font-size: 11.5px;
	font-weight: 600;
}

.jg-mk__nav .jg-sectionnav a:hover,
.jg-mk__nav .jg-sectionnav a:focus {
	background: var(--jg-mk-band);
}

/* ---- responsive */
@media (max-width: 1140px) {
	.jg-mk-summary__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
	}
}

@media (max-width: 1018px) {
	.jg-mk-summary__grid {
		grid-template-columns: 1fr;
	}

	.jg-mk-heat__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.jg-mk-boxes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-mk-heat__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The grid columns give way to one stacked flow in the mobile order:
	   report, chart, metric sections, roles, research, explorers, ad. */
	.jg-mk__body {
		display: flex;
		flex-direction: column;
	}

	/* !important: Newspaper's phone grid rules re-block the span columns
	   after this sheet; the columns must dissolve for the order to apply. */
	.jg-mk__body > .jg-mk__rail,
	.jg-mk__body > .jg-mk__main {
		display: contents !important;
	}

	.jg-mk__body > .jg-mk__rail > *,
	.jg-mk__body > .jg-mk__main > * {
		width: 100%;
		margin-top: 0;
		margin-bottom: 16px;
	}

	/* UAT Phase 08G.2: /markets/ already has its phone order in the source
	   (see the rail note above), so its columns stay boxes and stack as
	   written; each is its own flex column (the same spacing as the one
	   flow) and the order values below do not apply to it. */
	.jg-mk__body.jg-mk__body--source-order {
		display: block;
	}

	.jg-mk__body.jg-mk__body--source-order > .jg-mk__rail,
	.jg-mk__body.jg-mk__body--source-order > .jg-mk__main {
		display: flex !important;
		flex-direction: column;
	}

	.jg-mk__body.jg-mk__body--source-order > .jg-mk__rail > *,
	.jg-mk__body.jg-mk__body--source-order > .jg-mk__main > * {
		order: 0;
	}

	.jg-mk-report,
	.jg-mk-tv { order: 10; }
	.jg-mk__nav { order: 15; }
	.jg-mk__chart { order: 20; }
	/* UAT Phase 07E: the brief follows the chart; flex items keep both
	   margins, so it drops its own top margin here. */
	.jg-mk__main > .jg-mk-brief {
		order: 25;
		margin-top: 0 !important;
	}
	.jg-mk__metrics { order: 30; }
	.jg-mk__rail .jg-roles--compact { order: 40; }
	.jg-mk__research { order: 50; }
	.jg-mk__explorers { order: 60; }
	.jg-mk__ad { order: 70; }
	.jg-mk__ad--tall { order: 72; }
	.jg-mk__stories { order: 74; }
	.jg-mk__foot { order: 80; }

	.jg-mk__rail .jg-roles--compact .jg-roles__input {
		flex-basis: auto;
	}

	.jg-mk__nav .jg-sectionnav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 8px;
	}

	.jg-mk__masthead .jg-mk__title,
	.jg-mk__masthead h1.jg-mk__title {
		font-size: 26px;
	}

	.jg-mk__body .jg-table--dense th,
	.jg-mk__body .jg-table--dense td {
		padding: 5px 6px;
	}

	.jg-mk__body .jg-table--dense .jg-period {
		display: none;
	}

	.jg-mk__body .jg-table--dense thead th.jg-period,
	.jg-mk__body .jg-table--dense thead th:last-child {
		display: none;
	}
}

@media (max-width: 430px) {
	.jg-mk-boxes {
		gap: 6px;
	}

	.jg-mk-box__value {
		font-size: 14px;
	}
}

/* ========================================================= Instrument page */
/* The common role / metric detail page (templates/markets/metric.php) on
   the reference quote-page architecture: td-pb-span8 report beside a
   td-pb-span4 rail, identity and reading, the primary chart, tabs, dense
   label/value stats, mini modules, wide ad, two-column news, performance
   boxes, methodology. White, black type, thin rules, square corners;
   green/red only for movement, orange only for action. */
.jg-inst {
	--jg-ink: var(--jg-navy, #131f49);
	--jg-ink-soft: var(--jg-gray, #717176);
	--jg-line: var(--jg-border, #e4e8ef);
	--jg-brand: var(--jg-accent, #ff6a13);
	--jg-up: var(--jg-positive, #12864f);
	--jg-down: var(--jg-negative, #d92d20);
	--jg-mono: var(--jg-font-mono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace);
	--jg-i-ink: #111318;
	--jg-i-rule: #e1e4ea;
	--jg-i-band: #f4f5f7;

	box-sizing: border-box;
	color: var(--jg-i-ink);
	margin-bottom: 30px;
}

.jg-inst * {
	box-sizing: border-box;
}

.jg-inst__main > * + * {
	margin-top: 22px;
}

/* ---- identity */
.jg-inst__head {
	margin-top: 8px;
}

.jg-inst__crumb {
	display: flex;
	gap: 6px;
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-inst__crumb a {
	color: inherit;
	text-decoration: none;
}

.jg-inst__crumb a:hover,
.jg-inst__crumb a:focus {
	color: var(--jg-brand);
}

.jg-inst__identity {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--jg-i-rule);
}

.jg-inst__name {
	min-width: 0;
	flex: 1 1 320px;
}

.jg-inst__title,
h1.jg-inst__title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--jg-i-ink);
}

.jg-inst__ident {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--jg-ink-soft);
}

.jg-inst__ident-sep {
	margin: 0 5px;
	opacity: 0.6;
}

.jg-inst__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding-top: 2px;
}

.jg-inst__actions .jg-geo {
	display: inline-flex;
	margin-right: 6px;
	border: 1px solid var(--jg-i-rule);
	background: #fff;
}

.jg-inst__actions .jg-geo__option {
	padding: 5px 9px;
	font-size: 11px;
	letter-spacing: 0.02em;
	border-right: 1px solid var(--jg-i-rule);
}

.jg-inst__actions .jg-geo__option.is-active {
	background: var(--jg-i-ink);
	color: #fff;
}

.jg-inst__action {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 10px;
	border: 1px solid var(--jg-i-rule);
	background: #fff;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-i-ink);
	text-decoration: none;
	cursor: pointer;
}

.jg-inst__action:hover,
.jg-inst__action:focus {
	border-color: var(--jg-i-ink);
	color: var(--jg-i-ink);
}

.jg-inst__action--accent {
	border-color: var(--jg-brand);
	background: var(--jg-brand);
	color: #fff;
}

.jg-inst__action--accent:hover,
.jg-inst__action--accent:focus {
	border-color: var(--jg-brand);
	color: #fff;
	opacity: 0.9;
}

/* ---- reading */
.jg-inst__quote {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 10px 0 12px;
	border-bottom: 1px solid var(--jg-i-rule);
}

.jg-inst__quote-label {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-inst__quote-period {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.jg-inst__quote-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
}

.jg-inst__value {
	font-family: var(--jg-mono);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--jg-i-ink);
}

.jg-inst__move {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.jg-inst__move--primary .jg-change {
	font-size: 20px;
	font-weight: 700;
}

.jg-inst__move--secondary {
	margin-top: 4px;
	font-size: 13px;
}

.jg-inst__move--secondary .jg-change {
	font-size: 13px;
}

.jg-inst__tag {
	font-size: 11px;
	font-weight: 600;
	color: var(--jg-ink-soft);
}

.jg-inst__quote-side {
	display: flex;
	gap: 22px;
	margin: 0;
	padding-bottom: 4px;
}

.jg-inst__quote-side div {
	min-width: 0;
}

.jg-inst__quote-side dt {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-inst__quote-side dd {
	margin: 2px 0 0;
	font-family: var(--jg-mono);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--jg-i-ink);
	white-space: nowrap;
}

.jg-inst__quote-side dd a {
	color: inherit;
	text-decoration: none;
}

.jg-inst__quote-side dd small {
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--jg-ink-soft);
}

.jg-inst__vs {
	color: var(--jg-ink-soft);
	font-weight: 400;
}

/* ---- chart */
.jg-inst__chart {
	margin-top: 10px;
}

.jg-inst__chart .jg-chart {
	margin: 0;
}

.jg-inst__chart .jg-chart__ranges {
	display: flex;
	gap: 2px;
	margin: 0 0 6px;
}

.jg-inst__chart .jg-chart__range {
	padding: 3px 9px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--jg-ink-soft);
	cursor: pointer;
}

.jg-inst__chart .jg-chart__range.is-active {
	background: var(--jg-i-band);
	color: var(--jg-i-ink);
}

/* ---- metric selector: which series the one chart below is showing.
   A terminal control, not a switch - a thin ruled box, two square cells,
   the selected one inverted. The selected state is carried by the fill,
   the weight and an underline together, so it survives without colour. */
.jg-inst__chart .jg-chart__metrics {
	display: inline-flex;
	margin: 0 0 8px;
	border: 1px solid var(--jg-i-rule);
	border-radius: 2px;
	overflow: hidden;
}

.jg-inst__chart .jg-chart__metric {
	padding: 5px 13px;
	border: 0;
	border-right: 1px solid var(--jg-i-rule);
	border-bottom: 2px solid transparent;
	background: #fff;
	font: inherit;
	font-family: var(--jg-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--jg-ink-soft);
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.jg-inst__chart .jg-chart__metric:last-child {
	border-right: 0;
}

.jg-inst__chart .jg-chart__metric:hover:not(:disabled):not(.is-active) {
	background: var(--jg-i-band);
	color: var(--jg-i-ink);
}

.jg-inst__chart .jg-chart__metric.is-active {
	background: var(--jg-i-band);
	border-bottom-color: var(--jg-brand);
	font-weight: 800;
	color: var(--jg-i-ink);
}

.jg-inst__chart .jg-chart__metric:focus-visible {
	outline: 2px solid var(--jg-brand);
	outline-offset: -2px;
}

/* Unavailable stays visible and inert: the reader can see the choice
   exists, and the title says why it is not on offer here. */
.jg-inst__chart .jg-chart__metric:disabled {
	background: #fff;
	color: var(--jg-ink-soft);
	opacity: 0.45;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* ---- source line, rewritten from whichever metric is active. */
.jg-inst__chart .jg-chart__source {
	margin: 6px 0 0;
	font-family: var(--jg-mono);
	font-size: 10.5px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--jg-ink-soft);
}

@media (max-width: 480px) {
	/* Two equal cells across the row rather than a cramped pair. */
	.jg-inst__chart .jg-chart__metrics {
		display: flex;
		width: 100%;
	}

	.jg-inst__chart .jg-chart__metric {
		flex: 1 1 0;
		padding: 6px 4px;
		font-size: 10px;
		letter-spacing: 0.05em;
		text-align: center;
	}
}

.jg-inst__chart .jg-chart__mount {
	border: 0;
	border-bottom: 1px solid var(--jg-i-rule);
}

.jg-inst__chart .jg-chart__readout {
	min-height: 16px;
	margin: 4px 0 0;
	font-family: var(--jg-mono);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	color: var(--jg-i-ink);
}

.jg-inst__chart .jg-chart__caption {
	margin: 2px 0 0;
	font-size: 10.5px;
}

/* ---- geography key: which line is Atlanta, which is the U.S., and
   which axis each is read against. Colours match the chart script's
   palette (national = accent, metro = blue). */
.jg-inst__chart .jg-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
	font-family: var(--jg-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-i-ink);
}

.jg-inst__chart .jg-chart__key {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	white-space: nowrap;
}

.jg-inst__chart .jg-chart__swatch,
.jg-inst__chart .jg-chart__readout-geo::before {
	display: inline-block;
	width: 14px;
	height: 3px;
	background: var(--jg-accent, #ff6a13);
}

.jg-inst__chart .jg-chart__key--metro .jg-chart__swatch,
.jg-inst__chart .jg-chart__readout-geo--metro::before {
	background: #2b6cb0;
}

.jg-inst__chart .jg-chart__key-note {
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--jg-ink-soft);
}

.jg-inst__chart .jg-chart__key.is-missing .jg-chart__swatch {
	opacity: 0.35;
}

.jg-inst__chart .jg-chart__readout-geo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 14px;
	white-space: nowrap;
}

.jg-inst__chart .jg-chart__readout-geo::before {
	content: "";
	width: 10px;
}

@media (max-width: 480px) {
	/* One geography per line under the period, rather than a wrap
	   that splits a name from its value. */
	.jg-inst__chart .jg-chart__readout-geo {
		display: flex;
		margin-left: 0;
	}
}

/* ---- tabs */
.jg-inst__tabs {
	margin-top: 14px;
	border-bottom: 1px solid var(--jg-i-rule);
}

.jg-inst__tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-inst__tabs a {
	display: block;
	padding: 8px 0 7px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
	text-decoration: none;
}

.jg-inst__tabs a:hover,
.jg-inst__tabs a:focus {
	color: var(--jg-i-ink);
}

.jg-inst__tabs a.is-active {
	color: var(--jg-i-ink);
	border-bottom-color: var(--jg-i-ink);
}

/* ---- sections */
.jg-inst__section {
	scroll-margin-top: 80px;
}

.jg-inst__h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-i-ink);
}

.jg-inst__h-meta {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jg-ink-soft);
}

.jg-inst__h-more {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jg-brand);
	text-decoration: none;
}

.jg-inst__note {
	margin: 8px 0 0;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

/* dense label/value grid: three columns, thin rules, tabular figures */
.jg-inst-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 28px;
}

.jg-inst-stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--jg-i-rule);
	font-size: 12px;
	line-height: 1.3;
}

.jg-inst-stat__label {
	min-width: 0;
	color: var(--jg-ink-soft);
}

.jg-inst-stat__label a {
	color: var(--jg-i-ink);
	text-decoration: none;
}

.jg-inst-stat__label a:hover,
.jg-inst-stat__label a:focus {
	color: var(--jg-brand);
}

.jg-inst-stat__value {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: var(--jg-mono);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--jg-i-ink);
	white-space: nowrap;
}

.jg-inst-stat__value--text {
	overflow-wrap: anywhere;
	font-family: inherit;
	font-weight: 600;
	white-space: normal;
	max-width: 62%;
}

.jg-inst-stat__value--text a {
	color: var(--jg-brand);
	text-decoration: none;
}

.jg-inst-stat__value .jg-change {
	font-size: 12px;
}

.jg-inst-stat__note {
	font-family: inherit;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--jg-ink-soft);
}

.jg-inst-stats--related {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jg-inst-stats--related .jg-inst-stat__value {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: 2px 6px;
}

.jg-inst-stats--related .jg-inst-stat__note {
	flex-basis: 100%;
	text-align: right;
}

.jg-inst-stats--meta {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- pay distribution */
.jg-inst-pay {
	padding: 2px 0 0;
}

.jg-inst-pay__points {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.jg-inst-pay__point {
	margin: 0;
	padding: 0;
	text-align: center;
}

.jg-inst-pay__label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
}

.jg-inst-pay__value {
	display: block;
	margin-top: 2px;
	font-family: var(--jg-mono);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--jg-i-ink);
}

.jg-inst-pay__point.is-median .jg-inst-pay__value {
	font-size: 17px;
	color: var(--jg-brand);
}

.jg-inst-pay__rail {
	position: relative;
	height: 12px;
	margin: 4px 0 0;
	background: var(--jg-i-band);
	border: 1px solid var(--jg-i-rule);
}

.jg-inst-pay__band {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(19, 31, 73, 0.16);
}

.jg-inst-pay__tick {
	position: absolute;
	top: -3px;
	bottom: -3px;
	width: 2px;
	margin-left: -1px;
	background: var(--jg-i-ink);
}

.jg-inst-pay__tick.is-median {
	width: 3px;
	margin-left: -1.5px;
	background: var(--jg-brand);
}

/* ---- job economy report: terminal mini modules */
.jg-inst-report {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
}

.jg-inst-mini {
	min-width: 0;
	padding: 8px 10px 7px;
	border: 1px solid var(--jg-i-rule);
	background: #fff;
}

.jg-inst-mini--wide {
	grid-column: 1 / -1;
	min-width: 0;
}

/* A wide table scrolls inside its card on narrow screens (the site's
   .jg-table-scroll wrapper); the card and the page never overflow. */
.jg-inst .jg-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.jg-inst .jg-table-scroll .jg-inst-table {
	min-width: 100%;
}

.jg-inst-mini__label {
	margin: 0 0 4px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--jg-i-ink);
}

.jg-inst-mini__label a {
	color: inherit;
	text-decoration: none;
}

.jg-inst-mini__label a:hover,
.jg-inst-mini__label a:focus {
	color: var(--jg-brand);
}

.jg-inst-mini__label small {
	display: block;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--jg-ink-soft);
}

.jg-inst-mini__value {
	font-family: var(--jg-mono);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	color: var(--jg-i-ink);
	white-space: nowrap;
}

.jg-inst-mini__move {
	margin-top: 2px;
	font-size: 11px;
	white-space: nowrap;
}

.jg-inst-mini__move .jg-change {
	font-size: 11.5px;
}

.jg-inst-mini__spark {
	margin: 5px 0 2px;
	line-height: 0;
}

.jg-inst-mini__spark .jg-spark {
	display: block;
	width: 100%;
	height: 28px;
}

.jg-inst-mini .jg-spark__line {
	stroke: var(--jg-ink-soft);
}

.jg-inst-mini .jg-spark__dot {
	fill: var(--jg-ink-soft);
}

.jg-inst-mini--favorable .jg-spark__line {
	stroke: var(--jg-up);
}

.jg-inst-mini--favorable .jg-spark__dot {
	fill: var(--jg-up);
}

.jg-inst-mini--unfavorable .jg-spark__line {
	stroke: var(--jg-down);
}

.jg-inst-mini--unfavorable .jg-spark__dot {
	fill: var(--jg-down);
}

.jg-inst-mini__meta {
	margin: 4px 0 0;
	font-size: 10px;
	line-height: 1.3;
	color: var(--jg-ink-soft);
}

.jg-inst-mini__pairs .jg-inst-stat {
	padding: 4px 0;
	font-size: 11.5px;
}

.jg-inst-mini__pairs .jg-inst-stat:last-child {
	border-bottom: 0;
}

/* compact tables inside wide modules */
.jg-inst-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.jg-inst-table th,
.jg-inst-table td {
	padding: 4px 6px;
	border-bottom: 1px solid var(--jg-i-rule);
	text-align: left;
	vertical-align: middle;
	line-height: 1.3;
}

.jg-inst-table thead th {
	padding-top: 0;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--jg-ink-soft);
	border-bottom: 1px solid var(--jg-i-ink);
}

.jg-inst-table tbody th {
	font-weight: 600;
	color: var(--jg-i-ink);
}

.jg-inst-table tbody th a {
	color: inherit;
	text-decoration: none;
}

.jg-inst-table tbody th a:hover,
.jg-inst-table tbody th a:focus {
	color: var(--jg-brand);
}

.jg-inst-table tbody th small {
	display: block;
	font-size: 9.5px;
	font-weight: 500;
	color: var(--jg-ink-soft);
}

.jg-inst-table .jg-num {
	font-family: var(--jg-mono);
	text-align: right;
	white-space: nowrap;
}

.jg-inst-table .jg-num .jg-change {
	font-size: 11px;
}

.jg-inst-table__more th {
	padding-top: 6px;
	border-bottom: 0;
	font-size: 11px;
}

.jg-inst-table__more a {
	color: var(--jg-brand) !important;
}

/* ---- action tag ("Premium") */
.jg-inst__action-tag {
	margin-left: 4px;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* ---- industry context */
.jg-inst-ind__bar-col {
	width: 30%;
	padding-right: 10px;
}

.jg-inst-ind__bar {
	display: block;
	height: 8px;
	background: #eef0f3;
}

.jg-inst-ind__bar span {
	display: block;
	height: 100%;
	min-width: 2px;
	background: var(--jg-i-ink);
}

.jg-inst-ind__row--favorable .jg-inst-ind__bar span {
	background: var(--jg-up, #1a8f4a);
}

.jg-inst-ind__row--unfavorable .jg-inst-ind__bar span {
	background: var(--jg-down, #c0392b);
}

/* ---- hiring context */
.jg-inst-stats--hiring {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- ads */
.jg-inst__ad .td_block_wrap {
	margin-bottom: 0;
}

.jg-inst__ad .td-a-rec {
	margin: 0;
	text-align: center;
}

.jg-inst__ad .td-a-rec img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.jg-inst__ad:empty,
.jg-inst__ad .td-a-rec:empty {
	display: none;
}

.jg-inst__ad--wide {
	padding: 14px 0;
	border-top: 1px solid var(--jg-i-rule);
	border-bottom: 1px solid var(--jg-i-rule);
}

/* ---- Premium Report promotion: the role pages' ad slots (UAT Prompt 2).
   Quiet house style, not a banner: hairline frame, accent top rule. */
.jg-inst__ad--promo.jg-inst__ad--wide {
	padding: 0;
	border: 0;
}

.jg-inst-promo {
	padding: 18px 20px 16px;
	border: 1px solid var(--jg-i-rule);
	border-top: 2px solid var(--jg-brand);
	background: #fff;
	text-align: left;
}

.jg-inst-promo__eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jg-brand);
}

.jg-inst .jg-inst-promo__title {
	margin: 0 0 6px;
	font-family: var(--global-font-3, Georgia, serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--jg-i-ink);
}

.jg-inst-promo__lede {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--jg-ink-soft);
}

.jg-inst-promo__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 20px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.jg-inst-promo__list li {
	margin: 0;
	padding: 0 0 0 12px;
	border-left: 2px solid var(--jg-i-rule);
	font-size: 13px;
	line-height: 1.4;
	color: var(--jg-ink-soft);
}

.jg-inst-promo__list strong {
	display: block;
	font-weight: 700;
	color: var(--jg-i-ink);
}

.jg-inst-promo__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0;
}

.jg-inst .jg-inst-promo__cta {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 4px;
	background: var(--jg-brand);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
}

.jg-inst .jg-inst-promo__cta:hover {
	background: #e45a08;
	color: #fff;
}

.jg-inst .jg-inst-promo__cta:focus-visible {
	outline: 2px solid var(--jg-i-ink);
	outline-offset: 2px;
}

.jg-inst-promo__note {
	font-size: 12px;
	color: var(--jg-ink-soft);
}

.jg-inst-promo--rail {
	padding: 16px;
}

.jg-inst-promo--rail .jg-inst-promo__title {
	font-size: 19px;
}

.jg-inst-promo--rail .jg-inst-promo__lede {
	font-size: 13px;
}

@media (max-width: 767px) {
	.jg-inst-promo__list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column: the main-column promotion already sits above, so the
	   rail copy would only repeat it. */
	.jg-inst__ad--rail.jg-inst__ad--promo {
		display: none;
	}
}

/* ---- recent news: two columns, thumbnail right */
.jg-inst__news .td_block_wrap {
	margin-bottom: 0;
}

.jg-inst__news .td_module_flex {
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--jg-i-rule);
}

.jg-inst__news .td_module_flex .td-module-container {
	padding-bottom: 0;
}

.jg-inst__news .td_module_flex .entry-title {
	margin-bottom: 0;
}

/* ---- performance boxes */
.jg-inst-perf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 8px;
}

.jg-inst-perf__box {
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--jg-i-rule);
}

.jg-inst-perf__label {
	margin: 0 0 3px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--jg-i-ink);
}

.jg-inst-perf__value {
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
}

.jg-inst-perf__value .jg-change {
	font-size: 16px;
	font-weight: 700;
}

.jg-inst-perf__note {
	margin: 2px 0 0;
	font-size: 10px;
	color: var(--jg-ink-soft);
}

.jg-inst-perf__bench {
	margin: 6px 0 0;
	padding: 6px 0 0;
	border-top: 1px solid var(--jg-i-rule);
	list-style: none;
}

.jg-inst-perf__bench li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	font-size: 10.5px;
	color: var(--jg-ink-soft);
}

.jg-inst-perf__bench .jg-change {
	font-size: 10.5px;
}

.jg-inst .jg-backlink {
	display: inline-block;
	margin-top: 18px;
	font-size: 12px;
}

/* ---- rail */
.jg-inst__rail {
	margin-top: 8px;
}

.jg-inst__rail > * + * {
	margin-top: 18px;
}

.jg-inst-rail__module {
	padding: 0 0 6px;
	border: 1px solid var(--jg-i-rule);
	border-top: 2px solid var(--jg-i-ink);
	background: #fff;
}

.jg-inst-rail__h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 7px 10px;
	background: var(--jg-i-band);
	border-bottom: 1px solid var(--jg-i-rule);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jg-i-ink);
}

.jg-inst-rail__h span {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jg-ink-soft);
}

/* ---- description (O*NET): a fixed number of lines collapsed, the whole
   text expanded; the toggle only appears when the text overflows. */
.jg-inst-desc {
	--jg-desc-lines: 13;
	padding-bottom: 8px;
}

.jg-inst-desc__body {
	position: relative;
	max-height: calc(var(--jg-desc-lines) * 1.5em);
	margin: 8px 10px 0;
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--jg-i-ink);
}

.jg-inst-desc__body p {
	margin: 0;
	font: inherit;
	color: inherit;
}

.jg-inst-desc.is-expanded .jg-inst-desc__body {
	max-height: none;
}

.jg-inst-desc.is-overflowing:not(.is-expanded) .jg-inst-desc__body::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1.5em;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}

.jg-inst-desc__toggle {
	display: inline-block;
	margin: 4px 10px 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--jg-brand);
	cursor: pointer;
}

.jg-inst-desc__toggle[hidden] {
	display: none;
}

.jg-inst-desc__toggle:hover,
.jg-inst-desc__toggle:focus {
	text-decoration: underline;
}

.jg-inst-rail__note {
	margin: 6px 10px 4px;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--jg-ink-soft);
}

.jg-inst-rail__note a {
	color: var(--jg-brand);
	text-decoration: none;
}

.jg-inst-lookup__form {
	display: flex;
	gap: 6px;
	margin: 10px 10px 0;
}

.jg-inst-lookup__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 9px;
	border: 1px solid var(--jg-i-rule);
	font: inherit;
	font-size: 12.5px;
	background: var(--jg-i-band);
}

.jg-inst-lookup__btn {
	flex: 0 0 auto;
	padding: 7px 11px;
	font-size: 11px;
}

/* watchlist-style rows: name, sparkline, value + change */
.jg-inst-list {
	margin: 0;
	padding: 0 10px;
	list-style: none;
}

.jg-inst-list__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px auto;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--jg-i-rule);
}

.jg-inst-list--plain .jg-inst-list__row {
	grid-template-columns: minmax(0, 1fr) auto;
}

.jg-inst-list__row:last-child {
	border-bottom: 0;
}

.jg-inst-list__name {
	min-width: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--jg-i-ink);
	text-decoration: none;
}

.jg-inst-list__name:hover,
.jg-inst-list__name:focus {
	color: var(--jg-brand);
}

.jg-inst-list__name small {
	display: block;
	font-size: 10px;
	font-weight: 500;
	color: var(--jg-ink-soft);
}

.jg-inst-list__spark {
	line-height: 0;
}

.jg-inst-list__spark .jg-spark {
	display: block;
	width: 64px;
	height: 22px;
}

.jg-inst-list__row .jg-spark__line {
	stroke: var(--jg-ink-soft);
}

.jg-inst-list__row .jg-spark__dot {
	fill: var(--jg-ink-soft);
}

.jg-inst-list__row--favorable .jg-spark__line {
	stroke: var(--jg-up);
}

.jg-inst-list__row--favorable .jg-spark__dot {
	fill: var(--jg-up);
}

.jg-inst-list__row--unfavorable .jg-spark__line {
	stroke: var(--jg-down);
}

.jg-inst-list__row--unfavorable .jg-spark__dot {
	fill: var(--jg-down);
}

.jg-inst-list__figures {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	font-family: var(--jg-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jg-inst-list--plain .jg-inst-list__figures {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: 0 6px;
}

.jg-inst-list__value {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--jg-i-ink);
}

.jg-inst-list__figures .jg-change {
	font-size: 10.5px;
}

.jg-inst-list__figures .jg-inst__tag {
	font-size: 9.5px;
}

.jg-inst-rail__stories {
	padding: 10px 10px 4px;
	border-top: 1px solid var(--jg-i-rule);
}

.jg-inst-rail__stories .td_block_wrap {
	margin-bottom: 0;
}

.jg-inst-rail__stories .td_module_flex .td-module-container {
	padding-bottom: 0;
}

.jg-inst-rail__stories .td_module_flex .entry-title {
	margin-bottom: 0;
}

/* ---- responsive */
@media (max-width: 1140px) {
	.jg-inst-report {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.jg-inst-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1018px) {
	.jg-inst__value {
		font-size: 38px;
	}

	.jg-inst-report {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* One column in the mobile order: identity, reading, chart, tabs, key
	   stats, secondary, report, performance, related instruments, news,
	   methodology, then the ads and the rest of the rail. */
	.jg-inst {
		display: flex;
		flex-direction: column;
	}

	.jg-inst > .jg-inst__main,
	.jg-inst > .jg-inst__rail {
		display: contents !important;
	}

	.jg-inst > .jg-inst__main > *,
	.jg-inst > .jg-inst__rail > * {
		width: 100%;
		margin-top: 0;
		margin-bottom: 18px;
	}

	.jg-inst__head { order: 10; }
	.jg-inst__chart { order: 20; }
	#jg-inst-ask { order: 22; }
	.jg-inst__tabs { order: 25; }
	#jg-inst-stats { order: 30; }
	#jg-inst-secondary { order: 40; }
	#jg-inst-report { order: 50; }
	#jg-inst-industries { order: 52; }
	#jg-inst-hiring { order: 54; }
	#jg-inst-performance { order: 60; }
	.jg-inst-desc { order: 65; --jg-desc-lines: 8; }
	.jg-inst-rail__module[data-jg-module="related-instruments"] { order: 70; }
	#jg-inst-news { order: 80; }
	#jg-inst-data { order: 90; }
	.jg-inst__ad--wide { order: 100; }
	.jg-inst-rail__module[data-jg-module="job-economy-context"] { order: 110; }
	.jg-inst-lookup { order: 120; }
	.jg-inst__ad--rail { order: 130; }
	.jg-inst-rail__stories { order: 140; }
	.jg-inst .jg-backlink { order: 150; }
	.jg-inst .jg-state { order: 15; }

	.jg-inst__title,
	h1.jg-inst__title {
		font-size: 24px;
	}

	.jg-inst__value {
		font-size: 34px;
	}

	.jg-inst__quote-side {
		gap: 14px;
	}

	.jg-inst-stats,
	.jg-inst-stats--meta {
		grid-template-columns: 1fr;
	}

	.jg-inst-report {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jg-inst-stats--related,
	.jg-inst-stats--hiring {
		grid-template-columns: 1fr;
	}

	.jg-inst-ind__bar-col {
		width: 18%;
		padding-right: 4px;
	}

	.jg-inst-pay__points {
		gap: 4px;
	}

	.jg-inst-pay__value {
		font-size: 12px;
	}

	.jg-inst-pay__point.is-median .jg-inst-pay__value {
		font-size: 14px;
	}

	.jg-inst__tabs ul {
		gap: 0 14px;
	}

	.jg-inst__actions {
		width: 100%;
	}
}

@media (max-width: 430px) {
	.jg-inst-report {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}

	.jg-inst-mini__value {
		font-size: 15px;
	}
}

/* ---- /atlanta/, /industries/, /occupations/, /roles/ in the /markets/
   layout (owner decision 2026-09-25): the header block closes onto the
   two-column body (.jg-mk__body--page: the shared left rail beside the
   page's own content), and the role directory fits the narrower main
   column in two columns. */
.jg-markets-surface--head {
	margin-bottom: 0;
}

.jg-mk__body--page .jg-dir {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Keep the role search button beside its field in the narrower column. */
.jg-mk__body--page .jg-rolesdir__search {
	flex-wrap: nowrap;
}

.jg-mk__body--page .jg-rolesdir__input {
	flex: 1 1 auto;
	min-width: 0;
}

.jg-mk__body--page .jg-mk__main > .jg-backlink {
	display: inline-block;
	margin-top: 4px;
}

@media (max-width: 767px) {
	.jg-mk__body--page .jg-dir {
		grid-template-columns: minmax(0, 1fr);
	}

	.jg-mk__body--page .jg-rolesdir__search {
		flex-wrap: wrap;
	}
}

/* UAT Phase 08E.1: small orange text on the light Markets surfaces uses the
   deeper on-brand orange (#ff6a13 was 2.6-2.9:1); meta text the darker
   ink (#717176 was 4.45:1 on the head band). */
.jg-mk-head__more,
.jg-mk-head__kicker,
.jg-sectionnav a.is-accent,
.jg-mk-tv .jg-tv__label,
.jg-mk__stories .td_block_wrap .td-post-category {
	color: #b84a0a;
}

.jg-sectionnav a.is-accent {
	border-color: #b84a0a;
}

.jg-mk-head__meta {
	color: #5c5c63;
}

.jg-mk__body .jg-source a {
	color: var(--jg-negative, #d92d20);
}

/* The Today head: title, Pause motion, then the geography. */
.jg-mk-summary > .jg-mk-head .jg-motion-toggle {
	margin-left: auto;
}

/* Heatmap tiles: the ring sits outside the tile in navy, clear of the tile
   colour (an orange ring inside a green or red tile would vanish). */
:is(.jg-markets-surface) .jg-mk-heat__tile a[href]:focus-visible {
	outline: 2px solid #131f49;
	outline-offset: 2px;
}

/* UAT Phase 08E.2: "NSA" beside a card's period when its series is
   published not seasonally adjusted (the full words in the title and for
   screen readers), and the national brief's scope line on the Atlanta
   view. Both in the cards' / brief's own meta type, #5c5c63 (6.6:1). */
.jg-mk-box__adj {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #5c5c63;
	cursor: help;
}

.jg-mk-brief__scope {
	margin: -2px 0 8px;
	font-size: 11.5px;
	line-height: 1.45;
	color: #5c5c63;
}