/**
 * PropFirmGrade compliance UI: cookie notice bar + crypto disclosure.
 *
 * PLUGIN-OWNED AND SELF-CONTAINED. This file moved out of the pfg theme with
 * the markup it styles, because unstyled or invisible compliance UI under a
 * different theme fails the whole point of making the disclosure theme-proof.
 *
 * STANDING ARCHITECTURE RULING: this stylesheet may READ theme tokens
 * (var(--acc), var(--border-1), var(--surface-2), var(--text-1), the
 * --wp--preset--* layer, ...) but EVERY such reference MUST carry a literal
 * fallback, so the UI stays legible under a theme that defines none of them.
 * The surface colours themselves are literals for the same reason.
 *
 * Visibility contract (attributes stamped on <html> pre-paint by
 * assets/js/compliance.js, so nothing flashes or shifts):
 *   - data-pfg-js         JS is running: hide the crypto SSR band (modal owns it)
 *                         and show the band's Show/Hide control (JS listens to it)
 *   - data-pfg-crypto-ack modal seen: the band comes back as the persistent note
 *   - data-pfg-crypto-band-folded
 *                         the reader folded the band: hide its PARAGRAPH only.
 *                         The label row and the control stay, on every visit.
 *   - data-pfg-cookie-ok  a consent choice (either one) is stored: hide the bar.
 *                         Removed again when "Cookie settings" reopens it.
 */

/* ---- Cookie notice bar: fixed bottom edge, out of document flow ---- */
/* --pfg-cookiebar-h is this bar's height, published for the same reason the
   theme publishes --pfg-tabbar-h beside the tab bar: anything that must clear
   the bottom edge has to read it rather than re-guess it. Today's one reader
   is `scroll-padding-bottom` in the theme's base.css, which is what keeps a
   focused row from landing underneath this notice (WCAG 2.2 SC 2.4.11 Focus
   Not Obscured, which was failing in both directions).

   IT IS A LADDER BECAUSE THE BAR WRAPS. The text and the Accept button are
   one flex row that breaks as the viewport narrows, so a single constant is
   wrong everywhere but one width. Measured on /firms/ at eleven widths:

     >=1080   53px        768    99px (at 769: 81px)
     1079     53px        700    99px
     800      81px        500    99px
     769      81px        401   117px
                          320   117px

   Re-measured 2026-09-17, when the text went to 14px below 761px: 760 to
   501 is 105px (it was 99px, and 761 to 768 keeps 81px at 12px), and 500
   down to 320 is 126px (it was 117px).

   Re-measured the same day for the consent bar (two buttons, new copy) on
   /firms/ at eighteen widths from 1440 to 320: 53 (>=1080), 81 (769 to
   1079), 84 to 105 (501 to 768) and 105 to 126 (<=500). Every band's
   tallest value is unchanged, so the rungs stand. Below 501px the two
   buttons take a row of their own, half each. Without JS the bar is
   shorter (39 to 105px), because the buttons are not shown.

   Each band below carries the TALLEST value measured inside it, so the number
   is never smaller than the bar actually is. Over-padding costs a focused
   element a few pixels of extra travel; under-padding puts it back under the
   notice, which is the defect.

   Zero when the bar is not in the DOM, and zero once it is accepted — the
   attribute already hides it, so continuing to reserve its height would be a
   hole at the bottom of every page for the rest of the visit. */
:root {
	--pfg-cookiebar-h: 0px;
}

:root:has(.pfg-cookiebar) {
	--pfg-cookiebar-h: 53px;
}

@media (max-width: 1079px) {
	:root:has(.pfg-cookiebar) {
		--pfg-cookiebar-h: 81px;
	}
}

@media (max-width: 768px) {
	:root:has(.pfg-cookiebar) {
		--pfg-cookiebar-h: 105px;
	}
}

@media (max-width: 500px) {
	:root:has(.pfg-cookiebar) {
		--pfg-cookiebar-h: 126px;
	}
}

[data-pfg-cookie-ok] {
	--pfg-cookiebar-h: 0px;
}

.pfg-cookiebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px 18px;
	flex-wrap: wrap;
	padding: 10px var(--wp--preset--spacing--60, clamp(20px, 2.6vw, 34px));
	background: rgba(16, 18, 25, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
}

[data-pfg-cookie-ok] .pfg-cookiebar {
	display: none;
}

/* Below 1080px the theme's fixed .pfg-tabbar (z-index 96) owns the bottom edge
   and PAINTS OVER this notice, which sits at z-index 90 — that hid the Accept
   button completely, so a phone visitor could not dismiss the notice at all.
   The notice sits above the tab bar instead. --pfg-tabbar-h is published by
   the theme beside the tab bar itself; the inset is added here because the
   bar's own height excludes it. */
@media (max-width: 1079px) {
	.pfg-cookiebar {
		bottom: calc(var(--pfg-tabbar-h, 71px) + env(safe-area-inset-bottom, 0px));
	}
}

.pfg-cookiebar__text {
	margin: 0;
	font-size: clamp(12px, 0.69vw, 13.5px);
	line-height: 1.5;
	color: var(--wp--preset--color--text-3, #979CAD);
}

/* 14px on a phone, the floor for reading copy (mobile follow-up, 2026-09-17).
   It was 12px there. The larger text wraps to more lines, which is why the
   <=768px and <=500px steps of the --pfg-cookiebar-h ladder were re-measured. */
@media (max-width: 760px) {
	.pfg-cookiebar__text {
		font-size: var(--wp--preset--font-size--ui, 14px);
	}
}

.pfg-cookiebar__text a {
	color: var(--wp--preset--color--text-2, #C6CBDD);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pfg-cookiebar__text a:hover {
	color: var(--wp--preset--color--text-1, #F2F3F8);
}

.pfg-cookiebar__actions {
	display: flex;
	gap: 8px;
	flex-wrap: nowrap;
}

/* EQUAL BOXES, ONE ACCENT. Reject and Accept analytics share every metric
   here: height, padding, radius, type, and a 1px border (transparent on
   Accept, a hairline on Reject), so neither is bigger, bolder or easier to
   hit. EU and UK guidance asks that refusing be as easy as agreeing; the
   only difference left is the accent fill the design reserves for the
   primary action. min-width is wider than "Accept analytics" needs, so the
   two pills are the same width, not just the same height. */
.pfg-cookiebar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 32px;
	min-width: 144px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 12.5px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
}

/* Accept is the bar's primary action, so it wears the site's primary-CTA
   treatment: solid accent fill, ink foreground, pill radius, weight 800 —
   the same three tokens .pfg-modal__accept below and .pfg-coupon__cta--solo
   in coupon.css read, not a shape of its own. It was a neutral #1A1F2C pill,
   which read as the same weight as the "Privacy policy" link beside it.

   The accent is never a literal here: --acc-fill resolves through
   [data-accent="world"] on <html>, so the button is yellow on futures, teal
   on crypto and violet on forex without this sheet knowing any of them. The
   literal fallbacks are the periwinkle base, per the contract at the top.

   The privacy-policy link stays secondary (text-2, underlined) on purpose —
   one accent per bar. */
.pfg-cookiebar__accept {
	background: var(--acc-fill, #BDB6FF);
	color: var(--on-acc, #14161F);
}

.pfg-cookiebar__accept:hover {
	background: var(--acc-fill-hover, #CBC5FF);
}

/* Secondary: flat surface, hairline edge, primary text. Hover brightens the
   hairline and nothing else, per the design rules. */
.pfg-cookiebar__reject {
	background: var(--surface-2, #1A1F2C);
	border-color: var(--border-2, rgba(255, 255, 255, 0.08));
	color: var(--wp--preset--color--text-1, #F2F3F8);
}

.pfg-cookiebar__reject:hover {
	border-color: var(--border-strong, rgba(255, 255, 255, 0.18));
}

/* The theme's global button:focus-visible is a theme fact this sheet promises
   not to depend on. Ring stated here so keyboard focus survives any theme. */
.pfg-cookiebar__btn:focus-visible,
.pfg-cookiebar:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
}

/* A phone gives the two choices the row between them, half each, so they
   stay the same size as each other at every width. */
@media (max-width: 500px) {
	.pfg-cookiebar__actions {
		width: 100%;
	}

	.pfg-cookiebar__btn {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* "Current choice: ..." when Cookie settings reopens the bar. Read to screen
   readers as part of the region focus lands on, but kept out of the visual
   flow: one more line would make the bar taller than every rung of the
   --pfg-cookiebar-h ladder at 320, 800 and 1080 (measured 147, 99 and 81px),
   and the ladder is what keeps focused content from sliding under the bar. */
.pfg-cookiebar__current {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* NO JS: nothing listens to the buttons, and nothing can load analytics, so
   the buttons go and one sentence says so. With JS the sentence goes. */
.pfg-cookiebar__nojs {
	display: none;
}

html:not([data-pfg-js]) .pfg-cookiebar__nojs {
	display: inline;
}

html:not([data-pfg-js]) .pfg-cookiebar__actions,
html:not([data-pfg-js]) .pfg-cookie-settings {
	display: none;
}

/* "Cookie settings" in the footer legal row (injected by
   Compliance\Bootstrap::add_cookie_settings_link). Reads as the text beside
   it: a button only because it acts on this page rather than navigating. */
.pfg-cookie-settings__open {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.pfg-cookie-settings__open:hover {
	color: var(--wp--preset--color--text-2, #C6CBDD);
}

.pfg-cookie-settings__open:focus-visible {
	outline: none;
	border-radius: 4px;
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
}

/* ---- Crypto disclosure: SSR band (no-JS fallback, then the persistent note) ---- */
.pfg-crypto-band {
	background: #14171E;
	border-bottom: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
}

/*
 * HIDDEN ONLY WHILE THE MODAL IS STILL COMING, not for the life of the browser.
 *
 * This used to be a bare `[data-pfg-js]`, on the reasoning that the band is the
 * no-JS fallback and the modal covers everyone else. It does not: the modal is
 * suppressed permanently once `pfg-crypto-disclosure` is `acknowledged`, so a
 * returning visitor with JS got the band hidden by this rule AND no modal —
 * which is to say no crypto disclosure anywhere, on any crypto page. Reported
 * from a real browser session (propfirmgrade-data#506).
 *
 * `data-pfg-crypto-ack` is set by compliance.js once the disclosure has been
 * acknowledged, so the band comes back and stays as the persistent notice.
 * No JS: the band shows, as before.
 */
[data-pfg-js]:not([data-pfg-crypto-ack]) .pfg-crypto-band {
	display: none;
}

/*
 * FOLDED IS NOT DISMISSED, and the difference is the whole change.
 *
 * Once the modal has been seen the band is the persistent note, and on a
 * phone it took most of the first screen on every crypto page, on every visit
 * (propfirmgrade-data#542). A first cut let the reader dismiss it. That was
 * rejected on a measured fact: the disclosure text is on a crypto page exactly
 * twice, here and in the once-per-browser modal, so a visitor who acknowledged
 * the modal and then dismissed the band had NO disclosure on the page, on that
 * browser, until storage was cleared. The state the ack rule above exists to
 * prevent, reachable by one click.
 *
 * So the band FOLDS: this rule hides the paragraph and nothing else. The label
 * row ("Crypto disclosure" plus the Show control) never goes under this
 * attribute, or any attribute, so the disclosure stays one tap away on every
 * visit. `data-pfg-crypto-band-folded` is stamped by compliance.js pre-paint
 * when `pfg-crypto-band` is `folded` in storage, and toggled by the control,
 * so a returning visitor never sees the paragraph flash in and fold away.
 *
 * No JS: the attribute is never set and the control is never shown, so the
 * band renders fully expanded, exactly as before.
 */
[data-pfg-crypto-band-folded] .pfg-crypto-band__text {
	display: none;
}

/* Label above, text below. With JS the Show/Hide control shares the LABEL
   row, on the right, and the text runs the full width underneath. A side
   column spanning both rows was measured on the dismiss cut: at 375px it
   narrowed the text to 244px and made the band taller, the wrong direction
   for a change whose whole point is the first screen on a phone. The second
   column exists only under [data-pfg-js]: the no-JS band has no control, so
   it must not reserve a gap for one. The paragraph is the grid's only row-2
   item, so when it folds away the row and its gap go with it and the label
   row is the band. */
.pfg-crypto-band__inner {
	max-width: 1760px;
	margin-inline: auto;
	padding: 12px var(--wp--preset--spacing--60, clamp(20px, 2.6vw, 34px));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 4px;
	align-items: start;
}

[data-pfg-js] .pfg-crypto-band__inner {
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
}

.pfg-crypto-band .pfg-label {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}

.pfg-crypto-band__text {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* The Show/Hide control. A note, not consent, so it is the site's SECONDARY
   shape: transparent, hairline border (white at 10%, brightening to 14% on
   hover), pill radius, UI font, no lift and no shadow. Never the accent,
   which on this band belongs to nothing. Hidden until compliance.js stamps
   data-pfg-js, because without JS no handler exists and a dead button is a
   lie to a keyboard reader. */
.pfg-crypto-band__toggle {
	display: none;
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	align-items: center;
	box-sizing: border-box;
	height: 28px;
	padding: 0 12px;
	border: 1px solid var(--border-3, rgba(255, 255, 255, 0.10));
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--text-2, #C6CBDD);
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease;
}

[data-pfg-js] .pfg-crypto-band__toggle {
	display: inline-flex;
}

.pfg-crypto-band__toggle:hover {
	border-color: var(--border-strong, rgba(255, 255, 255, 0.14));
	color: var(--wp--preset--color--text-1, #F2F3F8);
}

/* Same ring the cookie bar's Accept states for itself: the theme's global
   focus style is a theme fact this sheet promises not to depend on. */
.pfg-crypto-band__toggle:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
}

@media (prefers-reduced-motion: reduce) {
	.pfg-crypto-band__toggle {
		transition: none;
	}
}

/* Both words ship in the markup and the root attribute picks one, so the
   control reads "Show" over a folded band from the first paint, with no
   DOM write waiting on DOMContentLoaded. display:none keeps the hidden word
   out of the accessible name as well as off the screen. */
.pfg-crypto-band__toggle-show {
	display: none;
}

[data-pfg-crypto-band-folded] .pfg-crypto-band__toggle-show {
	display: inline;
}

[data-pfg-crypto-band-folded] .pfg-crypto-band__toggle-hide {
	display: none;
}

/* The band's micro-label. Restated here (not inherited from a theme's
   .pfg-label) so the band reads correctly with no theme CSS at all. Values
   match the pfg theme's .pfg-label exactly, so nothing changes under it. */
.pfg-crypto-band .pfg-label {
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--label, 12.5px);
	font-weight: 800;
	letter-spacing: var(--wp--custom--label--tracking, 0.08em);
	text-transform: uppercase;
	color: #9AA1B5;
}

.pfg-crypto-band__text {
	margin: 0;
	font-size: clamp(12px, 0.69vw, 13.5px);
	line-height: 1.55;
	color: var(--wp--preset--color--text-3, #979CAD);
	max-width: 110ch;
}

.pfg-crypto-band__text a {
	color: var(--wp--preset--color--text-2, #C6CBDD);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Crypto disclosure: modal (JS path) ---- */
.pfg-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--60, clamp(20px, 2.6vw, 34px));
}

.pfg-modal[hidden] {
	display: none;
}

.pfg-modal__scrim {
	position: absolute;
	inset: 0;
	background: var(--scrim, rgba(6, 8, 14, 0.72));
}

.pfg-modal__dialog {
	position: relative;
	max-width: 560px;
	max-height: 100%;
	overflow-y: auto;
	background: #14171E;
	border: 1px solid var(--border-3, rgba(255, 255, 255, 0.10));
	border-radius: 20px;
	padding: clamp(20px, 2.6vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

@media (prefers-reduced-motion: no-preference) {
	.pfg-modal__dialog {
		animation: pfg-modal-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	@keyframes pfg-modal-in {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

.pfg-modal__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: clamp(15px, 0.87vw, 18px);
	font-weight: 700;
	color: var(--wp--preset--color--text-1, #F2F3F8);
}

.pfg-modal__text {
	margin: 0;
	font-size: clamp(13px, 0.75vw, 15px);
	line-height: 1.65;
	color: var(--wp--preset--color--text-2, #C6CBDD);
}

.pfg-modal__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 4px;
}

.pfg-modal__accept {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--acc-fill, #BDB6FF);
	color: var(--on-acc, #14161F);
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: clamp(12.5px, 0.72vw, 14.5px);
	font-weight: 800;
	cursor: pointer;
}

.pfg-modal__accept:hover {
	background: var(--acc-fill-hover, #CBC5FF);
}

.pfg-modal__link {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
	border-radius: 999px;
	color: var(--wp--preset--color--text-1, #F2F3F8);
	font-size: clamp(12.5px, 0.72vw, 14.5px);
	font-weight: 700;
	text-decoration: none;
}

.pfg-modal__link:hover {
	border-color: rgba(255, 255, 255, 0.3);
}

/*
 * ON A PHONE THE DIALOG IS A BOTTOM SHEET (mobile follow-up, 2026-09-17).
 *
 * Centred, the dialog plus its scrim took the whole first screen of the first
 * crypto page a visitor opens (/crypto/ or a crypto review): the reader met
 * a legal notice with no idea which page it belonged to. Nothing in
 * Disclosure.php, Bootstrap.php or compliance.js asks for the page to be
 * hidden; what they guarantee is the verbatim text, an explicit "I Understand",
 * focus moved into the dialog and trapped there, Escape handled, aria-modal,
 * and the SSR band for no-JS. The
 * sheet changes none of that: same markup, same script, same scrim behind it
 * catching every tap on the page (it still covers the viewport, it is only the
 * dialog that moved). What changes is that the dialog docks to the bottom edge
 * and caps its height, so the page's heading stays readable above it, behind
 * the scrim, and a long text scrolls inside the sheet rather than off-screen.
 *
 * It sits over the tab bar and the cookie notice (z-index 100 vs 96 and 90),
 * which is right for a modal. The safe-area inset keeps "I Understand" clear
 * of the home indicator. Above 760px nothing changes.
 */
@media (max-width: 760px) {
	.pfg-modal {
		align-items: flex-end;
		padding: 0;
	}

	.pfg-modal__dialog {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		max-height: min(60vh, 520px);
		max-height: min(60dvh, 520px);
		border-radius: 20px 20px 0 0;
		border-bottom: 0;
		padding: 20px var(--wp--preset--spacing--60, 20px) calc(20px + env(safe-area-inset-bottom, 0px));
		overscroll-behavior: contain;
	}

	.pfg-modal__text {
		font-size: var(--wp--preset--font-size--ui, 14px);
	}

	.pfg-modal__accept,
	.pfg-modal__link {
		font-size: var(--wp--preset--font-size--ui, 14px);
	}

	@media (prefers-reduced-motion: no-preference) {
		.pfg-modal__dialog {
			animation-name: pfg-sheet-in;
		}

		@keyframes pfg-sheet-in {
			from {
				opacity: 0;
				transform: translateY(24px);
			}

			to {
				opacity: 1;
				transform: none;
			}
		}
	}
}