/*
 * Top10at components. Colours and fonts come from custom properties so any theme can restyle
 * them; the fallbacks below keep every component readable with no theme support at all.
 */
:where(:root) {
	--t10-ink: #101b2d;
	--t10-paper: #f6f7f2;
	--t10-surface: #fff;
	--t10-brand: #2a2f9e;
	--t10-brand-tint: #e8e9f8;
	--t10-accent: #f2a900;
	--t10-rule: #cdd4c9;
	--t10-muted: #4a5568;
	--t10-good: #17693c;
	--t10-bad: #a8281f;
	--t10-font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
	--t10-font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
	--t10-font-body: Georgia, "Times New Roman", serif;
	--t10-display-stretch: 100%;
	--t10-numeral-stretch: 100%;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* ---------- Summary ---------- */
.t10-summary {
	background: var(--t10-brand-tint);
	margin-block: 1.75rem;
	padding: 1.1rem 1.35rem 1.2rem;
}
.t10-summary__label {
	color: var(--t10-brand);
	font: 700 0.95rem/1.3 var(--t10-font-ui);
	margin: 0 0 0.4rem;
}
.t10-summary > :last-child { margin-bottom: 0; }
.t10-summary p:not(.t10-summary__label) { font-size: 1.08em; margin-top: 0; }
.t10-summary ul, .t10-summary ol { margin-block: 0.4rem 0; padding-left: 1.2rem; }

/* ---------- Fact boxes ---------- */
.t10-facts {
	background: var(--t10-surface);
	border: 1px solid var(--t10-rule);
	border-top: 3px solid var(--t10-ink);
	font-family: var(--t10-font-ui);
	margin-block: 1.75rem;
	padding: 0.9rem 1.25rem 0.6rem;
}
.t10-facts__title { font: 700 1rem/1.3 var(--t10-font-display); font-stretch: var(--t10-display-stretch); margin: 0 0 0.35rem; }
.t10-facts__list { margin: 0; }
.t10-facts__list > div {
	border-top: 1px solid var(--t10-rule);
	display: grid;
	gap: 0.15rem 1rem;
	grid-template-columns: minmax(7.5rem, 34%) 1fr;
	padding-block: 0.5rem;
}
.t10-facts__list dt { color: var(--t10-muted); font-size: 0.9rem; }
.t10-facts__list dd { font-size: 0.97rem; font-variant-numeric: tabular-nums; margin: 0; overflow-wrap: anywhere; }
.t10-facts__note {
	border-top: 1px solid var(--t10-rule);
	color: var(--t10-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 0.2rem 1.1rem;
	margin: 0;
	padding-block: 0.55rem 0.3rem;
}

/* ---------- Ranked list ---------- */
.t10-ranked { margin-block: 2rem; }
.t10-ranked__basis { color: var(--t10-muted); font: 0.92rem/1.4 var(--t10-font-ui); margin: 0 0 0.5rem; }
.t10-ranked .t10-ranked__list { list-style: none; margin: 0; padding: 0; }
.t10-entry { border-top: 2px solid var(--t10-ink); margin: 0 0 2.75rem; padding-top: 1.1rem; }
.t10-entry__head { align-items: start; column-gap: 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.t10-entry__rank {
	background: var(--t10-accent);
	color: var(--t10-ink);
	font: 800 clamp(2.6rem, 9vw, 3.6rem)/0.92 var(--t10-font-display);
	font-stretch: var(--t10-numeral-stretch);
	font-variant-numeric: lining-nums;
	grid-row: span 2;
	min-width: 1.15em;
	padding: 0.14em 0.16em 0.1em;
	text-align: center;
}
.t10-entry__rank:empty { display: none; }
.t10-entry .t10-entry__name { align-self: center; font-size: clamp(1.45rem, 4.4vw, 1.9rem); line-height: 1.12; margin: 0; scroll-margin-top: 5rem; }
.t10-entry__tagline { color: var(--t10-muted); font: 1rem/1.4 var(--t10-font-ui); margin: 0.3rem 0 0; }
.t10-entry__media { margin: 1.1rem 0 0; }
.t10-entry__media img { display: block; height: auto; max-width: 100%; }
.t10-entry__media figcaption { color: var(--t10-muted); font: 0.82rem/1.4 var(--t10-font-ui); margin-top: 0.35rem; }
.t10-entry__facts {
	border-block: 1px solid var(--t10-rule);
	display: grid;
	font-family: var(--t10-font-ui);
	gap: 0.6rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	margin: 1.1rem 0 0;
	padding-block: 0.7rem;
}
.t10-entry__facts dt { color: var(--t10-muted); font-size: 0.8rem; }
.t10-entry__facts dd { font-size: 0.98rem; font-variant-numeric: tabular-nums; font-weight: 600; margin: 0.1rem 0 0; }
.t10-entry__body { margin-top: 1rem; }
.t10-entry__body > :first-child { margin-top: 0; }
.t10-entry__foot { color: var(--t10-muted); display: flex; flex-wrap: wrap; font: 0.88rem/1.4 var(--t10-font-ui); gap: 0.2rem 1.25rem; margin: 0.9rem 0 0; }

/* ---------- Tables ---------- */
.t10-table-scroll { margin-block: 1.75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t10-table-scroll:focus-visible { outline: 3px solid var(--t10-brand); outline-offset: 2px; }
.t10-table-scroll table,
.t10-compare table {
	border-collapse: collapse;
	font: 0.95rem/1.4 var(--t10-font-ui);
	font-variant-numeric: tabular-nums;
	min-width: 34rem;
	width: 100%;
}
.t10-table-scroll .wp-block-table { margin: 0; overflow: visible; }
.t10-table-scroll caption { caption-side: top; font: 700 1rem/1.3 var(--t10-font-display); font-stretch: var(--t10-display-stretch); padding-bottom: 0.5rem; text-align: left; }
.t10-table-scroll table th, .t10-table-scroll table td { border: 0; border-bottom: 1px solid var(--t10-rule); padding: 0.6rem 0.9rem 0.6rem 0; text-align: left; vertical-align: top; }
.t10-table-scroll table thead th { border-bottom: 2px solid var(--t10-ink); color: var(--t10-muted); font-size: 0.82rem; font-weight: 600; vertical-align: bottom; }
.t10-table-scroll tbody th { font-weight: 700; }
.t10-compare { margin-block: 1.75rem; }
.t10-compare .t10-table-scroll { margin-block: 0; }
.t10-compare tbody td:first-child { font-weight: 800; width: 3.2rem; }
.t10-table-scroll table { border-collapse: collapse; font: 0.95rem/1.4 var(--t10-font-ui); font-variant-numeric: tabular-nums; width: 100%; }
.t10-table-scroll .wp-block-table thead { border-bottom: 0; }
@media (min-width: 40rem) { .t10-compare td:nth-child(3) { white-space: nowrap; } }
.t10-compare figcaption, .t10-table-scroll figcaption { color: var(--t10-muted); font: 0.85rem/1.4 var(--t10-font-ui); margin-top: 0.5rem; text-align: left; }

/* ---------- Lists with meaning ---------- */
.wp-block-list.is-style-t10-pros, .wp-block-list.is-style-t10-cons { list-style: none; padding-left: 0; }
.wp-block-list.is-style-t10-pros li, .wp-block-list.is-style-t10-cons li { margin-block: 0.55rem; padding-left: 1.9rem; position: relative; }
.wp-block-list.is-style-t10-pros li::before, .wp-block-list.is-style-t10-cons li::before {
	border-radius: 50%;
	color: #fff;
	font: 700 0.95rem/1.25rem var(--t10-font-ui);
	height: 1.25rem;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0.28em;
	width: 1.25rem;
}
.wp-block-list.is-style-t10-pros li::before { background: var(--t10-good); content: "+"; }
.wp-block-list.is-style-t10-cons li::before { background: var(--t10-bad); content: "\2212"; }
.t10-proscons { gap: 1.5rem 2.5rem; margin-block: 1.75rem; }
.t10-proscons .wp-block-column { border-top: 2px solid var(--t10-ink); padding-top: 0.9rem; }
.t10-proscons h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }

.wp-block-list.is-style-t10-steps { counter-reset: t10-step; list-style: none; padding-left: 0; }
.wp-block-list.is-style-t10-steps > li { counter-increment: t10-step; margin-block: 0.9rem; min-height: 2rem; padding-left: 2.9rem; position: relative; }
.wp-block-list.is-style-t10-steps > li::before {
	background: var(--t10-ink);
	color: #fff;
	content: counter(t10-step);
	font: 800 1.05rem/2rem var(--t10-font-display);
	font-stretch: var(--t10-numeral-stretch);
	height: 2rem;
	left: 0;
	position: absolute;
	text-align: center;
	top: -0.1rem;
	width: 2rem;
}

/* ---------- Notes ---------- */
.wp-block-group.is-style-t10-note,
.wp-block-group.is-style-t10-warning,
.wp-block-group.is-style-t10-method {
	border: 1px solid var(--t10-rule);
	margin-block: 1.75rem;
	padding: 1rem 1.25rem;
}
.wp-block-group.is-style-t10-note > *, .wp-block-group.is-style-t10-warning > *, .wp-block-group.is-style-t10-method > * { margin-inline: 0; max-width: none; }
.wp-block-group.is-style-t10-note > :first-child, .wp-block-group.is-style-t10-warning > :first-child, .wp-block-group.is-style-t10-method > :first-child { margin-top: 0; }
.wp-block-group.is-style-t10-note > :last-child, .wp-block-group.is-style-t10-warning > :last-child, .wp-block-group.is-style-t10-method > :last-child { margin-bottom: 0; }
.wp-block-group.is-style-t10-note, .wp-block-group.is-style-t10-warning { font-family: var(--t10-font-ui); font-size: 0.96rem; }
.wp-block-group.is-style-t10-warning { border: 2px solid var(--t10-bad); }
.wp-block-group.is-style-t10-warning strong:first-child { color: var(--t10-bad); }
.wp-block-group.is-style-t10-method { background: var(--t10-surface); }
.wp-block-group.is-style-t10-method h2 { font-size: 1.15rem; }
.wp-block-group.is-style-t10-method p, .wp-block-group.is-style-t10-method li { font-family: var(--t10-font-ui); font-size: 0.96rem; }

.wp-block-group.is-style-t10-stats { align-items: start; display: grid; gap: 1.25rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 2rem; }
@media (min-width: 48rem) { .wp-block-group.is-style-t10-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wp-block-group.is-style-t10-stats > .t10-stat { margin: 0 !important; }
.t10-stat { border-top: 2px solid var(--t10-ink); margin: 0; padding-top: 0.6rem; }
.t10-stat > * { margin: 0; max-width: none; }
.t10-stat__value { font: 800 clamp(1.45rem, 4.4vw, 1.8rem)/1.08 var(--t10-font-display); font-stretch: var(--t10-numeral-stretch); font-variant-numeric: tabular-nums; }
.t10-stat__label { color: var(--t10-muted); font: 0.9rem/1.35 var(--t10-font-ui); margin-top: 0.3rem; }

.wp-block-group.is-style-t10-swot { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 2rem; border: 1px solid var(--t10-ink); }
.wp-block-group.is-style-t10-swot > .t10-swot__cell { background: var(--t10-surface); border: 1px solid var(--t10-ink); margin: 0 !important; padding: 0.9rem 1.1rem 1rem; }
.t10-swot__cell > * { max-width: none; }
.t10-swot__cell h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.t10-swot__cell ul { font: 0.94rem/1.45 var(--t10-font-ui); margin: 0; padding-left: 1.1rem; }
.t10-swot__cell li { margin-block: 0.3rem; }
.t10-swot__cell--s h3::before, .t10-swot__cell--w h3::before, .t10-swot__cell--o h3::before, .t10-swot__cell--th h3::before {
	color: #fff;
	display: inline-block;
	font-weight: 800;
	margin-right: 0.5rem;
	padding: 0 0.4rem;
}
.t10-swot__cell--s h3::before { background: var(--t10-good); content: "S"; }
.t10-swot__cell--w h3::before { background: var(--t10-bad); content: "W"; }
.t10-swot__cell--o h3::before { background: var(--t10-brand); content: "O"; }
.t10-swot__cell--th h3::before { background: var(--t10-ink); content: "T"; }
@media (max-width: 34rem) {
	.wp-block-group.is-style-t10-swot { grid-template-columns: 1fr; }
}

/* ---------- Sources, questions ---------- */
.t10-sources { border-top: 2px solid var(--t10-ink); margin-top: 3rem; padding-top: 0.25rem; }
.t10-sources h2 { font-size: 1.25rem; }
.t10-sources__list { font: 0.92rem/1.5 var(--t10-font-ui); padding-left: 1.4rem; }
.t10-sources__list li { margin-block: 0.5rem; overflow-wrap: anywhere; }
.t10-sources__list cite { font-style: normal; font-weight: 600; }
.t10-sources__note { color: var(--t10-muted); }
.t10-faq { margin-top: 3rem; }
.t10-faq__item { border-top: 1px solid var(--t10-rule); padding-block: 1rem 0.25rem; }
.t10-faq__item .t10-faq__q { font-size: 1.12rem; margin: 0 0 0.4rem; }
.t10-faq__a > :first-child { margin-top: 0; }

/* ---------- Article furniture ---------- */
.t10-breadcrumbs ol { color: var(--t10-muted); display: flex; flex-wrap: wrap; font: 0.88rem/1.4 var(--t10-font-ui); gap: 0.15rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.t10-breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.6; }
.t10-breadcrumbs li[aria-current] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.t10-breadcrumbs a { color: inherit; }

.t10-meta { color: var(--t10-muted); font: 0.92rem/1.45 var(--t10-font-ui); }
.t10-meta p { margin: 0; }
.t10-meta__byline { color: var(--t10-ink); font-weight: 600; }
.t10-meta__dates { display: flex; flex-wrap: wrap; gap: 0.1rem 0; }
.t10-meta__dates span + span::before { background: var(--t10-rule); content: ""; display: inline-block; height: 0.85em; margin-inline: 0.7rem; vertical-align: -0.08em; width: 1px; }
.t10-meta__check { color: var(--t10-good); font-weight: 600; margin-top: 0.2rem !important; }
.t10-meta__read { color: var(--t10-muted); margin-top: 0.2rem !important; }
.t10-disclosure { border: 1px solid var(--t10-rule); font: 0.92rem/1.45 var(--t10-font-ui); margin-block: 1.25rem; padding: 0.7rem 1rem; }

.t10-toc { font-family: var(--t10-font-ui); }
.t10-toc__title { cursor: pointer; font: 700 0.95rem/1.3 var(--t10-font-display); font-stretch: var(--t10-display-stretch); padding-block: 0.5rem; }
.t10-toc__list { font-size: 0.92rem; line-height: 1.35; list-style: none; margin: 0; padding: 0; }
.t10-toc__list li { border-top: 1px solid var(--t10-rule); }
.t10-toc__list a { color: var(--t10-ink); display: block; padding-block: 0.5rem; text-decoration: none; }
.t10-toc__list a:hover, .t10-toc__list a[aria-current] { color: var(--t10-brand); text-decoration: underline; }

.t10-share { align-items: center; display: flex; flex-wrap: wrap; font: 0.92rem/1.4 var(--t10-font-ui); gap: 0 1rem; }
.t10-share__label { font-weight: 700; margin: 0; }
.t10-share ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; list-style: none; margin: 0; padding: 0; }
.t10-share a, .t10-share__copy { align-items: center; display: inline-flex; min-height: 2.75rem; min-width: 1.75rem; }
.t10-share__copy { background: none; border: 0; color: var(--t10-brand); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* ---------- Cards and collections ---------- */
.t10-collection { margin-block: 3rem; }
.t10-collection__head { align-items: baseline; border-top: 2px solid var(--t10-ink); display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; justify-content: space-between; margin-bottom: 1.25rem; padding-top: 0.6rem; }
.t10-collection__title { font-size: clamp(1.3rem, 3.5vw, 1.6rem); margin: 0; }
.t10-collection__more { font: 600 0.92rem/1.4 var(--t10-font-ui); }
.t10-collection__items { display: grid; gap: 2rem 1.75rem; }
.t10-collection--grid .t10-collection__items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }

.t10-card { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.t10-card__media { aspect-ratio: 16 / 9; background: var(--t10-rule); display: block; outline: 1px solid var(--t10-rule); outline-offset: -1px; overflow: hidden; }
.t10-card__media img { display: block; height: 100%; object-fit: cover; width: 100%; }
.t10-card__kicker { font: 600 0.82rem/1.3 var(--t10-font-ui); margin: 0 0 0.3rem; }
.t10-card__kicker a { color: var(--t10-brand); text-decoration: none; }
.t10-card__kicker a:hover { text-decoration: underline; }
.t10-card .t10-card__title { font-size: 1.2rem; line-height: 1.2; margin: 0; }
.t10-card__title a { color: var(--t10-ink); text-decoration: none; }
.t10-card__title a:hover { color: var(--t10-brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.t10-card__dek { color: var(--t10-muted); font-size: 0.98rem; line-height: 1.45; margin: 0.45rem 0 0; }
.t10-card__meta { color: var(--t10-muted); display: flex; flex-wrap: wrap; font: 0.82rem/1.4 var(--t10-font-ui); gap: 0 0.9rem; margin: 0.5rem 0 0; }

.t10-collection--list .t10-collection__items,
.t10-collection--compact .t10-collection__items { gap: 0; }
.t10-collection--list .t10-card { border-top: 1px solid var(--t10-rule); display: grid; gap: 1.1rem; grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr); padding-block: 1.1rem; }
.t10-collection--list .t10-card:first-child, .t10-collection--compact .t10-card:first-child { border-top: 0; padding-top: 0; }
.t10-collection--compact .t10-card { border-top: 1px solid var(--t10-rule); padding-block: 0.8rem; }
.t10-collection--compact .t10-card .t10-card__title { font-size: 1.05rem; }

@media (min-width: 56rem) {
	.t10-collection--lead .t10-collection__items { column-gap: 2.5rem; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); grid-auto-rows: min-content; row-gap: 0; }
	.t10-collection--lead .t10-card:first-child { grid-row: 1 / span 4; }
	.t10-collection--lead .t10-card:first-child .t10-card__title { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.1; }
	.t10-collection--lead .t10-card:not(:first-child) { border-top: 1px solid var(--t10-rule); display: grid; gap: 1rem; grid-template-columns: 7.5rem minmax(0, 1fr); padding-block: 1rem; }
	.t10-collection--lead .t10-card:nth-child(2) { border-top: 0; padding-top: 0; }
	.t10-collection--lead .t10-card:not(:first-child) .t10-card__title { font-size: 1.05rem; }
}
@media (max-width: 30rem) {
	.t10-collection--list .t10-card { grid-template-columns: 6rem minmax(0, 1fr); }
	.t10-collection--list .t10-card__dek { display: none; }
}

.t10-term-index ul { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); list-style: none; margin: 0.75rem 0 0; padding: 0; }
.t10-term-index li { border-top: 1px solid var(--t10-rule); padding-block: 0.7rem; }
.t10-term-index a { align-items: baseline; color: var(--t10-ink); display: flex; gap: 1rem; justify-content: space-between; text-decoration: none; }
.t10-term-index a:hover .t10-term-index__name { color: var(--t10-brand); text-decoration: underline; }
.t10-term-index__name { font: 700 1.05rem/1.3 var(--t10-font-display); font-stretch: var(--t10-display-stretch); }
.t10-term-index__count { color: var(--t10-muted); font: 0.85rem/1.3 var(--t10-font-ui); white-space: nowrap; }
.t10-term-index li p { color: var(--t10-muted); font: 0.9rem/1.4 var(--t10-font-ui); margin: 0.3rem 0 0; }

/* ---------- Advertising: space is reserved only when a slot will be filled ---------- */
.t10-ad { clear: both; margin: 2.5rem auto; min-height: 280px; text-align: center; }
.t10-ad--top { min-height: 120px; }
.t10-ad--sidebar { min-height: 600px; width: 300px; }
.t10-ad__label { color: var(--t10-muted); display: block; font: 0.72rem/1.6 var(--t10-font-ui); }
.t10-ad--outline { align-items: center; border: 1px dashed var(--t10-muted); display: flex; justify-content: center; min-height: 90px; padding: 0.5rem 1rem; }
.t10-ad--outline.t10-ad--sidebar { min-height: 250px; }

.t10-publisher-field { overflow-wrap: anywhere; }
