/*
 * Article 006 (AT&T fiber venture). Research surfaces use palette tokens only:
 * teal for the featured series, navy for the contrast series, band greys for
 * context. Layout, type and table rules come from research-article.css; this file
 * mirrors the few chart affordances Article 005 adds, under this article's prefix.
 */
.g2m-trj {
	--g2m-trj-band-1: #93a8b1;
	--g2m-trj-band-2: #bccbd1;
	--g2m-trj-band-3: #dee7ea;
	--g2m-tra-line-strong: #b6c2c9;
	/* Map ramp: pale teal through teal to navy, all on the palette (the Article 5 heat stops). */
	--g2m-trj-teal-pale: #9fd4de;
	--g2m-trj-teal-deep: #17636f;
	--g2m-trj-ring: #c9d3d8;
	--g2m-trj-land: #eef2f4;
}

/* Charts are wider than a phone. Let them scroll inside their own region rather
   than pushing the page sideways, and tell a touch reader that they can. */
.g2m-trj__scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.g2m-trj__scroll .g2m-trac__chart { min-width: 620px; }
.g2m-trj__scroll:focus-visible,
.g2m-trj .g2m-tra__tablewrap:focus-visible { outline: 2px solid var(--g2m-tra-teal); outline-offset: 3px; }

.g2m-trj__value { font-variant-numeric: tabular-lining-nums; white-space: pre; }

.g2m-trj__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--g2m-tra-muted); }
.g2m-trj__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.g2m-trj__legend i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; box-sizing: border-box; }
.g2m-trj__sw-teal  { background: var(--g2m-tra-teal); }
.g2m-trj__sw-navy  { background: var(--g2m-tra-navy); }
.g2m-trj__sw-band1 { background: var(--g2m-trj-band-1); }
.g2m-trj__sw-band2 { background: var(--g2m-trj-band-2); }
.g2m-trj__sw-band3 { background: var(--g2m-trj-band-3); }
.g2m-trj__sw-pale  { background: var(--g2m-trj-teal-pale); }
.g2m-trj__sw-deep  { background: var(--g2m-trj-teal-deep); }
.g2m-trj__sw-ring  { background: var(--g2m-trj-ring); }

/* Hero map. Counties carry their own fill; state lines sit on top so the footprint reads by state. */
.g2m-trj__land path { fill: var(--g2m-trj-land); stroke: none; }
.g2m-trj__counties path { stroke: #fff; stroke-width: 0.35; }
.g2m-trj__borders path { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; }
.g2m-trj__labels circle { fill: var(--g2m-tra-navy); stroke: #fff; stroke-width: 1.5; }
.g2m-trj__labels text { font-size: 13px; font-weight: 600; fill: var(--g2m-tra-navy); paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }

.g2m-trj__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.g2m-trj .g2m-trac__figure h3 { margin: 0 0 1rem; font-size: 1.05rem; }

@media (max-width: 800px) {
	.g2m-trj__scroll::after { content: 'Scroll horizontally for the full chart. Exact values are in the data table below.'; display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--g2m-tra-muted); }
}
@media (min-width: 801px) {
	.g2m-trj__scroll { overflow: visible; }
	.g2m-trj__scroll .g2m-trac__chart { min-width: 0; }
	.g2m-trj__scroll::after { display: none; }
}