/* Phasma Consent — the visitor-facing banner, on the PHASMA DESIGN SYSTEM
 * (repo: 42kohd/phasma-design; token VALUES are copied into the --pc-* block
 * below — plugins ship self-contained and never reference a path in that repo).
 *
 * DEFENSIVE RESET (phasma-design CONSTRAINTS.md §1, applied to the hardest case
 * the rule has): this banner renders inside an ARBITRARY client theme, on the
 * front end, where a theme's own element selectors (`h2 {}`, `button {}`,
 * `p {}`) beat anything we merely inherit. So every element the banner emits
 * carries explicit color, font, size, line-height, margin and padding. Nothing
 * here relies on inheritance.
 *
 * EQUAL PROMINENCE IS A PRODUCT RULE, NOT A STYLE CHOICE. `.phasma-consent-btn
 * --accept` and `--reject` differ ONLY in hue: identical padding, font-size,
 * font-weight, border-width, radius, and min-width, both solid, both at full
 * contrast on white. A change that shrinks, greys, outlines or unstyles the
 * reject control re-creates the dark pattern this plugin exists to remove.
 *
 * No webfonts, no CDN, no remote assets of any kind.
 */

.phasma-consent,
.phasma-consent-reopen {
	/* Primary — the cyan ray */
	--pc-primary: #0891b2;      /* --primary */
	--pc-primary-dark: #0e7490; /* --primary-dark */

	/* Ink + text ramp */
	--pc-ink: #1a192e;          /* --ink / --surface-ink */
	--pc-ink-dark: #2b2a45;     /* hover for the ink-filled control */
	--pc-text: #1a192e;         /* --text */
	--pc-muted: #5b6874;        /* --text-muted */
	--pc-invert: #ffffff;       /* --text-invert */

	/* Surfaces + lines */
	--pc-card: #ffffff;         /* --surface-card */
	--pc-tile: #f8fafb;         /* --surface-tile */
	--pc-line: #e0e5e9;         /* --line */
	--pc-field: #8b98a3;        /* --field-border */

	/* Type + shape */
	--pc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pc-radius: 4px;           /* --radius-xs (buttons) */
	--pc-radius-card: 10px;     /* --radius-xl */
}

/* The `hidden` attribute must win over any theme rule that sets display. */
.phasma-consent[hidden],
.phasma-consent [hidden] {
	display: none !important;
}

.phasma-consent-banner {
	position: fixed;
	z-index: 2147483000; /* above sticky headers and most theme overlays */
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: var(--pc-card);
	color: var(--pc-text);
	font-family: var(--pc-font);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	border-top: 1px solid var(--pc-line);
	box-shadow: 0 -4px 24px rgba(26, 25, 46, 0.16);
	animation: phasma-consent-rise 180ms ease-out;
}

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

@media (prefers-reduced-motion: reduce) {
	.phasma-consent-banner {
		animation: none;
	}
	.phasma-consent-banner * {
		transition: none !important;
	}
}

.phasma-consent-banner:focus {
	outline: none;
}

.phasma-consent .phasma-consent-inner {
	box-sizing: border-box;
	max-width: 1180px; /* --content-max */
	margin: 0 auto;
	padding: 18px 20px;
}

.phasma-consent .phasma-consent-title {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--pc-font);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pc-text);
	text-transform: none;
	letter-spacing: normal;
}

.phasma-consent .phasma-consent-body {
	margin: 0;
	padding: 0;
	color: var(--pc-text);
}

.phasma-consent .phasma-consent-body p {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--pc-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--pc-text);
	max-width: 78ch;
}

.phasma-consent .phasma-consent-link,
.phasma-consent .phasma-consent-body a {
	color: var(--pc-primary);
	text-decoration: underline;
	font-weight: 400;
	background: none;
	box-shadow: none;
}

.phasma-consent .phasma-consent-link:hover,
.phasma-consent .phasma-consent-body a:hover {
	color: var(--pc-primary-dark);
}

/* ---- Host/CDN disclosure (0.6.0) ---------------------------------------
 * Services the site's CDN injects at its edge. Plain reading text, never a
 * control: it must not compete with Accept/Reject for the eye, and it holds no
 * button or link the scanner could mistake for one. */
.phasma-consent .phasma-consent-edge {
	margin: 0 0 8px;
	padding: 8px 12px;
	border-left: 3px solid var(--pc-line);
	background: var(--pc-tile);
	max-width: 78ch;
}

.phasma-consent .phasma-consent-edge .phasma-consent-edge-intro {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--pc-muted);
}

.phasma-consent .phasma-consent-edge-list {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: disc;
	font-family: var(--pc-font);
	font-size: 13px;
	line-height: 1.5;
	color: var(--pc-text);
}

.phasma-consent .phasma-consent-edge-list li {
	margin: 0;
	padding: 0;
}

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

.phasma-consent .phasma-consent-prefs {
	margin: 12px 0 4px;
	padding: 12px 14px;
	background: var(--pc-tile);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-card);
}

.phasma-consent .phasma-consent-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.phasma-consent .phasma-consent-legend {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--pc-font);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.phasma-consent .phasma-consent-category {
	margin: 0 0 10px;
	padding: 0;
}

.phasma-consent .phasma-consent-category:last-child {
	margin-bottom: 0;
}

.phasma-consent .phasma-consent-category-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-family: var(--pc-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pc-text);
	cursor: pointer;
}

.phasma-consent .phasma-consent-toggle {
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	accent-color: var(--pc-primary);
	flex: 0 0 auto;
}

.phasma-consent .phasma-consent-toggle:disabled {
	cursor: not-allowed;
}

.phasma-consent .phasma-consent-category-desc {
	margin: 2px 0 0 24px;
	padding: 0;
	font-family: var(--pc-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--pc-muted);
	max-width: 72ch;
}

/* ---- Actions ----------------------------------------------------------- */

.phasma-consent .phasma-consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
}

/* THE EQUAL-PROMINENCE BASE. Accept and Reject take this and nothing that
 * changes its size or weight. */
.phasma-consent .phasma-consent-btn {
	box-sizing: border-box;
	display: inline-block;
	min-width: 148px;
	margin: 0;
	padding: 11px 20px;
	font-family: var(--pc-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--pc-radius);
	cursor: pointer;
	box-shadow: none;
	transition: background-color 120ms ease-out, color 120ms ease-out;
}

.phasma-consent .phasma-consent-btn:focus-visible,
.phasma-consent .phasma-consent-btn:focus {
	outline: 2px solid var(--pc-primary);
	outline-offset: 2px;
}

.phasma-consent .phasma-consent-btn--accept {
	background: var(--pc-primary);
	border-color: var(--pc-primary);
	color: var(--pc-invert);
}

.phasma-consent .phasma-consent-btn--accept:hover {
	background: var(--pc-primary-dark);
	border-color: var(--pc-primary-dark);
	color: var(--pc-invert);
}

/* Same geometry, same weight, same solid fill, same contrast — a different
 * hue is the ONLY permitted difference from --accept. */
.phasma-consent .phasma-consent-btn--reject {
	background: var(--pc-ink);
	border-color: var(--pc-ink);
	color: var(--pc-invert);
}

.phasma-consent .phasma-consent-btn--reject:hover {
	background: var(--pc-ink-dark);
	border-color: var(--pc-ink-dark);
	color: var(--pc-invert);
}

.phasma-consent .phasma-consent-btn--secondary {
	background: var(--pc-card);
	border-color: var(--pc-field);
	color: var(--pc-text);
}

.phasma-consent .phasma-consent-btn--secondary:hover {
	background: var(--pc-tile);
	color: var(--pc-text);
}

/* ---- The reopen control (shortcode, rendered anywhere) ------------------ */

.phasma-consent-reopen {
	display: inline;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: var(--pc-primary);
	text-decoration: underline;
	cursor: pointer;
}

.phasma-consent-reopen:hover {
	color: var(--pc-primary-dark);
}

.phasma-consent-reopen:focus-visible,
.phasma-consent-reopen:focus {
	outline: 2px solid var(--pc-primary);
	outline-offset: 2px;
}

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

@media (max-width: 560px) {
	.phasma-consent .phasma-consent-inner {
		padding: 14px 16px;
		max-height: 80vh;
		overflow-y: auto;
	}

	/* Full-width stacked controls — still identical to each other. */
	.phasma-consent .phasma-consent-btn {
		flex: 1 1 100%;
		min-width: 0;
	}
}