/*
 * SS Cookie Consent — the notice, the preference panel, the revisit control.
 *
 * Colours come from three custom properties the server sets on the root
 * (--ssc-accent, --ssc-bg, --ssc-ink), so the operator's colours reach every
 * part without a second rule. The notice is hidden until the module decides
 * (no flash for a returning visitor); a <noscript> rule shows it with
 * scripts off. Logical properties throughout, so a right-to-left locale reads
 * correctly from the same file.
 */

.ssc {
	--ssc-accent: #1863dc;
	--ssc-bg: #ffffff;
	--ssc-ink: #333333;
	--ssc-muted: #5f6b7a;
	--ssc-line: #e3e7ec;
	--ssc-radius: 10px;
	--ssc-shadow: 0 8px 28px rgba(16, 24, 40, 0.18), 0 1px 3px rgba(16, 24, 40, 0.08);
	--ssc-space: 20px;
	position: fixed;
	inset-block-end: var(--ssc-space);
	inset-inline-start: var(--ssc-space);
	z-index: 100000;
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ssc-ink);
}

.ssc--bottom-right {
	inset-inline-start: auto;
	inset-inline-end: var(--ssc-space);
}

.ssc--bottom-bar {
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
}

.ssc__notice {
	display: none;
	position: relative;
	box-sizing: border-box;
	width: min(420px, calc(100vw - 2 * var(--ssc-space)));
	max-height: calc(100vh - 2 * var(--ssc-space));
	overflow: auto;
	padding: 22px 22px 18px;
	background: var(--ssc-bg);
	border-radius: var(--ssc-radius);
	box-shadow: var(--ssc-shadow);
	margin: 0;
}

.ssc--bottom-bar .ssc__notice {
	width: 100%;
	max-width: none;
	border-radius: 0;
}

.ssc[data-ss-state="undecided"] .ssc__notice,
.ssc[data-ss-state="open"] .ssc__notice {
	display: block;
}

/* The close control, upper right: closing without choosing keeps the
   visitor undecided (nothing optional runs) and hides the notice for the
   rest of the visit. */
.ssc .ssc__close {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ssc-muted);
	font: inherit;
	font-size: 22px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
}

.ssc .ssc__close:hover {
	background: #eef1f5;
	color: var(--ssc-ink);
}

.ssc .ssc__close:focus-visible {
	outline: 3px solid var(--ssc-accent);
	outline-offset: 2px;
}

.ssc__title {
	padding-inline-end: 36px;
}

.ssc__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ssc-ink);
}

.ssc__text {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--ssc-ink);
}

.ssc__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 14px;
	font-size: 13px;
}

.ssc__link {
	color: var(--ssc-accent);
	text-decoration: underline;
}

.ssc__btn {
	display: inline-block;
	box-sizing: border-box;
	min-height: 40px;
	padding: 9px 16px;
	border: 2px solid var(--ssc-accent);
	border-radius: 6px;
	background: transparent;
	color: var(--ssc-accent);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
}

.ssc__btn--solid {
	background: var(--ssc-accent);
	color: #fff;
}

.ssc__btn:hover {
	filter: brightness(0.92);
}

.ssc__btn:focus-visible,
.ssc__link:focus-visible,
.ssc .ssc__switch input[type="checkbox"]:focus-visible,
.ssc__revisit:focus-visible {
	outline: 3px solid var(--ssc-accent);
	outline-offset: 2px;
}

.ssc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 12px;
}

.ssc__actions .ssc__btn {
	flex: 1 1 auto;
}

/* The preference panel: a <details>, so it opens with scripts off. */
.ssc__prefs {
	margin: 0;
}

.ssc__summary {
	list-style: none;
	width: 100%;
}

.ssc__summary::-webkit-details-marker {
	display: none;
}

.ssc__prefs[open] .ssc__summary {
	margin-block-end: 12px;
}

.ssc__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--ssc-line);
}

.ssc__cat {
	padding: 10px 0;
	border-block-end: 1px solid var(--ssc-line);
}

.ssc__cat-head {
	display: flex;
	align-items: center;
}

.ssc__switch {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
}

/* `.ssc` and the type selector on purpose (1.0.1): the theme's own
   `input[type="checkbox"] { width: auto; height: auto }` ties a plain
   `.ssc__switch input` on specificity and prints later, so it won and an
   appearance-less box with auto size drew nothing (measured on
   sciencesafety.com, 2026-09-29). These outrank it wherever they print. */
.ssc .ssc__switch input[type="checkbox"] {
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 38px;
	height: 22px;
	margin: 0;
	border-radius: 999px;
	border: 0;
	background: #c3c9d2;
	position: relative;
	cursor: pointer;
	transition: background 0.15s;
}

.ssc .ssc__switch input[type="checkbox"]::after {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s;
}

.ssc .ssc__switch input[type="checkbox"]:checked {
	background: var(--ssc-accent);
}

.ssc .ssc__switch input[type="checkbox"]:checked::after {
	transform: translateX(16px);
}

[dir="rtl"] .ssc .ssc__switch input[type="checkbox"]:checked::after {
	transform: translateX(-16px);
}

.ssc .ssc__switch input[type="checkbox"]:disabled {
	cursor: default;
	opacity: 0.7;
}

.ssc__always {
	font-size: 12px;
	font-weight: 500;
	color: var(--ssc-muted);
}

.ssc__cat-desc {
	margin: 6px 0 0 48px;
	font-size: 13px;
	color: var(--ssc-muted);
}

.ssc__gpc {
	margin: 10px 0 0;
	padding: 8px 10px;
	border-radius: 6px;
	background: #f3f6fa;
	font-size: 13px;
	color: var(--ssc-ink);
}

.ssc__save {
	margin: 12px 0 0;
}

.ssc__save .ssc__btn {
	width: 100%;
}

.ssc__status {
	margin: 8px 0 0;
	min-height: 0;
	font-size: 13px;
	color: var(--ssc-muted);
}

.ssc__status:empty {
	display: none;
}

/* The round cookie icon that reopens the notice: the size, colour, corner
   distance and hover tooltip Cookie Law Info's had on this site (45 px,
   #0056a7, 15 px from the corner, a grey label to the right on hover),
   measured from its shipped template on 2026-09-29. `.ssc` in front so the
   theme's button rules do not outrank these. */
.ssc .ssc__revisit {
	position: fixed;
	inset-block-end: 15px;
	inset-inline-start: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ssc-revisit, #0056a7);
	color: #fff;
	cursor: pointer;
}

.ssc--bottom-right .ssc__revisit {
	inset-inline-start: auto;
	inset-inline-end: 15px;
}

.ssc .ssc__revisit:hover::before {
	content: attr(data-tooltip);
	position: absolute;
	inset-inline-start: calc(100% + 7px);
	background: #4e4b66;
	color: #fff;
	font-size: 12px;
	line-height: 16px;
	width: max-content;
	padding: 4px 8px;
	border-radius: 4px;
}

.ssc--bottom-right .ssc__revisit:hover::before {
	inset-inline-start: auto;
	inset-inline-end: calc(100% + 7px);
}

.ssc .ssc__revisit[hidden] {
	display: none;
}

.ssc .ssc__cookie {
	display: block;
	width: 30px;
	height: 30px;
	max-width: none;
	margin: 0;
}

/* Text for a screen reader only. */
.ssc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 480px) {
	.ssc {
		--ssc-space: 10px;
	}

	.ssc__notice {
		padding: 18px 16px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssc .ssc__switch input[type="checkbox"],
	.ssc .ssc__switch input[type="checkbox"]::after {
		transition: none;
	}
}

@media print {
	.ssc {
		display: none;
	}
}

/* The cookies under a category: a closed list naming the count (1.1.0). */
.ssc__cookies {
	margin: 6px 0 0 48px;
	font-size: 12.5px;
	color: var(--ssc-muted);
}

.ssc__cookies-summary {
	cursor: pointer;
	color: var(--ssc-accent);
	text-decoration: underline;
	list-style: none;
}

.ssc__cookies-summary::-webkit-details-marker {
	display: none;
}

.ssc__cookies-summary:focus-visible {
	outline: 3px solid var(--ssc-accent);
	outline-offset: 2px;
}

.ssc__cookie-list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.ssc__cookie-list li {
	padding: 4px 0;
	border-block-start: 1px solid var(--ssc-line);
}

.ssc .ssc__cookie-name {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--ssc-ink);
	background: #f3f6fa;
	padding: 1px 4px;
	border-radius: 3px;
}

.ssc__cookie-meta {
	font-size: 12px;
	color: var(--ssc-muted);
}

.ssc__cookie-desc {
	display: block;
	margin-block-start: 2px;
}

/* The "Do not sell or share" section: one sentence, one box, one button. */
.ssc__optout {
	margin: 12px 0 0;
	padding-block-start: 10px;
	border-block-start: 1px solid var(--ssc-line);
}

.ssc__optout-summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--ssc-accent);
	text-decoration: underline;
	list-style: none;
}

.ssc__optout-summary::-webkit-details-marker {
	display: none;
}

.ssc__optout-summary:focus-visible {
	outline: 3px solid var(--ssc-accent);
	outline-offset: 2px;
}

.ssc__optout-text {
	margin: 8px 0 10px;
	font-size: 13px;
	color: var(--ssc-ink);
}

.ssc__optbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* `.ssc` and the type selector for the same reason as the switches: the
   theme sizes checkboxes itself. */
.ssc .ssc__optbox input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: auto;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--ssc-accent);
	cursor: pointer;
}

.ssc .ssc__optbox input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--ssc-accent);
	outline-offset: 2px;
}

.ssc .ssc__optbox input[type="checkbox"]:disabled {
	cursor: default;
	opacity: 0.7;
}

/* An embed the early blocker is holding: the placeholder in its place
   (Blocker::placeholder and head.js print the same markup). Outside the
   notice's root, so the colours are the plugin's defaults. */
.ssc-embed {
	box-sizing: border-box;
	margin: 8px 0;
	padding: 22px 16px;
	border: 1px dashed #c3c9d2;
	border-radius: 8px;
	background: #f3f6fa;
	color: #333;
	font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: center;
}

.ssc-embed__text {
	margin: 0 0 10px;
}

.ssc-embed .ssc-embed__btn {
	display: inline-block;
	box-sizing: border-box;
	min-height: 40px;
	padding: 9px 16px;
	border: 2px solid #1863dc;
	border-radius: 6px;
	background: #1863dc;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.ssc-embed .ssc-embed__btn:focus-visible {
	outline: 3px solid #1863dc;
	outline-offset: 2px;
}