/*
 * Countries hub — his "Countries v2" (Claude Design project 4b436416, 27 Oct
 * 2026). Values are the design's; colours ride the theme's tokens.
 */
.tdch {
	--tdch-line: rgba(0, 0, 0, 0.28);
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 48px 96px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	color: var(--td-ink, #1A1A1B);
	font-family: var(--td-face);
	font-variant-numeric: tabular-nums;
}
.tdch *,
.tdch *::before,
.tdch *::after { box-sizing: border-box; }
.tdch [hidden] { display: none !important; }
.tdch a { color: var(--td-ink, #1A1A1B); text-decoration: none; }
.tdch a:hover { color: var(--td-accent, #BE531B); }
.tdch button { font-family: inherit; }
.tdch h1,
.tdch h2,
.tdch h3,
.tdch p { margin: 0; }

/* Head */
.tdch-head { display: flex; flex-direction: column; gap: 16px; }
.tdch-crumbs { display: flex; gap: 8px; font-size: 12px; color: var(--td-ink-3, #6E6A62); }
.tdch .tdch-crumbs a { color: var(--td-ink-3, #6E6A62); }
.tdch .tdch-crumbs .tdch-crumb-world[aria-current] { color: var(--td-accent-text, #A8480F); }
.tdch-crumb-sel { display: inline-flex; gap: 8px; color: var(--td-accent-text, #A8480F); }
.tdch-h {
	font-size: 68px;
	line-height: 0.96;
	letter-spacing: -0.03em;
	font-weight: 900;
	overflow-wrap: anywhere;
	min-width: 0;
}
.tdch-h span { display: block; }
.tdch-h .tdch-h-2 { color: var(--td-accent, #BE531B); font-weight: 500; letter-spacing: -0.02em; }
.tdch-facts {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 40px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--td-hair, rgba(0, 0, 0, 0.11));
}
.tdch-figs { display: flex; gap: 40px; flex-wrap: wrap; }
.tdch-fig,
.tdch-p-fig { display: flex; flex-direction: column; gap: 3px; }
.tdch-fig-v { font-size: 34px; font-weight: 500; line-height: 1; white-space: nowrap; }
.tdch-fig-v.is-open { color: var(--td-accent-text, #A8480F); }
.tdch-fig-l { font-size: 12px; color: var(--td-ink-2, #5C5C5A); white-space: nowrap; }
.tdch-clock { display: flex; gap: 28px; flex-wrap: wrap; }
.tdch-city { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.tdch-city-n { font-size: 12px; line-height: 14px; color: var(--td-ink-2, #5C5C5A); white-space: nowrap; }
.tdch-city-t { font-size: 20px; font-weight: 500; line-height: 1; white-space: nowrap; }
.tdch-days { display: flex; gap: 1px; font-size: 10px; line-height: 14px; color: var(--td-ink-3, #6E6A62); }
.tdch-days .is-today { color: var(--td-accent, #BE531B); font-weight: 700; }
.tdch.has-sel .tdch-clock { display: none; }

/* Stage */
.tdch-stage { display: flex; flex-wrap: wrap; align-items: flex-start; min-width: 0; width: 100%; row-gap: 36px; }
.tdch-main { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; }
.tdch-row { display: flex; flex-wrap: wrap; row-gap: 24px; align-items: flex-start; min-width: 0; width: 100%; }
.tdch-globe {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	transition: flex-basis 650ms cubic-bezier(0.2, 0.7, 0.2, 1), width 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tdch.has-sel:not(.is-narrow) .tdch-globe { flex-basis: 420px; width: 420px; position: sticky; top: 24px; }
.tdch-sphere { position: relative; width: 100%; height: 560px; transition: height 650ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tdch-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.tdch-regions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; flex-wrap: wrap-reverse; justify-content: center; }
.tdch.has-sel .tdch-regions { display: none; }
.tdch .tdch-regions button {
	all: unset;
	cursor: pointer;
	white-space: nowrap;
	font-size: 13px;
	padding: 6px 10px;
	border-radius: 3px;
	border: 1px solid var(--td-hair, rgba(0, 0, 0, 0.11));
	background: var(--td-canvas, #FAFAFA);
	color: var(--td-ink, #1A1A1B);
}
.tdch .tdch-regions button:hover { border-color: var(--td-ink, #1A1A1B); }
.tdch .tdch-regions button:focus-visible { outline: 2px solid var(--td-ink, #1A1A1B); outline-offset: 1px; }

/* Rail */
.tdch-rail {
	flex: 1 1 320px;
	max-width: 340px;
	min-width: 0;
	margin-left: 40px;
	padding-left: 28px;
	border-left: 1px solid #D9D9D9;
	padding-top: 24px;
	min-height: 520px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.tdch.has-sel .tdch-rail { display: none; }
.tdch-find { position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.tdch-find label { font-size: 12px; color: var(--td-ink-3, #6E6A62); }
.tdch-find-box {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--tdch-line);
	padding: 6px 0 10px;
	transition: border-color 160ms ease-out;
}
.tdch.is-finding .tdch-find-box { border-bottom-color: var(--td-ink, #1A1A1B); }
.tdch-find-box svg { flex-shrink: 0; }
.tdch .tdch-find input {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.01em;
	border: 0;
	background: transparent;
	outline: none;
	color: var(--td-ink, #1A1A1B);
	padding: 0;
	margin: 0;
	box-shadow: none;
	height: auto;
}
.tdch .tdch-find input::placeholder { color: var(--td-ink-3, #6E6A62); opacity: 1; }
.tdch-drop {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	background: var(--td-canvas, #FAFAFA);
	box-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.35);
	max-height: 440px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
	padding: 0 4px 10px 0;
	margin: 0 -8px;
}
.tdch-drop-l { font-size: 12px; color: var(--td-ink-3, #6E6A62); padding: 12px 8px 4px; }
.tdch-opt {
	cursor: pointer;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	height: 38px;
	padding: 0 8px;
	border-top: 1px solid var(--td-hair-soft, rgba(0, 0, 0, 0.065));
}
.tdch-opt.is-act { background: rgba(0, 0, 0, 0.05); }
.tdch-opt-n { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.tdch-opt-name { font-size: 15px; font-weight: 500; white-space: nowrap; }
.tdch-opt.is-act .tdch-opt-name { color: var(--td-accent-text, #A8480F); }
.tdch-opt-ex { font-size: 12px; color: var(--td-ink-3, #6E6A62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdch-opt-r { font-size: 12px; color: var(--td-ink-3, #6E6A62); white-space: nowrap; flex-shrink: 0; }
.tdch-opt-r.is-open { color: var(--td-accent-text, #A8480F); }
.tdch-drop-none { padding: 14px 8px; font-size: 14px; color: var(--td-ink-2, #5C5C5A); }
.tdch-open { display: flex; flex-direction: column; gap: 6px; }
.tdch .tdch-open-q { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.tdch-open-a { font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.tdch-list { display: flex; flex-direction: column; }
.tdch-list-l { font-size: 12px; color: var(--td-ink-3, #6E6A62); padding-bottom: 4px; }
.tdch .tdch-li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
	line-height: 36px;
	border-top: 1px solid var(--td-hair-soft, rgba(0, 0, 0, 0.065));
}
.tdch-li-name { white-space: nowrap; }
.tdch-li-name.is-open { color: var(--td-accent-text, #A8480F); }
.tdch-li-when { color: var(--td-ink-2, #5C5C5A); white-space: nowrap; }
.tdch .tdch-li:hover .tdch-li-name { color: var(--td-accent, #BE531B); }

/* The in-place panel */
.tdch-panel {
	flex: 1 1 560px;
	min-width: 0;
	opacity: 0;
	transition: opacity 280ms ease-out;
	border-left: 1px solid var(--tdch-line);
	padding-left: 32px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.tdch-panel.is-shown { opacity: 1; }
.tdch-p-head { display: flex; flex-direction: column; gap: 10px; }
.tdch-p-title { display: flex; align-items: center; gap: 10px; margin-left: -10px; }
.tdch .tdch-back {
	all: unset;
	cursor: pointer;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--td-ink, #1A1A1B);
}
.tdch .tdch-back:hover { background: rgba(0, 0, 0, 0.05); color: var(--td-accent, #BE531B); }
.tdch .tdch-back:focus-visible { outline: 2px solid var(--td-ink, #1A1A1B); outline-offset: 1px; }
.tdch .tdch-p-title .tdch-p-name { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; min-width: 0; }
.tdch-p-meta { font-size: 14px; line-height: 1.6; color: var(--td-ink-2, #5C5C5A); display: flex; column-gap: 6px; flex-wrap: wrap; }
.tdch-p-meta span { white-space: nowrap; }
.tdch-p-now.is-open { color: var(--td-accent-text, #A8480F); font-weight: 600; }
.tdch-p-figs { display: flex; column-gap: 40px; row-gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.tdch-p-fig-v { font-size: 26px; font-weight: 600; line-height: 1; white-space: nowrap; }
.tdch-strip { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; max-width: 640px; }
.tdch-strip-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--td-ink-3, #6E6A62); }
.tdch-strip-bar { position: relative; height: 22px; }
.tdch-strip-line { position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: rgba(0, 0, 0, 0.18); }
.tdch-seg { position: absolute; top: 6px; height: 9px; background: rgba(0, 0, 0, 0.22); }
.tdch-seg.is-weekend { background: rgba(0, 0, 0, 0.08); }
.tdch-seg.is-on { background: var(--td-accent, #BE531B); }
.tdch-strip-now { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--td-ink, #1A1A1B); }
.tdch-strip-ticks { position: relative; height: 14px; font-size: 11px; color: var(--td-ink-3, #6E6A62); }
.tdch-strip-ticks span { position: absolute; white-space: nowrap; }
.tdch-branch { display: flex; gap: 22px; font-size: 14px; margin-top: 14px; flex-wrap: wrap; }
.tdch .tdch-branch a { display: flex; gap: 6px; align-items: baseline; border-bottom: 1px solid var(--tdch-line); padding-bottom: 2px; white-space: nowrap; }
.tdch-branch b { font-weight: 600; }
.tdch-branch span { font-size: 12px; color: var(--td-ink-3, #6E6A62); }

.tdch-sec { position: relative; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 24px; }
.tdch-sec::before { content: ""; position: absolute; left: -32px; top: 11px; width: 22px; height: 1px; background: var(--tdch-line); }
.tdch .tdch-sec h2 { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.tdch-sec-a { font-size: 14px; line-height: 1.7; max-width: 640px; }
.tdch-sec-foot { font-size: 12px; color: var(--td-ink-3, #6E6A62); line-height: 1.6; max-width: 640px; }
.tdch-sec-more { display: flex; gap: 20px; font-size: 14px; align-items: center; flex-wrap: wrap; }
.tdch .tdch-sec-more button { all: unset; cursor: pointer; font-weight: 600; white-space: nowrap; }
.tdch .tdch-sec-more button:hover { color: var(--td-accent, #BE531B); }
.tdch .tdch-sec-more button:focus-visible { outline: 2px solid var(--td-ink, #1A1A1B); outline-offset: 2px; }
.tdch .tdch-sec-more a { color: var(--td-ink-2, #5C5C5A); white-space: nowrap; }
.tdch .tdch-sec-link { font-size: 14px; font-weight: 600; align-self: flex-start; border-bottom: 1px solid currentColor; }

.tdch-table { display: flex; flex-direction: column; overflow-x: auto; }
.tdch-th,
.tdch-tr { display: grid; column-gap: 10px; }
.tdch-table--stocks .tdch-th,
.tdch-table--stocks .tdch-tr { grid-template-columns: 24px minmax(150px, 1.8fr) repeat(3, minmax(70px, 1fr)) minmax(120px, 1.4fr) minmax(70px, 0.8fr); }
.tdch-table--nocap .tdch-th,
.tdch-table--nocap .tdch-tr { grid-template-columns: 24px minmax(150px, 1.8fr) repeat(2, minmax(70px, 1fr)) minmax(120px, 1.4fr) minmax(70px, 0.8fr); }
.tdch-table--etfs .tdch-th,
.tdch-table--etfs .tdch-tr { grid-template-columns: 24px minmax(180px, 2.4fr) repeat(5, minmax(64px, 1fr)); }
.tdch-th { font-size: 12px; color: var(--td-ink-3, #6E6A62); border-bottom: 1px solid var(--tdch-line); padding: 8px 0; white-space: nowrap; }
.tdch-th .is-key { color: var(--td-accent-text, #A8480F); }
.tdch-tr { align-items: center; height: 50px; font-size: 14px; border-bottom: 1px solid var(--td-hair-soft, rgba(0, 0, 0, 0.065)); }
.tdch-tr:hover { background: rgba(0, 0, 0, 0.05); }
.tdch-table .r { text-align: right; white-space: nowrap; }
.tdch-t-rank { font-size: 12px; color: var(--td-ink-3, #6E6A62); }
.tdch .tdch-t-name { display: flex; flex-direction: column; min-width: 0; }
.tdch-t-name b { font-weight: 700; }
.tdch-t-name span { font-size: 12px; color: var(--td-ink-2, #5C5C5A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdch-table .is-up { color: var(--td-up, #167C3C); }
.tdch-table .is-down { color: var(--td-down, #B23A3A); }
.tdch-bar { display: flex; align-items: center; gap: 8px; }
.tdch-bar-t { flex: 1; height: 6px; background: rgba(0, 0, 0, 0.06); position: relative; }
.tdch-bar-t span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--td-ink, #1A1A1B); }
.tdch-bar-t span.is-top { background: var(--td-accent, #BE531B); }
.tdch-bar-n { width: 44px; text-align: right; }

.tdch-macro { display: flex; flex-direction: column; border-top: 1px solid var(--td-hair, rgba(0, 0, 0, 0.11)); }
.tdch .tdch-mrow {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) 90px 150px minmax(120px, 1fr);
	column-gap: 16px;
	row-gap: 4px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--td-hair-soft, rgba(0, 0, 0, 0.065));
}
.tdch .tdch-mrow:hover { background: rgba(0, 0, 0, 0.05); color: var(--td-ink, #1A1A1B); }
.tdch-m-l { display: flex; flex-direction: column; }
.tdch-m-l b { font-size: 14px; font-weight: 600; }
.tdch-m-l span { font-size: 12px; color: var(--td-ink-3, #6E6A62); }
.tdch-m-v { font-size: 21px; font-weight: 700; text-align: right; }
.tdch-spark { display: block; width: 150px; height: 34px; overflow: visible; }
.tdch-m-c { font-size: 13px; color: var(--td-ink-2, #5C5C5A); }
.tdch .tdch-m-all { font-size: 14px; color: var(--td-ink-2, #5C5C5A); padding-top: 12px; }

.tdch-news { display: flex; flex-direction: column; border-top: 1px solid var(--td-hair, rgba(0, 0, 0, 0.11)); }
.tdch .tdch-nrow {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) 92px;
	column-gap: 16px;
	row-gap: 4px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--td-hair-soft, rgba(0, 0, 0, 0.065));
}
.tdch-n-c,
.tdch-n-d { font-size: 12px; color: var(--td-ink-3, #6E6A62); }
.tdch-n-d { text-align: right; white-space: nowrap; }
.tdch-n-t { font-size: 16px; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.tdch .tdch-nrow:hover .tdch-n-t { color: var(--td-accent, #BE531B); }
/* Politicians, contracts (28 Oct): one line per member or company, a door into its page. */
.tdch-recs { display: flex; flex-direction: column; border-top: 1px solid var(--td-hair, rgba(0, 0, 0, 0.11)); }
.tdch .tdch-rrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, max-content) 92px;
	column-gap: 16px;
	row-gap: 2px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--td-hair-soft, rgba(0, 0, 0, 0.065));
}
.tdch-r-t { display: flex; flex-direction: column; min-width: 0; }
.tdch-r-t b { font-size: 15px; font-weight: 600; }
.tdch-r-t span { font-size: 12px; color: var(--td-ink-3, #6E6A62); line-height: 1.45; }
.tdch-r-v { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--td-ink-2, #5C5C5A); }
.tdch-r-d { font-size: 12px; text-align: right; white-space: nowrap; color: var(--td-ink-3, #6E6A62); }
.tdch .tdch-rrow:hover b { color: var(--td-accent, #BE531B); }
/* The directory: every door the market has, label and what it holds. */
.tdch-dir { display: flex; flex-direction: column; border-top: 1px solid var(--td-hair, rgba(0, 0, 0, 0.11)); }
.tdch .tdch-drow {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	column-gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--td-hair-soft, rgba(0, 0, 0, 0.065));
}
.tdch-drow b { font-size: 15px; font-weight: 600; }
.tdch-drow span { font-size: 14px; color: var(--td-ink-2, #5C5C5A); }
.tdch .tdch-drow:hover b { color: var(--td-accent, #BE531B); }
.tdch-missing { font-size: 13px; color: var(--td-ink-2, #5C5C5A); line-height: 1.6; }
.tdch-panel .td-refs { margin: 0; }

/* Narrow: the rail drops under the globe, the panel under it too. */
.tdch.is-narrow .tdch-rail { margin-left: 0; padding-left: 0; border-left: 0; max-width: 100%; padding-top: 0; min-height: 0; }
.tdch.is-narrow .tdch-row { row-gap: 0; }

/* Phone */
.tdch.is-phone { padding: 24px 20px 72px; gap: 22px; }
.tdch.is-phone .tdch-h { font-size: 36px; }
.tdch.is-phone .tdch-facts { margin-top: 20px; }
.tdch.is-phone .tdch-figs { gap: 28px; }
.tdch.is-phone .tdch-fig-v { font-size: 28px; }
.tdch.is-phone .tdch-clock { gap: 20px; }
.tdch.is-phone .tdch-stage { row-gap: 28px; }
.tdch.is-phone .tdch-rail { order: -1; }
.tdch.is-phone .tdch-find input { font-size: 20px; }
.tdch.is-phone .tdch-drop { margin: 0; }
.tdch.is-phone .tdch-panel { padding-left: 18px; gap: 40px; }
.tdch.is-phone .tdch-p-title .tdch-p-name { font-size: 32px; }
.tdch.is-phone .tdch-p-figs { column-gap: 28px; }
.tdch.is-phone .tdch-sec::before { left: -18px; width: 12px; }
.tdch.is-phone .tdch-mrow { grid-template-columns: minmax(0, 1fr) auto; }
.tdch.is-phone .tdch-spark { width: 100%; grid-column: 1 / -1; }
.tdch.is-phone .tdch-m-c { grid-column: 1 / -1; }
.tdch.is-phone .tdch-nrow { grid-template-columns: minmax(0, 1fr) auto; }
.tdch.is-phone .tdch-n-t { grid-column: 1 / -1; grid-row: 2; }
.tdch.is-phone .tdch-rrow { grid-template-columns: minmax(0, 1fr) auto; }
.tdch.is-phone .tdch-r-t { grid-column: 1 / -1; }
.tdch.is-phone .tdch-r-v { text-align: left; }
.tdch.is-phone .tdch-drow { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }

/* Before the script measures: the same breakpoints by viewport. */
/* A market's own page (/countries/<code>/) arrives selected: the globe's size and place as layout() sets them. */
.tdch.has-sel .tdch-sphere { height: 420px; }
@media (max-width: 1100px) {
	.tdch.has-sel .tdch-sphere { height: 360px; }
	.tdch.has-sel:not(.is-narrow) .tdch-globe { flex-basis: 100%; width: 100%; position: static; }
}
@media (max-width: 600px) {
	.tdch.has-sel .tdch-sphere { height: 300px; }
	.tdch.has-sel .tdch-p-title .tdch-p-name { font-size: 32px; }
}
@media (max-width: 600px) {
	.tdch { padding: 24px 20px 72px; gap: 22px; }
	.tdch-h { font-size: 36px; }
	.tdch-fig-v { font-size: 28px; }
	.tdch-sphere { height: 340px; }
	.tdch-rail { order: -1; }
}
@media (max-width: 1100px) {
	.tdch-rail { margin-left: 0; padding-left: 0; border-left: 0; max-width: 100%; padding-top: 0; min-height: 0; }
}

/* The sections inside the panel are the site's section table (td_country_sections_html(), 28 Oct
   2026); the panel's own link colours must not repaint its buttons or its spacing. */
.tdch a.td-btn:hover { color: var(--td-ink, #1A1A1B); }
.tdch .tdch-sec > .td-sec { margin: 0; }