:root{
	--aidtracker-social-accent:#d77a00;
	--aidtracker-social-ink:#242424;
	--aidtracker-social-soft:#f1f1f1;
}

.aidtracker-social-share{
	clear:both;
	margin-top:32px;
	padding-top:24px;
	border-top:1px solid #dedede;
	text-align:center;
}

/*
 * Centring takes two rules, not one. text-align above handles the heading and
 * the status line, but the icon row is a flex container and flex items ignore
 * text-align, so the row needs justify-content as well. The follow widget is
 * deliberately left alone: it sits in the footer sidebar alongside the search
 * box and other left-aligned widgets.
 */
.aidtracker-social-share .aidtracker-social-list{
	justify-content:center;
}

.aidtracker-social-share h4,
.aidtracker-follow-widget h4{
	margin:0 0 12px;
}

.aidtracker-social-list{
	display:flex;
	/* Small, because each 44px touch box already separates the glyphs. */
	gap:2px;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	list-style:none;
}

.aidtracker-social-list li{
	margin:0;
}

/*
 * The buttons carry no resting chrome.
 *
 * The previous treatment put a 20px glyph inside a 44px circle filled #f1f1f1
 * with a #d8d8d8 border. Two greys that close together read as a smudge rather
 * than an edge, the glyph filled under half the circle so it looked marooned,
 * and on the dark footer the equivalent tint was almost invisible. The circles
 * were doing no work.
 *
 * So the mark is the icon itself, larger, in the surrounding text colour. The
 * 44px box stays as an invisible touch target, which keeps the tap area honest
 * on a phone while removing the visual weight. On a site whose substance is
 * charts and figures, a row of quiet glyphs sits better than a row of buttons.
 */
.aidtracker-social-control{
	display:inline-flex;
	width:44px;
	height:44px;
	align-items:center;
	justify-content:center;
	padding:0;
	border:0;
	border-radius:50%;
	background:transparent;
	color:var(--aidtracker-social-ink);
	cursor:pointer;
	transition:color .15s ease,background-color .15s ease,transform .15s ease;
}

/* Affordance arrives on hover rather than sitting there permanently. */
.aidtracker-social-control:hover{
	background:rgba(215,122,0,.12);
	color:var(--aidtracker-social-accent);
	transform:translateY(-2px);
}

.aidtracker-social-control:focus-visible{
	outline:2px solid var(--aidtracker-social-accent);
	outline-offset:2px;
	background:rgba(215,122,0,.12);
	color:var(--aidtracker-social-accent);
}

.aidtracker-social-icon{
	width:22px;
	height:22px;
	fill:currentcolor;
}

.aidtracker-social-status{
	min-height:1.5em;
	margin:6px 0 0;
	font-size:13px;
	line-height:1.5;
}

/*
 * The follow widget is centred to match the share block above it. Both rows
 * read as one pair rather than two differently aligned lists.
 */
.aidtracker-follow-widget{
	text-align:center;
}

.aidtracker-follow-widget .aidtracker-social-list{
	justify-content:center;
}

.footer_top .aidtracker-follow-widget{
	margin-bottom:24px;
}

.footer_top .aidtracker-social-list{
	gap:4px;
}

/*
 * On the dark footer the glyph sits just short of pure white at rest, so it
 * reads as present without competing with the headings, then goes to full
 * strength and accent on hover. No tinted plate: at six per cent white the old
 * one was invisible anyway.
 */
.footer_top .aidtracker-social-control{
	background:transparent;
	color:rgba(255,255,255,.82);
}

.footer_top .aidtracker-social-control:hover,
.footer_top .aidtracker-social-control:focus-visible{
	background:rgba(255,255,255,.1);
	color:#fff;
}

.footer_top .aidtracker-social-control:focus-visible{
	outline-color:#fff;
}

/* Movement is decoration here, so it goes when the reader asks for less. */
@media (prefers-reduced-motion:reduce){
	.aidtracker-social-control{
		transition:none;
	}

	.aidtracker-social-control:hover{
		transform:none;
	}
}

@media print{
	.aidtracker-social-share{
		display:none !important;
	}
}