/*
 * The policy dialog.
 *
 * A native <dialog>, so the backdrop is ::backdrop and the open state is the [open] attribute
 * rather than a class this file has to invent.
 */

.policy {
	/* Centred explicitly. The UA centres a dialog with margin:auto on a block box, and the flex
	   display the open state needs is enough to lose it in some engines. */
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(46rem, calc(100vw - var(--space-4)));
	max-height: min(80vh, 50rem);
	padding: 0;
	background-color: var(--bnk-white);
	border: 0;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	color: var(--color-text);

	/* The card is white while the page is cream, the same reset the survey card makes. */
	--color-bg: var(--bnk-white);
	--color-bg-quiet: var(--bnk-cream);
}

.policy::backdrop {
	background-color: rgb(var(--bnk-green-rgb) / 0.55);
}

.policy[open] {
	display: flex;
	flex-direction: column;
}

.policy__inner {
	display: flex;
	flex-direction: column;
	min-height: 0;   /* lets the body scroll instead of the whole dialog growing */
}

/* -- Head ---------------------------------------------------------------- */

/*
 * Sticky rather than scrolling away with the text. A legal document is long enough that the way
 * out should not depend on scrolling back to the top to find it.
 */
.policy__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
	flex: none;
	padding: var(--space-4) var(--space-4) var(--space-2);
	background-color: var(--bnk-white);
	border-block-end: var(--border-hairline) solid var(--color-border);
}

.policy__title {
	margin: 0;
	color: var(--color-heading);
	font-size: var(--font-6);
	font-weight: var(--weight-heading);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-display);
}

.policy__close {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--tap-min);
	height: var(--tap-min);
	margin: calc(var(--space-1) * -1) calc(var(--space-15) * -1) 0 0;
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	transition:
		background-color var(--duration) var(--ease),
		color var(--duration) var(--ease);
}

.policy__close:hover,
.policy__close:focus-visible {
	background-color: var(--color-bg-quiet);
	color: var(--color-heading);
}

.policy__close-icon {
	width: var(--icon-md);
	height: var(--icon-md);
}

/* -- Body ---------------------------------------------------------------- */

.policy__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;   /* stops the scroll chaining to the page at either end */
	padding: var(--space-3) var(--space-4) var(--space-4);
}

.policy__body:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: calc(var(--focus-width) * -1);
}

.policy__status {
	margin: 0;
	color: var(--color-text-muted);
}

/* The cookie policy's tables are wider than a phone. They scroll on their own rather than making
   the dialog scroll sideways. */
.policy__body table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/* -- Narrow -------------------------------------------------------------- */

@media (max-width: 34rem) {
	.policy {
		width: 100vw;
		max-width: none;
		max-height: 100dvh;
		height: 100dvh;
		margin: 0;
		border-radius: 0;
	}

	.policy__head {
		padding: var(--space-3) var(--space-3) var(--space-2);
	}

	.policy__body {
		padding: var(--space-2) var(--space-3) var(--space-4);
	}
}

/* -- The page behind ------------------------------------------------------ */

.has-policy-open,
.has-policy-open body {
	overflow: hidden;
}