/**
 * TopInLists Rankings — data-first design.
 * Reference points: The Economist / Statista / FiveThirtyEight.
 * Visual hierarchy: rank → number → change → trend → explanation → source.
 * Deliberately no animation, no gradients, no oversized imagery.
 */

.tlr {
	--tlr-line: #dfe3e8;
	--tlr-ink: #1a1f26;
	--tlr-mute: #616c7a;
	--tlr-up: #12805c;
	--tlr-down: #b3261e;
	--tlr-accent: #d71d4f;
	--tlr-head: #f5f7f9;
	--tlr-hl: #fff8e1;
	font-variant-numeric: tabular-nums;
	color: var(--tlr-ink);
}
.s-dark .tlr, [data-theme="dark"] .tlr {
	--tlr-line: #2f3742;
	--tlr-ink: #e6eaef;
	--tlr-mute: #9aa5b1;
	--tlr-up: #4ec99b;
	--tlr-down: #ff6b5e;
	--tlr-head: rgba(255,255,255,.04);
	--tlr-hl: rgba(255,214,102,.10);
}

.tlr h2 {
	font-size: 1.32em;
	letter-spacing: -.01em;
	margin: 34px 0 10px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--tlr-ink);
}
.tlr h3 { font-size: 1.02em; margin: 18px 0 8px; }

/* Quick answer — the sentence AI engines lift */
.tlr-quick {
	background: var(--tlr-head);
	border-left: 4px solid var(--tlr-accent);
	padding: 14px 18px;
	margin: 0 0 18px;
	line-height: 1.62;
}

.tlr-meta-line { font-size: .88em; color: var(--tlr-mute); margin: 0 0 14px; }
.tlr-note {
	font-size: .88em;
	color: var(--tlr-mute);
	border-left: 3px solid var(--tlr-line);
	padding: 8px 14px;
	margin: 0 0 14px;
	line-height: 1.55;
}
.tlr-sub { font-size: .84em; color: var(--tlr-mute); font-weight: 400; }

/* What changed */
.tlr-changed { border: 1px solid var(--tlr-line); padding: 4px 20px 14px; margin: 0 0 20px; }
.tlr-changed h2 { border: 0; margin: 14px 0 6px; font-size: 1.14em; padding: 0; }
.tlr-changed ul { margin: 0 0 0 18px; }
.tlr-changed li { margin: 5px 0; line-height: 1.55; }

/* Tables */
.tlr-scroll { overflow-x: auto; margin: 0 0 18px; -webkit-overflow-scrolling: touch; }
.tlr-table { width: 100%; border-collapse: collapse; font-size: .95em; margin: 0; }
.tlr-table th, .tlr-table td {
	padding: 9px 11px;
	border-bottom: 1px solid var(--tlr-line);
	text-align: left;
	vertical-align: middle;
}
.tlr-table thead th {
	background: var(--tlr-head);
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tlr-mute);
	border-bottom: 2px solid var(--tlr-ink);
	white-space: nowrap;
	font-weight: 700;
}
.tlr-table td.num, .tlr-table th.num { text-align: right; white-space: nowrap; }
.tlr-table tbody tr:hover { background: var(--tlr-head); }
.tlr-rank { font-weight: 700; width: 42px; color: var(--tlr-mute); }
.tlr-name { min-width: 168px; }
.tlr-name a { text-decoration: none; font-weight: 600; }
.tlr-handle { display: block; font-size: .8em; color: var(--tlr-mute); }
.tlr-mini { font-size: .9em; }
.tlr-table .small { font-size: .8em; word-break: break-all; }

.up { color: var(--tlr-up); font-weight: 600; }
.down { color: var(--tlr-down); font-weight: 600; }

/* Rank movement badge */
.tlr-badge {
	display: inline-block;
	font-size: .8em;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 3px;
	white-space: nowrap;
}
.tlr-badge.up { background: rgba(18,128,92,.12); color: var(--tlr-up); }
.tlr-badge.down { background: rgba(179,38,30,.12); color: var(--tlr-down); }
.tlr-badge.flat { color: var(--tlr-mute); }
.tlr-badge.new { background: var(--tlr-head); color: var(--tlr-mute); font-weight: 600; }

.tlr-spark { width: 92px; }
.tlr-sparkline { display: block; }

/* Two-column blocks */
.tlr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0 0 18px; }
.tlr-callout { border: 1px solid var(--tlr-line); border-top: 3px solid var(--tlr-ink); padding: 14px 18px; }
.tlr-callout h3 { margin: 0 0 8px; font-size: .8em; text-transform: uppercase; letter-spacing: .05em; color: var(--tlr-mute); }
.tlr-big { font-size: 1.2em; font-weight: 700; margin: 0 0 2px; }
.tlr-big-num { font-size: 1.7em; font-weight: 800; margin: 0 0 4px; line-height: 1.1; }
.tlr-callout p:last-child { margin-bottom: 0; }

/* Historical replay chips */
.tlr-dates { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.tlr-chip {
	display: inline-block;
	border: 1px solid var(--tlr-line);
	padding: 5px 11px;
	font-size: .86em;
	text-decoration: none;
	border-radius: 3px;
	color: var(--tlr-ink);
}
.tlr-chip:hover { border-color: var(--tlr-ink); }
.tlr-chip.is-active { background: var(--tlr-ink); color: #fff; border-color: var(--tlr-ink); font-weight: 600; }
.s-dark .tlr-chip.is-active, [data-theme="dark"] .tlr-chip.is-active { color: #12161c; }

.tlr-matrix td { font-size: .9em; }
.tlr-cell-changed { background: var(--tlr-hl); font-weight: 600; }

/* Methodology */
.tlr-method { margin: 0 0 14px 18px; }
.tlr-method li { margin: 7px 0; line-height: 1.58; }

.tlr-empty {
	border: 1px dashed var(--tlr-line);
	padding: 16px;
	color: var(--tlr-mute);
	font-size: .92em;
}

@media (max-width: 720px) {
	.tlr-cols { grid-template-columns: 1fr; gap: 16px; }
	.tlr-table th, .tlr-table td { padding: 8px 8px; }
	.tlr h2 { font-size: 1.18em; margin-top: 26px; }
	.tlr-quick { padding: 12px 14px; }
}