/*
 * The cookie note: "Hmmmmm, cookies…" (Ollie, 12 Oct; inc/cookie-note.php).
 *
 * A notice, not a consent form: one button, "Understood", and a quiet link
 * to the cookie page once it exists. A small Snow card, bottom-left, on a
 * laptop; on a phone a sheet as wide as the tab bar, standing clear of the
 * bar and of the Book disc that rises out of it, and taking the bar's place
 * while the bar is tucked away. Palette tokens only, no colour of its own;
 * the motion tokens only (the 6 Oct motion law).
 *
 * Loaded from the footer, after the page's own stylesheets, so a filled
 * button here is the site's .bpc-btn a size down. Hidden until
 * assets/js/cookie-note.js shows it.
 */

.bpc-cookie-note[hidden] {
	display: none;
}

.bpc-cookie-note {
	--bpc-cookie-gap: 1.5rem;

	position: fixed;
	inset-inline-start: var(--bpc-cookie-gap);
	inset-block-end: var(--bpc-cookie-gap);
	z-index: 80;
	box-sizing: border-box;
	width: min(23rem, calc(100vw - 2 * var(--bpc-cookie-gap)));
	padding: 1.125rem 1.25rem 1rem;
	background-color: var(--bpc-card);
	border: var(--bpc-hairline) solid var(--bpc-rule);
	border-radius: var(--bpc-radius-control); /* 8px on the site; the portal's one small radius there (21 Oct) */
	box-shadow:
		0 0.125rem 0.25rem -0.125rem color-mix(in srgb, var(--bpc-shadow) 10%, transparent),
		0 1rem 2rem -1rem color-mix(in srgb, var(--bpc-shadow) 22%, transparent);
	color: var(--bpc-type);
	font-family: var(--bpc-font-sans);

	/* Never taller than the screen: what does not fit scrolls inside it (WCAG 1.4.10). */
	max-block-size: calc(100dvh - 2 * var(--bpc-cookie-gap));
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Arriving: it rises the one distance and fades in, quick then settling. */
	opacity: 0;
	transform: translateY(var(--bpc-rise));
	transition:
		opacity var(--bpc-dur-slow) var(--bpc-ease-out),
		transform var(--bpc-dur-slow) var(--bpc-ease-out),
		visibility 0s,
		inset-block-end var(--bpc-dur-slow) var(--bpc-ease-out);
}

.bpc-cookie-note.is-in {
	opacity: 1;
	transform: none;
}

/* Leaving: quicker than it came, on the leaving curve, and it does not travel. */
.bpc-cookie-note.is-out {
	opacity: 0;
	pointer-events: none;
	transition-duration: var(--bpc-dur-quick);
	transition-timing-function: var(--bpc-ease);
}

.bpc-cookie-note__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 0.5rem;
}

/*
 * The drawing, in the line of the tab bar's icons. It follows the card in,
 * one quick beat behind, rising from just below where it rests.
 */
.bpc-cookie-note__art {
	flex: none;
	width: 3rem;
	height: 3rem;
	margin-block-start: -0.25rem;
	color: var(--bpc-type);
	opacity: 0;
	transform: translateY(var(--bpc-rise));
	transition:
		opacity var(--bpc-dur-slow) var(--bpc-ease-out) var(--bpc-dur-quick),
		transform var(--bpc-dur-slow) var(--bpc-ease-out) var(--bpc-dur-quick);
}

.bpc-cookie-note.is-in .bpc-cookie-note__art {
	opacity: 1;
	transform: none;
}

/*
 * Display grey, in the display italic, like every headline on the site; a
 * step up from 2rem for presence, as large as fits on one line beside the
 * drawing.
 */
body .bpc-cookie-note .bpc-cookie-note__title {
	margin: 0;
	font-family: var(--bpc-font-display);
	font-size: 2.125rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--bpc-type-display);
}

/* The full stop, made playful: the trailing-off. Black since 20 Oct, as every word is. */
.bpc-cookie-note__dots {
	color: var(--bpc-type);
}

.bpc-cookie-note__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--bpc-type);
}

.bpc-cookie-note__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.25rem;
	margin-block-start: 0.875rem;
}

/* The site's orange pill, a size down: still 44px to tap. */
.bpc-cookie-note .bpc-cookie-note__ok {
	min-height: 2.75rem;
	padding: 0 1.25rem;
	font-size: 0.75rem;
}

/* The quiet link: words and an arrow, no box, like "See our catering". */
.bpc-cookie-note .bpc-cookie-note__more {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bpc-type);
	text-decoration: none;
}

.bpc-cookie-note__more::after {
	content: "\2002\2192" / "";
	transition: transform var(--bpc-dur) var(--bpc-ease);
}

.bpc-cookie-note .bpc-cookie-note__more:hover {
	color: var(--bpc-type-strong);
}

.bpc-cookie-note__more:hover::after {
	transform: translateX(2px);
}

.bpc-cookie-note :focus-visible {
	outline: var(--bpc-hairline) solid var(--bpc-rule-strong);
	outline-offset: 3px;
}

.bpc-cookie-note .bpc-cookie-note__ok:focus-visible {
	border-radius: var(--bpc-radius-button);
}

/*
 * Room at the foot of the page while it is shown (assets/js/cookie-note.js
 * measures it): a keyboard's focus is scrolled clear of the note, never
 * under it (WCAG 2.4.11), and the end of the page scrolls above it. On a
 * phone the room includes the tab bar's, so it takes the bar's place. Not
 * while a form's own bar holds Back and Next: the note waits then.
 */
html.has-cookie-note:not(.bpc-flow-open) {
	scroll-padding-block-end: var(--bpc-cookie-room, 0px);
}

html.has-cookie-note:not(.bpc-flow-open) body {
	padding-block-end: var(--bpc-cookie-room, 0px);
}

/*
 * Stepping aside. While the menu sheet is up it is the thing to act on;
 * while a form's own bar holds Back and Next (flow.js's bpc-flow-open), a
 * notice over the questions would be in the way. The note comes back when
 * they have gone.
 */
html.has-modal-open .bpc-cookie-note.is-in,
body:has(.bpc-nav .is-menu-open) .bpc-cookie-note.is-in,
body.bpc-flow-open .bpc-cookie-note.is-in {
	visibility: hidden;
	opacity: 0;
}

/*
 * Phones: a sheet as wide as the tab bar, a little above the bar and the
 * Book disc that stands proud of it, so neither is ever covered. When the
 * bar tucks away while reading down (app.js), the note settles into its
 * place, on the bar's own timing, and rises again with it.
 */
@media (max-width: 47.99rem) {
	.bpc-cookie-note {
		inset-inline: 0.75rem;
		inset-block-end: calc(var(--bpc-tab-bar) + var(--bpc-tab-lift) + 0.625rem + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-block-size: calc(100dvh - var(--bpc-tab-bar) - var(--bpc-tab-lift) - 1.375rem - env(safe-area-inset-bottom, 0px));
		padding: 0.875rem 1.125rem 0.5rem;
	}

	body:has(.bpc-tabs.is-tucked) .bpc-cookie-note {
		inset-block-end: calc(var(--bpc-tab-gap) + env(safe-area-inset-bottom, 0px));
	}

	/* The portal has no tab bar (plan R1): the note sits at the foot of the screen. */
	body.bpc-field-portal .bpc-cookie-note {
		inset-block-end: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		max-block-size: calc(100dvh - 1.5rem - env(safe-area-inset-bottom, 0px));
	}

	body .bpc-cookie-note .bpc-cookie-note__title {
		font-size: 1.875rem;
	}

	.bpc-cookie-note__actions {
		margin-block-start: 0.625rem;
	}
}

/*
 * A short screen (a 1366x768 laptop's window is 657px tall, an older
 * phone's 667px): the card a size down and as wide, so it stands clear of
 * the page's first buttons. Shorter still, the script has it wait.
 */
@media (max-height: 46rem) {
	.bpc-cookie-note {
		--bpc-cookie-gap: 1rem;
		padding: 0.75rem 1.125rem 0.625rem;
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.bpc-cookie-note__head {
		margin-block-end: 0.25rem;
	}

	.bpc-cookie-note__art {
		width: 2.25rem;
		height: 2.25rem;
		margin: 0;
	}

	body .bpc-cookie-note .bpc-cookie-note__title {
		font-size: 1.625rem;
	}

	.bpc-cookie-note__text {
		font-size: 0.875rem;
	}

	.bpc-cookie-note__actions {
		margin-block-start: 0.5rem;
	}
}

/* Reduced motion: nothing travels. It is simply there, and simply gone. */
@media (prefers-reduced-motion: reduce) {
	.bpc-cookie-note,
	.bpc-cookie-note.is-out,
	.bpc-cookie-note__art,
	.bpc-cookie-note__more::after {
		transform: none;
		transition: none;
	}

	.bpc-cookie-note__more:hover::after {
		transform: none;
	}
}

@media print {
	.bpc-cookie-note {
		display: none;
	}
}