/**
 * Global X Trends Pro — front end styles.
 *
 * Design intent: a live leaderboard, not a blog widget. Trending topics are
 * ranked, numeric and volatile, so the layout borrows from chart listings —
 * a strong tabular rank numeral, a proportional volume rail, and one obvious
 * action per row. Everything is scoped under .gxtp so nothing leaks into the
 * host theme, and our own controls are reset so nothing surprising leaks in.
 *
 * Mobile-first: base styles target a ~360px viewport; wider layouts are
 * container-query enhancements, so the widget adapts to its slot rather than
 * to the window.
 */

.gxtp {
	/* Blue-cast neutrals rather than flat grey, so the widget reads as a data
	   surface and sits comfortably beside X's own blue. */
	--gxtp-accent: #1d9bf0;
	--gxtp-copy: #1d9bf0;

	--gxtp-ink: #0b1116;
	--gxtp-ink-2: #46586a;
	--gxtp-muted: #6b7c8c;
	--gxtp-bg: #ffffff;
	--gxtp-surface: #ffffff;
	--gxtp-surface-2: #f2f6f9;
	--gxtp-surface-3: #e6edf3;
	--gxtp-border: #dbe4ec;
	--gxtp-border-strong: #c3d0dc;

	--gxtp-rise: #00a97a;
	--gxtp-fall: #e0245e;
	--gxtp-peak: #7856ff;

	/* A monospaced stack for every figure: steady digit widths and a live-data
	   character, with no webfont request. */
	--gxtp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gxtp-font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--gxtp-radius: 14px;
	--gxtp-radius-sm: 9px;
	--gxtp-tap: 44px;

	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 2rem;
	padding: 1rem .85rem 1.1rem;
	background: var(--gxtp-bg);
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius);
	color: var(--gxtp-ink);
	font-family: var(--gxtp-font);
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	container-type: inline-size;
	-webkit-text-size-adjust: 100%;
}

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

.gxtp button,
.gxtp input,
.gxtp select {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}

.gxtp button { cursor: pointer; }

.gxtp :focus-visible {
	outline: 2px solid var(--gxtp-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.gxtp__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Themes */

.gxtp--theme-dark {
	--gxtp-ink: #eef4f8;
	--gxtp-ink-2: #a9bbc9;
	--gxtp-muted: #8195a6;
	--gxtp-bg: #0d151c;
	--gxtp-surface: #131e27;
	--gxtp-surface-2: #1a2833;
	--gxtp-surface-3: #24343f;
	--gxtp-border: #22323f;
	--gxtp-border-strong: #33485a;
}

@media (prefers-color-scheme: dark) {
	.gxtp--theme-auto {
		--gxtp-ink: #eef4f8;
		--gxtp-ink-2: #a9bbc9;
		--gxtp-muted: #8195a6;
		--gxtp-bg: #0d151c;
		--gxtp-surface: #131e27;
		--gxtp-surface-2: #1a2833;
		--gxtp-surface-3: #24343f;
		--gxtp-border: #22323f;
		--gxtp-border-strong: #33485a;
	}
}

.gxtp--style-square { --gxtp-radius: 3px; --gxtp-radius-sm: 2px; }

.gxtp--style-glass {
	background: linear-gradient(168deg, rgba(255, 255, 255, .82), rgba(242, 246, 249, .5));
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.gxtp--style-glass.gxtp--theme-dark {
	background: linear-gradient(168deg, rgba(19, 30, 39, .86), rgba(13, 21, 28, .58));
}

/* ---------------------------------------------------------------- Header */

.gxtp__head {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin-bottom: .85rem;
}

.gxtp__title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.25;
	color: var(--gxtp-ink);
}

.gxtp__country-name { color: var(--gxtp-accent); }

.gxtp__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: .3rem 0 0;
	padding: 0;
	font-size: .75rem;
	font-weight: 500;
	color: var(--gxtp-muted);
}

.gxtp__meta time { font-variant-numeric: tabular-nums; }

.gxtp__dot {
	width: 7px; height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--gxtp-rise);
	box-shadow: 0 0 0 0 rgba(0, 169, 122, .55);
	animation: gxtp-pulse 2.6s ease-out infinite;
}

@keyframes gxtp-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0, 169, 122, .55); }
	70%  { box-shadow: 0 0 0 7px rgba(0, 169, 122, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 169, 122, 0); }
}

.gxtp__count {
	margin-left: auto;
	padding: .12rem .5rem;
	font-family: var(--gxtp-font-num);
	font-size: .7rem;
	letter-spacing: .02em;
	color: var(--gxtp-ink-2);
	background: var(--gxtp-surface-2);
	border-radius: 999px;
}

.gxtp__country { display: flex; gap: .4rem; align-items: center; }
.gxtp__country .gxtp__select { flex: 1 1 auto; }

/* ------------------------------------------------------------ Range tabs */

.gxtp__ranges {
	display: flex;
	gap: .3rem;
	margin: 0 -.85rem .85rem;
	padding: 0 .85rem .7rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__ranges::-webkit-scrollbar { display: none; }

.gxtp__range {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 .8rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--gxtp-ink-2);
	text-decoration: none;
	background: var(--gxtp-surface-2);
	border: 1px solid transparent;
	border-radius: 999px;
	white-space: nowrap;
	transition: background .16s ease, color .16s ease;
}

.gxtp__range:hover,
.gxtp__range:focus-visible {
	color: var(--gxtp-ink);
	background: var(--gxtp-surface-3);
	text-decoration: none;
}

.gxtp__range.is-active { color: var(--gxtp-bg); background: var(--gxtp-ink); border-color: transparent; }

/* -------------------------------------------------------------- Controls */

.gxtp__toolbar {
	display: flex;
	gap: .45rem;
	align-items: center;
	margin-bottom: .6rem;
}

.gxtp__search { flex: 1 1 auto; min-width: 0; }

.gxtp__input,
.gxtp__select {
	width: 100%;
	min-height: var(--gxtp-tap);
	padding: .5rem .8rem;
	font-size: .9rem;
	color: var(--gxtp-ink);
	background: var(--gxtp-surface-2);
	border: 1px solid transparent;
	border-radius: var(--gxtp-radius-sm);
	appearance: none;
	-webkit-appearance: none;
	transition: background .16s ease, border-color .16s ease;
}

.gxtp__input::placeholder { color: var(--gxtp-muted); }
.gxtp__input:focus,
.gxtp__select:focus { background: var(--gxtp-surface); border-color: var(--gxtp-accent); }

.gxtp__select {
	padding-right: 2rem;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.gxtp__filter-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	min-height: var(--gxtp-tap);
	padding: 0 .85rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--gxtp-ink-2);
	background: var(--gxtp-surface-2);
	border: 1px solid transparent;
	border-radius: var(--gxtp-radius-sm);
}

.gxtp__filter-toggle[aria-expanded="true"] { color: var(--gxtp-ink); background: var(--gxtp-surface-3); }
.gxtp__filter-toggle .gxtp__chev { transition: transform .18s ease; }
.gxtp__filter-toggle[aria-expanded="true"] .gxtp__chev { transform: rotate(180deg); }

.gxtp__filters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .45rem;
	margin-bottom: .7rem;
	padding: .6rem;
	background: var(--gxtp-surface-2);
	border-radius: var(--gxtp-radius-sm);
}

.gxtp__filters[hidden] { display: none; }
.gxtp__filters .gxtp__select { background: var(--gxtp-surface); }
.gxtp__filters .gxtp__btn { grid-column: 1 / -1; }

/* --------------------------------------------------------------- Buttons */

.gxtp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-height: 38px;
	padding: 0 .9rem;
	font-size: .82rem;
	font-weight: 650;
	line-height: 1;
	color: #fff;
	background: var(--gxtp-copy);
	border: 1px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .12s ease, filter .16s ease;
}

.gxtp__btn:hover { filter: brightness(1.07); }
.gxtp__btn:active { transform: scale(.96); }

.gxtp__btn--outline { color: var(--gxtp-copy); background: transparent; border-color: currentColor; }
.gxtp__btn--ghost { color: var(--gxtp-ink-2); background: var(--gxtp-surface-2); }
.gxtp__btn--gradient { background: linear-gradient(120deg, var(--gxtp-copy), var(--gxtp-accent) 60%, var(--gxtp-peak)); }

.gxtp__btn.is-copied { color: #fff; background: var(--gxtp-rise); animation: gxtp-pop .34s ease; }

@keyframes gxtp-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ List */

.gxtp__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gxtp__item { margin: 0; padding: 0; }
.gxtp__item::before, .gxtp__item::marker { content: none; }
.gxtp__item[hidden] { display: none; }

.gxtp__item.is-lazy { opacity: 0; transform: translateY(6px); }
.gxtp__item.is-visible { opacity: 1; transform: none; transition: opacity .32s ease, transform .32s ease; }

/*
 * The row. Grid rather than flex, so the rank column stays optically aligned
 * no matter how long the trend name runs.
 */
.gxtp__card {
	/*
	 * Flexbox, not grid.
	 *
	 * The previous three-column grid placed five sibling elements by hand, and
	 * any mistake in that placement scattered them into arbitrary cells. Three
	 * flex children — rank, body, actions — with min-width:0 on the body is the
	 * standard pattern for "fixed | flexible | fixed" and cannot collapse or
	 * mis-place, whatever else changes around it.
	 */
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .7rem .75rem;
	background: var(--gxtp-surface);
	border: 1px solid transparent;
	border-radius: var(--gxtp-radius-sm);
	transition: background .16s ease, border-color .16s ease;
}

.gxtp__item:nth-child(odd) .gxtp__card { background: var(--gxtp-surface-2); }
.gxtp__card:hover { border-color: var(--gxtp-border-strong); }
.gxtp__card:focus-within { border-color: var(--gxtp-accent); }

/*
 * Signature element: the rank numeral. Oversized, tabular and monospaced —
 * this is what makes the widget read as a live chart rather than a link list.
 * The top three take the accent.
 */
.gxtp__rank {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	min-width: 1.75rem;
	padding-top: .06rem;
}

.gxtp__rank-num {
	font-family: var(--gxtp-font-num);
	font-size: 1.15rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--gxtp-muted);
}

.gxtp__item:nth-child(-n+3) .gxtp__rank-num {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--gxtp-accent);
}

.gxtp__body {
	flex: 1 1 auto;
	min-width: 0; /* Without this a flex child refuses to shrink below content. */
}

.gxtp__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: .97rem;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -.008em;
	color: var(--gxtp-ink);
	overflow-wrap: anywhere;
}

.gxtp__name a { color: inherit; text-decoration: none; }
.gxtp__name a:hover { color: var(--gxtp-accent); }

.gxtp__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .5rem;
	margin: .18rem 0 0;
	padding: 0;
	font-size: .72rem;
	line-height: 1.4;
	color: var(--gxtp-muted);
}

.gxtp__fact { display: inline-flex; align-items: center; gap: .2rem; }

/* Redundant on a narrow screen: the heading already names the country. */
.gxtp__fact--country { display: none; }

.gxtp__volume-number {
	font-family: var(--gxtp-font-num);
	font-variant-numeric: tabular-nums;
	font-weight: 650;
	letter-spacing: -.02em;
	color: var(--gxtp-ink-2);
}

.gxtp__muted-fact { font-style: normal; opacity: .8; }

.gxtp__move { font-weight: 650; font-variant-numeric: tabular-nums; }
.gxtp__move--up { color: var(--gxtp-rise); }
.gxtp__move--down { color: var(--gxtp-fall); }
.gxtp__move--new { color: var(--gxtp-accent); }

.gxtp__badge {
	padding: .05rem .38rem;
	font-size: .62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-radius: 4px;
	color: var(--gxtp-ink-2);
	background: var(--gxtp-surface-3);
}

.gxtp__badge--hot { color: #fff; background: var(--gxtp-fall); }
.gxtp__badge--rising { color: #fff; background: var(--gxtp-rise); }
.gxtp__badge--new { color: #fff; background: var(--gxtp-accent); }
.gxtp__badge--persistent { color: #fff; background: var(--gxtp-peak); }

/* "Active" tells the reader nothing; drop the noise rather than print it. */
.gxtp__badge--active { display: none; }

/*
 * Volume rail: width is this trend's post count relative to the largest on
 * screen. Real data, and it makes relative scale scannable at a glance.
 */
.gxtp__bar {
	width: 100%;
	height: 3px;
	margin-top: .45rem;
	overflow: hidden;
	background: var(--gxtp-surface-3);
	border-radius: 999px;
}

.gxtp__bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--gxtp-accent), var(--gxtp-peak));
	transform-origin: left center;
	animation: gxtp-grow .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes gxtp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* One primary action, one overflow. Four buttons a row is noise on a phone. */

.gxtp__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .1rem;
	margin-top: -.15rem;
}

.gxtp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gxtp-tap);
	height: var(--gxtp-tap);
	padding: 0;
	color: var(--gxtp-ink-2);
	background: transparent;
	border: 0;
	border-radius: 50%;
	transition: background .16s ease, color .16s ease, transform .12s ease;
}

.gxtp__icon svg { width: 19px; height: 19px; display: block; }
.gxtp__icon:hover { color: var(--gxtp-ink); background: var(--gxtp-surface-3); }
.gxtp__icon:active { transform: scale(.9); }
.gxtp__icon.is-copied { color: var(--gxtp-rise); }
.gxtp__icon.is-active { color: #f0b429; }

/* ------------------------------------------------------- Notices / empty */

.gxtp__notice {
	margin: 0 0 .7rem;
	padding: .6rem .75rem;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--gxtp-ink-2);
	background: var(--gxtp-surface-2);
	border-left: 3px solid var(--gxtp-border-strong);
	border-radius: var(--gxtp-radius-sm);
}

.gxtp__notice[hidden] { display: none; }
.gxtp__notice--error { border-left-color: var(--gxtp-fall); }
.gxtp__notice--warn { border-left-color: #e6a700; }
.gxtp__notice-detail { display: block; margin-top: .2rem; opacity: .85; }

.gxtp__empty {
	margin: 0;
	padding: 2rem 1rem;
	font-size: .85rem;
	text-align: center;
	color: var(--gxtp-muted);
}

.gxtp__empty[hidden] { display: none; }

/* ---------------------------------------------------------------- Footer */

.gxtp__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .85rem;
	padding-top: .7rem;
	font-size: .7rem;
	color: var(--gxtp-muted);
	border-top: 1px solid var(--gxtp-border);
}

.gxtp__refresh { min-height: 34px; font-size: .75rem; }

/* -------------------------------------------------------------- Skeleton */

.gxtp.is-loading .gxtp__list { opacity: .5; }

.gxtp__skeleton {
	height: 56px;
	border-radius: var(--gxtp-radius-sm);
	background: linear-gradient(100deg, var(--gxtp-surface-2) 30%, var(--gxtp-surface-3) 45%, var(--gxtp-surface-2) 60%);
	background-size: 300% 100%;
	animation: gxtp-shimmer 1.3s ease-in-out infinite;
}

@keyframes gxtp-shimmer {
	0%   { background-position: 130% 50%; }
	100% { background-position: -30% 50%; }
}

/* ----------------------------------------------------------------- Toast */

.gxtp__toast {
	position: fixed;
	left: 50%;
	bottom: max(20px, env(safe-area-inset-bottom, 0px));
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: .4rem;
	max-width: calc(100vw - 32px);
	padding: .6rem 1rem;
	font-family: var(--gxtp-font);
	font-size: .82rem;
	font-weight: 600;
	color: var(--gxtp-bg);
	background: var(--gxtp-ink);
	border-radius: 999px;
	box-shadow: 0 10px 40px -8px rgba(0, 0, 0, .5);
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity .2s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}

.gxtp__toast[hidden] { display: none; }
.gxtp__toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ----------------------------------------- Sheet (row actions and charts) */

.gxtp__scrim {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: rgba(11, 17, 22, .5);
	backdrop-filter: blur(2px);
	opacity: 0;
	animation: gxtp-fade .2s ease forwards;
}

.gxtp__scrim[hidden] { display: none; }

@keyframes gxtp-fade { to { opacity: 1; } }

.gxtp__sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99991;
	max-height: 85vh;
	overflow-y: auto;
	padding: .6rem .9rem calc(1rem + env(safe-area-inset-bottom, 0px));
	font-family: var(--gxtp-font);
	color: var(--gxtp-ink);
	background: var(--gxtp-bg);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -8px 40px -10px rgba(0, 0, 0, .35);
	animation: gxtp-slide-up .26s cubic-bezier(.22, 1, .36, 1) both;
}

.gxtp__sheet[hidden] { display: none; }

@keyframes gxtp-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.gxtp__sheet-grab {
	width: 36px;
	height: 4px;
	margin: .1rem auto .7rem;
	background: var(--gxtp-border-strong);
	border-radius: 999px;
}

.gxtp__sheet-title {
	margin: 0 0 .1rem;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.gxtp__sheet-sub {
	margin: 0 0 .8rem;
	font-size: .74rem;
	color: var(--gxtp-muted);
	font-variant-numeric: tabular-nums;
}

.gxtp__sheet-actions { display: flex; flex-direction: column; gap: 1px; }

.gxtp__sheet-action {
	display: flex;
	align-items: center;
	gap: .7rem;
	width: 100%;
	min-height: 50px;
	padding: 0 .75rem;
	font-size: .88rem;
	font-weight: 550;
	text-align: left;
	text-decoration: none;
	color: var(--gxtp-ink);
	background: var(--gxtp-surface-2);
	border: 0;
	border-radius: 6px;
	transition: background .14s ease;
}

.gxtp__sheet-action:hover { background: var(--gxtp-surface-3); color: var(--gxtp-ink); }
.gxtp__sheet-action svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .7; }
.gxtp__sheet-action:first-child { border-radius: 10px 10px 6px 6px; }
.gxtp__sheet-action:last-child { border-radius: 6px 6px 10px 10px; }

.gxtp__sheet-close {
	width: 100%;
	min-height: var(--gxtp-tap);
	margin-top: .6rem;
	font-size: .85rem;
	font-weight: 650;
	color: var(--gxtp-ink-2);
	background: transparent;
	border: 1px solid var(--gxtp-border);
	border-radius: 999px;
}

.gxtp__chart-wrap { position: relative; min-height: 210px; margin-top: .4rem; }
.gxtp__chart-empty { padding: 2rem .5rem; font-size: .82rem; text-align: center; color: var(--gxtp-muted); }
.gxtp__chart-empty[hidden] { display: none; }

.gxtp__sheet-tabs { display: flex; gap: .3rem; margin-bottom: .5rem; }

.gxtp__tab {
	flex: 1 1 auto;
	min-height: 36px;
	font-size: .78rem;
	font-weight: 650;
	color: var(--gxtp-ink-2);
	background: var(--gxtp-surface-2);
	border: 0;
	border-radius: 8px;
}

.gxtp__tab.is-active { color: #fff; background: var(--gxtp-accent); }

/* -------------------------------------------------------- Wider container */

@container (min-width: 560px) {
	.gxtp__head { flex-direction: row; align-items: flex-start; justify-content: space-between; }
	.gxtp__country { flex: 0 0 auto; max-width: 260px; }
	.gxtp__title { font-size: 1.2rem; }
	.gxtp__filter-toggle { display: none; }
	.gxtp__filters { display: flex; flex-wrap: wrap; align-items: center; padding: 0; background: transparent; }
	.gxtp__filters[hidden] { display: flex; }
	.gxtp__filters .gxtp__select { width: auto; min-width: 150px; }
	.gxtp__filters .gxtp__btn { margin-left: auto; }
	.gxtp__card { padding: .75rem .85rem; gap: .8rem; }
	.gxtp__rank-num { font-size: 1.3rem; }
	.gxtp__item:nth-child(-n+3) .gxtp__rank-num { font-size: 1.6rem; }
	.gxtp__name { font-size: 1.02rem; -webkit-line-clamp: 1; }
	.gxtp__fact--country { display: inline-flex; }
}

/* On a desktop pointer the sheet becomes a centred dialog. */
@media (min-width: 720px) and (pointer: fine) {
	.gxtp__sheet {
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		width: min(520px, 92vw);
		max-height: 82vh;
		padding: 1.1rem 1.2rem 1.2rem;
		border-radius: 16px;
		transform: translate(-50%, -50%);
		animation: gxtp-zoom .2s ease both;
	}

	.gxtp__sheet-grab { display: none; }

	@keyframes gxtp-zoom {
		from { opacity: 0; transform: translate(-50%, -48%) scale(.97); }
		to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	}
}

/* ------------------------------------------------------------- Densities */

.gxtp--compact .gxtp__card { padding: .4rem .5rem; }
.gxtp--compact .gxtp__bar,
.gxtp--compact .gxtp__badge { display: none; }
.gxtp--compact .gxtp__name { font-size: .92rem; -webkit-line-clamp: 1; }
.gxtp--compact .gxtp__icon { width: 38px; height: 38px; }

/* --------------------------------------------------------- Accessibility */

@media (prefers-reduced-motion: reduce) {
	.gxtp *,
	.gxtp *::before,
	.gxtp *::after,
	.gxtp__sheet,
	.gxtp__scrim,
	.gxtp__toast {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.gxtp__item.is-lazy { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
	.gxtp__card { border-color: var(--gxtp-border-strong); }
	.gxtp__facts { color: var(--gxtp-ink-2); }
}

@media print {
	.gxtp__toolbar,
	.gxtp__filters,
	.gxtp__actions,
	.gxtp__ranges,
	.gxtp__foot,
	.gxtp__country { display: none !important; }

	.gxtp { border: 0; padding: 0; }
}

/* ==========================================================================
   Full-bleed layouts
   --------------------------------------------------------------------------
   Most themes wrap page content in a centred, max-width column, which leaves
   dead space either side of the widget on a wide screen. These two modifiers
   break out of that column.

   The 100vw trap: on desktop, 100vw INCLUDES the vertical scrollbar, so a
   naive `width: 100vw` overflows by ~15px and adds a horizontal scrollbar.
   --gxtp-sbw is measured once in JS and subtracted here; it defaults to 0 so
   the CSS still behaves sensibly if JS never runs.
   ========================================================================== */

.gxtp--wide,
.gxtp--full {
	--gxtp-vw: calc(100vw - var(--gxtp-sbw, 0px));
}

.gxtp--full {
	width: var(--gxtp-vw);
	max-width: var(--gxtp-vw);
	margin-inline: calc(50% - var(--gxtp-vw) / 2);
	padding-inline: 0;
	border-inline: 0;
	border-radius: 0;
}

.gxtp--wide {
	--gxtp-w: min(1480px, calc(var(--gxtp-vw) - 2rem));
	width: var(--gxtp-w);
	max-width: var(--gxtp-w);
	margin-inline: calc(50% - var(--gxtp-w) / 2);
	padding-inline: 0;
}

/* Content still needs a comfortable measure inside a 2000px viewport. */
.gxtp__inner {
	position: relative;
	z-index: 1;
	max-width: 100%;
}

.gxtp--wide .gxtp__inner,
.gxtp--full .gxtp__inner {
	max-width: 1420px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 3rem);
	padding-block: clamp(1.1rem, 3vw, 2.2rem);
}

.gxtp--full { padding-block: 0; }

/* --------------------------------------------------------------- Masthead */

.gxtp--wide,
.gxtp--full { position: relative; }

/*
 * Vibrancy, spent in exactly one place: a soft colour wash behind the
 * masthead built from X's own palette (blue → violet → magenta). It sits
 * under a low-opacity veil so headline text keeps its contrast.
 */
.gxtp__aurora {
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 420px;
	pointer-events: none;
	background:
		radial-gradient(42% 55% at 18% 40%, color-mix(in srgb, var(--gxtp-accent) 42%, transparent), transparent 70%),
		radial-gradient(38% 50% at 60% 25%, rgba(120, 86, 255, .34), transparent 70%),
		radial-gradient(34% 46% at 88% 55%, rgba(249, 24, 128, .26), transparent 70%);
	filter: blur(28px);
	opacity: .55;
}

.gxtp--theme-dark .gxtp__aurora { opacity: .42; }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__aurora {
		background:
			radial-gradient(42% 55% at 18% 40%, rgba(29, 155, 240, .40), transparent 70%),
			radial-gradient(38% 50% at 60% 25%, rgba(120, 86, 255, .34), transparent 70%),
			radial-gradient(34% 46% at 88% 55%, rgba(249, 24, 128, .26), transparent 70%);
	}
}

.gxtp--wide .gxtp__title,
.gxtp--full .gxtp__title {
	font-size: clamp(1.4rem, 1rem + 2.2vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.08;
}

.gxtp--wide .gxtp__meta,
.gxtp--full .gxtp__meta { font-size: .82rem; }

/* ------------------------------------------------------------ Stat strip */

.gxtp__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
	margin-bottom: 1rem;
}

.gxtp__stat {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: .7rem .85rem;
	background: color-mix(in srgb, var(--gxtp-surface) 78%, transparent);
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius-sm);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__stat { background: var(--gxtp-surface); }
}

.gxtp__stat-value {
	font-family: var(--gxtp-font-num);
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.035em;
	line-height: 1.1;
	color: var(--gxtp-ink);
}

.gxtp__stat-value--text {
	font-family: var(--gxtp-font);
	font-size: 1rem;
	letter-spacing: -.015em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gxtp__stat-label {
	font-size: .68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--gxtp-muted);
}

.gxtp__stat--wide { grid-column: 1 / -1; }

/* ------------------------------------------------ Multi-column trend grid */

@container (min-width: 780px) {
	.gxtp__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 10px;
	}

	.gxtp__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gxtp__stat--wide { grid-column: auto; }
}

@container (min-width: 1180px) {
	.gxtp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gxtp__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@container (min-width: 1560px) {
	.gxtp__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * Zebra striping is meaningless once the list wraps into columns, so rows get
 * a flat surface and a hairline instead.
 */
@container (min-width: 780px) {
	.gxtp__item:nth-child(odd) .gxtp__card { background: var(--gxtp-surface); }
	.gxtp__card { border-color: var(--gxtp-border); }
	.gxtp__card:hover { border-color: var(--gxtp-accent); transform: translateY(-1px); }
}

/* Top three get the accent gradient chip in the wide layouts. */
.gxtp--wide .gxtp__item:nth-child(-n+3) .gxtp__rank-num,
.gxtp--full .gxtp__item:nth-child(-n+3) .gxtp__rank-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-size: 1.05rem;
	color: #fff;
	background: linear-gradient(135deg, var(--gxtp-accent), var(--gxtp-peak));
	border-radius: 9px;
}

/* Toolbar gets room to breathe when the widget is wide. */
@container (min-width: 780px) {
	.gxtp__toolbar { max-width: 720px; }
	.gxtp__ranges { margin-inline: 0; padding-inline: 0; }
}

/* Full-bleed footer sits on its own band. */
.gxtp--full .gxtp__foot,
.gxtp--wide .gxtp__foot {
	margin-top: 1.4rem;
	padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.gxtp__aurora { filter: none; opacity: .32; }
	.gxtp--wide .gxtp__card:hover,
	.gxtp--full .gxtp__card:hover { transform: none; }
}

@media print {
	.gxtp__aurora, .gxtp__stats { display: none !important; }
	.gxtp--full, .gxtp--wide { width: auto; margin-inline: 0; }
}

/* ==========================================================================
   Landing-page treatment (wide and full layouts)
   ========================================================================== */

/* --------------------------------------------------------------- Hero */

.gxtp__hero {
	display: grid;
	gap: 1.2rem;
	align-items: center;
	margin-bottom: 1.4rem;
}

.gxtp__pill {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .9rem;
	padding: .35rem .8rem;
	font-size: .74rem;
	font-weight: 650;
	letter-spacing: .01em;
	color: var(--gxtp-ink-2);
	background: color-mix(in srgb, var(--gxtp-surface) 70%, transparent);
	border: 1px solid var(--gxtp-border);
	border-radius: 999px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__pill { background: var(--gxtp-surface); }
}

.gxtp__pill-sep { opacity: .5; }

.gxtp__hero-title {
	margin: 0 0 .7rem;
	font-size: clamp(2rem, 1.2rem + 4.4vw, 3.6rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
	color: var(--gxtp-ink);
}

.gxtp__hero-line { display: block; }

/*
 * The one place the gradient carries meaning rather than decoration: it marks
 * the subject of the page.
 */
.gxtp__hero-accent {
	background: linear-gradient(96deg, var(--gxtp-accent), var(--gxtp-peak) 55%, #f91880);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.gxtp__hero-accent { color: var(--gxtp-accent); -webkit-text-fill-color: currentColor; }
}

.gxtp__hero-title .gxtp__country-name { color: inherit; }

.gxtp__hero-sub {
	max-width: 46ch;
	margin: 0 0 1.2rem;
	font-size: clamp(.92rem, .85rem + .3vw, 1.06rem);
	line-height: 1.55;
	color: var(--gxtp-ink-2);
}

.gxtp__hero-cta { display: flex; flex-wrap: wrap; gap: .55rem; }

.gxtp__btn--lg {
	min-height: var(--gxtp-tap);
	padding: 0 1.3rem;
	font-size: .92rem;
	font-weight: 700;
}

.gxtp__btn--lg svg { width: 17px; height: 17px; }

.gxtp__btn--gradient {
	box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--gxtp-accent) 80%, transparent);
}

.gxtp__hero-art { display: none; }

.gxtp__hero-art svg { width: 100%; height: auto; max-width: 420px; margin-inline: auto; display: block; }

.gxtp__hero-pulse circle { animation: gxtp-ripple 4.5s ease-out infinite; transform-origin: 160px 132px; }
.gxtp__hero-pulse circle:nth-child(2) { animation-delay: 1.5s; }
.gxtp__hero-pulse circle:nth-child(3) { animation-delay: 3s; }

@keyframes gxtp-ripple {
	0%   { transform: scale(.7); opacity: .9; }
	80%  { transform: scale(1.25); opacity: 0; }
	100% { transform: scale(1.25); opacity: 0; }
}

.gxtp__hero-pins circle { animation: gxtp-blink 3.2s ease-in-out infinite; }
.gxtp__hero-pins circle:nth-child(2) { animation-delay: .5s; }
.gxtp__hero-pins circle:nth-child(3) { animation-delay: 1s; }
.gxtp__hero-pins circle:nth-child(4) { animation-delay: 1.5s; }
.gxtp__hero-pins circle:nth-child(5) { animation-delay: 2s; }
.gxtp__hero-pins circle:nth-child(6) { animation-delay: 2.5s; }

@keyframes gxtp-blink {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1; }
}

/* ----------------------------------------------------------- Feature row */

.gxtp__features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
	margin-bottom: 1.4rem;
}

.gxtp__feature {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	padding: .8rem;
	background: color-mix(in srgb, var(--gxtp-surface) 72%, transparent);
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius-sm);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__feature { background: var(--gxtp-surface); }
}

.gxtp__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	color: var(--gxtp-accent);
	background: color-mix(in srgb, var(--gxtp-accent) 14%, transparent);
	border-radius: 9px;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__feature-icon { background: var(--gxtp-surface-2); }
}

.gxtp__feature-icon svg { width: 17px; height: 17px; }
.gxtp__feature-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.gxtp__feature-title { font-size: .82rem; font-weight: 700; letter-spacing: -.01em; color: var(--gxtp-ink); }
.gxtp__feature-text { font-size: .72rem; line-height: 1.4; color: var(--gxtp-muted); }

/* ------------------------------------------------------- Section headers */

.gxtp__block { margin-bottom: 1.4rem; }

.gxtp__section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .7rem;
	margin-bottom: .75rem;
}

.gxtp__section-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1.15rem;
	font-weight: 750;
	letter-spacing: -.02em;
	color: var(--gxtp-ink);
}

.gxtp__section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--gxtp-accent);
	background: color-mix(in srgb, var(--gxtp-accent) 14%, transparent);
	border-radius: 9px;
}

.gxtp__section-icon--hot {
	color: #f5a524;
	background: color-mix(in srgb, #f5a524 16%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__section-icon, .gxtp__section-icon--hot { background: var(--gxtp-surface-2); }
}

.gxtp__section-icon svg { width: 16px; height: 16px; }
.gxtp__section-sub { margin: 0; font-size: .78rem; color: var(--gxtp-muted); }

/* ------------------------------------------------------- Country chips */

.gxtp__chips {
	display: flex;
	gap: .45rem;
	margin-inline: calc(clamp(1rem, 4vw, 3rem) * -1);
	padding-inline: clamp(1rem, 4vw, 3rem);
	padding-bottom: .3rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}

.gxtp__chips::-webkit-scrollbar { display: none; }

.gxtp__chip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 56px;
	padding: .5rem .85rem;
	text-decoration: none;
	color: var(--gxtp-ink);
	background: var(--gxtp-surface);
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius-sm);
	scroll-snap-align: start;
	transition: border-color .16s ease, transform .14s ease, background .16s ease;
}

.gxtp__chip:hover { border-color: var(--gxtp-border-strong); transform: translateY(-1px); color: var(--gxtp-ink); }

.gxtp__chip.is-active {
	border-color: var(--gxtp-accent);
	background: color-mix(in srgb, var(--gxtp-accent) 10%, var(--gxtp-surface));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gxtp-accent) 45%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__chip.is-active { background: var(--gxtp-surface-2); }
}

.gxtp__chip-flag { font-size: 1.35rem; line-height: 1; }
.gxtp__chip-body { display: flex; flex-direction: column; gap: .05rem; }
.gxtp__chip-name { font-size: .82rem; font-weight: 650; white-space: nowrap; }
.gxtp__chip-code {
	font-family: var(--gxtp-font-num);
	font-size: .64rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gxtp-muted);
}

/* ------------------------------------------------------------ Sparklines */

.gxtp__sparkwrap {
	width: 100%;
	margin-top: .45rem;
	height: 26px;
}

.gxtp__spark { width: 100%; height: 100%; display: block; overflow: visible; }

/* ------------------------------------------------------------ Load more */

.gxtp__loadmore {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	width: 100%;
	min-height: var(--gxtp-tap);
	margin-top: .7rem;
	font-size: .85rem;
	font-weight: 650;
	color: var(--gxtp-accent);
	background: color-mix(in srgb, var(--gxtp-accent) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--gxtp-accent) 32%, transparent);
	border-radius: var(--gxtp-radius-sm);
	transition: background .16s ease;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__loadmore { background: var(--gxtp-surface-2); border-color: var(--gxtp-border); }
}

.gxtp__loadmore:hover { background: color-mix(in srgb, var(--gxtp-accent) 15%, transparent); }
.gxtp__loadmore svg { width: 16px; height: 16px; }
.gxtp__loadmore[hidden] { display: none; }

/* Rows collapsed behind Load more. */
.gxtp__item.is-collapsed { display: none; }

/* ----------------------------------------------------- Wider containers */

@container (min-width: 720px) {
	.gxtp__hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; }
	.gxtp__hero-art { display: block; }
	.gxtp__features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gxtp__feature { padding: .95rem; }
	.gxtp__feature-title { font-size: .86rem; }
	.gxtp__section-title { font-size: 1.3rem; }
}

@container (min-width: 1180px) {
	.gxtp__hero { gap: 3rem; margin-bottom: 2rem; }
	.gxtp__features { gap: .7rem; margin-bottom: 2rem; }
}

/*
 * Sparklines need horizontal room. Below that, the volume rail already
 * communicates relative scale, so the sparkline is dropped rather than
 * squeezed into something unreadable.
 */
@container (max-width: 520px) {
	.gxtp__sparkwrap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gxtp__hero-pulse circle,
	.gxtp__hero-pins circle { animation: none; opacity: .7; }
}

@media print {
	.gxtp__hero-art, .gxtp__features, .gxtp__chips, .gxtp__loadmore { display: none !important; }
	.gxtp__item.is-collapsed { display: list-item !important; }
}

/* ==========================================================================
   Country index — [global_x_trends_countries]
   ========================================================================== */

.gxtp--index {
	--gxtp-index-cols: 3;
	padding: 1rem .85rem;
}

.gxtp__index-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gxtp__index-item { margin: 0; padding: 0; }
.gxtp__index-item::marker, .gxtp__index-item::before { content: none; }

.gxtp__index-link {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 60px;
	padding: .6rem .85rem;
	text-decoration: none;
	color: var(--gxtp-ink);
	background: var(--gxtp-surface);
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius-sm);
	transition: border-color .16s ease, transform .14s ease, background .16s ease;
}

.gxtp__index-link:hover {
	color: var(--gxtp-ink);
	border-color: var(--gxtp-accent);
	transform: translateY(-1px);
}

.gxtp__index-link .gxtp__chip-body { flex: 1 1 auto; min-width: 0; }
.gxtp__index-link .gxtp__chip-name { white-space: normal; }

.gxtp__index-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--gxtp-muted);
	transition: transform .16s ease, color .16s ease;
}

.gxtp__index-arrow svg { width: 17px; height: 17px; }
.gxtp__index-link:hover .gxtp__index-arrow { color: var(--gxtp-accent); transform: translateX(2px); }

@container (min-width: 700px) {
	.gxtp__index-grid { grid-template-columns: repeat(var(--gxtp-index-cols), minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.gxtp__index-link:hover { transform: none; }
	.gxtp__index-link:hover .gxtp__index-arrow { transform: none; }
}

/* ==========================================================================
   Section band treatment
   --------------------------------------------------------------------------
   In the wide and full layouts the widget stops being a card floating on the
   page and becomes a band: edge to edge, no radius, no outline, its own
   background. That removes the dead margin either side and stops a dark
   widget reading as a stray box on a light theme.
   ========================================================================== */

.gxtp--full,
.gxtp--wide {
	border: 0;
	border-radius: 0;
	margin-bottom: 0;
	padding: 0;
	/* Contain any child that pushes wide, so the page never scrolls sideways. */
	overflow-x: clip;
}

/* A single hairline of accent along the top edge — enough to read as a
   deliberate section rather than an unstyled block. */
.gxtp--full::before,
.gxtp--wide::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--gxtp-accent), var(--gxtp-peak) 45%, #f91880);
	z-index: 2;
}

.gxtp--wide {
	border-radius: var(--gxtp-radius);
	margin-bottom: 2rem;
}

.gxtp--wide::before { border-radius: var(--gxtp-radius) var(--gxtp-radius) 0 0; }

/* Vertical rhythm. Generous at the top of the band, tight between rows. */
.gxtp--full .gxtp__inner,
.gxtp--wide .gxtp__inner {
	padding-block: clamp(1.5rem, 4vw, 3.25rem);
}

.gxtp--full .gxtp__head,
.gxtp--wide .gxtp__head { margin-bottom: 1.1rem; }

.gxtp--full .gxtp__ranges,
.gxtp--wide .gxtp__ranges { margin-inline: 0; padding-inline: 0; }

/* A quiet band behind the controls so they read as a toolbar, not stray
   dropdowns sitting on the background. */
.gxtp--full .gxtp__toolbar,
.gxtp--wide .gxtp__toolbar {
	gap: .5rem;
	padding: .55rem;
	margin-bottom: .8rem;
	background: color-mix(in srgb, var(--gxtp-surface-2) 70%, transparent);
	border: 1px solid var(--gxtp-border);
	border-radius: calc(var(--gxtp-radius-sm) + 3px);
	max-width: none;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp--full .gxtp__toolbar,
	.gxtp--wide .gxtp__toolbar { background: var(--gxtp-surface-2); }
}

.gxtp--full .gxtp__filters,
.gxtp--wide .gxtp__filters { margin-bottom: .8rem; }

/* Footer becomes a closing rule rather than a floating line. */
.gxtp--full .gxtp__foot,
.gxtp--wide .gxtp__foot {
	margin-top: 1.6rem;
	padding-top: .9rem;
	font-size: .72rem;
}

/* ---------------------------------------------------- Row density and calm */

/*
 * The country belonged on every row when the header could scroll away. It
 * cannot, so the repetition is pure noise — hidden at every width now.
 */
.gxtp__fact--country { display: none !important; }

.gxtp__footnote {
	margin: .7rem 0 0;
	padding: 0;
	font-size: .72rem;
	line-height: 1.5;
	color: var(--gxtp-muted);
	font-style: normal;
}

/* Give the list room to breathe against the toolbar and footer. */
.gxtp--full .gxtp__list,
.gxtp--wide .gxtp__list { gap: 3px; }

.gxtp--full .gxtp__card,
.gxtp--wide .gxtp__card { padding: .7rem .85rem; }

/*
 * Sticky toolbar: on a long list the controls stay reachable instead of
 * forcing a scroll back to the top. Only where there is a real viewport to
 * stick within, and never on short lists.
 */
@media (min-width: 480px) {
	.gxtp--full .gxtp__toolbar,
	.gxtp--wide .gxtp__toolbar {
		position: sticky;
		top: .5rem;
		z-index: 3;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	/* WordPress admin bar would otherwise cover it for logged-in users. */
	body.admin-bar .gxtp--full .gxtp__toolbar,
	body.admin-bar .gxtp--wide .gxtp__toolbar { top: 2.5rem; }
}

/* --------------------------------------------------------- Larger screens */

@container (min-width: 900px) {
	/* Two clean columns of rows, with the toolbar spanning both. */
	.gxtp--full .gxtp__list,
	.gxtp--wide .gxtp__list { gap: 4px 14px; }
}

@container (min-width: 1240px) {
	.gxtp--full .gxtp__inner,
	.gxtp--wide .gxtp__inner { padding-inline: clamp(1.5rem, 5vw, 4rem); }
}

/* -------------------------------------------------------------- Contained */

/*
 * Contained stays a card, but a tighter one: less padding, softer border, and
 * no drop shadow competing with the theme.
 */
.gxtp--contained {
	padding: .9rem .8rem 1rem;
}

.gxtp--contained .gxtp__head { margin-bottom: .7rem; }

@media print {
	.gxtp--full::before, .gxtp--wide::before { display: none; }
	.gxtp--full .gxtp__toolbar, .gxtp--wide .gxtp__toolbar { position: static; }
}

/* ==========================================================================
   Share buttons
   ========================================================================== */

/* Brand colours are what make a share button recognisable at a glance, so they
   are used deliberately here rather than tinting everything with the accent. */
.gxtp {
	--gxtp-whatsapp: #25d366;
	--gxtp-telegram: #229ed9;
	--gxtp-facebook: #1877f2;
	--gxtp-linkedin: #0a66c2;
}

.gxtp__icon--whatsapp,
.gxtp__icon--telegram {
	color: var(--gxtp-ink-2);
	text-decoration: none;
}

.gxtp__icon--whatsapp svg,
.gxtp__icon--telegram svg { width: 20px; height: 20px; }

/* Colour appears on intent — hover, focus, touch — so a list of 25 rows is not
   a wall of green and blue, but the affordance is unmistakable once reached. */
.gxtp__icon--whatsapp:hover,
.gxtp__icon--whatsapp:focus-visible {
	color: #fff;
	background: var(--gxtp-whatsapp);
}

.gxtp__icon--telegram:hover,
.gxtp__icon--telegram:focus-visible {
	color: #fff;
	background: var(--gxtp-telegram);
}

/* On touch devices there is no hover, so tint them from the start. */
@media (hover: none) {
	.gxtp__icon--whatsapp { color: var(--gxtp-whatsapp); }
	.gxtp__icon--telegram { color: var(--gxtp-telegram); }
}

/* Sheet rows carry a filled brand chip. */
.gxtp__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	color: #fff;
	border-radius: 9px;
}

.gxtp__brand svg { width: 18px; height: 18px; opacity: 1; }

.gxtp__brand--whatsapp { background: var(--gxtp-whatsapp); }
.gxtp__brand--telegram { background: var(--gxtp-telegram); }
.gxtp__brand--facebook { background: var(--gxtp-facebook); }
.gxtp__brand--linkedin { background: var(--gxtp-linkedin); }
.gxtp__brand--email    { background: var(--gxtp-ink-2); }

.gxtp__sheet-action--primary {
	color: #fff;
	background: linear-gradient(120deg, var(--gxtp-accent), var(--gxtp-peak));
	font-weight: 700;
}

.gxtp__sheet-action--primary:hover { color: #fff; filter: brightness(1.06); }
.gxtp__sheet-action--primary svg { opacity: 1; }

/* ==========================================================================
   Row refinement
   --------------------------------------------------------------------------
   The metadata line was a run-on sentence of text fragments. Each fact is now
   a discrete chip, which reads faster and survives wrapping on a narrow phone.
   ========================================================================== */

.gxtp__facts { gap: .3rem; margin-top: .25rem; }

.gxtp__fact {
	padding: .1rem .42rem;
	font-size: .7rem;
	font-weight: 550;
	line-height: 1.5;
	border-radius: 5px;
	background: color-mix(in srgb, var(--gxtp-surface-3) 60%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__fact { background: var(--gxtp-surface-3); }
}

/* Volume is the headline number, so it gets no chrome and more weight. */
.gxtp__fact--volume { padding-left: 0; background: none; }

.gxtp__move--up { background: color-mix(in srgb, var(--gxtp-rise) 15%, transparent); }
.gxtp__move--down { background: color-mix(in srgb, var(--gxtp-fall) 15%, transparent); }
.gxtp__move--new { background: color-mix(in srgb, var(--gxtp-accent) 15%, transparent); }
.gxtp__move--steady { background: none; padding-left: 0; opacity: .7; }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gxtp__move--up, .gxtp__move--down, .gxtp__move--new { background: var(--gxtp-surface-3); }
}

/* A press state, so a tap on a phone feels acknowledged. */
.gxtp__card { -webkit-tap-highlight-color: transparent; }
.gxtp__card:active { background: var(--gxtp-surface-3); }

/* The action cluster now holds up to four controls; keep it from crowding the
   name on narrow screens by letting it wrap onto its own line. */
.gxtp__actions { gap: .05rem; }

@container (max-width: 400px) {
	.gxtp__icon { width: 40px; height: 40px; }
	.gxtp__icon svg { width: 18px; height: 18px; }
}

/* Trend name gets slightly more presence now the row is calmer. */
.gxtp__name { font-weight: 700; letter-spacing: -.012em; }

/* Hover lift on pointer devices only — it is meaningless on touch. */
@media (hover: hover) and (pointer: fine) {
	.gxtp__card { transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
	.gxtp__card:hover { box-shadow: 0 2px 12px -4px rgba(11, 17, 22, .18); }
	.gxtp--theme-dark .gxtp__card:hover { box-shadow: 0 2px 14px -4px rgba(0, 0, 0, .5); }
}

@media (prefers-reduced-motion: reduce) {
	.gxtp__card:hover { box-shadow: none; }
}

/* ==========================================================================
   Buzz meter
   --------------------------------------------------------------------------
   Shown in place of a post count when X reports none. Deliberately rendered as
   discrete segments rather than a number, so it can never be mistaken for an
   actual post count.
   ========================================================================== */

.gxtp__buzz {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	cursor: help;
}

.gxtp__buzz-label {
	font-size: .68rem;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gxtp-muted);
}

.gxtp__buzz-bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 11px;
}

.gxtp__buzz-seg {
	display: block;
	width: 3px;
	background: var(--gxtp-surface-3);
	border-radius: 1px;
}

/* Staircase, so the level is readable at a glance without counting. */
.gxtp__buzz-seg:nth-child(1) { height: 3px; }
.gxtp__buzz-seg:nth-child(2) { height: 5px; }
.gxtp__buzz-seg:nth-child(3) { height: 7px; }
.gxtp__buzz-seg:nth-child(4) { height: 9px; }
.gxtp__buzz-seg:nth-child(5) { height: 11px; }

.gxtp__buzz-seg.is-on { background: var(--gxtp-accent); }
.gxtp__buzz-seg.is-on:nth-child(4) { background: var(--gxtp-peak); }
.gxtp__buzz-seg.is-on:nth-child(5) { background: #f91880; }

.gxtp--theme-dark .gxtp__buzz-seg { background: var(--gxtp-border-strong); }

/* ==========================================================================
   Mobile row layout — corrects a collapsing grid column
   --------------------------------------------------------------------------
   The row was a three-column grid: rank | body (1fr) | actions (auto).
   When the action cluster grew from two buttons to four (copy, WhatsApp,
   Telegram, more) the auto column claimed roughly 176px. On a 360px screen,
   after the rank column, gaps and padding, the 1fr body column was squeezed to
   near zero — and because the trend name carried overflow-wrap: anywhere with a
   two-line clamp, it rendered as "#" on one line and "A." on the next.

   Two lessons applied below:

   1. This is fixed with @media, not @container. Container queries measure the
      widget, and on a full-bleed section that measurement can be wrong — which
      is exactly why the existing @container (max-width: 400px) rule never
      rescued this. A media query reads the real viewport and cannot be fooled.

   2. The actions move to their own row rather than competing for width. No
      number of buttons can then starve the content.
   ========================================================================== */

/*
 * Break long words only when they genuinely do not fit. "anywhere" permits a
 * break at every character, which is what turned a hashtag into one letter per
 * line once its box collapsed.
 */
.gxtp__name,
.gxtp__sheet-title { overflow-wrap: break-word; word-break: normal; }

/*
 * Each fact is a self-contained chip and must never wrap internally — that is
 * what stacked "on the list for 3h" one word per line. The row still wraps
 * between chips.
 */
.gxtp__fact { white-space: nowrap; }
.gxtp__facts { row-gap: .3rem; }

/* Below ~380px, drop Telegram from the row. It stays in the actions sheet, so
   nothing is lost, and the remaining three targets keep a comfortable size. */
@media (max-width: 380px) {
	.gxtp__icon--telegram { display: none; }
	.gxtp__icon { width: 40px; height: 40px; }
	.gxtp__rank-num { font-size: 1.05rem; }
	.gxtp__item:nth-child(-n+3) .gxtp__rank-num { font-size: 1.25rem; }
}

/* A hard floor: nothing inside a row may force the page wider than the screen. */
.gxtp__card,
.gxtp__body,
.gxtp__facts,
.gxtp__inner { min-width: 0; max-width: 100%; }

.gxtp { overflow-wrap: break-word; }

/* When the breakout is reverted (see applyBleed in public.js) the widget falls
   back to a contained card rather than a broken band. */
.gxtp--bleed-failed {
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius);
	margin-bottom: 2rem;
}

.gxtp--bleed-failed .gxtp__inner { padding-inline: 1rem; }
.gxtp--bleed-failed::before { border-radius: var(--gxtp-radius) var(--gxtp-radius) 0 0; }

/* ==========================================================================
   Row: final proportions
   --------------------------------------------------------------------------
   Hierarchy, loudest to quietest: trend name, rank, metadata, volume rail.
   Everything below is about making that order obvious at a glance.
   ========================================================================== */

.gxtp__list { gap: 6px; }

.gxtp__card {
	border: 1px solid var(--gxtp-border);
	background: var(--gxtp-surface);
}

/* Zebra striping fought with the card borders; one or the other, not both. */
.gxtp__item:nth-child(odd) .gxtp__card { background: var(--gxtp-surface); }

/* Rank: quiet for most rows, emphatic for the podium. */
.gxtp__rank-num {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--gxtp-muted);
}

.gxtp__item:nth-child(-n+3) .gxtp__rank-num {
	font-size: 1.2rem;
	color: var(--gxtp-accent);
}

/* Name is the point of the row, so it gets the most weight and contrast. */
.gxtp__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	-webkit-line-clamp: 2;
}

/* Metadata sits quietly underneath. */
.gxtp__facts {
	gap: .3rem;
	margin-top: .3rem;
	font-size: .71rem;
}

/* Actions: three compact targets, aligned with the first line of the name. */
.gxtp__icon { width: 38px; height: 38px; }
.gxtp__icon svg { width: 18px; height: 18px; }

/* -------------------------------------------------------------- Phone */

@media (max-width: 620px) {
	.gxtp__card { padding: .7rem .65rem; gap: .55rem; }
	.gxtp__rank { min-width: 1.5rem; }
	.gxtp__rank-num { font-size: 1rem; }
	.gxtp__item:nth-child(-n+3) .gxtp__rank-num { font-size: 1.15rem; }
	.gxtp__name { font-size: .97rem; }

	/* A sparkline squeezed under a phone-width name is a smudge. */
	.gxtp__sparkwrap { display: none; }

	/* Three targets fit comfortably; a fourth starts crowding the name. */
	.gxtp__icon--telegram { display: none; }
	.gxtp__icon { width: 36px; height: 36px; }
	.gxtp__icon svg { width: 17px; height: 17px; }
	.gxtp__actions { gap: 0; }
}

@media (max-width: 380px) {
	.gxtp__card { padding: .6rem .55rem; gap: .45rem; }
	.gxtp__icon { width: 34px; height: 34px; }
	.gxtp__facts { font-size: .68rem; }
}

/* ------------------------------------------------------- Toolbar and tabs */

/* The controls row was a wide "Filters" button on a mostly empty line. */
.gxtp__toolbar { flex-wrap: nowrap; }
.gxtp__search { flex: 1 1 auto; }
.gxtp__filter-toggle { flex: 0 0 auto; }

@media (max-width: 620px) {
	.gxtp__ranges { gap: .25rem; padding-bottom: .6rem; }
	.gxtp__range { min-height: 32px; padding: 0 .7rem; font-size: .75rem; }
	.gxtp__country { gap: .35rem; }
	.gxtp__country .gxtp__select { min-height: 40px; }
	.gxtp__country .gxtp__btn { min-height: 40px; padding: 0 .8rem; }
}

/* --------------------------------------------------- Guard against overflow */

/*
 * Belt and braces: nothing in the widget may make the page scroll sideways,
 * whatever a theme does around it.
 */
.gxtp, .gxtp * { max-width: 100%; }
.gxtp__card > * { min-width: 0; }

/* ==========================================================================
   Legibility of the trend name
   --------------------------------------------------------------------------
   The name is the only thing on the row a reader actually came for, so it gets
   the full width of the card and is never truncated.

   Previously it shared a line with three 36px action buttons. On a 390px
   viewport that left it roughly 176px — enough for about thirteen characters —
   so "#IncredibleIndiaByIndiGo" broke mid-word and "#SpidermanSunfeastFantasy"
   was cut off with an ellipsis. Hiding the thing being listed is the one
   failure a trends list cannot afford.
   ========================================================================== */

@media (max-width: 620px) {
	/* Rank and name on the first line; actions wrap to their own. */
	.gxtp__card { flex-wrap: wrap; row-gap: .1rem; }

	.gxtp__body { flex: 1 1 0; }

	.gxtp__actions {
		flex: 0 0 100%;
		justify-content: flex-end;
		gap: .1rem;
		margin: .2rem 0 0;
		padding-top: .3rem;
		border-top: 1px solid var(--gxtp-border);
	}

	/*
	 * No clamp, no ellipsis. Trend names are short by nature; the longest run to
	 * about forty characters, which is two comfortable lines at full width.
	 */
	.gxtp__name {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
		font-size: 1.02rem;
		line-height: 1.32;
	}

	/* Now that there is room, the meta chips sit on one line. */
	.gxtp__facts { margin-top: .35rem; }
}

/*
 * Break inside a word only when it genuinely cannot fit. With the full card
 * width available most hashtags now fit on one line, and the few that do not
 * break once rather than at an arbitrary character.
 */
.gxtp__name {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* Desktop keeps the actions inline — there is room for them there. */
@media (min-width: 621px) {
	.gxtp__name {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
	}
}

/* Long unbroken tokens still must not widen the row. */
.gxtp__name a { overflow-wrap: inherit; word-break: inherit; }

/* ==========================================================================
   View switcher
   ========================================================================== */

.gxtp__views {
	display: flex;
	gap: 0;
	margin-bottom: .9rem;
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__view-tab {
	position: relative;
	padding: .55rem .95rem;
	font-size: .88rem;
	font-weight: 650;
	color: var(--gxtp-muted);
	text-decoration: none;
	background: none;
	border: 0;
	white-space: nowrap;
	transition: color .16s ease;
}

.gxtp__view-tab:hover { color: var(--gxtp-ink); }

.gxtp__view-tab.is-active { color: var(--gxtp-accent); }

.gxtp__view-tab.is-active::after {
	content: "";
	position: absolute;
	left: .55rem;
	right: .55rem;
	bottom: -1px;
	height: 2px;
	background: var(--gxtp-accent);
	border-radius: 2px 2px 0 0;
}

/* ==========================================================================
   Timeline
   --------------------------------------------------------------------------
   One column per stored snapshot, newest on the left. Reading sideways shows
   what climbed and what fell away.
   ========================================================================== */

.gxtp__timeline {
	display: flex;
	gap: .6rem;
	overflow-x: auto;
	padding-bottom: .6rem;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.gxtp__timeline:focus-visible { outline: 2px solid var(--gxtp-accent); outline-offset: 3px; }

.gxtp__tl-col {
	flex: 0 0 auto;
	width: min(78vw, 265px);
	scroll-snap-align: start;
	background: var(--gxtp-surface);
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius-sm);
	overflow: hidden;
}

.gxtp__tl-head {
	padding: .5rem .7rem;
	font-size: .76rem;
	font-weight: 650;
	text-align: center;
	color: var(--gxtp-ink-2);
	background: var(--gxtp-surface-2);
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__tl-list { margin: 0; padding: 0; list-style: none; }

.gxtp__tl-item {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	padding: .5rem .7rem;
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__tl-item:last-child { border-bottom: 0; }
.gxtp__tl-item.is-hidden { display: none; }

.gxtp__tl-rank {
	flex: 0 0 auto;
	min-width: 1.15rem;
	font-family: var(--gxtp-font-num);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--gxtp-muted);
}

.gxtp__tl-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .88rem;
	font-weight: 650;
	line-height: 1.35;
	color: var(--gxtp-accent);
	text-decoration: none;
	overflow-wrap: break-word;
	word-break: normal;
}

.gxtp__tl-name:hover { text-decoration: underline; }

.gxtp__tl-more {
	display: block;
	width: 100%;
	min-height: 38px;
	font-size: .78rem;
	font-weight: 650;
	color: var(--gxtp-accent);
	background: var(--gxtp-surface-2);
	border: 0;
	border-top: 1px solid var(--gxtp-border);
}

.gxtp__tl-more:hover { background: var(--gxtp-surface-3); }

/* ==========================================================================
   Table view
   ========================================================================== */

.gxtp__table-wrap { overflow-x: auto; }

.gxtp__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}

.gxtp__table th {
	padding: .5rem .6rem;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-align: left;
	color: var(--gxtp-muted);
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__table td {
	padding: .55rem .6rem;
	border-bottom: 1px solid var(--gxtp-border);
	vertical-align: middle;
}

.gxtp__table tr:last-child td { border-bottom: 0; }
.gxtp__table tbody tr:hover { background: var(--gxtp-surface-2); }

.gxtp__th-rank, .gxtp__td-rank { width: 2.6rem; text-align: right; }

.gxtp__td-rank {
	font-family: var(--gxtp-font-num);
	font-variant-numeric: tabular-nums;
	color: var(--gxtp-muted);
}

.gxtp__td-name { font-weight: 650; }
.gxtp__td-name a { color: var(--gxtp-ink); text-decoration: none; }
.gxtp__td-name a:hover { color: var(--gxtp-accent); }

.gxtp__td-move { width: 5rem; font-size: .78rem; }
.gxtp__th-actions, .gxtp__td-actions { width: 3rem; text-align: right; }

/* ==========================================================================
   Insight panels
   ========================================================================== */

.gxtp__insights {
	display: grid;
	grid-template-columns: 1fr;
	gap: .6rem;
	margin-top: 1.2rem;
}

.gxtp__panel {
	padding: .85rem 1rem 1rem;
	background: var(--gxtp-surface);
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius-sm);
}

.gxtp__panel-title {
	margin: 0 0 .6rem;
	padding-bottom: .5rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--gxtp-ink-2);
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__panel-list { margin: 0; padding: 0; list-style: none; }

.gxtp__panel-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem;
	padding: .32rem 0;
	font-size: .88rem;
	line-height: 1.4;
}

.gxtp__panel-list a { color: var(--gxtp-accent); text-decoration: none; font-weight: 650; overflow-wrap: break-word; }
.gxtp__panel-list a:hover { text-decoration: underline; }

.gxtp__panel-meta { font-size: .78rem; color: var(--gxtp-muted); }

.gxtp__panel-empty { margin: 0; font-size: .8rem; color: var(--gxtp-muted); }

@container (min-width: 700px) {
	.gxtp__insights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
}

@media (max-width: 620px) {
	.gxtp__view-tab { flex: 1 1 auto; text-align: center; padding: .55rem .5rem; }
	.gxtp__tl-col { width: min(82vw, 300px); }
}

/* ==========================================================================
   View tabs
   ========================================================================== */

.gxtp__views {
	display: flex;
	gap: .2rem;
	margin-bottom: .9rem;
	padding-bottom: 0;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__views::-webkit-scrollbar { display: none; }

.gxtp__view {
	flex: 0 0 auto;
	padding: .55rem .95rem;
	font-size: .92rem;
	font-weight: 700;
	color: var(--gxtp-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: color .16s ease, border-color .16s ease;
}

.gxtp__view:hover { color: var(--gxtp-ink); text-decoration: none; }
.gxtp__view.is-active { color: var(--gxtp-accent); border-bottom-color: var(--gxtp-accent); }

.gxtp__list--hidden { display: none !important; }

/* ==========================================================================
   Timeline — one column per hour, newest first
   ========================================================================== */

.gxtp__timeline {
	display: flex;
	gap: .6rem;
	overflow-x: auto;
	padding-bottom: .6rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.gxtp__tl-col {
	flex: 0 0 min(78vw, 300px);
	scroll-snap-align: start;
	background: var(--gxtp-surface);
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius-sm);
	overflow: hidden;
}

.gxtp__tl-head {
	padding: .55rem .75rem;
	font-size: .8rem;
	font-weight: 700;
	text-align: center;
	color: var(--gxtp-ink-2);
	background: var(--gxtp-surface-2);
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__tl-list { list-style: none; margin: 0; padding: 0; }

.gxtp__tl-row {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	padding: .5rem .75rem;
	border-bottom: 1px solid var(--gxtp-border);
	font-size: .88rem;
}

.gxtp__tl-row:last-child { border-bottom: 0; }

.gxtp__tl-rank {
	flex: 0 0 auto;
	min-width: 1.1rem;
	font-family: var(--gxtp-font-num);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	color: var(--gxtp-muted);
	text-align: right;
}

.gxtp__tl-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 650;
	color: var(--gxtp-accent);
	text-decoration: none;
	overflow-wrap: break-word;
}

.gxtp__tl-name:hover { text-decoration: underline; }

.gxtp__tl-more summary {
	padding: .55rem .75rem;
	font-size: .82rem;
	font-weight: 650;
	color: var(--gxtp-accent);
	cursor: pointer;
	border-top: 1px solid var(--gxtp-border);
	list-style: none;
}

.gxtp__tl-more summary::-webkit-details-marker { display: none; }
.gxtp__tl-more summary::after { content: " \\25BE"; }
.gxtp__tl-more[open] summary::after { content: " \\25B4"; }

/* ==========================================================================
   Tag cloud — size reflects staying power and peak position
   ========================================================================== */

.gxtp__cloud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem .9rem;
	padding: 1.2rem .5rem;
	line-height: 1.15;
	text-align: center;
}

.gxtp__cloud-term {
	display: inline-block;
	color: var(--gxtp-accent);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: -.015em;
	overflow-wrap: break-word;
	max-width: 100%;
	transition: color .14s ease, transform .14s ease;
}

.gxtp__cloud-term:hover,
.gxtp__cloud-term:focus-visible {
	color: var(--gxtp-ink);
	text-decoration: none;
	transform: scale(1.04);
}

/*
 * Ten steps, fluid so the largest terms shrink on a phone rather than forcing
 * the page sideways. Opacity tapers with size, which is what makes a cloud
 * read as a cloud rather than as jumbled text.
 */
.gxtp__cloud-term--w1  { font-size: clamp(.7rem, .66rem + .2vw, .8rem);   opacity: .55; font-weight: 600; }
.gxtp__cloud-term--w2  { font-size: clamp(.78rem, .72rem + .3vw, .92rem); opacity: .62; font-weight: 600; }
.gxtp__cloud-term--w3  { font-size: clamp(.88rem, .8rem + .4vw, 1.05rem); opacity: .7; }
.gxtp__cloud-term--w4  { font-size: clamp(1rem, .88rem + .6vw, 1.25rem);  opacity: .78; }
.gxtp__cloud-term--w5  { font-size: clamp(1.15rem, .98rem + .8vw, 1.5rem); opacity: .84; }
.gxtp__cloud-term--w6  { font-size: clamp(1.32rem, 1.1rem + 1.1vw, 1.8rem); opacity: .89; }
.gxtp__cloud-term--w7  { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); opacity: .93; }
.gxtp__cloud-term--w8  { font-size: clamp(1.75rem, 1.35rem + 2vw, 2.7rem); opacity: .96; }
.gxtp__cloud-term--w9  { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.2rem);  opacity: 1; }
.gxtp__cloud-term--w10 { font-size: clamp(2.3rem, 1.6rem + 3.4vw, 3.9rem); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.gxtp__cloud-term:hover { transform: none; }
}

/* ==========================================================================
   Table
   ========================================================================== */

.gxtp__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.gxtp__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .86rem;
}

.gxtp__table th,
.gxtp__table td {
	padding: .55rem .6rem;
	text-align: left;
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gxtp-muted);
	background: var(--gxtp-bg);
}

.gxtp__table tbody tr:hover td { background: var(--gxtp-surface-2); }
.gxtp__table a { color: var(--gxtp-accent); text-decoration: none; font-weight: 650; }
.gxtp__table a:hover { text-decoration: underline; }

.gxtp__th-num,
.gxtp__td-num {
	text-align: right;
	font-family: var(--gxtp-font-num);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gxtp__td-num { color: var(--gxtp-ink-2); }

/* ==========================================================================
   Insight panels
   ========================================================================== */

.gxtp__insights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: .6rem;
	margin-top: 1.2rem;
}

.gxtp__insight {
	padding: .85rem .95rem;
	background: var(--gxtp-surface);
	border: 1px solid var(--gxtp-border);
	border-radius: var(--gxtp-radius-sm);
}

.gxtp__insight-title {
	margin: 0 0 .5rem;
	padding-bottom: .4rem;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gxtp-muted);
	border-bottom: 1px solid var(--gxtp-border);
}

.gxtp__insight-list { list-style: none; margin: 0; padding: 0; }

.gxtp__insight-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	padding: .35rem 0;
	font-size: .88rem;
}

.gxtp__insight-list a {
	color: var(--gxtp-accent);
	text-decoration: none;
	font-weight: 650;
	overflow-wrap: break-word;
	min-width: 0;
}

.gxtp__insight-list a:hover { text-decoration: underline; }

.gxtp__insight-meta {
	flex: 0 0 auto;
	font-size: .74rem;
	font-variant-numeric: tabular-nums;
	color: var(--gxtp-muted);
	white-space: nowrap;
}

@media (max-width: 620px) {
	.gxtp__view { padding: .5rem .7rem; font-size: .85rem; }
	.gxtp__tl-col { flex-basis: min(84vw, 280px); }
	.gxtp__cloud { padding: .8rem .25rem; gap: .3rem .7rem; }
	.gxtp__insights { grid-template-columns: 1fr; }
}