meliora-consent 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+## 0.2.0 — 2026-11-15
+
+- **One-line install:** `dist/meliora-consent.js` is the whole banner in one file. The stored choice and Consent Mode defaults apply at once, before any tag; the banner is built when the page is parsed; `meliora-consent.css` loads from next to the file. Settings can come from `data-` attributes on the script tag (`data-categories`, `data-policy`, `data-policy-<lang>`, `data-policy-version`, `data-consent-mode`, `data-gpc`, `data-renew-days`, `data-cookie-domain`, `data-log`, `data-insert-after`, `data-css="none"`). `window.MelioraConsentConfig` still works and wins over the attributes. The separate files in `src/` still work.
+- **On npm:** `npm install meliora-consent`. The package has `dist/` and `src/`, no dependencies; `import 'meliora-consent'` and `import 'meliora-consent/css'` work in bundlers. The script only loads its stylesheet by itself when it is its own file, so bundling it never requests a wrong CSS URL.
+- `npm run build` regenerates `dist/`; `npm run check` fails when it is out of date.
+- Meliora Accessibility 1.1.0 shows a "Cookie settings" button in its menu when this banner is on the page.
+- The demo page uses the one-file build and has a snippet builder for the install.
+- Tests: the whole suite now runs against the one-file build, plus tests for both packages installed with one tag each.
+
+## 0.1.0 — 2026-11-15
+
+First version, built to the spec in `COOKIE-CONSENT.md` (melioradev/meliora-landing).
+
+- Banner with Accept all, Reject all and Choose cookies, all in the same style. No ×; ignoring the banner is not consent.
+- Settings dialog: one switch per category (functional, analytics, marketing), "Always on" for necessary, cookie lists, Save / Reject all / Accept all.
+- Tagged scripts (`type="text/plain" data-consent`) and embeds (`iframe data-consent data-src`) are released only after consent, in document order. Embeds get an accessible placeholder.
+- Withdrawing a category deletes its declared first-party cookies and storage keys, then reloads.
+- Google Consent Mode v2 defaults and updates, `ads_data_redaction`, and a `meliora_consent_update` dataLayer event.
+- Global Privacy Control keeps marketing off.
+- Choice stored in `localStorage` (`meliora.consent`), asked again on a new policy version, a new category, or after 365 days. Optional cookie for subdomains and optional consent log (example Cloudflare Worker with D1).
+- Works with the Meliora accessibility panel: card beside its button, or a sheet that lifts it; follows its High contrast, Stop animations and text size settings.
+- Focus never hidden behind the banner; spacer at the end of the page while it shows.
+- Ten languages, following the page's `<html lang>`. Non-English strings need a native speaker's review.
+- Works under a strict Content-Security-Policy (no inline scripts or styles).

package/LICENSE

@@ -0,0 +1,45 @@
+Meliora Consent License (MIT with visible attribution)
+
+Copyright (c) 2026 Meliora Novotech Ltd (https://melioranovotech.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+1. The above copyright notice and this permission notice shall be included in
+   all copies or substantial portions of the Software.
+
+2. Visible attribution. Every website, web application, application or other
+   product that uses or includes the Software, or a work derived from it, must
+   display to its end users, in the cookie settings dialog or in another place
+   that is visible without inspecting source code:
+
+     (a) the credit "Made by Meliora Novotech Ltd", or an equivalent credit
+         translated into the language being displayed;
+     (b) a working link to https://melioranovotech.com; and
+     (c) a working link to https://github.com/melioradev/meliora-consent.
+
+   The credit and links must not be removed, hidden, made illegible, or made
+   unreachable by keyboard or assistive technology. The unmodified Software
+   meets this condition through the credit line at the bottom of its cookie
+   settings dialog.
+
+3. The name "Meliora Novotech" and its logos may not be used to endorse or
+   promote products derived from the Software without prior written permission,
+   except as required by condition 2.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Using the Software does not by itself make a website compliant with any
+privacy, cookie or accessibility law. Compliance depends on the website's own
+content, code, configuration and the services it uses. This is not legal
+advice.

package/README.md

@@ -1,3 +1,256 @@
-# Temporary Holding Version
+<p align="center">
+  <img src="docs/favicon.png" width="72" height="72" alt="">
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<h1 align="center">Meliora Consent</h1>
+
+<p align="center">
+  An accessible cookie banner for any website.<br>
+  Reject as easy as accept · Google Consent Mode v2 · ten languages · no dependencies · no tracking.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/meliora-consent"><img src="https://img.shields.io/npm/v/meliora-consent?color=2557b4&label=npm" alt="npm version"></a>
+  <a href="https://bundlephobia.com/package/meliora-consent"><img src="https://img.shields.io/bundlephobia/minzip/meliora-consent?color=2557b4&label=min%2Bgzip" alt="Size, minified and gzipped"></a>
+  <img src="https://img.shields.io/badge/dependencies-0-2557b4" alt="No dependencies">
+</p>
+
+<p align="center">
+  <code>npm install meliora-consent</code>
+</p>
+
+<p align="center">
+  <a href="https://melioradev.github.io/meliora-consent/"><strong>Live demo</strong></a> ·
+  <a href="#install">Install</a> ·
+  <a href="#configuration">Configuration</a> ·
+  <a href="#license">License</a>
+</p>
+
+<p align="center">
+  <img src="docs/screenshots/banner-light.png" width="420" alt="The banner at the bottom-left of a page, with Accept all, Reject all and Choose cookies buttons in the same style">
+  &nbsp;
+  <img src="docs/screenshots/dialog-light.png" width="420" alt="The cookie settings dialog with a switch for each category and the list of its cookies">
+</p>
+<p align="center">
+  <img src="docs/screenshots/banner-dark-he.png" width="420" alt="The banner in Hebrew, right to left, in a dark theme">
+  &nbsp;
+  <img src="docs/screenshots/banner-mobile.png" width="160" alt="On a phone the banner is a full-width sheet and the accessibility button moves above it">
+</p>
+
+---
+
+## What it does
+
+- **Nothing optional runs before a choice.** Analytics, marketing and other third-party scripts stay inert until their category is allowed. Ignoring the banner is not consent.
+- **Reject is as easy as accept.** "Accept all", "Reject all" and "Choose cookies" sit together on the first layer, in exactly the same style. There's no × and no "by continuing to browse…".
+- **Specific choices.** The settings dialog has a switch per category (functional, analytics, marketing) and lists each category's cookies.
+- **Easy to withdraw.** A "Cookie settings" button in your footer reopens the dialog. Turning a category off deletes its declared first-party cookies and reloads the page.
+- **Embeds wait too.** YouTube videos, maps and other iframes get an accessible placeholder with an "Allow and show" button.
+- **Google Consent Mode v2** defaults and updates, set before any Google tag loads.
+- **Global Privacy Control** is honored: marketing stays off.
+- **Accessible:** keyboard-first, WCAG 2.1 AA, never hides the element that has focus, works at 200% zoom and 320px width. The settings dialog is a native `<dialog>` with a focus trap and Esc.
+- **Follows the page language** (`<html lang>`), with right-to-left Hebrew and Arabic.
+- **Works with [Meliora Accessibility](https://github.com/melioradev/meliora-accessibility):** the banner stays clear of its button and follows its High contrast, Stop animations and text size settings.
+- **No banner when there's nothing to ask.** With no optional categories configured, it does nothing.
+- **Strict CSP friendly:** no inline scripts or styles, no requests to anyone but your own site.
+
+## Languages
+
+English (default) · العربية · 中文（简体） · Français · Deutsch · עברית · Italiano · Русский · Español · Українська
+
+The banner uses the page's `<html lang>` and falls back to English. All strings are in [`src/meliora-consent-i18n.js`](src/meliora-consent-i18n.js), and every one can be overridden from the config. Corrections from native speakers are very welcome.
+
+## Install
+
+```sh
+npm install meliora-consent
+```
+
+The package is one script and one stylesheet in `dist/`, with no dependencies. Use it whichever way suits your site:
+
+**1. As a script tag (any site).** Copy `node_modules/meliora-consent/dist/meliora-consent.js` and `meliora-consent.css` into the same folder of your site, and add one line to `<head>`, **without** `defer`, before any tracking script. The script loads the stylesheet next to it by itself:
+
+```html
+<script src="/js/meliora-consent.js"
+        data-policy="/privacy/" data-policy-version="2026-11-15" data-categories="analytics marketing"></script>
+```
+
+**2. With a bundler** (Vite, webpack, esbuild…). Import it at the top of your entry file, after a small module that sets your config:
+
+```js
+import './consent-config.js';     // window.MelioraConsentConfig = { categories: { analytics: {} }, policyUrl: '/privacy/' };
+import 'meliora-consent';          // the stored choice and Consent Mode defaults apply at once
+import 'meliora-consent/css';
+```
+
+A bundle that loads as a module or with `defer` runs after the page is parsed. That's fine when your Google tags are tagged with `data-consent` (basic mode, recommended). If they load untagged, use the script tag instead, so the Consent Mode defaults come first.
+
+**3. From a CDN, without installing.** npm packages are on jsDelivr automatically:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/meliora-consent@0.2.0/dist/meliora-consent.min.js"
+        data-policy="/privacy/" data-policy-version="2026-11-15" data-categories="analytics marketing"></script>
+```
+
+The [demo page](https://melioradev.github.io/meliora-consent/#install-title) builds this line for you. Then tag your tracking scripts with their category (below), and add a **Cookie settings** button to your footer:
+
+```html
+<button type="button" data-consent-open hidden>Cookie settings</button>
+```
+
+It starts hidden and appears only when there are choices to make, so it never shows without JavaScript. If you use [Meliora Accessibility](https://github.com/melioradev/meliora-accessibility) 1.1.0 or later, its menu also offers "Cookie settings".
+
+| Attribute | What it sets |
+|---|---|
+| `data-categories` | The categories your site uses: `functional`, `analytics`, `marketing` (separated by spaces). |
+| `data-policy` | Link to your cookie or privacy policy. |
+| `data-policy-he`, `data-policy-ar`, … | The policy in another language. |
+| `data-policy-version` | Change it whenever your cookies or wording change: everyone is asked again. |
+| `data-consent-mode="false"` | You don't use Google tags: skip Consent Mode. |
+| `data-gpc="false"` | Don't apply Global Privacy Control. |
+| `data-renew-days` | Ask again after this many days (default 365). |
+| `data-cookie-domain` | Share the choice with subdomains, e.g. `.example.com`. |
+| `data-log` | URL that receives each choice as proof of consent ([example Worker](examples/consent-log-worker.mjs)). |
+| `data-insert-after` | CSS selector to place the banner after in the DOM. |
+| `data-css="none"` | Don't load the stylesheet; include `dist/meliora-consent.css` yourself. |
+
+To list each cookie in the settings dialog, add `window.MelioraConsentConfig` (see [Configuration](#configuration)) in a file loaded just before the script. It wins over the attributes.
+
+With a strict Content-Security-Policy, the script tag and bundler routes need no extra rules; the CDN route needs `https://cdn.jsdelivr.net` in `script-src` and `style-src`. The separate files in `src/` (as in 0.1.0) still work, and are in the npm package too.
+
+### Tagging scripts
+
+- `type="text/plain"` makes the browser ignore the script. `data-consent` names its category: `functional`, `analytics` or `marketing` (several, separated by spaces, means all are needed).
+- When the category is allowed, the script is re-created as a real script, in document order. Scripts without `async` keep their order. Use `data-type="module"` for module scripts.
+- Prefer external files. Inline tagged scripts only run if your Content-Security-Policy allows them (a nonce is copied over).
+- Add each vendor's domains to your CSP as usual.
+
+### Embeds
+
+```html
+<iframe data-consent="marketing" data-src="https://www.youtube.com/embed/…" data-provider="YouTube"
+        title="Product demo video" width="560" height="315"></iframe>
+```
+
+Until the category is allowed, a placeholder takes the iframe's place: "This content is from YouTube. Showing it allows marketing cookies.", with "Allow marketing cookies and show" and "Cookie settings" buttons.
+
+## Configuration
+
+For cookie lists and everything else, put this in its own file (so your CSP can stay strict) and load it just before the banner's script:
+
+```js
+window.MelioraConsentConfig = {
+  policyUrl: {default: '/privacy/', he: '/he/privacy/'}, // or one URL
+  policyVersion: '2026-11-15',      // change it when the cookie list or wording changes: everyone is asked again
+  necessary: {cookies: [/* listed in the dialog, never blocked */]},
+  categories: {                     // only the categories you list appear
+    analytics: {
+      cookies: [
+        {name: '_ga', provider: 'Google Analytics', purpose: {default: 'Tells visitors apart', he: '…'}, duration: {default: '2 years', he: '…'}},
+        {name: '_ga_*', provider: 'Google Analytics', purpose: {default: 'Keeps the session state'}, duration: {default: '2 years'}},
+      ],
+      storageKeys: [],              // localStorage keys to delete when the category is withdrawn
+    },
+    // functional: {...}, marketing: {...}
+  },
+  googleConsentMode: true,          // false if you don't use Google tags
+  adsDataRedaction: true,
+  honorGPC: true,
+  renewAfterDays: 365,              // 180 for French audiences (CNIL)
+  cookieDomain: null,               // e.g. '.example.com' to share the choice with subdomains
+  logEndpoint: null,                // e.g. '/api/consent': see examples/consent-log-worker.mjs
+  insertAfter: null,                // CSS selector; default: after the accessibility button, or the skip link
+  text: {},                         // string overrides per language, e.g. {he: {title: '…'}, default: {…}}
+};
+```
+
+Cookie names ending in `*` match by prefix. List every cookie your site sets: this repository's tests fail on undeclared cookies, and yours should too.
+
+### Theming
+
+The banner uses your site's CSS custom properties when they exist, and light defaults otherwise. They're the same ones Meliora Accessibility uses:
+
+`--ink` (text) · `--muted` · `--surface` (background) · `--tint` (hover) · `--line` (borders) · `--field-border` · `--brand` (links) · `--button` / `--button-hover` · `--focus`
+
+Define them for your dark theme and the banner follows.
+
+## Google Consent Mode v2
+
+The boot script calls `gtag('consent', 'default', …)` with everything denied (except `security_storage`) before any Google tag, then `gtag('consent', 'update', …)` with the stored choice. After each choice it sends an update and pushes `{event: 'meliora_consent_update', meliora_consent: {…}}` to the `dataLayer`.
+
+| Category | Consent Mode signals |
+|---|---|
+| functional | `functionality_storage`, `personalization_storage` |
+| analytics | `analytics_storage` |
+| marketing | `ad_storage`, `ad_user_data`, `ad_personalization` |
+
+- **Basic mode** (recommended): tag Google's scripts with `data-consent`. Nothing reaches Google before a choice.
+- **Advanced mode:** leave Google's scripts untagged. They load at once and send cookieless pings while consent is denied. Whether that's acceptable is a legal decision for the site owner.
+- With Google Tag Manager, put the boot script before the container snippet.
+
+## JavaScript API
+
+```js
+MelioraConsent.get();              // {functional, analytics, marketing}, or null if undecided
+MelioraConsent.has('analytics');   // true or false
+MelioraConsent.open();             // opens the settings dialog
+MelioraConsent.reset();            // forgets the choice, deletes declared cookies, reloads
+document.addEventListener('meliora-consent', e => { /* e.detail: {choices, method, gpc} */ });
+```
+
+`<html data-consent="analytics marketing">` lists the allowed categories, for CSS.
+
+## How the choice is stored
+
+`localStorage` key `meliora.consent`:
+
+```json
+{"v":1,"id":"5f0c…","policy":"2026-11-15","ts":"2026-11-15T12:00:00.000Z","method":"custom","gpc":false,
+ "choices":{"functional":false,"analytics":true,"marketing":false}}
+```
+
+The visitor is asked again when `policyVersion` changes, a category is added, or the choice is older than `renewAfterDays`. If storage is blocked, the choice lasts for the current page only. The optional consent log stores the same record without IP address or user agent ([example Worker](examples/consent-log-worker.mjs)).
+
+## With Meliora Accessibility
+
+- The accessibility button is bottom-right; the banner is a card at the bottom-left. When there isn't room for both, the banner becomes a full-width sheet and sets `--meliora-consent-inset`, so the accessibility button moves above it (Meliora Accessibility 1.1.0 or later).
+- Tab order: skip link → accessibility button → its × → banner.
+- High contrast, Stop animations and text size from the accessibility menu apply to the banner and the dialog.
+
+## Accessibility
+
+- The banner is a named region early in the reading order. It isn't focused or announced on load, so it doesn't interrupt. After a choice, "Cookie choices saved" is announced and focus moves to `<main>`.
+- The dialog starts on its title, Esc closes it without saving, and focus returns to the button that opened it.
+- Switches are `<button aria-pressed>`, and the knob position, not only its color, shows the state.
+- Focus is never hidden behind the banner (WCAG 2.2, 2.4.11), and a spacer at the end of the page lets the last content scroll above it.
+- Every button is at least 44×44 px, and the banner is never more than half the screen high.
+
+Tested with axe, keyboard-only use, 200% text at 320px, and right-to-left languages. Please report anything that doesn't work with your browser or assistive technology in [Issues](https://github.com/melioradev/meliora-consent/issues).
+
+A cookie banner doesn't make a site compliant on its own, and nothing here is legal advice. Check your cookie list and wording with someone who knows the law where your visitors are.
+
+## Development
+
+```sh
+npm install
+npm run serve          # demo at http://127.0.0.1:8790/
+npm run build          # regenerate dist/ from src/ (no dependencies)
+npm run check          # dist/ up to date, syntax check
+npx playwright test    # browser tests: Chromium, Firefox, WebKit
+```
+
+The tests serve every page with a strict Content-Security-Policy and fail on any CSP violation or page error. The tests that run with the accessibility menu need a checkout of [meliora-accessibility](https://github.com/melioradev/meliora-accessibility) next to this repository, and are skipped otherwise.
+
+Not included: IAB TCF, regional variants by geolocation, automatic blocking of untagged scripts, a hosted cookie scanner, and US "Do Not Sell or Share" flows beyond honoring GPC.
+
+## License
+
+**MIT with visible attribution:** see [LICENSE](LICENSE).
+
+- You may use, copy, modify and redistribute it, including in commercial products, for free.
+- Every site or product that uses it, or a modified version, must visibly show **"Made by Meliora Novotech Ltd"** (or a translation), with working links to <https://melioranovotech.com> and to this repository.
+- The unmodified banner already shows this credit at the bottom of its cookie settings dialog, so keeping it there is all you need to do.
+
+---
+
+<p align="center">Made by <a href="https://melioranovotech.com">Meliora Novotech Ltd</a></p>

package/dist/meliora-consent.css

@@ -0,0 +1,129 @@
+/*! Meliora Consent — https://github.com/melioradev/meliora-consent
+    Made by Meliora Novotech Ltd — MIT with visible attribution, see LICENSE. */
+/* Banner, settings dialog, embed placeholder and status message.
+   Colors follow your site's CSS custom properties when they exist (--ink, --surface, --line, --button, --focus…),
+   the same ones the Meliora accessibility panel uses, with built-in light defaults otherwise. */
+
+.mc {
+  --mc-bg: var(--surface, #fff); --mc-fg: var(--ink, #15173f); --mc-muted: var(--muted, #4a4f68);
+  --mc-line: var(--line, #d8dfeb); --mc-border: var(--field-border, #8d95ad); --mc-tint: var(--tint, #eaf1fb);
+  --mc-button: var(--button, #2557b4); --mc-button-hover: var(--button-hover, #1c4592); --mc-button-ink: #fff;
+  --mc-link: var(--brand, #2557b4); --mc-focus: var(--focus, #2557b4);
+  box-sizing: border-box; color: var(--mc-fg); font-size: 1rem; line-height: 1.5; font-weight: 400; text-align: start;
+}
+.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }
+:where(.mc) p { margin: 0; }
+.mc a { color: var(--mc-link); text-decoration: underline; text-underline-offset: .15em; }
+.mc :focus-visible { outline: 3px solid var(--mc-focus); outline-offset: 2px; }
+.mc-title { margin: 0 0 .35rem; color: var(--mc-fg); font-size: 1.125rem; font-weight: 650; line-height: 1.3; letter-spacing: 0; text-transform: none; }
+/* Space at the end of the page while the banner shows, so the last content can scroll above it. */
+.mc-spacer { display: block; margin: 0; padding: 0; pointer-events: none; }
+
+/* ---------- buttons: Accept, Reject and Choose share one style (no button is favoured) ---------- */
+.mc-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
+.mc-btn {
+  flex: 1 1 auto; min-width: 2.75rem; min-height: 2.75rem; margin: 0; padding: .5rem 1rem;
+  border: 2px solid var(--mc-button); border-radius: .5rem; background: var(--mc-button); color: var(--mc-button-ink);
+  font: inherit; font-weight: 600; line-height: 1.25; cursor: pointer;
+}
+.mc-btn:hover { border-color: var(--mc-button-hover); background: var(--mc-button-hover); }
+
+/* ---------- banner (first layer) ---------- */
+/* Card at the bottom-left (physical left in LTR and RTL: the accessibility button owns the bottom-right). */
+.mc-banner {
+  position: fixed; z-index: 59; left: 1rem; bottom: 1rem; width: min(26rem, calc(100% - 2rem));
+  max-height: 50dvh; overflow: auto; overscroll-behavior: contain; margin: 0; /* sites often style <section> */
+  padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--mc-border); border-radius: 1rem;
+  background: var(--mc-bg); box-shadow: 0 .5rem 1.5rem -.5rem rgb(17 19 58 / .35);
+}
+/* Not enough room beside the button: a full-width sheet; the script lifts the button with --meliora-consent-inset. */
+.mc-banner.mc-sheet { left: 0; right: 0; bottom: 0; width: auto; border-width: 1px 0 0; border-radius: 1rem 1rem 0 0; }
+.mc-text { margin-top: .25rem; }
+.mc-gpc { margin-top: .75rem; padding: .5rem .75rem; border-inline-start: 3px solid var(--mc-button); background: var(--mc-tint); font-size: .9375rem; }
+
+/* ---------- status message (role="status"), shown for 2.5 s where the banner was ---------- */
+.mc-status {
+  position: fixed; z-index: 59; left: 1rem; bottom: 1rem; max-width: min(20rem, calc(100% - 6rem)); margin: 0;
+  padding: .5rem .85rem; border: 1px solid #fff; border-radius: .5rem; background: #15173f; color: #fff; font-weight: 600;
+}
+.mc-status:empty { padding: 0; border: 0; }
+
+/* ---------- settings dialog (second layer) ---------- */
+dialog.mc-dialog {
+  width: min(36rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0;
+  overflow: auto; overscroll-behavior: contain;
+  border: 1px solid var(--mc-border); border-radius: 1rem; background: var(--mc-bg); color: var(--mc-fg);
+}
+dialog.mc-dialog::backdrop { background: rgb(10 12 40 / .45); }
+@media (max-width: 30em) {
+  dialog.mc-dialog { width: 100%; max-height: 88dvh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 1rem 1rem 0 0; }
+}
+.mc-head {
+  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
+  padding: .75rem .75rem .75rem 1.25rem; border-bottom: 1px solid var(--mc-line); background: var(--mc-bg);
+}
+.mc-dialog[dir="rtl"] .mc-head { padding: .75rem 1.25rem .75rem .75rem; }
+.mc-head .mc-title { margin: 0; font-size: 1.2rem; }
+.mc-head .mc-title:focus { outline: none; }
+.mc-head .mc-title:focus-visible { outline: 3px solid var(--mc-focus); }
+.mc-close {
+  display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; padding: 0;
+  border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
+}
+.mc-close:hover { background: var(--mc-tint); }
+.mc-close svg { width: 1.25rem; height: 1.25rem; }
+.mc-body { padding: 1rem 1.25rem 1.25rem; }
+.mc-body > .mc-gpc { margin: 0 0 .75rem; }
+
+.mc-cats { margin: 0; padding: 0; list-style: none; }
+.mc-cat { padding: .75rem 0; border-bottom: 1px solid var(--mc-line); }
+.mc-cat:first-child { padding-top: 0; }
+.mc-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 2.75rem;
+  margin: 0; padding: .25rem .5rem; border: 0; border-radius: .5rem; background: none; color: inherit; font: inherit; text-align: start;
+}
+button.mc-row { cursor: pointer; }
+button.mc-row:hover { background: var(--mc-tint); }
+.mc-label { font-weight: 600; }
+.mc-always { color: var(--mc-muted); font-size: .9375rem; font-weight: 600; }
+.mc-desc { padding: 0 .5rem; color: var(--mc-muted); font-size: .9375rem; }
+
+/* Switch: the knob position (not only its color) shows the state. Same as the accessibility panel. */
+.mc-switch { position: relative; flex-shrink: 0; width: 2.1rem; height: 1.2rem; border: 1px solid var(--mc-border); border-radius: 1rem; background: var(--mc-line); }
+.mc-switch::after {
+  content: ""; position: absolute; top: 50%; left: .15rem; width: .8rem; height: .8rem; margin-top: -.4rem;
+  border-radius: 50%; background: var(--mc-muted); transition: left .15s;
+}
+[aria-pressed="true"] > .mc-switch { border-color: var(--mc-button); background: var(--mc-button); }
+[aria-pressed="true"] > .mc-switch::after { left: calc(100% - .95rem); background: #fff; }
+.mc[dir="rtl"] .mc-switch { transform: scaleX(-1); }
+
+.mc-details { margin: .25rem .5rem 0; font-size: .9375rem; }
+.mc-details summary { padding: .6rem 0; font-weight: 500; cursor: pointer; }
+.mc-cookie { display: grid; gap: .25rem; margin: .25rem 0 .5rem; padding: .5rem .75rem; border: 1px solid var(--mc-line); border-radius: .5rem; }
+.mc-cookie div { display: grid; grid-template-columns: minmax(5.5rem, auto) 1fr; gap: .75rem; }
+.mc-cookie dt { font-weight: 600; }
+.mc-cookie dd { margin: 0; overflow-wrap: anywhere; }
+.mc-cookie code { font: .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.mc-policy { margin-top: 1rem; }
+.mc-credit { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--mc-line); color: var(--mc-muted); font-size: .8125rem; text-align: center; }
+
+/* ---------- placeholder for an embed waiting for consent ---------- */
+iframe[data-consent][hidden] { display: none !important; }
+.mc-embed {
+  display: grid; align-content: center; gap: .5rem; width: 100%; padding: 1.25rem;
+  border: 1px solid var(--mc-border); border-radius: .75rem; background: var(--mc-tint);
+}
+.mc-embed-title { font-weight: 650; }
+.mc-embed .mc-buttons { margin-top: .25rem; }
+
+/* ---------- the accessibility panel's settings apply ---------- */
+html.a11y-contrast .mc-banner, html.a11y-contrast dialog.mc-dialog, html.a11y-contrast .mc-embed { border: 2px solid #000; box-shadow: none; }
+html.a11y-contrast .mc-switch { border: 2px solid #000; background: #fff; }
+html.a11y-contrast .mc-switch::after { background: #000; }
+html.a11y-contrast [aria-pressed="true"] > .mc-switch { background: #000; }
+html.a11y-contrast [aria-pressed="true"] > .mc-switch::after { background: #fff; }
+html.a11y-contrast .mc-status { background: #000; border: 2px solid #fff; }
+html.a11y-contrast .mc-status:empty { border: 0; }
+@media (prefers-reduced-motion: reduce) { .mc-switch::after { transition: none; } }
+@media print { .mc-banner, .mc-status { display: none !important; } }