/*
 * The cookie banner (cili/consent/banner.php; ADR-0053): a panel fixed at the foot of the screen, shown by
 * cili/consent/consent.js while the visitor's choice is not stored and again from "Cookie settings".
 *
 * Grayscale only (ADR-0018, Q48): every value is a design token (design-tokens.css, design-tokens-dark.css), which
 * ./scripts/verify.sh checks, so the dark mode (ADR-0045) follows the tokens with no rule of its own. The panel is inverted
 * so that it stands out (the owner, 2026-10-29): the ink panel with the on-ink text and buttons, black with white buttons
 * in the light mode and, through the same tokens, light with dark buttons in the dark mode. Inside it the focus ring takes
 * the on-ink colour, since the ink ring would vanish on the ink panel. Accept and Refuse are one rule: same size, same
 * outline, same weight, so refusing weighs the same as accepting. The panel sits above the phone's
 * bottom bar (`--lcr-mobile-bar-room`, layout-frame.css; the device's own inset where there is no bar) and above the artwork page's "Send
 * message" bar (z-index 119), under nothing the visitor needs to reach first. The focus ring is the frame's
 * (layout-frame.css, WEB-622). Every rule starts with `html body`, as the other layouts do, so it wins a tie with a vendor
 * rule whatever the order. `[hidden]` keeps the panel out of the page until the script shows it.
 */

html body .lcr-cookie-consent {
	position: fixed;
	right: var(--lcr-web-gutter-phone);
	bottom: calc(var(--lcr-mobile-bar-room, env(safe-area-inset-bottom)) + var(--lcr-web-gutter-phone));
	left: var(--lcr-web-gutter-phone);
	z-index: 121;
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-16);
	box-sizing: border-box;
	max-width: var(--lcr-web-container-text);
	margin: 0 auto;
	padding: var(--lcr-space-16) var(--lcr-space-20);
	border: var(--lcr-size-hairline) solid var(--lcr-color-ink);
	border-radius: var(--lcr-radius-panel);
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
	--lcr-color-focus: var(--lcr-color-on-ink);
}

html body .lcr-cookie-consent[hidden] {
	display: none;
}

html body .lcr-cookie-consent .lcr-cookie-consent__body {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-4);
	min-width: 0;
}

html body .lcr-cookie-consent .lcr-cookie-consent__title {
	display: block;
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	letter-spacing: var(--lcr-type-label-letter-spacing);
	line-height: var(--lcr-type-label-line-height);
}

html body .lcr-cookie-consent .lcr-cookie-consent__text {
	margin: 0;
	font-size: var(--lcr-type-small-font-size);
	font-weight: var(--lcr-type-small-font-weight);
	letter-spacing: var(--lcr-type-small-letter-spacing);
	line-height: var(--lcr-type-small-line-height);
	text-wrap: pretty;
}

html body .lcr-cookie-consent .lcr-cookie-consent__text a {
	color: var(--lcr-color-on-ink);
	font-weight: var(--lcr-font-weight-semibold);
	text-decoration: underline;
}

html body .lcr-cookie-consent .lcr-cookie-consent__actions {
	display: flex;
	gap: var(--lcr-space-12);
}

html body .lcr-cookie-consent .lcr-cookie-consent__button {
	flex: 1 1 0;
	min-height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-20);
	border: var(--lcr-size-hairline) solid var(--lcr-color-on-ink);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-on-ink);
	color: var(--lcr-color-ink);
	font-family: var(--lcr-font-family-sans);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	letter-spacing: var(--lcr-type-label-letter-spacing);
	line-height: var(--lcr-type-label-line-height);
	cursor: pointer;
}

html body .lcr-cookie-consent .lcr-cookie-consent__button:hover {
	background-color: var(--lcr-color-fill);
}

@media (min-width: 768px) {
	html body .lcr-cookie-consent {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		max-width: var(--lcr-web-container-content);
		gap: var(--lcr-space-24);
	}

	html body .lcr-cookie-consent .lcr-cookie-consent__actions {
		flex: 0 0 auto;
	}

	html body .lcr-cookie-consent .lcr-cookie-consent__button {
		flex: 0 0 auto;
		min-width: calc(3 * var(--lcr-size-control));
	}
}

@media (prefers-reduced-motion: no-preference) {
	html body .lcr-cookie-consent .lcr-cookie-consent__button {
		transition: background-color var(--lcr-motion-duration-short) var(--lcr-motion-easing-standard);
	}
}