/*
 * Article 005 (market archetypes). 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
 * adds only the band colors and the few chart affordances this article needs.
 */
.g2m-tram {
	--g2m-tram-band-1: #93a8b1;
	--g2m-tram-band-2: #bccbd1;
	--g2m-tram-band-3: #dee7ea;
	--g2m-tram-tick: #b6c2c9;
	--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-tram__scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.g2m-tram__scroll .g2m-trac__chart { min-width: 620px; }
.g2m-tram__scroll:focus-visible,
.g2m-tram .g2m-tra__tablewrap:focus-visible { outline: 2px solid var(--g2m-tra-teal); outline-offset: 3px; }

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

.g2m-tram__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-tram__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.g2m-tram__legend i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; box-sizing: border-box; }
.g2m-tram__sw-teal  { background: var(--g2m-tra-teal); }
.g2m-tram__sw-navy  { background: var(--g2m-tra-navy); }
.g2m-tram__sw-band1 { background: var(--g2m-tram-band-1); }
.g2m-tram__sw-band2 { background: var(--g2m-tram-band-2); }
.g2m-tram__sw-band3 { background: var(--g2m-tram-band-3); }
.g2m-tram__dot-teal { background: var(--g2m-tra-teal); border-radius: 50%; }
.g2m-tram__dot-navy { background: var(--g2m-tra-navy); border-radius: 50%; }
.g2m-tram__tick     { background: var(--g2m-tram-tick); width: 0.25rem !important; height: 0.8rem !important; border-radius: 0; }

/* The row the section's claim rests on, so a skimming reader lands on it. */
.g2m-tram__row--lead > th, .g2m-tram__row--lead > td { background: var(--g2m-tra-teal-soft); }

/* Named examples run long; let them wrap while the numeric columns stay on one line. */
.g2m-tram__examples { white-space: normal; min-width: 18rem; line-height: 1.45; }

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

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

/* Brand exposure heatmap. Cells carry their own background from the palette ramp, so
   the table rules stay quiet and the color does the work. */
.g2m-tram__heat { font-variant-numeric: tabular-nums; }
.g2m-tram__heat thead th { font-size: 0.72rem; line-height: 1.2; vertical-align: bottom; text-align: center; }
.g2m-tram__heat thead th span { display: block; max-width: 6.5rem; margin: 0 auto; }
.g2m-tram__heat thead th:first-child { text-align: left; min-width: 10rem; }
.g2m-tram__heat tbody th { font-weight: 500; white-space: nowrap; }
.g2m-tram__heat tbody td { text-align: center; font-size: 0.76rem; padding: 0.3rem 0.35rem; white-space: nowrap; }
.g2m-tram__heat .g2m-tram__meta { background: var(--g2m-tra-surface); color: var(--g2m-tra-muted); border-left: 1px solid var(--g2m-tra-line); }
.g2m-tram__cls { display: block; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--g2m-tra-muted); font-weight: 400; margin-top: 1px; }