/* ==================================================================
   Nothing Legal

   Reads the theme's custom properties where they exist and falls back
   to neutral values everywhere else, so the notice looks at home in
   the notebook theme without being tied to it.
   ================================================================== */

.nop-cookie,
.nop-legal,
.nop-legal-footer {
	--nl-paper: var(--paper, #ffffff);
	--nl-ink: var(--ink, #1a1a1a);
	--nl-soft: var(--ink-soft, #55554d);
	--nl-red: var(--margin-red, #c0392b);
	--nl-hand: var(--hand, inherit);
	--nl-neat: var(--neat, inherit);
	--nl-type: var(--type, ui-monospace, monospace);
	--nl-sketch: var(--sketch, 6px);
}

/* ---------- The notice ---------- */

.nop-cookie {
	position: fixed;
	z-index: 9998;
	right: 12px;
	bottom: 12px;
	left: 12px;
	padding: 18px 20px;
	border: 2.5px solid var(--nl-ink);
	border-radius: var(--nl-sketch);
	background: var(--nl-paper);
	color: var(--nl-ink);
	font-family: var(--nl-neat);
	box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.22);
}

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

.nop-cookie-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 26px;
	max-width: 1140px;
	margin: 0 auto;
}

.nop-cookie-text {
	flex: 1 1 420px;
	min-width: 0;
}

.nop-cookie-text p {
	margin: 0 0 6px;
	font-size: 0.98rem;
	line-height: 1.5;
}

.nop-cookie-title {
	font-family: var(--nl-hand);
	font-size: 1.4rem;
	line-height: 1.15;
}

.nop-cookie-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 0.9rem;
}

.nop-cookie-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/*
 * Both buttons are identical on purpose. Making "Accept" louder than
 * "Essentials only" is the single most common way a cookie banner stops
 * being valid consent, so the styling is shared rather than duplicated.
 */
.nop-cookie-button {
	flex: 1 1 auto;
	min-width: 170px;
	padding: 12px 22px;
	border: 2.5px solid var(--nl-ink);
	border-radius: var(--nl-sketch);
	background: var(--nl-paper);
	color: var(--nl-ink);
	font-family: var(--nl-hand);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.nop-cookie-button:hover,
.nop-cookie-button:focus-visible {
	background: var(--marker, #ffe45e);
}

/* ---------- Footer links ---------- */

.nop-legal-footer {
	width: min(100% - 24px, 1140px);
	margin: 0 auto;
	padding: 0 8px 26px;
}

.nop-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-family: var(--nl-neat);
	font-size: 0.9rem;
}

.nop-legal-links a,
.nop-legal-link-button {
	color: var(--nl-soft);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nop-legal-link-button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.nop-legal-links a:hover,
.nop-legal-link-button:hover {
	color: var(--nl-red);
}

/* ---------- The documents ---------- */

.nop-legal {
	max-width: 74ch;
	font-family: var(--nl-neat);
}

.nop-legal h2 {
	margin: 1.6em 0 0.4em;
	font-family: var(--nl-hand);
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	line-height: 1.1;
}

.nop-legal h3 {
	margin: 1.2em 0 0.3em;
	font-family: var(--nl-hand);
	font-size: clamp(1.3rem, 2.6vw, 1.6rem);
	line-height: 1.15;
}

.nop-legal p,
.nop-legal li {
	line-height: 1.6;
}

.nop-legal ul {
	padding-left: 1.2em;
}

.nop-legal li {
	margin-bottom: 0.4em;
}

.nop-legal-updated {
	font-family: var(--nl-type);
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nl-red);
}

/* Anything still unfilled is impossible to miss. */
.nop-legal-todo {
	padding: 1px 6px;
	background: #ffe066;
	color: #6b4a00;
	font-family: var(--nl-type);
	font-size: 0.9em;
}

.nop-legal-table {
	width: 100%;
	margin: 1em 0 1.6em;
	border-collapse: collapse;
	font-size: 0.94rem;
}

.nop-legal-table th,
.nop-legal-table td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.18);
	text-align: left;
	vertical-align: top;
}

.nop-legal-table thead th {
	border-bottom-width: 2px;
	font-family: var(--nl-type);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nop-legal-table code {
	font-family: var(--nl-type);
	font-size: 0.86em;
	word-break: break-word;
}

.nop-legal-details th {
	width: 200px;
	font-family: var(--nl-type);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nl-soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
	.nop-cookie {
		right: 8px;
		bottom: 8px;
		left: 8px;
		padding: 16px;
		max-height: 80vh;
		overflow-y: auto;
	}

	.nop-cookie-actions {
		width: 100%;
	}

	.nop-cookie-button {
		flex: 1 1 100%;
	}

	.nop-legal-details th {
		width: auto;
	}

	.nop-legal-table,
	.nop-legal-table tbody,
	.nop-legal-table tr,
	.nop-legal-table td,
	.nop-legal-table th {
		display: block;
	}

	.nop-legal-table thead {
		display: none;
	}

	.nop-legal-table tr {
		margin-bottom: 14px;
		border-bottom: 2px solid rgba(0, 0, 0, 0.2);
	}

	.nop-legal-table td,
	.nop-legal-table th {
		border-bottom: 0;
		padding: 4px 0;
	}
}

@media print {
	.nop-cookie,
	.nop-legal-footer {
		display: none !important;
	}
}