/*
 * Article 007 (The Fiber Money Map). 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 chart affordances Article 006 adds, under this article's prefix.
 */
.g2m-trm {
	--g2m-trm-band-1: #93a8b1;
	--g2m-trm-band-2: #bccbd1;
	--g2m-trm-band-3: #dee7ea;
	--g2m-trm-teal-deep: #17636f;
	--g2m-tra-line-strong: #b6c2c9;
}

/* 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-trm__scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.g2m-trm__scroll .g2m-trac__chart { min-width: 620px; }
.g2m-trm__scroll:focus-visible,
.g2m-trm .g2m-tra__tablewrap:focus-visible { outline: 2px solid var(--g2m-tra-teal); outline-offset: 3px; }

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

.g2m-trm__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-trm__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.g2m-trm__legend i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; box-sizing: border-box; }
.g2m-trm__sw-teal  { background: var(--g2m-tra-teal); }
.g2m-trm__sw-navy  { background: var(--g2m-tra-navy); }
.g2m-trm__sw-deep  { background: var(--g2m-trm-teal-deep); }
.g2m-trm__sw-band1 { background: var(--g2m-trm-band-1); }
.g2m-trm__sw-band2 { background: var(--g2m-trm-band-2); }

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

@media (max-width: 800px) {
	.g2m-trm__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-trm__scroll { overflow: visible; }
	.g2m-trm__scroll .g2m-trac__chart { min-width: 0; }
	.g2m-trm__scroll::after { display: none; }
}