/* TBN Topic Hub – frontend. Pure CSS, no JavaScript. */
@property --tbn-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes tbnth-spin{to{--tbn-a:360deg}}

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

.tbnth{
	position:relative;isolation:isolate;overflow:hidden;
	max-width:1100px;margin:24px auto;padding:clamp(16px,3.2vw,38px);
	border-radius:28px;color:var(--tt);
	background:
		radial-gradient(60% 45% at 12% 8%,var(--b1),transparent 70%),
		radial-gradient(55% 45% at 90% 95%,var(--b2),transparent 70%),
		linear-gradient(140deg,var(--c1),var(--c2));
	box-shadow:0 24px 50px -24px var(--bsh);
}
.tbnth.tbnth--clear{background:none;box-shadow:none;overflow:visible}

/* ---- liquid glass surface ---- */
.tbnth .g{
	background:linear-gradient(135deg,var(--g1),var(--g2));
	-webkit-backdrop-filter:blur(14px) saturate(160%);
	backdrop-filter:blur(14px) saturate(160%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.6),
		inset 0 -1px 0 rgba(255,255,255,.12),
		0 12px 28px -12px var(--sh);
}

/* ---- gradient border (animated where enabled) ---- */
.tbnth .bd{position:relative}
.tbnth .bd::before{
	content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
	background:conic-gradient(from var(--tbn-a),var(--a1),var(--a2),rgba(255,255,255,.18) 50%,var(--a1));
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
	opacity:.85;
}
.tbnth[data-anim="1"] .tbnth-ttx::before,
.tbnth[data-anim="1"] .tbnth-box::before,
.tbnth[data-anim="1"] .tbnth-img::before,
.tbnth[data-anim="1"] .tbnth-sub span::before{animation:tbnth-spin 8s linear infinite}
.tbnth[data-anim="1"] .tbnth-btn:hover::before,
.tbnth[data-anim="1"] .tbnth-btn:focus-visible::before{animation:tbnth-spin 2.6s linear infinite;opacity:1}

/* ---- quick-link bar: full width, links stretch evenly, each a raised 3-D key ---- */
.tbnth .tbnth-bar{
	display:flex;gap:8px;width:100%;margin:0 0 28px;padding:8px 8px 13px;
	border-radius:20px;overflow-x:auto;overflow-y:hidden;
	scrollbar-width:none;-webkit-overflow-scrolling:touch;
	scroll-snap-type:x proximity;overscroll-behavior-x:contain;
}
.tbnth .tbnth-bar::-webkit-scrollbar{display:none}
.tbnth a.tbnth-lk{
	position:relative;flex:1 0 auto;scroll-snap-align:center;white-space:nowrap;text-align:center;
	padding:12px 22px;border-radius:14px;border:0;
	color:var(--tx);font-weight:700;font-size:14px;letter-spacing:.03em;line-height:1.2;text-decoration:none;
	background:
		linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 50%),
		linear-gradient(160deg,var(--f1),var(--f2));
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.75),
		inset 0 -2px 0 rgba(0,0,0,.14),
		0 3px 0 rgba(0,0,0,.30),
		0 9px 14px -6px var(--sh);
	transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.tbnth a.tbnth-lk:hover{
	color:var(--tx);transform:translateY(-1px);filter:brightness(1.08);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.85),
		inset 0 -2px 0 rgba(0,0,0,.14),
		0 4px 0 rgba(0,0,0,.30),
		0 12px 16px -6px var(--sh);
}
.tbnth a.tbnth-lk:active{
	transform:translateY(3px);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.14),0 0 0 rgba(0,0,0,.3),0 3px 6px -4px var(--sh);
}
.tbnth a.tbnth-lk.is-current{
	color:#0b1b2b;
	background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%),linear-gradient(135deg,var(--a1),var(--a2));
}

/* ---- headings ---- */
.tbnth .tbnth-title{
	/* flex row so the heading plate centres when it fits and scrolls sideways when it does not */
	display:flex;justify-content:flex-start;
	margin:0 0 8px;padding:2px 6px 16px;text-align:center;color:var(--tx);
	font-size:clamp(26px,4.6vw,42px);font-weight:800;line-height:1.15;letter-spacing:-.01em;
	overflow-x:auto;overflow-y:hidden;
	scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.tbnth .tbnth-title::-webkit-scrollbar{display:none}

/* main heading plate: gradient frame + inner keyline + raised 3-D body */
.tbnth .tbnth-ttx{
	position:relative;display:block;flex:0 1 auto;min-width:0;max-width:100%;margin:0 auto;
	padding:.3em 1em .34em;border-radius:20px;
	color:var(--tx);text-shadow:var(--ts);
	background:
		linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,0) 52%),
		linear-gradient(160deg,var(--f1),var(--f2));
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,.75),
		inset 0 -4px 0 rgba(0,0,0,.18),
		0 5px 0 rgba(0,0,0,.30),
		0 18px 26px -10px var(--sh);
}
.tbnth .tbnth-ttx.bd::before{padding:2px;opacity:1}
.tbnth .tbnth-ttx::after{
	content:"";position:absolute;inset:6px;border-radius:14px;pointer-events:none;
	border:1px solid rgba(255,255,255,.30);
}
.tbnth .tbnth-sub{margin:28px 0 16px;padding:0;text-align:center;line-height:1.2;color:var(--tx)}
.tbnth .tbnth-sub span{
	display:inline-block;max-width:100%;padding:12px 36px;border-radius:999px;
	color:var(--tx);font-size:clamp(17px,2.7vw,25px);font-weight:700;
}
.tbnth .tbnth-title + .tbnth-sub{margin-top:0}

/* ---- image (always centred, immune to theme figure/img rules) ---- */
.tbnth .tbnth-imgwrap{display:flex;justify-content:center;width:100%;margin:0 0 22px;text-align:center}
.tbnth .tbnth-img{flex:0 1 var(--w);width:var(--w);max-width:100%;margin:0!important;padding:9px;float:none!important;border-radius:26px}
.tbnth .tbnth-stext{margin:-6px 0 22px;text-align:center;line-height:1.2;color:var(--tx)}
.tbnth .tbnth-stext span{display:inline-block;max-width:100%;padding:8px 24px;border-radius:999px;color:var(--tx);font-size:clamp(15px,2.3vw,20px);font-weight:700}
.tbnth .tbnth-img img{display:block;width:100%;height:auto;margin:0 auto!important;float:none!important;border-radius:18px}

/* ---- button group box ---- */
.tbnth .tbnth-box{
	margin:0 0 10px;padding:clamp(14px,2.4vw,26px);border-radius:24px;
	background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
}
.tbnth .tbnth-cols{column-count:1;column-gap:18px}
.tbnth .tbnth-cols.c2{column-count:2}
.tbnth .tbnth-cols.c3{column-count:3}

/* ---- buttons ---- */
.tbnth a.tbnth-btn{
	display:flex;align-items:center;justify-content:center;
	min-height:52px;margin:0 0 14px;padding:12px 18px;border-radius:15px;
	text-align:center;text-decoration:none;color:var(--tx);
	font-size:clamp(14px,1.7vw,16.5px);font-weight:600;line-height:1.3;
	break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
	background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,0) 55%,rgba(255,255,255,.08)),linear-gradient(160deg,var(--f1),var(--f2));
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.65),
		inset 0 -9px 14px -9px rgba(0,0,0,.18),
		0 8px 18px -10px var(--sh);
	transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.tbnth a.tbnth-btn:hover,
.tbnth a.tbnth-btn:focus-visible{
	color:var(--tx);transform:translateY(-2px);outline:none;
	background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,0) 55%,rgba(255,255,255,.08)),linear-gradient(160deg,var(--f1),var(--f2));
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.8),
		inset 0 -9px 14px -9px rgba(0,0,0,.14),
		0 14px 24px -12px var(--sh);
}
.tbnth a.tbnth-btn:active{transform:translateY(0)}
.tbnth a.tbnth-lk:focus-visible{outline:2px solid var(--a1);outline-offset:1px}

/* ---- long topic names scroll inside the button instead of wrapping ---- */
.tbnth .tbnth-tx{
	display:block;min-width:0;max-width:100%;padding:2px 0;
	overflow-x:auto;overflow-y:hidden;white-space:nowrap;text-align:center;
	scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.tbnth .tbnth-tx::-webkit-scrollbar{display:none}

/* ---- share row ---- */
.tbnth .tbnth-share{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 14px;margin:28px 0 0;padding:14px 18px 17px;border-radius:22px}
.tbnth .tbnth-share-l{margin-right:4px;color:var(--tx);font-size:15px;font-weight:700;letter-spacing:.02em}
.tbnth a.tbnth-sc{
	position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
	color:#fff;text-decoration:none;border:0;
	background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 55%),var(--bc);
	box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.30),0 10px 16px -6px var(--sh);
	transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.tbnth a.tbnth-sc svg{display:block;width:24px;height:24px}
.tbnth a.tbnth-sc:hover,.tbnth a.tbnth-sc:focus-visible{color:#fff;transform:translateY(-2px);filter:brightness(1.08);outline:none}
.tbnth a.tbnth-sc:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 0 0 rgba(0,0,0,.3)}
.tbnth .sc-wa{--bc:#25d366}
.tbnth .sc-tg{--bc:#229ed9}
.tbnth .sc-sc{--bc:#fffc00}
.tbnth .sc-ig{--bc:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.tbnth a.tbnth-sc[data-tip]::after{
	content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
	width:max-content;max-width:70vw;padding:8px 12px;border-radius:10px;
	background:#111;color:#fff;font-size:12.5px;font-weight:600;line-height:1.3;text-align:center;
	box-shadow:0 8px 18px -6px rgba(0,0,0,.5);pointer-events:none;z-index:5;
}

/* ---- subjects ---- */
.tbnth .tbnth-bar--one{width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
.tbnth .tbnth-ct{
	flex:0 0 auto;min-width:28px;margin-left:10px;padding:2px 9px;border-radius:999px;
	background:rgba(0,0,0,.20);color:var(--tx);font-size:12px;font-weight:700;line-height:1.5;text-align:center;
}
.tbnth .tbnth-empty{margin:0 0 12px;padding:16px 20px;border-radius:18px;text-align:center;color:var(--tx);font-weight:600}

/* ---- search box ---- */
.tbnth .tbnth-search{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 22px;padding:10px 10px 14px;border-radius:20px}
.tbnth .tbnth-search input[type="search"]{
	flex:1 1 auto;min-width:0;width:auto;height:48px;margin:0;padding:0 18px;
	border:0;border-radius:14px;outline:none;-webkit-appearance:none;appearance:none;
	background:rgba(255,255,255,.95);color:#12304a;font-size:16px;font-weight:600;line-height:48px;
	box-shadow:inset 0 2px 5px rgba(0,0,0,.20),0 1px 0 rgba(255,255,255,.5);
}
.tbnth .tbnth-search input[type="search"]::placeholder{color:#5b6f84;opacity:1}
.tbnth .tbnth-search input[type="search"]:focus{box-shadow:inset 0 2px 5px rgba(0,0,0,.20),0 0 0 3px var(--a1)}
.tbnth button.tbnth-go{
	flex:0 0 auto;height:48px;margin:0;padding:0 26px;border:0;border-radius:14px;cursor:pointer;
	color:#0b1b2b;font-size:14px;font-weight:700;letter-spacing:.03em;line-height:1;text-transform:none;
	background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%),linear-gradient(135deg,var(--a1),var(--a2));
	box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 rgba(0,0,0,.14),0 3px 0 rgba(0,0,0,.30),0 9px 14px -6px var(--sh);
	transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.tbnth button.tbnth-go:hover{transform:translateY(-1px);filter:brightness(1.08)}
.tbnth button.tbnth-go:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 rgba(0,0,0,.3),0 3px 6px -4px var(--sh)}
.tbnth button.tbnth-go:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
.tbnth .tbnth-empty a{margin-left:10px;color:var(--tx);font-weight:700;text-decoration:underline}
.tbnth .tbnth-of{font-style:normal;font-weight:500;opacity:.75}

/* ---- responsive ---- */
/* desktop only: slightly smaller main heading (phones keep their size) */
@media (min-width:641px){
	.tbnth .tbnth-title{font-size:clamp(24px,3.6vw,33px)}
}
@media (max-width:860px){
	.tbnth .tbnth-cols.c3{column-count:2}
}
@media (max-width:640px){
	.tbnth{margin-top:16px;margin-bottom:16px;padding:12px 6px;border-radius:16px}
	/* break out of the theme's side margins so the hub uses (almost) the full screen */
	.tbnth.tbnth--bleed{width:calc(100vw - 12px);max-width:none;margin-left:calc(50% - 50vw + 6px);margin-right:0}
	.tbnth .tbnth-cols.c2,.tbnth .tbnth-cols.c3{column-count:1}
	.tbnth .tbnth-box{padding:10px 8px;border-radius:16px}
	.tbnth .tbnth-bar{gap:6px;padding:6px 6px 11px;border-radius:16px;margin-bottom:22px}
	.tbnth a.tbnth-lk{padding:11px 16px;font-size:13px;border-radius:12px}
	.tbnth .tbnth-sub span{padding:10px 20px}
	/* long sub-headings stay on one line and scroll sideways instead of wrapping */
	.tbnth .tbnth-sub{display:flex;justify-content:flex-start;margin-bottom:4px;padding:0 4px 12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
	.tbnth .tbnth-sub::-webkit-scrollbar{display:none}
	.tbnth .tbnth-sub span{flex:0 0 auto;max-width:none;margin:0 auto;white-space:nowrap}
	.tbnth .tbnth-title{font-size:20px}
	.tbnth .tbnth-ttx{flex:0 0 auto;max-width:none;white-space:nowrap}
	.tbnth .tbnth-search{gap:8px;padding:8px 8px 12px;border-radius:16px;margin-bottom:22px}
	.tbnth .tbnth-search input[type="search"]{height:44px;line-height:44px;padding:0 14px}
	.tbnth button.tbnth-go{height:44px;padding:0 18px}
	.tbnth .tbnth-share{gap:10px 12px;padding:12px 12px 15px;margin-top:22px}
	.tbnth a.tbnth-sc{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
	.tbnth *,.tbnth *::before{animation:none!important;transition:none!important}
}