/* ==========================================================================
   WPRD — WPConsent preferences-panel polish (Altegio Marketing DS).

   HOW THIS IS DELIVERED
   assets/wpconsent-softwall.js injects this file as a <link> into WPConsent's
   open shadow root — the same way the plugin loads its own frontend.css — and
   adds the class `wprd-prefs` to #wpconsent-preferences-modal. Shipping it as a
   real stylesheet (rather than a string inside the script) keeps it cacheable
   and out of every page's HTML. Nothing here is a plugin patch.

   TWO RULES THAT SHAPE EVERY SELECTOR BELOW
   1. Every selector starts with `#wpconsent-preferences-modal.wprd-prefs`.
      Without that class the panel renders exactly as the plugin ships it, so a
      failed injection degrades to the stock (usable) panel.
   2. The plugin loads frontend.css as a <link> AFTER our <style> (see
      WPConsent.ensureCSS/loadExternalCSS), so source order cannot be relied on.
      Leading with the id gives every rule here (1,x,0) specificity against
      frontend.css's class selectors (max (0,3,0)), which wins regardless of
      order. `!important` is therefore used in exactly ONE place: the disabled
      toggle, where frontend.css itself writes `background-color:#ccc!important`.

   COLOUR IS RE-DECLARED, NOT ASSUMED
   frontend.css paints from --wpconsent-* custom properties that the plugin
   writes inline on the light-DOM host (dark panel: #0e0e14 bg / #ffffff text).
   We re-declare those properties on the scoped modal, so every stock rule that
   reads them (card background, arrow border colour, links, category hairlines,
   accept button, toggle "on" colour) flips to the light Altegio surface without
   being restated one by one, and without depending on anyone changing the
   plugin's settings.

   ACCENT: the live plugin setting is #ffcd2a; the design system's primary is
   #FFCB00 (styles.css --alt-yellow), with the documented hover/active colour
   steps #FDBE1C / #FDAE1C. We use the design-system value and scope it here, so
   the panel is correct whether or not the plugin setting is ever aligned.

   NO TEXT IS INVENTED HERE: no ::before/::after content that reads as UI copy,
   so translated sites keep using the plugin's own (TranslatePress-served)
   strings. The added Reject button copies its label from #wpconsent-cancel-all.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — Altegio Marketing Design System
   Values are the design system's own tokens (styles.css :root). They are
   re-declared locally because the shadow root cannot see the page's :root.
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs{
	/* brand */
	--wprd-ink:#22222E;             /* --alt-ink          */
	--wprd-yellow:#FFCB00;          /* --alt-yellow       */
	--wprd-yellow-hover:#FDBE1C;    /* --alt-yellow-hover */
	--wprd-yellow-active:#FDAE1C;   /* --alt-yellow-active*/
	--wprd-yellow-soft:#FFECA1;     /* --alt-yellow-soft — "soft accent", NOT a CTA */
	/* text — contrast-checked on white: ink 15.9:1, secondary 5.35:1 */
	--wprd-fg-2:#626C77;            /* --fg-secondary */
	/* surfaces: 60/30/10 — the dark page behind is the 60, this card is the 10,
	   the category blocks are the 30 */
	--wprd-surface:#FFFFFF;         /* --surface        */
	--wprd-wash:#F2F3F7;            /* --surface-muted  */
	--wprd-wash-hover:#E7E9EF;      /* documented colour step from --surface-muted */
	--wprd-wash-active:#DDE1E7;
	/* hairlines */
	--wprd-hairline:#EBEBEB;        /* --border-hairline — row dividers  */
	--wprd-divider:#DDE1E7;         /* --border-muted    — section rules */
	--wprd-border:#E0E2E8;          /* --border-divider  */
	/* radii — 4/8/12/20/32/64 scale: buttons 12, blocks 20, card 32 */
	--wprd-r-sm:8px; --wprd-r-md:12px; --wprd-r-lg:20px; --wprd-r-xl:32px;
	/* geometry */
	--wprd-gutter:32px;             /* card interior padding (DS card: 40, tightened for a dialog) */
	--wprd-block-pad:20px;
	--wprd-ease:.12s ease;          /* DS: 120ms ease, background/transform only */

	/* Monoline cookie mark, 1.5px stroke, ink on a soft-yellow tile — DS
	   iconography (Lucide-weight, currentColor-ink on light). Declared here so
	   the file is self-contained when ported into the module. */
	--wprd-cookie-icon:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322222E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/><path d='M8.5 8.5v.01'/><path d='M16 15.5v.01'/><path d='M12 12v.01'/><path d='M11 17v.01'/><path d='M7 14v.01'/></svg>");

	/* --- plugin properties, re-pointed at the design system ---------------- */
	--wpconsent-background:var(--wprd-surface);
	--wpconsent-text:var(--wprd-ink);
	--wpconsent-outline-color:var(--wprd-border);
	--wpconsent-accept-bg:var(--wprd-yellow);
	--wpconsent-accept-color:var(--wprd-ink);
	--wpconsent-focus-outline-color:var(--wprd-ink);
	--wpconsent-focus-outline-width:2px;
	--wpconsent-focus-outline-offset:2px;
	--wpconsent-shadow:0 16px 40px rgba(34,34,46,.18),0 6px 12px rgba(34,34,46,.10); /* --shadow-lg */

	/* Inter is the design system's workhorse; "Inter Display" (24pt optical
	   master) is used only by the title below. Both fall back to system-ui,
	   because :host sets `all:initial; font-family:inherit` and we cannot know
	   what the page font is. */
	font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	-webkit-font-smoothing:antialiased;
}

/* frontend.css inherits the UA default content-box; padding on grid/flex items
   then overflows. Border-box everywhere inside the dialog. */
#wpconsent-preferences-modal.wprd-prefs,
#wpconsent-preferences-modal.wprd-prefs *,
#wpconsent-preferences-modal.wprd-prefs *::before,
#wpconsent-preferences-modal.wprd-prefs *::after{box-sizing:border-box}

/* --------------------------------------------------------------------------
   2. SHELL — scrim + card
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs{
	/* Ink scrim, not neutral black: it belongs to the palette. No backdrop
	   blur — the DS explicitly does not use frosted glass. */
	background-color:rgba(34,34,46,.62);
	padding:24px;
	align-items:center;
	justify-content:center;
	/* height:100% resolves against the large viewport on mobile, which pushes
	   the card under the URL bar; dvh is the visible box. */
	height:100dvh;
}

#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-content{
	width:min(720px,100%);
	max-width:100%;
	max-height:min(88vh,780px);
	max-height:min(88dvh,780px);
	padding:0;                      /* header/body/footer own their gutters */
	border-radius:var(--wprd-r-xl); /* DS card radius */
	box-shadow:var(--wpconsent-shadow);
	animation:wprd-prefs-in .18s ease-out;
}
@keyframes wprd-prefs-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   3. HEADER — sticky (flex-shrink:0 comes from frontend.css)
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-header{
	display:flex;
	flex-direction:row;             /* frontend.css goes column <=767px */
	align-items:center;
	gap:16px;
	padding:20px var(--wprd-gutter);
	/* The boundary the scrolled body passes under. */
	border-bottom:1px solid var(--wprd-border);
}
/* Soft-yellow tile + ink mark. Pure #FFCB00 stays reserved for the one CTA in
   the footer, so the accent is not spent twice on one surface. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-header::before{
	content:"";
	flex:none;
	width:40px;height:40px;
	border-radius:var(--wprd-r-md);
	background:var(--wprd-yellow-soft) var(--wprd-cookie-icon) center/22px 22px no-repeat;
}
#wpconsent-preferences-modal.wprd-prefs #wpconsent-preferences-title{
	order:0;                        /* frontend.css reorders below 767px */
	margin:0;
	font-family:"Inter Display","Inter",system-ui,-apple-system,sans-serif; /* DS: display master >=24px */
	font-size:24px;                 /* DS H2 */
	font-weight:600;
	line-height:1.15;
	letter-spacing:-.01em;
	color:var(--wprd-ink);
}
/* The right-hand slot is empty now (see below), but the override stays:
   frontend.css gives it `width:100%;order:1` below 767px, which inside our row
   header would claim the whole line and push the title out of it. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-header-right{
	order:0;width:auto;margin-left:auto;flex:none;
}
/* NO DISMISS-WITHOUT-DECIDING CONTROL.
   The "x" wrote nothing. It closed the panel and left consent undecided, so the
   visit carried on with every non-essential category denied and the dialog came
   back on the next one — an outcome a visitor cannot read off the control, which
   is what the owner reported ("unclear what pressing the cross does"). The stock
   footer "Close" is hidden for the same reason (section 10), so the panel is left
   with the three controls that state their own effect: Save and Close, Reject,
   Accept All.
   The dialog does not become inescapable: WPConsent's own Escape handler still
   closes it, and closing it that way still reveals the floating settings button
   (see keepReachable in the script), so the choice stays reachable either way.
   Hiding rather than removing also keeps the plugin's focus trap right — it
   filters on computed display, so the "x" leaves the tab ring with the pixels. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-header-close{display:none}

/* --------------------------------------------------------------------------
   4. BODY — the only scrolling region
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-body{
	padding:20px var(--wprd-gutter) 24px;
	overscroll-behavior:contain;    /* don't scroll the page behind the dialog */
	scrollbar-width:thin;
	scrollbar-color:var(--wprd-divider) transparent;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-body::-webkit-scrollbar{width:12px}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-body::-webkit-scrollbar-track{background:transparent}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-body::-webkit-scrollbar-thumb{
	background:var(--wprd-divider);
	border-radius:999px;
	border:4px solid transparent;   /* inset the thumb without a track colour */
	background-clip:content-box;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-body::-webkit-scrollbar-thumb:hover{
	background:#C4CAD4;background-clip:content-box;
}

/* Intro line. frontend.css fades it with opacity:.8, which drags #626C77 to
   ~3.6:1 — under the 4.5:1 floor. Contrast is carried by colour here, never by
   opacity; same rule for every muted text in this file. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent_preferences_panel_description{margin:0 0 20px}
#wpconsent-preferences-modal.wprd-prefs .wpconsent_preferences_panel_description p{
	margin:0;
	font-size:14px;line-height:1.6;   /* DS P4 */
	color:var(--wprd-fg-2);
	opacity:1;
	max-width:60ch;
}

/* --------------------------------------------------------------------------
   5. CATEGORY BLOCKS
   frontend.css renders categories as full-bleed rows with negative margins and
   a hairline between them; we turn them into separated light-wash blocks.
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preference-cookies{
	display:flex;flex-direction:column;gap:12px;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-category{
	margin:0;padding:0;border:0;      /* kills margin:0 -26px / padding:0 26px / hairlines */
	background:var(--wprd-wash);
	border-radius:var(--wprd-r-lg);
	overflow:hidden;                  /* clips the animating content to the radius */
	cursor:default;                   /* only the header is clickable */
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-category:first-child{border-top:0}

/* One row: chevron, label, switch — same 56px rhythm whether or not the row has
   a switch (the Cookie Policy row has none). */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-header{
	padding:15px var(--wprd-block-pad);
	gap:16px;
	align-items:center;
	cursor:pointer;
	transition:background-color var(--wprd-ease);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-header:hover{
	background:var(--wprd-wash-hover);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-category-text{
	display:flex;align-items:center;gap:12px;
	flex:1 1 auto;min-width:0;
	width:auto;padding-right:0;       /* frontend.css: width:100%;padding-right:20px */
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-category-text label{
	margin:0;                         /* frontend.css: margin-bottom:20px — the reason the
	                                     chevron/label/switch never lined up */
	font-size:16px;font-weight:600;line-height:1.3;   /* DS H5 */
	color:var(--wprd-ink);
	cursor:pointer;
	min-width:0;overflow-wrap:anywhere;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-toggle{
	flex:none;
	width:24px;height:24px;margin:0;
	display:flex;align-items:center;justify-content:center;
	border-radius:var(--wprd-r-sm);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-arrow{
	border-color:var(--wprd-fg-2);    /* 3.8:1 on the wash — a UI graphic, >=3:1 */
	border-width:0 2px 2px 0;
	padding:3px;
	top:-2px;                         /* optical centring of the rotated square */
	transition:transform .2s ease-out,border-color var(--wprd-ease);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-header:hover .wpconsent-preferences-accordion-arrow{
	border-color:var(--wprd-ink);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-item.active>.wpconsent-preferences-accordion-header .wpconsent-preferences-accordion-arrow{
	top:1px;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-category-checkbox{flex:none;align-items:center}

/* --------------------------------------------------------------------------
   6. ACCORDION CONTENT
   TRAP: frontend.css animates max-height (0 -> 2000px). Vertical padding on the
   animated element is NOT clipped by max-height:0, so a collapsed row would
   keep a padding-sized gap and the open/close animation would jump. So the
   element carries horizontal padding only, and the vertical rhythm is given to
   its first/last child as margins (overflow:hidden makes this a BFC, so those
   margins stay inside the clipped box).
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-content{
	padding:0 var(--wprd-block-pad);
}
/* NO-JS FALLBACK ONLY. frontend.css animates to a HARD max-height:2000px.
   Measured on this panel at 375px: the stock Statistics panel is already 1973px
   and ours 1986px — i.e. a longer translation (Russian runs ~20% longer than
   English) or a 320px screen silently clips the last cookie rows, in the stock
   panel too. This raised cap removes the clipping risk without needing JS.
   It is also what made the accordion snap: a fixed cap means the box travels
   thousands of pixels in the 300ms the plugin allows, so a category whose real
   height is ~110px is fully open after ~40ms and the other 260ms move nothing
   (and closing is 260ms of stillness followed by a 40ms drop). The script fixes
   that properly — it animates to the measured height off WPConsent's own
   `accordionToggled` hook and then pins the open element to `max-height:none`,
   which overrides this rule. This stays as the floor for an older WPConsent
   without that hook: snappy, but never clipped. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-item.active>.wpconsent-preferences-accordion-content{
	max-height:4000px;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-content>*:last-child{
	margin-bottom:20px;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-category-description,
#wpconsent-preferences-modal.wprd-prefs .wpconsent-service-description,
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-policy-text{
	margin:0 0 16px;
	font-size:14px;line-height:1.6;   /* DS P4 */
	color:var(--wprd-fg-2);
	max-width:70ch;
}
/* Cookie-policy note, rendered by the module on an install where WPConsent has
   no local policy page to hang its own section on (class-wpconsent-softwall.php).
   It sits in the panel body after the cookie list, outside the accordion, so it
   carries the accordion item's own spacing and link treatment explicitly. */
#wpconsent-preferences-modal.wprd-prefs .wprd-policy-note{
	padding:16px 20px 4px;
}
#wpconsent-preferences-modal.wprd-prefs .wprd-policy-note-title{
	margin:0 0 8px;
	font-size:16px;line-height:1.5;   /* DS P3, matches a category label */
	font-weight:600;
	color:var(--wprd-ink);
}
#wpconsent-preferences-modal.wprd-prefs .wprd-policy-note a{
	color:var(--wprd-ink);
	text-decoration:underline;
}
#wpconsent-preferences-modal.wprd-prefs .wprd-policy-note a:hover,
#wpconsent-preferences-modal.wprd-prefs .wprd-policy-note a:focus{
	text-decoration:none;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-service-url{
	margin:0 0 16px;
	font-size:14px;line-height:1.6;
	color:var(--wprd-fg-2);
}
/* Links: ink + underline, so they never depend on colour alone. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-content a{
	color:var(--wprd-ink);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:3px;
	transition:text-decoration-color var(--wprd-ease);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-content a:hover{
	text-decoration-thickness:2px;
}

/* --------------------------------------------------------------------------
   7. NESTED SERVICE CARD (Google Analytics inside Statistics)
   White card on the light-wash block: the nesting reads as "inside", instead of
   frontend.css's bare 20px left indent.
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-service{
	margin:0 0 12px;                  /* frontend.css: margin-left:20px */
	background:var(--wprd-surface);
	border-radius:var(--wprd-r-md);
	overflow:hidden;
}
/* There was a `.wpconsent-cookie-service:last-child{margin-bottom:0}` here. It
   is gone, and this comment is its headstone: because the animated element
   carries no vertical padding (see section 6), the block's bottom gutter IS the
   last child's bottom margin — and in Statistics the last child IS this service
   card. That rule sits later in the file at the same (1,3,0) specificity as the
   `content>*:last-child{margin-bottom:20px}` it was silently overriding, so the
   white card ended up flush against the bottom edge of the grey block. The
   generic rule now owns the gutter for whatever the last child happens to be,
   and a service that is NOT last still gets the 12px above. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-service>.wpconsent-preferences-accordion-header{
	padding:12px 16px;gap:12px;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-service>.wpconsent-preferences-accordion-header:hover{
	background:#F7F8FB;               /* one step from white, mirrors the wash step */
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-service .wpconsent-cookie-category-text label{
	font-size:14px;                   /* one step below the category label */
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-service>.wpconsent-preferences-accordion-content{
	padding:0 16px;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-cookie-service>.wpconsent-preferences-accordion-content>*:last-child{
	margin-bottom:16px;
}

/* --------------------------------------------------------------------------
   8. COOKIE TABLE
   The header row and every item row are SEPATE grid containers, so `1fr 4fr 1fr`
   (= minmax(auto,Nfr)) let each row size its own tracks from its own content —
   that is why the columns drifted out of line and why "6 months after last
   activity" fought the description. minmax(0,Nfr) makes the tracks purely
   proportional, so every row resolves identically.
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-cookies-list{
	margin-top:4px;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-header,
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-item{
	grid-template-columns:minmax(0,1.15fr) minmax(0,2.55fr) minmax(0,1.15fr);
	column-gap:20px;row-gap:0;
	padding:12px 0;
	margin:0;
	/* top-aligned: centring is what left the "hole" next to a one-line
	   description when the duration wrapped to three lines */
	align-items:start;
	font-size:14px;line-height:1.5;   /* DS P4 */
	border-bottom:1px solid var(--wprd-hairline);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-header{
	padding:0 0 8px;
	font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; /* DS C4-ish */
	color:var(--wprd-fg-2);
	border-bottom:1px solid var(--wprd-divider);  /* section rule, not a row rule */
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-item:last-child{border-bottom:0;padding-bottom:0}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-item .cookie-name{
	font-weight:600;color:var(--wprd-ink);
	overflow-wrap:anywhere;           /* __utmz / _gac_ must never push the grid */
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-item .cookie-desc,
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-item .cookie-duration{
	color:var(--wprd-fg-2);
	overflow-wrap:break-word;
}

/* --------------------------------------------------------------------------
   9. SWITCHES
   State is carried by two things that both clear 3:1 (WCAG 1.4.11): the ink
   knob against its track, and the track colour itself. Never by opacity.
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle{
	height:26px;width:46px;flex:none;
}
/* HIT AREA, NOT SIZE. 46x26 clears WCAG 2.2 AA (2.5.8 asks 24x24) but it is a
   thin thing to hit with a thumb, and it is the control that carries the
   decision. The plugin's own <input> IS the hit area — opacity:0, absolutely
   positioned, stretched over the label — so it can be given the 44px of the
   enhanced target size without moving the track a pixel. `margin:0` drops the
   UA checkbox margin, which was offsetting the hit area 4px right of the track
   it belongs to. The enlarged area still sits inside the 56px accordion row and
   still counts as "inside the toggle" for WPConsent's own header-click guard,
   so the 9px above and below the track work the switch rather than the row. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle input{
	height:44px;
	top:50%;
	transform:translateY(-50%);
	margin:0;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle .wpconsent-preferences-checkbox-toggle-slider{
	background-color:var(--wprd-divider);
	border-radius:999px;
	transition:background-color var(--wprd-ease);
}
/* The "on" track has to be restated HERE, at this file's own specificity.
   frontend.css paints it with `input:checked + slider` — (0,2,0) — while the
   rule above is (1,3,0), so leading with the id (section header, rule 2) means
   our unconditional "off" colour was beating the plugin's checked colour and a
   switch turned on kept its off track: the knob slid right onto grey. Adding
   :checked here takes it to (1,4,0), which wins over both. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle input:checked+.wpconsent-preferences-checkbox-toggle-slider{
	background-color:var(--wprd-yellow);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle .wpconsent-preferences-checkbox-toggle-slider:before{
	height:20px;width:20px;left:3px;bottom:3px;
	background-color:var(--wprd-ink);   /* ink knob: 13:1 on the off track, 11:1 on yellow */
	transition:transform .18s ease;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle input:checked+.wpconsent-preferences-checkbox-toggle-slider:before{
	transform:translateX(20px);         /* 46 - 3 - 20 - 3 */
}
[dir=rtl] #wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle input:checked+.wpconsent-preferences-checkbox-toggle-slider:before{
	transform:translateX(-20px);
}

/* Essential: disabled + checked. frontend.css paints it #ccc (with !important)
   at opacity .5, so a locked-ON control reads as "off, and broken". It has to
   read "on, and not yours to change" WITHOUT adding any text, so: the knob
   stays right and the track stays in the yellow family, but at the design
   system's soft-accent step (--alt-yellow-soft, its documented disabled tone)
   instead of the live #FFCB00 — plus the not-allowed cursor. The disabled
   attribute still carries the fact to assistive tech ("checked, dimmed"). */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle-disabled .wpconsent-preferences-checkbox-toggle-slider{
	background-color:var(--wprd-yellow-soft)!important;  /* the one !important: frontend.css uses one here */
	opacity:1;
	cursor:not-allowed;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle-disabled .wpconsent-preferences-checkbox-toggle-slider:before{
	background-color:var(--wprd-ink);
}

/* --------------------------------------------------------------------------
   10. FOOTER
   Save and Close (left, tertiary) | Reject · Accept All (right, equal pair).
   -------------------------------------------------------------------------- */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-actions{
	display:block;                    /* frontend.css: flex, and column <=767px */
	margin:0;
	padding:20px var(--wprd-gutter) 24px;
	border-top:1px solid var(--wprd-border);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons{
	display:flex;flex-wrap:wrap;gap:12px;width:100%;
	justify-content:flex-end;
	/* stretch, not center: a longer translation (the Russian "Reject all" wraps
	   to two lines at 375px) would otherwise leave Reject 74px tall next to a
	   50px Accept —
	   i.e. equal prominence would silently break on translated sites. Stretch
	   equalises the height of everything on the same flex line, and since the
	   mobile layout puts Save on its own line, the Reject/Accept pair still
	   matches there too. */
	align-items:stretch;
}
/* THE PAIR SHARES A BOX, NOT JUST A STYLE.
   This wrapper used to be display:contents, which dissolved it and let Reject
   and Accept each size to its own label. In English they both land on the
   shared 148px floor below, so they came out identical — equal by accident.
   Give Reject a longer translation (the plugin's own "Отклонить все файлы
   cookie") and it grows to 282px next to a 148px Accept, and the equal
   prominence this module exists to provide is gone without anything looking
   broken. So the wrapper stays a box: a two-track grid whose tracks are both
   `1fr`. Under max-content sizing an `fr` track resolves to the largest
   contribution among its peers, so BOTH buttons take the wider label's width in
   every language, and when there is not enough room the tracks shrink together
   and the labels wrap together. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons-left{
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:1fr;
	gap:12px;
	order:2;
	min-width:0;
	/* frontend.css puts padding-right:10px on this wrapper. It was inert while
	   the wrapper was display:contents; now that it is a box again the padding
	   comes off the grid's content box, which held the pair 10px short of the
	   footer edge and made the right gutter 10px wider than the left. */
	padding:0;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-save-preferences{order:1;margin-right:auto}
/* ordered inside the grid above, not against Save */
#wpconsent-preferences-modal.wprd-prefs .wprd-reject-all{order:1}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-accept-all{order:2}
/* The stock "Close" is a dismiss-without-choosing control; once an explicit
   Reject exists it is both redundant and a compliance smell. The header "x" was
   the same control in another shape and goes with it (section 3). */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wpconsent-close-preferences{display:none}

/* NOTE: every per-button variant below repeats `.wpconsent-banner-button` so it
   out-specifies this shared base rule; otherwise the base `border:1px solid
   transparent` silently wins over a variant's border-color. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button{
	width:auto;
	min-height:48px;height:auto;      /* grows instead of clipping a long translation */
	padding:12px 24px;
	display:inline-flex;align-items:center;justify-content:center;
	font-family:inherit;
	font-size:16px;font-weight:700;line-height:24px;  /* DS button label */
	white-space:normal;
	border:1px solid transparent;
	border-radius:var(--wprd-r-md);   /* DS: buttons use 12 */
	transition:background-color var(--wprd-ease),border-color var(--wprd-ease),transform .08s ease;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button:active{
	transform:translateY(.5px);       /* DS press state — never a scale-shrink */
}
/* EQUAL PROMINENCE (CNIL/EDPB): identical box — same min-width, min-height,
   padding, font-size, weight, radius and 1px border. Only the fill differs. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wprd-reject-all,
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wpconsent-accept-all{
	min-width:148px;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wprd-reject-all{
	background-color:var(--wprd-wash);
	color:var(--wprd-ink);
	border-color:var(--wprd-divider);  /* gives the light fill a visible edge on white */
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wprd-reject-all:hover{
	background-color:var(--wprd-wash-hover);border-color:#CFD5DE;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wprd-reject-all:active{
	background-color:var(--wprd-wash-active);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wpconsent-accept-all{
	background-color:var(--wprd-yellow);
	color:var(--wprd-ink);
	border-color:var(--wprd-yellow);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wpconsent-accept-all:hover{
	background-color:var(--wprd-yellow-hover);border-color:var(--wprd-yellow-hover);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wpconsent-accept-all:active{
	background-color:var(--wprd-yellow-active);border-color:var(--wprd-yellow-active);
}
/* Tertiary: it is neither of the two consent choices, so it carries no fill. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wpconsent-save-preferences{
	background-color:transparent;
	color:var(--wprd-ink);
	border-color:transparent;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wpconsent-save-preferences:hover{
	background-color:var(--wprd-wash);
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wpconsent-save-preferences:active{
	background-color:var(--wprd-wash-hover);
}

/* --------------------------------------------------------------------------
   11. FOCUS — the plugin's ring is #007cba, which belongs to no palette here.
   Ink, 2px, 2px offset: >=9:1 on every surface in this dialog.

   THE RING GOES ON THINGS YOU CAN OPERATE, AND ONLY ON THOSE.
   WPConsent puts tabindex="0" on six elements in this panel, and only one of
   them is a control: the title, the category and service descriptions, the
   service URL line and the cookie-policy paragraph are all plain text, made
   focusable so the plugin's own focus trap can walk a visitor through the
   disclosure. Ringing a paragraph says "you can do something here" when there
   is nothing to do, so the list below enumerates the real controls instead of
   reaching for [tabindex="0"].
   -------------------------------------------------------------------------- */
/* frontend.css rings .wpconsent-banner-button on plain :focus, which paints for
   a mouse press too. Cleared first, because the :focus-visible rule below has
   the same specificity and must be the one that wins when both match. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button:focus{
	outline:none;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-toggle:focus-visible,
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button:focus-visible,
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-content a:focus-visible{
	outline:2px solid var(--wprd-ink);
	outline-offset:2px;
	border-radius:var(--wprd-r-sm);
}
/* The switch's real <input> is opacity:0 and sits on top of the slider, so a
   ring on the input is invisible — it goes on the slider instead. */
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle input:focus+.wpconsent-preferences-checkbox-toggle-slider{
	outline:2px solid var(--wprd-ink);outline-offset:2px;
}
#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle input:focus:not(:focus-visible)+.wpconsent-preferences-checkbox-toggle-slider{
	outline:none;
}
/* The title and the descriptive paragraphs: focusable, not operable — no ring.
   On the title this is also a visible bug fix. showPreferences() runs
   `title.focus()` 100ms after every open, and a browser resolves :focus-visible
   for a programmatic focus from the last input modality it saw — so opening the
   page with Enter in the address bar, reloading with Cmd+R, or pressing any key
   before the dialog appears all leave a 2px ring boxed around the heading, while
   arriving by mouse does not. That is the "strange outline" on open, and why it
   looked intermittent. Suppressing :focus covers :focus-visible with it, and the
   focus move itself is deliberately left alone: it is what tells a screen reader
   the dialog opened. Selecting on the id as well as the attribute keeps this
   working if the plugin ever stops making the heading tabbable. */
#wpconsent-preferences-modal.wprd-prefs #wpconsent-preferences-title:focus,
#wpconsent-preferences-modal.wprd-prefs [tabindex="0"]:focus{outline:none}

/* --------------------------------------------------------------------------
   12. NARROW VIEWPORTS
   767px is the plugin's own --wpconsent-mobile-breakpoint, so our layout and
   frontend.css's mobile rules change hands at the same width.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
	#wpconsent-preferences-modal.wprd-prefs{padding:16px}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-content{
		max-height:min(92dvh,900px);border-radius:var(--wprd-r-lg);
	}
	#wpconsent-preferences-modal.wprd-prefs{--wprd-gutter:20px;--wprd-block-pad:16px}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-header{padding:16px var(--wprd-gutter)}
	#wpconsent-preferences-modal.wprd-prefs #wpconsent-preferences-title{font-size:20px}  /* DS H3 */
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-header::before{width:36px;height:36px;background-size:20px 20px}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-body{padding:16px var(--wprd-gutter) 20px}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-actions{padding:16px var(--wprd-gutter) 20px}
}

@media (max-width:600px){
	/* The pair takes a full-width row of its own and splits it in two equal
	   tracks; Save drops to the row below. Dropping the 148px floor is what lets
	   the two tracks shrink together at 320px instead of overflowing. */
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons-left{flex:1 1 100%}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wprd-reject-all,
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button.wpconsent-accept-all{
		min-width:0;
	}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-save-preferences{
		order:3;flex:1 1 100%;margin-right:0;
	}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button{padding:12px 16px}

	/* The 3-column table collapses to a record per cookie: name and duration on
	   one line, description under both. No pseudo-element labels — inventing
	   "Duration:" here would be untranslated UI text. */
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-header{display:none}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-item{
		/* minmax(45%,1fr) guarantees the name half the row: a plain `auto` duration
		   track shrink-wraps to max-content and squeezes the name instead. */
		grid-template-columns:minmax(45%,1fr) auto;
		grid-template-areas:"name duration" "desc desc";
		column-gap:12px;row-gap:4px;
		padding:14px 0;
	}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-header+.wpconsent-preferences-list-item{padding-top:4px}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-item .cookie-name{grid-area:name}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-item .cookie-desc{grid-area:desc}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-list-item .cookie-duration{
		grid-area:duration;text-align:right;font-size:12px;line-height:1.5;padding-top:2px;
	}
}

/* --------------------------------------------------------------------------
   13. SHORT VIEWPORTS
   Width is not the only axis a consent dialog has to survive: a phone held
   sideways is ~390px tall, and older small phones are 320px. The card's header
   and footer are fixed furniture, so every pixel they take is a pixel the
   scrolling disclosure does not get — measured at 844x390 the body was 167px,
   and at 568x320 it was 72px, which is two lines of text to read a cookie
   policy in. So on a short viewport the vertical rhythm is trimmed (never the
   horizontal one, and never the height of a control), and the card is allowed
   closer to the edges. 460px is the cut: above it sits 375x667, the shortest
   portrait phone in the matrix, which must keep the roomier spacing.
   -------------------------------------------------------------------------- */
@media (max-height:460px){
	#wpconsent-preferences-modal.wprd-prefs{padding:12px}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-content{
		max-height:min(94dvh,900px);
	}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-header{padding:12px var(--wprd-gutter)}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-body{padding:12px var(--wprd-gutter) 16px}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-actions{padding:12px var(--wprd-gutter) 16px}
}
/* A 568x320 phone in landscape matches the <=600px rule above and gets the
   stacked footer — 62px of a 320px-tall viewport spent on a second button row,
   while horizontally there is room to spare (Reject and Accept were 242px wide
   each). The stack is a NARROW-screen answer being applied to a SHORT one, so
   put Save back on the shared line here. The pair keeps `flex:1 1 0` from that
   rule, so it still splits the remaining width in two and equal prominence
   survives; order:0 beats the ties the <=600px block sets up. */
@media (max-width:600px) and (max-height:460px){
	/* `1 1 0`, not `0 1 auto`: the pair then takes whatever is left beside Save
	   and wraps its labels inside that, instead of demanding its max-content
	   width and bouncing onto a second row the moment a translation is long. */
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons-left{flex:1 1 0}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-save-preferences{
		order:1;flex:0 0 auto;margin-right:auto;
	}
}

/* --------------------------------------------------------------------------
   14. DEGRADE SAFELY
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-content{animation:none}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-content,
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-accordion-arrow,
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle-slider,
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle-slider:before{
		transition-duration:1ms;
	}
}
/* In forced-colours mode the UA replaces our fills, which would erase the
   switch entirely. Re-state it in system colours so state stays readable. */
@media (forced-colors:active){
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle-slider{
		border:1px solid CanvasText;
	}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-checkbox-toggle-slider:before{
		background-color:CanvasText;
	}
	#wpconsent-preferences-modal.wprd-prefs .wpconsent-preferences-buttons .wpconsent-banner-button{
		border-color:CanvasText;
	}
}