/**
 * Consent banner and dialog.
 *
 * Every colour is a custom property so the admin's colour fields can set them
 * from a style element in the head without this file knowing anything about a
 * particular site. Defaults here are what a site gets before it chooses.
 */

:root {
	--tbc-bg: #fff;
	--tbc-fg: #1a1a1a;
	--tbc-muted: #5c5c5c;
	--tbc-border: #d8d8d8;
	--tbc-accent: #1a1a1a;
	--tbc-accent-fg: #fff;
	--tbc-surface: #f5f5f5;
	--tbc-overlay: rgba(0, 0, 0, 0.45);
	--tbc-radius: 10px;
	--tbc-font: inherit;
	--tbc-z: 999999;
}

.tbc-banner,
.tbc-modal,
.tbc-reopen,
.tbc-overlay {
	box-sizing: border-box;
	font-family: var(--tbc-font);
}

.tbc-banner *,
.tbc-modal * {
	box-sizing: inherit;
}

/* Layer one. */

.tbc-banner {
	position: fixed;
	z-index: var(--tbc-z);
	inset-inline: 0;
	background: var(--tbc-bg);
	color: var(--tbc-fg);
	border-top: 1px solid var(--tbc-border);
	box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.12);
	padding: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tbc-banner--bottom {
	bottom: 0;
}

.tbc-banner--top {
	top: 0;
	bottom: auto;
	border-top: 0;
	border-bottom: 1px solid var(--tbc-border);
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.12);
}

.tbc-banner--box {
	inset-inline: auto;
	max-width: 26rem;
	border: 1px solid var(--tbc-border);
	border-radius: var(--tbc-radius);
	margin: 1rem;
}

/* A box with no side named is centred, rather than landing wherever the
   writing direction happens to start. */
.tbc-banner--box.tbc-banner--bottom,
.tbc-banner--box.tbc-banner--top {
	inset-inline: 0;
	margin-inline: auto;
}

.tbc-banner--box.tbc-banner--bottom-left {
	bottom: 0;
	inset-inline-start: 0;
}

.tbc-banner--box.tbc-banner--bottom-right {
	bottom: 0;
	inset-inline-end: 0;
}

.tbc-banner__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	max-width: 76rem;
	margin: 0 auto;
}

.tbc-banner--box .tbc-banner__inner {
	display: block;
}

.tbc-banner__content {
	flex: 1 1 22rem;
	min-width: 0;
}

.tbc-banner__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.tbc-banner__body {
	margin: 0;
	color: var(--tbc-muted);
}

.tbc-banner__body a,
.tbc-modal__links a {
	color: inherit;
}

.tbc-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.tbc-banner--box .tbc-banner__actions {
	margin-top: 1rem;
}

/*
 * Accept, reject, and settings are one class with no variants on purpose. A
 * quieter reject button is the dark pattern regulators actually fine for, so
 * there is no styling hook here that would make it easy to build one by
 * accident.
 */
.tbc-button {
	appearance: none;
	flex: 1 1 auto;
	min-width: 9rem;
	padding: 0.6875rem 1.125rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--tbc-accent-fg);
	background: var(--tbc-accent);
	border: 1px solid var(--tbc-accent);
	border-radius: var(--tbc-radius);
	cursor: pointer;
}

.tbc-button:hover {
	opacity: 0.9;
}

.tbc-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--tbc-z) - 1);
	background: var(--tbc-overlay);
}

/* Layer two. */

.tbc-modal {
	position: fixed;
	inset: 0;
	z-index: calc(var(--tbc-z) + 1);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.tbc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--tbc-overlay);
}

.tbc-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(42rem, 100%);
	max-height: min(90vh, 48rem);
	background: var(--tbc-bg);
	color: var(--tbc-fg);
	border-radius: var(--tbc-radius);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tbc-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.25rem 0.75rem;
	border-bottom: 1px solid var(--tbc-border);
}

.tbc-modal__title {
	margin: 0;
	font-size: 1.125rem;
}

.tbc-modal__close {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
}

.tbc-modal__body {
	overflow-y: auto;
	padding: 1rem 1.25rem;
}

.tbc-modal__intro,
.tbc-modal__links {
	color: var(--tbc-muted);
	margin: 0 0 1rem;
}

.tbc-modal__receipt {
	margin: 0.5rem 0 0;
	color: var(--tbc-muted);
	font-size: 0.8125rem;
}

.tbc-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tbc-category {
	padding: 1rem 0;
	border-top: 1px solid var(--tbc-border);
}

.tbc-category:first-child {
	border-top: 0;
	padding-top: 0;
}

.tbc-category__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.tbc-category__name {
	font-weight: 600;
}

.tbc-category__locked {
	color: var(--tbc-muted);
	font-size: 0.8125rem;
}

.tbc-category__description,
.tbc-category__empty {
	margin: 0.35rem 0 0;
	color: var(--tbc-muted);
}

.tbc-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	cursor: pointer;
}

.tbc-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.tbc-switch__track {
	position: relative;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 1.5rem;
	background: var(--tbc-surface);
	border: 1px solid var(--tbc-border);
	border-radius: 999px;
	transition: background 120ms ease-in-out;
}

.tbc-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	inset-inline-start: 2px;
	width: 1.125rem;
	height: 1.125rem;
	background: var(--tbc-bg);
	border: 1px solid var(--tbc-border);
	border-radius: 50%;
	transition: transform 120ms ease-in-out;
}

.tbc-switch__input:checked + .tbc-switch__track {
	background: var(--tbc-accent);
	border-color: var(--tbc-accent);
}

.tbc-switch__input:checked + .tbc-switch__track::after {
	transform: translateX(1.25rem);
}

.tbc-switch__input:focus-visible + .tbc-switch__track {
	outline: 3px solid var(--tbc-accent);
	outline-offset: 2px;
}

.tbc-details__toggle {
	appearance: none;
	margin-top: 0.5rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
	cursor: pointer;
}

.tbc-details {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background: var(--tbc-surface);
	border-radius: var(--tbc-radius);
}

.tbc-service + .tbc-service {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tbc-border);
}

.tbc-service__name {
	margin: 0;
	font-size: 0.9375rem;
}

.tbc-service__description,
.tbc-service__entity,
.tbc-service__empty {
	margin: 0.25rem 0 0;
	color: var(--tbc-muted);
	font-size: 0.8125rem;
}

.tbc-cookies {
	width: 100%;
	margin-top: 0.5rem;
	border-collapse: collapse;
	font-size: 0.8125rem;
}

.tbc-cookies th,
.tbc-cookies td {
	padding: 0.375rem 0.5rem;
	text-align: start;
	vertical-align: top;
	border-bottom: 1px solid var(--tbc-border);
}

.tbc-cookies code {
	font-size: 0.75rem;
	word-break: break-all;
}

.tbc-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--tbc-border);
}

/* Reopening. */

.tbc-reopen {
	position: fixed;
	bottom: 1rem;
	inset-inline-start: 1rem;
	z-index: calc(var(--tbc-z) - 2);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	font: inherit;
	font-size: 0.8125rem;
	color: var(--tbc-fg);
	background: var(--tbc-bg);
	border: 1px solid var(--tbc-border);
	border-radius: 999px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
	cursor: pointer;
}

.tbc-reopen__icon {
	display: inline-flex;

	/* Never squashed by a long label beside it: a stretched cookie reads as a
	   rendering fault rather than as an icon. */
	flex: 0 0 auto;
}

/*
 * Declared after every control it applies to, so the visible focus ring wins
 * on specificity rather than depending on source order somewhere else.
 */
.tbc-banner :focus-visible,
.tbc-modal :focus-visible,
.tbc-reopen:focus-visible {
	outline: 3px solid var(--tbc-accent);
	outline-offset: 2px;
}

/* Blocked embeds. */

.tbc-embed {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.25rem;
	background: var(--tbc-surface);
	border: 1px dashed var(--tbc-border);
	border-radius: var(--tbc-radius);
	color: var(--tbc-fg);
	font-size: 0.875rem;
}

.tbc-embed__title {
	margin: 0;
	font-size: 1rem;
}

.tbc-embed__body {
	margin: 0;
	color: var(--tbc-muted);
}

.tbc-embed__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.tbc-embed .tbc-button {
	min-width: 0;
}

/*
 * Headings, said out loud rather than inherited.
 *
 * A theme colours h1–h6 directly, and a colour set on the element beats the one
 * inherited from the surface around it — so a banner heading stayed in the
 * theme's colour while everything around it followed the site's chosen text
 * colour. Scoped by the surface, and declared after the rules that size these
 * headings, so it also outranks the `:root :where(h1, h2, …)` a block theme
 * prints — which a single class would only tie with.
 */

.tbc-banner .tbc-banner__title,
.tbc-modal .tbc-modal__title,
.tbc-modal .tbc-service__name,
.tbc-embed .tbc-embed__title {
	color: inherit;
}

/*
 * The banner and dialog are hidden until the runtime decides otherwise, and
 * they stay hidden against a theme that gives every div a display of its own.
 *
 * Scoped to this plugin's own elements because the settings screen loads this
 * stylesheet too, to show a live preview — and a global !important rule there
 * would reach controls that have nothing to do with consent.
 */

.tbc[hidden],
.tbc [hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {

	.tbc-switch__track,
	.tbc-switch__track::after {
		transition: none;
	}
}

@media (max-width: 40rem) {

	.tbc-banner__actions,
	.tbc-modal__actions {
		flex-direction: column;
	}

	.tbc-button {
		width: 100%;
	}

	/*
	 * With the label gone there is only the icon left, and padding meant for a
	 * label beside it leaves a 48 by 40 pill. Sized instead of padded, so what
	 * is left is a circle.
	 */
	.tbc-reopen {
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		justify-content: center;
	}

	.tbc-reopen__label {
		display: none;
	}
}