/**
 * Nili cookie notice.
 *
 * Rendered inside a shadow root, so nothing here can leak into the shop's theme
 * and nothing in the theme can reach in. That is why the selectors are short
 * and unprefixed, they are already isolated.
 *
 * Dark by default, following the reference designs: a notice that sits over a
 * photograph or a hero image needs its own ground rather than borrowing the
 * page's, and dark reads as chrome rather than content on almost every shop.
 */

:host {
	all: initial;
}

.nc {
	--nc-accent: #6366f1;
	--nc-bg: #1c1c1e;
	--nc-fg: #f2f2f4;
	--nc-muted: #a5a5ad;
	--nc-line: rgba(255, 255, 255, 0.12);
	--nc-btn: #ffffff;
	--nc-btn-fg: #16161a;

	position: fixed;
	z-index: 2147482000;
	inset: auto 0 0 0;
	display: none;
	box-sizing: border-box;
	padding: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--nc-fg);
	-webkit-font-smoothing: antialiased;
}

.nc.is-open {
	display: block;
}

.nc *,
.nc *::before,
.nc *::after {
	box-sizing: inherit;
}

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

.nc__box {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 auto;
	max-width: 720px;
	padding: 12px 12px 12px 20px;
	border: 1px solid var(--nc-line);
	border-radius: 14px;
	background: var(--nc-bg);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
	animation: nc-rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes nc-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.nc__box,
	.nc__panel { animation: none; }
}

.nc__text {
	flex: 1 1 auto;
	margin: 0;
	color: var(--nc-fg);
}

.nc__link {
	color: var(--nc-fg);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nc__link:hover {
	color: #fff;
}

.nc__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.nc__btn {
	appearance: none;
	border: 0;
	border-radius: 9px;
	padding: 9px 18px;
	font: inherit;
	font-weight: 560;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.nc__btn--primary {
	background: var(--nc-btn);
	color: var(--nc-btn-fg);
}

/* Reject carries the same size and hit area as Accept. Making the decline
   smaller, greyer or harder to find is the exact pattern that gets a shop
   fined, so it is not something a style option is allowed to do. */
.nc__btn--quiet {
	background: transparent;
	color: var(--nc-fg);
	border: 1px solid var(--nc-line);
}

.nc__btn:hover { opacity: 0.88; }

.nc__btn:focus-visible,
.nc__icon:focus-visible,
.nc__close:focus-visible {
	outline: 2px solid var(--nc-accent);
	outline-offset: 2px;
}

.nc__icon {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--nc-muted);
	cursor: pointer;
}

.nc__icon:hover {
	color: var(--nc-fg);
	background: rgba(255, 255, 255, 0.08);
}

/* ---------- Shapes ---------- */

/* Corner card: narrow, stacked, tucked to one side. */
.nc--card .nc__box {
	flex-direction: column;
	align-items: flex-start;
	max-width: 360px;
	margin: 0 0 0 auto;
	padding: 18px;
}

.nc--card .nc__actions {
	width: 100%;
	justify-content: flex-end;
}

/* Full-width banner: a solid band with room for longer wording. */
.nc--banner {
	padding: 0;
}

.nc--banner .nc__box {
	max-width: none;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	padding: 16px clamp(16px, 5vw, 64px);
}

/* Centred dialog: asks before anything else, so it dims the page behind it. */
.nc--modal {
	inset: 0;
	display: none;
	place-items: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
}

.nc--modal.is-open {
	display: grid;
}

.nc--modal .nc__box {
	flex-direction: column;
	align-items: flex-start;
	max-width: 440px;
	padding: 22px;
}

.nc--modal .nc__actions {
	width: 100%;
	justify-content: flex-end;
}

/* ---------- Preferences ---------- */

/* Always centred and always over a dim, whichever shape the notice used: this
   is a considered decision rather than a passing prompt, and it deserves the
   page's full attention for as long as it is open. */
.nc.is-prefs {
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
}

.nc__panel {
	width: 100%;
	max-width: 420px;
	max-height: 84vh;
	overflow-y: auto;
	padding: 22px;
	border: 1px solid var(--nc-line);
	border-radius: 16px;
	background: var(--nc-bg);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	animation: nc-rise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nc__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.nc__title {
	margin: 0;
	font-size: 18px;
	font-weight: 640;
	letter-spacing: -0.01em;
}

.nc__close {
	appearance: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--nc-muted);
	cursor: pointer;
}

.nc__close:hover {
	color: var(--nc-fg);
	background: rgba(255, 255, 255, 0.08);
}

.nc__row {
	padding: 14px 0;
	border-top: 1px solid var(--nc-line);
}

.nc__row:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.nc__rowhead {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}

.nc__row--fixed .nc__rowhead {
	cursor: default;
}

.nc__rowhead input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--nc-accent);
	cursor: pointer;
}

.nc__always {
	color: var(--nc-muted);
	font-size: 13px;
}

.nc__note {
	margin: 5px 0 0;
	color: var(--nc-muted);
	font-size: 13px;
}

.nc__actions--prefs {
	margin-top: 20px;
	justify-content: flex-start;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
	.nc { padding: 10px; }

	.nc__box {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 16px;
	}

	.nc--card .nc__box { max-width: none; }

	/* Full width on a phone, because a 40%-wide button beside another one is
	   how people miss the decline. */
	.nc__actions { justify-content: stretch; }
	.nc__btn { flex: 1 1 auto; }
	.nc__icon { flex: 0 0 auto; }
}

/* ---------- What each category actually covers ---------- */

/* Folded away by default: most visitors want the two buttons, and putting a
   cookie table in front of everyone buries the choice itself. The ones who open
   it want all of it. */
.nc__detail {
	margin-top: 10px;
}

.nc__detail > summary {
	cursor: pointer;
	color: var(--nc-muted);
	font-size: 12.5px;
	padding: 3px 0;
	list-style: none;
}

.nc__detail > summary::-webkit-details-marker { display: none; }

.nc__detail > summary::before {
	content: '▸ ';
	display: inline-block;
	transition: transform 0.15s ease;
}

.nc__detail[open] > summary::before {
	content: '▾ ';
}

.nc__detail > summary:hover { color: var(--nc-fg); }

.nc__service {
	margin-top: 12px;
	padding: 11px 12px;
	border: 1px solid var(--nc-line);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.03);
}

.nc__servicehead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.nc__provider {
	color: var(--nc-muted);
	font-size: 12px;
}

.nc__table {
	width: 100%;
	margin-top: 9px;
	border-collapse: collapse;
	font-size: 11.5px;
	/* A three-column table inside a 420px dialog is tight by nature; fixed
	   layout stops one long purpose column starving the other two. */
	table-layout: fixed;
}

.nc__table th {
	text-align: start;
	padding: 5px 6px 5px 0;
	border-bottom: 1px solid var(--nc-line);
	color: var(--nc-muted);
	font-weight: 560;
}

.nc__table th:nth-child(1) { width: 30%; }
.nc__table th:nth-child(3) { width: 24%; }

.nc__table td {
	padding: 7px 6px 7px 0;
	border-bottom: 1px solid var(--nc-line);
	vertical-align: top;
	color: var(--nc-fg);
	overflow-wrap: anywhere;
}

.nc__table tr:last-child td { border-bottom: 0; }

.nc__table code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	display: block;
}

/* Storage that is not a cookie says so. Calling localStorage a cookie is the
   small dishonesty this panel exists to avoid. */
.nc__kind {
	display: block;
	margin-top: 2px;
	color: var(--nc-muted);
	font-size: 10.5px;
}

@media (max-width: 640px) {
	.nc__table { font-size: 11px; }
	.nc__table th:nth-child(1) { width: 34%; }
}

/* ---------- Themes ----------
 *
 * The theme is the look; the shape (bar/card/modal/banner) is the placement.
 * Dark is the default and lives on .nc itself, so .nc--dark needs nothing here.
 * Light and Glass only re-point the tokens, and Glass adds the frost. Placed
 * last so the token overrides win over the base block by source order.
 */

/* Light: a bright card with a hairline, for shops that are light to begin with. */
.nc--light {
	--nc-bg: #ffffff;
	--nc-fg: #16161a;
	--nc-muted: #5b616c;
	--nc-line: rgba(20, 22, 28, 0.14);
	--nc-btn: #16161a;
	--nc-btn-fg: #ffffff;
}

.nc--light .nc__box,
.nc--light .nc__panel {
	box-shadow: 0 12px 40px rgba(20, 30, 50, 0.16);
}

/* Glass: frosted and translucent, the same material the widget uses. */
.nc--glass {
	--nc-bg: rgba(255, 255, 255, 0.72);
	--nc-fg: #16202e;
	--nc-muted: #4c5563;
	--nc-line: rgba(255, 255, 255, 0.7);
	--nc-btn: #1e4e8c;
	--nc-btn-fg: #ffffff;
}

.nc--glass .nc__box,
.nc--glass .nc__panel {
	border: 1px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 18px 50px rgba(20, 30, 55, 0.22);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* Where a backdrop-filter cannot run, glass falls back to a solid light card
   rather than an unreadable see-through one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.nc--glass { --nc-bg: #f4f6f9; }
}

/* The reject button keeps equal weight in every theme (see .nc__btn--quiet). */
.nc--light .nc__btn--quiet,
.nc--glass .nc__btn--quiet {
	color: var(--nc-fg);
	border-color: var(--nc-line);
}