@ecomconsult/consentkit 0.5.6 → 0.5.8

package/src/ck-ui.js

@@ -32,6 +32,26 @@
       colExpiry: 'Expires',
       floating: 'Cookie settings',
       poweredBy: 'Powered by ConsentKit',
+      // SPEC V1.12 §3 — services inside a category group.
+      //
+      // `svcCount`/`ckCount` are PLURAL FORMS, not plain strings: «1 сервис»,
+      // «2 сервиса», «5 сервисов». Each is an array read by plural() below, and
+      // each language supplies as many forms as its own grammar needs — one for
+      // English, three for Russian. {n} is the number.
+      svcCount: ['{n} service', '{n} services'],
+      ckCount: ['{n} cookie', '{n} cookies'],
+      svcPolicy: 'Privacy policy',
+      // The service's own cookies, listed under it rather than in the group's
+      // «Which cookies» table.
+      svcCookies: 'Cookies it sets',
+      // SPEC V1.10 §2 — the blocked-embed placeholder. {host} is the vendor
+      // label when the database knows one and the bare host otherwise; {cat} is
+      // the localized category title, taken from cat.<name>.title below, so the
+      // name in the placeholder is the name on the switch in the panel.
+      phText: 'Content from {host} goes here. It will load once you allow «{cat}».',
+      phAllow: 'Allow and show',
+      phSettings: 'Cookie settings',
+      phLabel: 'Blocked content',
       cat: {
         necessary: {
           title: 'Necessary',
@@ -72,6 +92,15 @@
       colExpiry: 'Срок',
       floating: 'Настройки cookie',
       poweredBy: 'Работает на ConsentKit',
+      // SPEC V1.12 §3. Три формы: 1 сервис, 2 сервиса, 5 сервисов.
+      svcCount: ['{n} сервис', '{n} сервиса', '{n} сервисов'],
+      ckCount: ['{n} cookie', '{n} cookie', '{n} cookie'],
+      svcPolicy: 'Политика',
+      svcCookies: 'Какие cookie ставит',
+      phText: 'Здесь содержимое от {host}. Оно загрузится после согласия на «{cat}».',
+      phAllow: 'Разрешить и показать',
+      phSettings: 'Настроить cookie',
+      phLabel: 'Заблокированное содержимое',
       cat: {
         necessary: {
           title: 'Необходимые',
@@ -103,9 +132,22 @@
     'bannerTitle', 'bannerText', 'more', 'acceptAll', 'rejectAll', 'customize',
     'bannerLabel', 'panelTitle', 'panelIntro', 'save', 'close', 'alwaysOn',
     'cookiesIn', 'noCookies', 'colName', 'colVendor', 'colPurpose', 'colExpiry', 'floating',
-    'poweredBy'
+    'poweredBy',
+    // SPEC V1.10 §2. Present in ck-locales.js for ro only; every other external
+    // locale falls back to DICT.en through buildStrings(), which is what §2
+    // asks for («остальные языки — en»).
+    'phText', 'phAllow', 'phSettings', 'phLabel',
+    // SPEC V1.12 §3. svcPolicy/svcCookies are plain strings and belong here;
+    // svcCount/ckCount are ARRAYS of plural forms and are filled by their own
+    // branch in buildStrings() — listing them here would be a bug, because this
+    // loop only copies values that are `typeof === 'string'` and would leave
+    // every external locale on the English plurals.
+    'svcPolicy', 'svcCookies'
   ];
 
+  // Plural-form keys, filled separately from STR_KEYS (see above).
+  var PLURAL_KEYS = ['svcCount', 'ckCount'];
+
   // builtin(en,ru) <- window.__ckLocales, read at render time so the locales
   // file may load in any order relative to this one.
   function localeTable() {
@@ -137,6 +179,60 @@
     return 'en';
   }
 
+  /* SPEC V1.12 §3 — plural forms.
+
+     Validated as a WHOLE: an array of at least one non-empty string, or null.
+     A locale that supplies `['{n} сервис']` alone is honest — it says «this
+     language has one form» — and plural() below simply always picks it. */
+  function pluralForms(v) {
+    if (!v || !Array.isArray(v) || !v.length) return null;
+    var out = [];
+    for (var i = 0; i < v.length && i < 3; i++) {
+      if (typeof v[i] !== 'string' || !v[i]) return null;
+      out.push(v[i]);
+    }
+    return out;
+  }
+
+  /* Picks the form for `n` and substitutes it in.
+
+     Three families, chosen by the language code rather than by
+     Intl.PluralRules: Intl is present in every browser this client supports,
+     but its category NAMES ('one'|'few'|'many'|'other') vary per language, and
+     mapping them onto a positional array is more code and more failure modes
+     than the two rules that actually matter here.
+
+       ru/uk/sr/hr/…  1, 21, 31 -> [0];  2-4, 22-24 -> [1];  0, 5-20 -> [2]
+       ro             1 -> [0];  0 and 2-19 -> [1];  20+ -> [2] («20 de servicii»)
+       everything else  1 -> [0];  otherwise -> [1]
+
+     A locale with fewer forms than the rule asks for clamps to its last one, so
+     a single-form array can never index past its end. */
+  var SLAVIC_PLURAL = { ru: 1, uk: 1, sr: 1, hr: 1, cs: 1, sk: 1, pl: 1, be: 1, bs: 1 };
+
+  function pluralIndex(lang, n) {
+    var code = String(lang || 'en').slice(0, 2).toLowerCase();
+    var mod10 = n % 10, mod100 = n % 100;
+    if (SLAVIC_PLURAL[code]) {
+      if (mod10 === 1 && mod100 !== 11) return 0;
+      if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return 1;
+      return 2;
+    }
+    if (code === 'ro' || code === 'mo') {
+      if (n === 1) return 0;
+      if (n === 0 || (mod100 >= 1 && mod100 <= 19)) return 1;
+      return 2;
+    }
+    return n === 1 ? 0 : 1;
+  }
+
+  function plural(forms, n, lang) {
+    var list = pluralForms(forms) || ['{n}'];
+    var idx = pluralIndex(lang, n);
+    if (idx >= list.length) idx = list.length - 1;
+    return list[idx].replace('{n}', String(n));
+  }
+
   // Deep two-level fill from en: a partial locale must never yield undefined,
   // which would render the literal string "undefined".
   function buildStrings(lang, table) {
@@ -148,6 +244,15 @@
       var k = STR_KEYS[i];
       out[k] = (typeof src[k] === 'string' && src[k]) ? src[k] : base[k];
     }
+    /* SPEC V1.12 §3 — plural forms. An array of 1..3 strings, taken from the
+       locale only when it is a non-empty array of strings; anything else falls
+       back to English wholesale rather than per-slot, because a half-filled
+       plural table produces «2 services» inside a Russian sentence. */
+    for (i = 0; i < PLURAL_KEYS.length; i++) {
+      var pk = PLURAL_KEYS[i];
+      out[pk] = pluralForms(src[pk]) || base[pk].slice();
+    }
+
     out.cat = {};
     var sc = (src.cat && typeof src.cat === 'object') ? src.cat : {};
     for (i = 0; i < ALL_CATS.length; i++) {
@@ -161,6 +266,74 @@
     return out;
   }
 
+  /* ------------------------------------------- blocked-embed placeholder (§2) */
+
+  /* The one piece of the placeholder that is worth testing without a DOM: which
+     sentence a visitor reads. PURE — takes a host (or vendor label), a category
+     name and a language, returns the finished string.
+
+     `host` is used verbatim: the core has no vendor-label table (only the SaaS
+     scanner's VENDOR_DB does, server-side), so §2's «ярлык хоста; без ярлыка —
+     содержимое с <host>» collapses to the host here. When a label lookup is
+     added to the core later, this signature already accepts it — pass the label
+     instead of the host and nothing else changes.
+
+     The category name is resolved through the SAME buildStrings() the panel
+     uses, so «Маркетинг» in the placeholder is «Маркетинг» on the switch. An
+     unknown language falls back to en, an unknown category to marketing — the
+     category a strict-mode interception is filed under. */
+  /* SPEC V1.12 §3 — «заглушки iframe — по сервису».
+
+     `subject` names what the visitor has to agree to for this frame to appear.
+     Left out, it is the category, exactly as in 0.5.7. Passed, it is the
+     SERVICE name — which is the only honest sentence in the state this wave
+     introduces: analytics granted, one service refused, the frame still held.
+     Naming the category there would read «загрузится после согласия на
+     "Аналитика"» to a visitor who has already agreed to analytics. */
+  function placeholderText(host, category, lang, subject) {
+    var table = localeTable();
+    var T2 = buildStrings(resolveLang(lang, table), table);
+    var cat = (category && T2.cat[category]) ? category : 'marketing';
+    var name = String(host || '').trim();
+    var label = (typeof subject === 'string' && subject.trim())
+      ? subject.trim() : T2.cat[cat].title;
+    return T2.phText
+      .replace('{host}', name || T2.phLabel)
+      .replace('{cat}', label);
+  }
+
+  /* Which service, if any, is what is actually holding this frame back? Null
+     when the frame is held by its category alone — the ordinary 0.5.7 case. */
+  function holdingService(src) {
+    var ck = api();
+    if (!ck || typeof ck._serviceForUrl !== 'function') return null;
+    try {
+      var svc = ck._serviceForUrl(src);
+      if (!svc) return null;
+      // Only when the SERVICE is the reason: with the category still denied the
+      // category is the honest thing to name, because granting the service
+      // alone would not bring the frame back.
+      if (typeof ck.allowed === 'function' && !ck.allowed(svc.category)) return null;
+      if (typeof ck.allowedService !== 'function') return null;
+      return ck.allowedService(svc.id) ? null : svc;
+    } catch (e) { return null; }
+  }
+
+  /* Hostname of a blocked frame's real address, for the sentence above. The
+     data-src is whatever the page asked for, which may be protocol-relative or
+     relative, so it is resolved against the page like the core does it. */
+  function hostOf(src) {
+    var s = String(src || '');
+    try {
+      var base = (typeof location !== 'undefined' && location.href) || 'http://localhost/';
+      var h = new URL(s, base).hostname || '';
+      return h.toLowerCase().replace(/^www\./, '');
+    } catch (e) {
+      var m = /^(?:[a-z]+:)?\/\/([^/?#]+)/i.exec(s);
+      return m ? m[1].toLowerCase().replace(/:\d+$/, '').replace(/^www\./, '') : '';
+    }
+  }
+
   /* --------------------------------------------------------------- styles */
 
   var CSS = [
@@ -285,6 +458,28 @@
     '.ck-cat__badge{font-size:12px;font-weight:500;color:var(--ck-muted);',
     'border:1px solid var(--ck-line);border-radius:999px;padding:1px 8px}',
     '.ck-cat__desc{margin:4px 0 0;font-size:13.5px;color:var(--ck-muted)}',
+    /* SPEC V1.12 §3 — «N сервисов · M cookie». --ck-muted, like every other
+       secondary label on the card, and it is measured for AA against the card
+       background by the same rule the description above answers to. */
+    '.ck-cat__count{font-size:12px;font-weight:500;color:var(--ck-muted)}',
+
+    /* ---- services inside a group (SPEC V1.12 §3) ---- */
+    /* Indented and rule-separated so the nesting reads without colour: a
+       service belongs to the group above it, and its own cookie table belongs
+       to it. The left border is the only decoration; everything else is
+       spacing, which survives forced-colours mode intact. */
+    '.ck-svcs{margin:12px 0 0;padding-left:12px;border-left:2px solid var(--ck-line)}',
+    '.ck-svc{padding:10px 0;border-bottom:1px solid var(--ck-line)}',
+    '.ck-svc:first-child{padding-top:2px}',
+    '.ck-svc:last-child{border-bottom:0;padding-bottom:2px}',
+    '.ck-svc__top{display:flex;gap:12px;align-items:flex-start}',
+    '.ck-svc__txt{flex:1 1 auto;min-width:0}',
+    '.ck-svc__name{font-size:14px;font-weight:600}',
+    '.ck-svc__vendor{margin:2px 0 0;font-size:12.5px;color:var(--ck-muted)}',
+    '.ck-svc__desc{margin:4px 0 0;font-size:13px;color:var(--ck-muted)}',
+    /* --ck-link, not --ck-accent: accent-coloured TEXT goes through the same
+       >= 4.5:1 rule as «Подробнее» — see the note on the `a{}` rule above. */
+    '.ck-svc__policy{display:inline-block;margin-top:4px;font-size:12.5px;color:var(--ck-link)}',
 
     /* ---- switch ---- */
     '.ck-switch{flex:none;width:46px;height:27px;padding:0;border-radius:999px;',
@@ -294,6 +489,11 @@
     '.ck-switch[aria-checked="true"]{background:var(--ck-accent);border-color:var(--ck-accent)}',
     '.ck-switch[aria-checked="true"]::after{left:auto;right:2px;border-color:transparent}',
     '.ck-switch[disabled]{cursor:not-allowed;opacity:.55}',
+    /* The service switch: the same control, smaller. Still 27px of vertical
+       hit area at the row level and a real <button role="switch">, so the
+       keyboard and screen-reader behaviour is identical to the group's. */
+    '.ck-switch--sm{width:38px;height:22px}',
+    '.ck-switch--sm::after{width:16px;height:16px}',
 
     /* ---- cookie table ---- */
     '.ck-det{margin-top:12px}',
@@ -434,6 +634,7 @@
   var LANG = 'en';             // the code T was built from, reassigned per mount
   var nodes = {};              // banner/panel/fab refs
   var switches = {};           // category -> button
+  var serviceSwitches = {};    // category -> [button], SPEC V1.12 §3
   var panelOpen = false;
   var lastFocus = null;
 
@@ -463,6 +664,92 @@
     return out;
   }
 
+  /* ------------------------------------------------------- services (§3) */
+
+  /* The services of one category, as the CORE normalised them.
+
+     Read through ConsentKit._services() rather than off config.services
+     directly: the core drops rows with `enabled: false`, a malformed id or an
+     unknown category, and the panel must list exactly the set the engine
+     blocks by. A config the core has not seen (no init(), or a core too old to
+     know about services) yields nothing, and the panel renders as it did in
+     0.5.7 — which is what «старый конфиг рендерится как раньше» asks for. */
+  function servicesFor(cat) {
+    var ck = api();
+    var list = null;
+    try {
+      if (ck && typeof ck._services === 'function') list = ck._services();
+    } catch (e) { list = null; }
+    if (!list || !Array.isArray(list)) return [];
+    var out = [];
+    for (var i = 0; i < list.length; i++) {
+      if (list[i] && list[i].category === cat) out.push(list[i]);
+    }
+    return out;
+  }
+
+  /* The service's one-line purpose, in the banner's language.
+
+     §3 asks for «одна строка purpose на языке баннера» and §2 ships
+     `purpose: { ru?, ro?, en? }`. Falls back to en, then to nothing at all —
+     an empty purpose renders no paragraph rather than the string "undefined"
+     or a stray language. LANG is the resolved banner code, so a `pt-BR`
+     banner asks for `pt` and lands on en, which is the honest answer. */
+  function servicePurpose(svc, lang) {
+    var p = (svc && svc.purpose) || {};
+    var code = String(lang == null ? LANG : lang || 'en').slice(0, 2).toLowerCase();
+    var v = p[code] || p.en;
+    return (typeof v === 'string' && v.trim()) ? v.trim() : '';
+  }
+
+  /* The cookieTable rows this service claims, by name.
+
+     §3: «под сервисом его cookie (имя · срок · назначение)» drawn «from
+     cookieTable rows whose name is in service.cookies». A name the service
+     declares but the table does not describe is NOT invented here: the panel
+     shows what the owner wrote down, and the declaration page is where the
+     full list lives. */
+  function cookieRowsForService(rows, svc) {
+    var names = (svc && svc.cookies) || [];
+    if (!names.length) return [];
+    var out = [];
+    for (var i = 0; i < rows.length; i++) {
+      var n = rows[i] && rows[i].name;
+      if (typeof n === 'string' && names.indexOf(n) > -1) out.push(rows[i]);
+    }
+    return out;
+  }
+
+  /* SPEC V1.12 §3 — «N сервисов · M cookie» on the group header. Pure, so the
+     wording in each of the three languages is testable without a DOM.
+
+     The cookie half counts the WHOLE group, services and loose rows alike: the
+     line answers «сколько cookie в этой группе», which is the question a
+     visitor scanning the header is actually asking. */
+  function groupCountLabel(serviceCount, cookieCount, strings, lang) {
+    return plural(strings.svcCount, serviceCount, lang) + ' · ' +
+           plural(strings.ckCount, cookieCount, lang);
+  }
+
+  /* Rows left over once every service has taken its own — «Cookie в этой
+     группе (N)» keeps meaning «the rest», exactly as it did before services
+     existed. With no services at all this returns the whole list unchanged. */
+  function looseCookies(rows, svcs) {
+    if (!svcs.length) return rows;
+    var claimed = {};
+    for (var i = 0; i < svcs.length; i++) {
+      var names = svcs[i].cookies || [];
+      for (var j = 0; j < names.length; j++) claimed[names[j]] = true;
+    }
+    var out = [];
+    for (var k = 0; k < rows.length; k++) {
+      var n = rows[k] && rows[k].name;
+      if (typeof n === 'string' && claimed[n]) continue;
+      out.push(rows[k]);
+    }
+    return out;
+  }
+
   /* ----------------------------------------------------------------- theme */
 
   // Built-in palettes. Dark values are picked for >= 4.5:1 text contrast.
@@ -1195,11 +1482,155 @@
       b.addEventListener('click', function () {
         var on = b.getAttribute('aria-checked') === 'true';
         b.setAttribute('aria-checked', on ? 'false' : 'true');
+        /* SPEC V1.12 §3 — the group switch is the master:
+             off -> every service of the group goes off and is blocked;
+             on  -> the services come back, EXCEPT the ones turned off by hand.
+           The hand-set state is kept on the service switch itself (dataset.man)
+           rather than being read back off the group, which is what lets a
+           manual refusal survive the group being toggled off and on again. */
+        syncGroup(cat);
       });
     }
     return b;
   }
 
+  /* SPEC V1.12 §3 — one service, with its own switch, its purpose, its policy
+     link and the cookies it sets. */
+  function makeServiceSwitch(svc, cat) {
+    var b = el('button', 'ck-switch ck-switch--sm');
+    b.type = 'button';
+    b.setAttribute('role', 'switch');
+    b.setAttribute('aria-checked', 'false');
+    b.dataset.svc = svc.id;
+    b.dataset.cat = cat;
+    // '1' once the visitor has switched this service off by hand. Read by
+    // syncGroup() when the group comes back on, and cleared when they switch it
+    // on again — a service the visitor re-enables is no longer «отключён вручную».
+    b.dataset.man = '';
+    /* A service switch is only ever clickable while its group is ON: syncGroup()
+       disables it otherwise, and a disabled <button> fires no click. So this
+       handler always runs with the group on, and there is no "turn the group
+       back on too" case to handle — the visitor reaches a refused group through
+       the group's own switch. */
+    b.addEventListener('click', function () {
+      var on = b.getAttribute('aria-checked') === 'true';
+      b.setAttribute('aria-checked', on ? 'false' : 'true');
+      // '1' = «switched off by hand». Cleared when it is switched back on, so a
+      // re-enabled service is no longer «отключён вручную» and follows its group.
+      b.dataset.man = on ? '1' : '';
+    });
+    return b;
+  }
+
+  /* Pushes the group switch's state down onto its services. Called when the
+     group is clicked and when the panel is synced from the stored state. */
+  function syncGroup(cat) {
+    var on = !!(switches[cat] && switches[cat].getAttribute('aria-checked') === 'true');
+    var list = serviceSwitches[cat] || [];
+    for (var i = 0; i < list.length; i++) {
+      var b = list[i];
+      // Group off: everything off. Group on: everything on except what the
+      // visitor turned off by hand.
+      var want = on && b.dataset.man !== '1';
+      b.setAttribute('aria-checked', want ? 'true' : 'false');
+      // A service cannot be granted while its group is refused, and a switch
+      // that looks operable but changes nothing is worse than a disabled one.
+      b.disabled = !on;
+      if (!on) b.setAttribute('aria-disabled', 'true');
+      else b.removeAttribute('aria-disabled');
+    }
+  }
+
+  function buildService(svc, cat, rows) {
+    var wrap = el('div', 'ck-svc');
+    var top = el('div', 'ck-svc__top');
+    var txt = el('div', 'ck-svc__txt');
+
+    var nameId = 'ck-svc-' + svc.id;
+    var name = el('div', 'ck-svc__name');
+    var nameSpan = el('span', null, svc.name);
+    nameSpan.id = nameId;
+    name.appendChild(nameSpan);
+    txt.appendChild(name);
+
+    if (svc.vendor) txt.appendChild(el('p', 'ck-svc__vendor', svc.vendor));
+
+    var descId = null;
+    var purpose = servicePurpose(svc);
+    if (purpose) {
+      descId = nameId + '-desc';
+      var p = el('p', 'ck-svc__desc', purpose);
+      p.id = descId;
+      txt.appendChild(p);
+    }
+
+    /* «Политика» — target=_blank rel=noopener, per §3. The URL is already
+       http(s)-validated by the core's normalizeService(), which is where a
+       javascript: address is dropped; nothing unvalidated reaches an href. */
+    if (svc.privacyUrl) {
+      var a = el('a', 'ck-svc__policy', T.svcPolicy);
+      a.href = svc.privacyUrl;
+      a.target = '_blank';
+      a.rel = 'noopener noreferrer';
+      // The link text is the same word on every row, so a screen reader needs
+      // the service name to tell them apart.
+      a.setAttribute('aria-label', T.svcPolicy + ' — ' + svc.name);
+      txt.appendChild(a);
+    }
+
+    var sw = makeServiceSwitch(svc, cat);
+    sw.setAttribute('aria-labelledby', nameId);
+    if (descId) sw.setAttribute('aria-describedby', descId);
+    if (!serviceSwitches[cat]) serviceSwitches[cat] = [];
+    serviceSwitches[cat].push(sw);
+
+    top.appendChild(txt);
+    top.appendChild(sw);
+    wrap.appendChild(top);
+
+    var own = cookieRowsForService(rows, svc);
+    if (own.length) wrap.appendChild(cookieTable(own, T.svcCookies + ' (' + own.length + ')'));
+
+    return wrap;
+  }
+
+  /* The <details> block a group and a service both use for their cookies:
+     same columns, same markup, one summary line apart. */
+  function cookieTable(rows, summaryText) {
+    var det = el('details', 'ck-det');
+    var sum = el('summary');
+    sum.appendChild(document.createTextNode(summaryText));
+    det.appendChild(sum);
+
+    var tw = el('div', 'ck-tablewrap');
+    var table = el('table');
+    var thead = el('thead');
+    var htr = el('tr');
+    var heads = [T.colName, T.colVendor, T.colPurpose, T.colExpiry];
+    for (var h = 0; h < heads.length; h++) {
+      var th = el('th', null, heads[h]);
+      th.setAttribute('scope', 'col');
+      htr.appendChild(th);
+    }
+    thead.appendChild(htr);
+    table.appendChild(thead);
+
+    var tbody = el('tbody');
+    for (var r = 0; r < rows.length; r++) {
+      var row = rows[r];
+      var tr = el('tr');
+      tr.appendChild(el('td', 'ck-mono', String(row.name == null ? '—' : row.name)));
+      tr.appendChild(el('td', null, String(row.vendor == null ? '—' : row.vendor)));
+      tr.appendChild(el('td', null, String(row.purpose == null ? '—' : row.purpose)));
+      tr.appendChild(el('td', null, String(row.expiry == null ? '—' : row.expiry)));
+      tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    tw.appendChild(table);
+    det.appendChild(tw);
+    return det;
+  }
+
   function buildCategory(cfg, cat) {
     var meta = T.cat[cat] || { title: cat, desc: '' };
     var locked = cat === 'necessary';
@@ -1221,6 +1652,21 @@
     desc.id = descId;
     txt.appendChild(desc);
 
+    var rows = cookiesFor(cfg, cat);
+    var svcs = servicesFor(cat);
+
+    /* SPEC V1.12 §3 — «N сервисов · M cookie» on the group header.
+
+       Rendered ONLY when the group actually has services. A site whose config
+       predates 0.5.8 has none, and must look exactly as it did in 0.5.7 — not
+       «0 сервисов · 3 cookie». The cookie half counts the whole group, services
+       and loose rows alike: it answers «сколько cookie в этой группе», which is
+       the question the line is there to answer. */
+    if (svcs.length) {
+      name.appendChild(el('span', 'ck-cat__count',
+        groupCountLabel(svcs.length, rows.length, T, LANG)));
+    }
+
     var sw = makeSwitch(cat, locked);
     sw.setAttribute('aria-labelledby', nameId);
     sw.setAttribute('aria-describedby', descId);
@@ -1230,40 +1676,24 @@
     top.appendChild(sw);
     wrap.appendChild(top);
 
-    var rows = cookiesFor(cfg, cat);
-    if (rows.length) {
-      var det = el('details', 'ck-det');
-      var sum = el('summary');
-      sum.appendChild(document.createTextNode(T.cookiesIn + ' (' + rows.length + ')'));
-      det.appendChild(sum);
-
-      var tw = el('div', 'ck-tablewrap');
-      var table = el('table');
-      var thead = el('thead');
-      var htr = el('tr');
-      var heads = [T.colName, T.colVendor, T.colPurpose, T.colExpiry];
-      for (var h = 0; h < heads.length; h++) {
-        var th = el('th', null, heads[h]);
-        th.setAttribute('scope', 'col');
-        htr.appendChild(th);
+    if (svcs.length) {
+      var list = el('div', 'ck-svcs');
+      // A list, so a screen reader announces «3 items» before reading them.
+      list.setAttribute('role', 'list');
+      for (var s = 0; s < svcs.length; s++) {
+        var item = buildService(svcs[s], cat, rows);
+        item.setAttribute('role', 'listitem');
+        list.appendChild(item);
       }
-      thead.appendChild(htr);
-      table.appendChild(thead);
-
-      var tbody = el('tbody');
-      for (var r = 0; r < rows.length; r++) {
-        var row = rows[r];
-        var tr = el('tr');
-        tr.appendChild(el('td', 'ck-mono', String(row.name == null ? '—' : row.name)));
-        tr.appendChild(el('td', null, String(row.vendor == null ? '—' : row.vendor)));
-        tr.appendChild(el('td', null, String(row.purpose == null ? '—' : row.purpose)));
-        tr.appendChild(el('td', null, String(row.expiry == null ? '—' : row.expiry)));
-        tbody.appendChild(tr);
-      }
-      table.appendChild(tbody);
-      tw.appendChild(table);
-      det.appendChild(tw);
-      wrap.appendChild(det);
+      wrap.appendChild(list);
+    }
+
+    // «Cookie в этой группе (N)» keeps its old meaning: what is left once each
+    // service has claimed its own. With no services that is the whole table and
+    // the summary line is byte-for-byte what 0.5.7 rendered.
+    var loose = looseCookies(rows, svcs);
+    if (loose.length) {
+      wrap.appendChild(cookieTable(loose, T.cookiesIn + ' (' + loose.length + ')'));
     }
 
     return wrap;
@@ -1288,12 +1718,30 @@
     var url = str(texts.policyUrl);
     if (url && !/^https?:\/\//i.test(url)) url = null;
 
+    /* SPEC V1.10 §1 — the third destination: our own cookie declaration page.
+       `declarationUrl` is server-owned (the SaaS config injects it, like
+       `branding`); the client only reads it and never invents one. It is
+       validated exactly like policyUrl — http(s) only, because a link the
+       visitor is invited to click must not be able to carry javascript: — and
+       it deliberately does NOT influence the default action: the URL-sensitive
+       default above stays policyUrl-driven, so a site that gains a declaration
+       address does not silently lose its «Подробнее» → политика link. */
+    var decl = str(texts.declarationUrl);
+    if (decl && !/^https?:\/\//i.test(decl)) decl = null;
+
     var action = texts.detailsAction;
-    if (action !== 'policy' && action !== 'settings' && action !== 'hide') {
+    if (action !== 'policy' && action !== 'settings' && action !== 'hide' && action !== 'declaration') {
       action = url ? 'policy' : 'settings';
     }
     if (action === 'policy' && !url) action = 'settings';
-    return { kind: action, href: action === 'policy' ? url : null };
+    // Asked for the declaration with no address to send anyone to: fall back to
+    // opening the settings rather than rendering a dead link.
+    if (action === 'declaration' && !decl) action = 'settings';
+
+    var href = null;
+    if (action === 'policy') href = url;
+    else if (action === 'declaration') href = decl;
+    return { kind: action, href: href };
   }
 
   // Unknown type -> bar/bottom. Known type with an unrecognized position ->
@@ -1335,11 +1783,15 @@
       p.appendChild(document.createTextNode(T.bannerText));
     } else {
       p.appendChild(document.createTextNode(T.bannerText + ' '));
-      if (det.kind === 'policy') {
+      // 'policy' and 'declaration' are the same DOM shape — an outbound link in
+      // a new tab — and differ only in where they point (resolveDetails picked
+      // the address). Both must be listed here: a missing branch would silently
+      // render 'declaration' as the settings BUTTON instead of the link.
+      if (det.kind === 'policy' || det.kind === 'declaration') {
         var link = el('a', 'ck-banner__more', T.more);
         link.href = det.href;
         link.target = '_blank';
-        link.rel = 'noopener';          // never hand the policy page window.opener
+        link.rel = 'noopener';          // never hand the linked page window.opener
         p.appendChild(link);
       } else {
         // A control that changes what is on screen is a button, not a link:
@@ -1517,6 +1969,32 @@
       var sw = switches[k];
       out[k] = !!(sw && sw.getAttribute('aria-checked') === 'true');
     }
+    /* SPEC V1.12 §3 — «хранение: только отказы».
+
+       Read from `dataset.man`, NOT from `aria-checked`. The two answer different
+       questions and only one of them is the visitor's decision:
+
+         aria-checked — what the switch currently SHOWS. syncGroup() forces every
+                        service of a refused group to `false`, so reading this
+                        would record «I refused all six of these» the moment the
+                        group went off.
+         dataset.man  — «the visitor switched this one off by hand». Set on click,
+                        restored from the stored record, and deliberately left
+                        alone by syncGroup().
+
+       Getting this backwards loses a denial: refuse Hotjar, later switch
+       analytics off and save, and the refusal would be erased — so when
+       analytics came back on, Hotjar would run again without ever having been
+       re-consented to. */
+    var svcs = {};
+    for (var c = 0; c < OPT_IN.length; c++) {
+      var list = serviceSwitches[OPT_IN[c]] || [];
+      for (var j = 0; j < list.length; j++) {
+        var b = list[j];
+        if (b.dataset.man === '1') svcs[b.dataset.svc] = false;
+      }
+    }
+    out.services = svcs;
     return out;
   }
 
@@ -1595,6 +2073,23 @@
       sw.setAttribute('aria-checked', on ? 'true' : 'false');
     }
     if (switches.necessary) switches.necessary.setAttribute('aria-checked', 'true');
+
+    /* SPEC V1.12 §3 — restore the per-service switches from the stored denials.
+
+       `dataset.man` is set from the record FIRST, then syncGroup() derives what
+       each switch shows from it. That ordering is the whole point: a visitor who
+       denied Hotjar and left analytics off must still see Hotjar's own switch
+       off when they turn analytics back on, and the group→service push is what
+       would otherwise light it up again. */
+    var denials = (state && state.services) || {};
+    for (var c = 0; c < OPT_IN.length; c++) {
+      var cat = OPT_IN[c];
+      var list = serviceSwitches[cat] || [];
+      for (var j = 0; j < list.length; j++) {
+        list[j].dataset.man = denials[list[j].dataset.svc] === false ? '1' : '';
+      }
+      syncGroup(cat);
+    }
   }
 
   // Idempotent: safe to call from ck:init, ck:change and right after our own API calls.
@@ -1607,6 +2102,333 @@
     if (nodes.scrim) nodes.scrim.classList.toggle('ck-hidden', decided || !nodes.bannerModal);
     if (nodes.fab) nodes.fab.classList.toggle('ck-hidden', !decided);
     if (!panelOpen) syncSwitches(s);
+
+    /* §2 — a consent change is exactly when a card must go: the core's
+       applyConsentToDom() has already put the frame's src back by the time
+       ck:change reaches us (commit() revives before it dispatches), so the
+       sweep sees a frame with a src and retires its placeholder. It runs on
+       every sync, which also catches a category the visitor turned back OFF —
+       though a frame that already loaded cannot be un-loaded, so that direction
+       only matters for frames still held back. */
+    try { sweepPlaceholders(); } catch (e) { /* noop */ }
+  }
+
+  /* ------------------------------------------- blocked-embed placeholders (§2) */
+
+  /* SPEC V1.10 §2. When the core holds an <iframe> back — a known tracker, or
+     any third-party frame in strict mode — it leaves it in one shape:
+     `data-ck` + `data-src` and NO src (markBlockedIframe in ck-core.js). This
+     module draws a block of the same size in its place, offering the visitor
+     the one decision that would make the embed appear.
+
+     WHY A SIBLING, NOT A WRAPPER: sites style embeds through the parent
+     (`.video-wrap > iframe`, grid children, aspect-ratio boxes). Wrapping the
+     frame inserts a node into that relationship and breaks the layout it was
+     meant to preserve. A sibling inserted before the frame inherits the same
+     parent context, and removing it later restores the DOM exactly.
+
+     WHO RESTORES THE FRAME: not this file. `Element.prototype.setAttribute` is
+     patched by the core, and only applyConsentToDom() may write a blocked
+     frame's src — under `bypass`, through the native setter it captured before
+     patching. So «Разрешить и показать» grants the category through the normal
+     consent path and the CORE brings the frame back; the next sweep sees a
+     frame that has a src again and drops the placeholder. One code path for
+     the button, the panel's switches and «Принять всё» alike. */
+
+  var PH_ATTR = 'data-ck-ph';            // marks a frame this file hid
+  var PH_DISPLAY = 'data-ck-ph-display'; // its previous inline display value
+  var placeholders = [];                 // [{ frame, node }]
+
+  function placeholdersEnabled(cfg) {
+    // No default in the core's DEFAULT_CONFIG, exactly like detailsAction:
+    // absent means on, and only an explicit false opts out.
+    try {
+      var b = cfg && cfg.blocking;
+      return !(b && b.placeholders === false);
+    } catch (e) { return true; }
+  }
+
+  /* §2: «Не трогать фреймы display:none, 1×1, и те, что не в <body>.»
+     Order matters — a frame this file has already hidden reads as display:none,
+     which would make it skip its own placeholder and leave it stranded forever.
+     Frames we marked are therefore exempted before the display test runs. */
+  function frameEligible(frame) {
+    try {
+      if (!frame || !document.body) return false;
+      if (!document.body.contains(frame)) return false;
+      if (frame.getAttribute(PH_ATTR)) return true;   // ours: already measured
+      var cs = null;
+      try { cs = window.getComputedStyle(frame); } catch (e) { cs = null; }
+      if (cs && (cs.display === 'none' || cs.visibility === 'hidden')) return false;
+      var r = null;
+      try { r = frame.getBoundingClientRect(); } catch (e) { r = null; }
+      // A 1×1 (or 0×0) frame is a tracking pixel dressed as an embed: there is
+      // nothing for a visitor to watch and a card in its place would be noise.
+      if (r && r.width <= 1 && r.height <= 1) {
+        // Zero-sized because it is not laid out YET (a lazy tab, a collapsed
+        // section) is indistinguishable here from a real pixel except via the
+        // attributes, which a pixel sets to 1 and a video does not.
+        var aw = parseInt(frame.getAttribute('width') || '0', 10);
+        var ah = parseInt(frame.getAttribute('height') || '0', 10);
+        if (!(aw > 1 || ah > 1)) return false;
+      }
+      return true;
+    } catch (e) { return false; }
+  }
+
+  /* Size the card to the hole the frame left. Attributes first (an embed is
+     nearly always `width="560" height="315"`), computed size second. Read
+     BEFORE the frame is hidden — getComputedStyle on a display:none element
+     reports nothing worth copying. */
+  function frameSize(frame) {
+    var w = '', h = '';
+    try {
+      var aw = frame.getAttribute('width');
+      var ah = frame.getAttribute('height');
+      if (aw && /^\d+$/.test(String(aw).trim())) w = String(aw).trim() + 'px';
+      if (ah && /^\d+$/.test(String(ah).trim())) h = String(ah).trim() + 'px';
+      if (!w || !h) {
+        var cs = window.getComputedStyle(frame);
+        if (!w && cs && cs.width && cs.width !== 'auto' && cs.width !== '0px') w = cs.width;
+        if (!h && cs && cs.height && cs.height !== 'auto' && cs.height !== '0px') h = cs.height;
+      }
+    } catch (e) { /* fall through to the defaults in PH_CSS */ }
+    return { width: w, height: h };
+  }
+
+  var PLAY_ICON =
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" ' +
+    'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' +
+    '<rect x="2.5" y="4.5" width="19" height="15" rx="2.5"/>' +
+    '<path d="M10.5 9.2v5.6l4.6-2.8-4.6-2.8Z"/></svg>';
+
+  // Own sheet: a placeholder is its own shadow root, so it cannot borrow the
+  // banner's. Tokens come from buildThemeCss() (theme.accent, radius, font),
+  // which is why a placeholder repaints with the banner.
+  var PH_CSS = [
+    ':host{all:initial;display:block;max-width:100%}',
+    '*,*::before,*::after{box-sizing:border-box}',
+    '.ck-ph{width:100%;height:100%;min-height:120px;max-width:100%;',
+    'display:flex;flex-direction:column;align-items:center;justify-content:center;',
+    'gap:10px;padding:20px;text-align:center;',
+    'font-family:var(--ck-font);font-size:14px;line-height:1.5;color:var(--ck-ink);',
+    'background:var(--ck-soft);border:1px solid var(--ck-line);',
+    'border-radius:var(--ck-radius-card)}',
+    '.ck-ph svg{width:32px;height:32px;display:block;color:var(--ck-muted);flex:none}',
+    '.ck-ph p{margin:0;color:var(--ck-muted);max-width:44ch}',
+    '.ck-ph__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}',
+    '.ck-ph__btn{font:inherit;font-weight:600;cursor:pointer;padding:9px 16px;',
+    'border-radius:var(--ck-radius-btn);border:1px solid var(--ck-accent);',
+    'background:var(--ck-accent);color:var(--ck-on-accent)}',
+    '.ck-ph__link{font:inherit;background:none;border:0;padding:4px;cursor:pointer;',
+    'color:var(--ck-link);text-decoration:underline}',
+    ':focus-visible{outline:2px solid var(--ck-accent);outline-offset:2px;border-radius:4px}'
+  ].join('\n');
+
+  function categoryEnabled(cfg, cat) {
+    try {
+      if (cat === 'necessary') return false;         // nothing to grant
+      var c = cfg && cfg.categories && cfg.categories[cat];
+      return !c || c.enabled !== false;
+    } catch (e) { return true; }
+  }
+
+  function buildPlaceholder(frame, cat, cfg) {
+    var mountEl = document.createElement('div');
+    mountEl.setAttribute('data-ck-placeholder', '1');
+    var size = frameSize(frame);
+    var st = mountEl.style;
+    st.setProperty('max-width', '100%');
+    if (size.width) st.setProperty('width', size.width);
+    if (size.height) st.setProperty('min-height', size.height);
+
+    var sr = mountEl.attachShadow({ mode: 'open' });
+    var sheet = document.createElement('style');
+    /* buildThemeCss writes :host tokens — the same tokens, in this root, which
+       is what makes a placeholder repaint with the banner.
+
+       The font gets applyTheme()'s treatment for the same reason it needs it
+       there: `:host{all:initial}` resets the family, so a bare `inherit` in
+       this root resolves to the UA default (Times), not to the page's type.
+       The probed page font when it can be read, the system stack when it
+       cannot — never a bare `inherit`. */
+    var built = buildThemeCss(cfg);
+    var phFont = '';
+    if (built.font === 'inherit') {
+      phFont = '\n:host{--ck-font:' + (resolvePageFont() || SYSTEM_FONT) + '}';
+    }
+    sheet.textContent = PH_CSS + '\n' + built.css + phFont;
+    sr.appendChild(sheet);
+
+    var card = el('div', 'ck-ph');
+    card.setAttribute('role', 'group');
+    card.setAttribute('aria-label', T.phLabel);
+
+    var icon = document.createElement('div');
+    icon.innerHTML = PLAY_ICON;
+    card.appendChild(icon);
+
+    var frameSrcAttr = frame.getAttribute('data-src') || '';
+    var label = hostOf(frameSrcAttr);
+    // §3: when a refused SERVICE is what is holding this frame, the sentence
+    // must name that service — its category is already granted.
+    var held = holdingService(frameSrcAttr);
+    card.appendChild(el('p', null,
+      placeholderText(label, cat, LANG, held ? held.name : null)));
+
+    var row = el('div', 'ck-ph__row');
+    /* Only offer the grant when it can actually take effect: the core's
+       filterByConfig() drops a category the site disabled in config, so the
+       button would consume the click and change nothing. The panel link stays
+       either way — it is always an honest answer. */
+    if (categoryEnabled(cfg, cat)) {
+      var allow = el('button', 'ck-ph__btn', T.phAllow);
+      allow.type = 'button';
+      // SPEC V1.12 §3: «кнопка "Разрешить и показать" включает категорию и
+      // снимает отказ по этому сервису». The frame's own address decides which
+      // service that is — the visitor pressed the button on THIS embed.
+      allow.addEventListener('click', function () { grantCategory(cat, frameSrcAttr); });
+      row.appendChild(allow);
+    }
+    var settings = el('button', 'ck-ph__link', T.phSettings);
+    settings.type = 'button';
+    settings.addEventListener('click', function () { openPanel(settings); });
+    row.appendChild(settings);
+    card.appendChild(row);
+
+    sr.appendChild(card);
+    return mountEl;
+  }
+
+  /* «Разрешить и показать» — one category, through the normal consent path.
+
+     MERGE, DO NOT REPLACE: ConsentKit.accept({...}) SETS the whole opt-in set
+     from the object it is given, so passing `{marketing:true}` alone would
+     silently switch OFF an analytics consent the visitor had already given.
+     The current state is read first and only the one category is flipped.
+
+     accept(object) files the decision as method 'custom', which is what §2 asks
+     the journal to record, and ck-saas.js logs it off the ck:consent/ck:change
+     the core dispatches — so there is no logging code here. The core's
+     applyConsentToDom() restores the frame; sweepPlaceholders() then removes
+     this card, driven by the ck:change that same commit dispatches. */
+  function grantCategory(cat, src) {
+    var ck = api();
+    if (!ck || typeof ck.accept !== 'function') return;
+    var st = safeState();
+    var cur = st.categories || {};
+    var next = {
+      functional: cur.functional === true,
+      analytics: cur.analytics === true,
+      marketing: cur.marketing === true
+    };
+    if (cat === 'functional' || cat === 'analytics' || cat === 'marketing') next[cat] = true;
+
+    /* SPEC V1.12 §3 — clear the refusal on THIS frame's service, in the SAME
+       accept() call as the category grant.
+
+       One call, not two: the core revives blocked frames inside commit(), so a
+       denial still standing at that moment leaves this frame dead until some
+       later consent change happens to run applyConsentToDom() again. The whole
+       map is passed because accept() replaces it wholesale — every OTHER
+       refusal the visitor made is copied across untouched. */
+    var denials = denialsWithout(st.services, src);
+    if (denials) next.services = denials;
+
+    try { ck.accept(next); } catch (e) { /* noop */ }
+    syncFromState();
+  }
+
+  /* The stored denial map minus the service that owns `src`, or null when
+     nothing would change (no denials, no service for that URL, or that service
+     was not refused in the first place). */
+  function denialsWithout(stored, src) {
+    var ck = api();
+    if (!ck || typeof ck._serviceForUrl !== 'function') return null;
+    var map = {};
+    var any = false;
+    try {
+      Object.keys(stored || {}).forEach(function (k) {
+        if (stored[k] === false) { map[k] = false; any = true; }
+      });
+    } catch (e) { return null; }
+    if (!any) return null;
+
+    var svc = null;
+    try { svc = src ? ck._serviceForUrl(src) : null; } catch (e2) { svc = null; }
+    if (!svc || map[svc.id] !== false) return null;
+    delete map[svc.id];
+    return map;
+  }
+
+  function hideFrame(frame) {
+    try {
+      frame.setAttribute(PH_DISPLAY, frame.style.display || '');
+      frame.setAttribute(PH_ATTR, '1');
+      frame.style.display = 'none';
+    } catch (e) { /* noop */ }
+  }
+
+  function restoreFrame(frame) {
+    try {
+      var prev = frame.getAttribute(PH_DISPLAY);
+      frame.style.display = prev || '';
+      frame.removeAttribute(PH_DISPLAY);
+      frame.removeAttribute(PH_ATTR);
+    } catch (e) { /* noop */ }
+  }
+
+  function dropPlaceholder(entry) {
+    try {
+      if (entry.node && entry.node.parentNode) entry.node.parentNode.removeChild(entry.node);
+    } catch (e) { /* noop */ }
+    restoreFrame(entry.frame);
+  }
+
+  function clearPlaceholders() {
+    for (var i = 0; i < placeholders.length; i++) dropPlaceholder(placeholders[i]);
+    placeholders = [];
+  }
+
+  /* Idempotent: called from mount() and from every consent change. Adds cards
+     for frames still held back, removes them from frames the core revived. */
+  function sweepPlaceholders(cfg) {
+    if (typeof document === 'undefined' || !document.body) return;
+    var c = cfg || safeConfig();
+
+    // Placeholders turned off after some were drawn: take them all down.
+    if (!placeholdersEnabled(c)) { clearPlaceholders(); return; }
+
+    // 1. Retire cards whose frame came back (or left the document).
+    var kept = [];
+    for (var i = 0; i < placeholders.length; i++) {
+      var e = placeholders[i];
+      var revived = false;
+      try {
+        revived = !document.body.contains(e.frame) || !!e.frame.getAttribute('src');
+      } catch (e2) { revived = true; }
+      if (revived) dropPlaceholder(e); else kept.push(e);
+    }
+    placeholders = kept;
+
+    // 2. Draw cards for frames the core is holding back. The selector is the
+    //    core's own revival selector, which is why a frame the SITE allowed can
+    //    never match: an allowed frame keeps its src and is never marked.
+    var list;
+    try { list = document.querySelectorAll('iframe[data-ck][data-src]'); } catch (e3) { return; }
+    for (var j = 0; j < list.length; j++) {
+      var frame = list[j];
+      try {
+        if (frame.getAttribute('src')) continue;              // already revived
+        if (frame.getAttribute(PH_ATTR)) continue;            // already carded
+        if (!frameEligible(frame)) continue;
+        var cat = frame.getAttribute('data-ck') || 'marketing';
+        var node = buildPlaceholder(frame, cat, c);
+        if (frame.parentNode) frame.parentNode.insertBefore(node, frame);
+        hideFrame(frame);
+        placeholders.push({ frame: frame, node: node });
+      } catch (e4) { /* one bad frame must not stop the sweep */ }
+    }
   }
 
   /* ----------------------------------------------------------------- mount */
@@ -1629,14 +2451,46 @@
       // and mount() is one-shot. Buttons and colours are deliberately NOT
       // here — they are token values and restyle in place.
       resolveDetails(c).kind,
+      /* SPEC V1.12 §3 — services are STRUCTURAL: each one adds a row with its
+         own switch to the panel, and mount() is one-shot. Without this a SaaS
+         config that arrives after the first mount (the second, idempotent
+         init()) would re-run buildServices() in the core — so the engine would
+         block per service — while the panel kept showing the service-less
+         render, and the visitor would have no way to see or change any of it.
+
+         The COUNT and the ids, not the whole rows: what needs a rebuild is a
+         service appearing, disappearing or changing identity. A reworded
+         `purpose` is text inside an existing row and does not justify tearing
+         the panel down. */
+      serviceSignature(c),
       brandSignature(c)
     ].join('|');
   }
 
+  function serviceSignature(cfg) {
+    var list = cfg && cfg.services;
+    if (!list || !Array.isArray(list) || !list.length) return '0';
+    var ids = [];
+    for (var i = 0; i < list.length; i++) {
+      var s = list[i];
+      if (!s || typeof s !== 'object' || s.enabled === false) continue;
+      ids.push(String(s.id || '') + ':' + String(s.category || ''));
+    }
+    // '0' for «no services», however that came about: an absent key, an empty
+    // array, or a list every row of which the core would drop. All three render
+    // the same panel, so none of them may differ in the signature.
+    if (!ids.length) return '0';
+    return ids.length + ',' + ids.join(',');
+  }
+
   function remount(cfg) {
     mounted = false;
     panelOpen = false;
     lastFocus = null;
+    // The cards belong to the render about to be replaced: their listeners close
+    // over the old T and the old shadow root. mount() sweeps again and draws
+    // fresh ones in the new language and theme.
+    clearPlaceholders();
     // The pending schedule belongs to the shadow root about to be rebuilt; the
     // fresh mount() starts its own ladder from a clean count.
     clearFontTimers();
@@ -1674,6 +2528,7 @@
     root.appendChild(style);
 
     switches = {};
+    serviceSwitches = {};
     nodes = {};
 
     // Palette sheet comes after the base sheet so its :host tokens win.
@@ -1692,6 +2547,55 @@
     // Only now: scheduleFontProbes() re-applies the theme from a timer, and
     // applyTheme() is a no-op until there is a host and a themeStyle to write.
     scheduleFontProbes(cfg);
+
+    // SPEC V1.10 §2 — заглушки вместо задержанных встраиваний. After the shadow
+    // root exists, because a placeholder's «Настроить cookie» calls openPanel().
+    sweepPlaceholders(cfg);
+
+    /* SPEC V1.10 §1 — honour a settings request that arrived before there was
+       anything to open: either ConsentKit.openSettings() called while this file
+       was still loading (the core latches it), or a page opened directly on
+       `#ck-settings`. Both end in the same panel. */
+    consumePendingOpen();
+    openFromHash();
+  }
+
+  /* ---------------------------------------------------- settings deep link */
+
+  var SETTINGS_HASH = '#ck-settings';
+
+  // The core latches openSettings() calls made before ck-ui.js was parsed, so a
+  // footer link clicked during a slow load still opens the panel once we exist.
+  function consumePendingOpen() {
+    var ck = api();
+    if (!ck || !ck._pendingOpen) return;
+    try { ck._pendingOpen = false; } catch (e) { /* noop */ }
+    openPanel(null);
+  }
+
+  /* `https://site/#ck-settings` — the address the cookie declaration page links
+     «Изменить выбор cookie» to. The hash is removed again via replaceState so a
+     reload, a shared link or a back-navigation does not re-open the panel, and
+     so the address bar does not keep a control fragment in it.
+
+     replaceState is fed pathname+search rather than '' — an empty URL argument
+     is a no-op in some engines, which would leave the hash in place and re-open
+     the panel on the next hashchange. Everything is guarded: a sandboxed iframe
+     throws on replaceState, and a panel that opened is worth more than a tidy
+     address bar. */
+  function openFromHash() {
+    try {
+      if (typeof location === 'undefined' || location.hash !== SETTINGS_HASH) return;
+    } catch (e) { return; }
+    clearSettingsHash();
+    openPanel(null);
+  }
+
+  function clearSettingsHash() {
+    try {
+      if (typeof history === 'undefined' || typeof history.replaceState !== 'function') return;
+      history.replaceState(null, '', location.pathname + location.search);
+    } catch (e) { /* noop */ }
   }
 
   /* ---------------------------------------------------------------- events */
@@ -1722,7 +2626,26 @@
       nextProbeDelay: nextProbeDelay,
       shouldReprobe: shouldReprobe,
       resolveDetails: resolveDetails,
-      buildThemeCss: buildThemeCss
+      buildThemeCss: buildThemeCss,
+      // SPEC V1.10 §2: which sentence a blocked embed shows. Pure, so the
+      // wording is testable (and quotable by the cabinet) without a DOM.
+      placeholderText: placeholderText,
+      placeholdersEnabled: placeholdersEnabled,
+      /* SPEC V1.12 §3 — the pure halves of the services panel, so the wording
+         and the arithmetic are testable (and quotable by the cabinet) without a
+         DOM: which plural form a count takes in each language, how a group
+         header reads, and which cookieTable rows sit under which service. */
+      plural: plural,
+      pluralIndex: pluralIndex,
+      buildStrings: buildStrings,
+      localeTable: localeTable,
+      resolveLang: resolveLang,
+      cookieRowsForService: cookieRowsForService,
+      looseCookies: looseCookies,
+      servicePurpose: servicePurpose,
+      groupCountLabel: groupCountLabel,
+      serviceSignature: serviceSignature,
+      signature: signature
     };
     // The page-font probe reads the DOM, so it is not part of the pure block —
     // but the debug panel must be able to quote the family the banner painted
@@ -1768,9 +2691,29 @@
 
   document.addEventListener('ck:ui:open-preferences', function () {
     if (!mounted) mount(safeConfig());
+    // mount() consumes the core's latch itself; clear it here too so a call
+    // made while we were already mounted cannot leave a stale flag behind for
+    // a later remount to act on.
+    var ck = api();
+    if (ck && ck._pendingOpen) { try { ck._pendingOpen = false; } catch (e) { /* noop */ } }
     openPanel(null);
   });
 
+  /* SPEC V1.10 §1 — navigating to `#ck-settings` on a page that is already
+     loaded (a footer link, or the declaration page opened in the same tab).
+     mount() covers the other half: a page ENTERED on that hash.
+
+     Feature-checked rather than assumed: the SSR guard above only proves there
+     is a `document`, and the branding suite evaluates this file against a stub
+     window that has none of the event plumbing. A missing hashchange costs the
+     deep link, not the banner. */
+  if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+    window.addEventListener('hashchange', function () {
+      if (!mounted) mount(safeConfig());
+      openFromHash();
+    });
+  }
+
   document.addEventListener('ck:ui:close', function () {
     closePanel();
   });