jekyll-theme-zer0 1.25.0 → 1.27.0

data/_includes/core/head.html

@@ -19,6 +19,7 @@
   - seo.html: SEO meta tags and Open Graph data
   - google-analytics.html: Google Analytics tracking
   - google-tag-manager-head.html: GTM head section
+  - posthog.html: PostHog product analytics (opt-in via site.posthog.enabled)
   
   Performance Notes:
   - Scripts loaded in head for immediate availability
@@ -34,6 +35,10 @@
 <!-- Only load in production builds (JEKYLL_ENV=production); the include also guards against dev hostnames -->
 {% if jekyll.environment == "production" %}{% include analytics/google-tag-manager-head.html %}{% endif %}
 
+<!-- Page-feedback: early console/error capture — must run before the theme
+     scripts below so a report can include the logs that led up to it. -->
+{% include core/console-capture.html %}
+
 <!-- ================================ -->
 <!-- JAVASCRIPT LIBRARIES            -->
 <!-- ================================ -->
@@ -89,6 +94,10 @@ window.MathJax = {
      Outputs custom og:image with assets_prefix normalisation and non-Google site verification. -->
 {% include content/seo.html %}
 
+<!-- hreflang alternates for machine-generated translations (no-op when the
+     page has none) — see _data/i18n/manifest.yml + scripts/translate.rb -->
+{% include core/hreflang.html %}
+
 <!-- ========================== -->
 <!-- STRUCTURED DATA MARKUP    -->
 <!-- ========================== -->
@@ -123,6 +132,10 @@ window.MathJax = {
 <!-- Only load in production AND when an ID is configured; the include also guards against dev hostnames -->
 {% if jekyll.environment == "production" and site.google_analytics %}{% include analytics/google-analytics.html %}{% endif %}
 
+<!-- PostHog analytics - Configured via the `posthog:` block in _config.yml -->
+<!-- Only load in production AND when explicitly enabled; the include itself also respects Do Not Track -->
+{% if jekyll.environment == "production" and site.posthog.enabled %}{% include analytics/posthog.html %}{% endif %}
+
 
 <!-- ================================ -->
 <!-- CSS FRAMEWORKS AND LIBRARIES   -->

data/_includes/core/header.html

@@ -41,9 +41,11 @@
 <!-- ================================ -->
 <!-- SKIP TO CONTENT LINK            -->
 <!-- ================================ -->
+<!-- UI strings resolve per page language (core/i18n.html sets `ui`) -->
+{%- include core/i18n.html -%}
 <!-- Accessibility: allows keyboard users to skip navigation -->
 <a href="#main-content" class="visually-hidden-focusable position-absolute top-0 start-0 z-3 m-3 btn btn-primary">
-  Skip to main content
+  {{ ui.skip_main_content | default: "Skip to main content" }}
 </a>
 
 <header id="navbar" class="container-fluid text-center fixed-top" role="banner">
@@ -149,17 +151,20 @@
             <!-- UTILITY CONTROLS          -->
             <!-- ========================== -->
             <div class="navbar-utility-controls d-flex align-items-center flex-shrink-0" role="group" aria-label="Utility controls">
+                <!-- Language Toggle (renders only when translation.languages is set) -->
+                {% include components/language-toggle.html %}
+
                 <!-- Search Modal Toggle -->
                 <button
                     class="btn nav-search-button"
                     type="button"
                     data-search-toggle
-                    aria-label="Open search"
+                    aria-label="{{ ui.shortcuts_search | default: 'Open search' }}"
                     aria-haspopup="dialog"
-                    title="Search site content"
+                    title="{{ ui.search_button_label | default: 'Search' }}"
                 >
                     <i class="{{site.default_icon}} bi-search" aria-hidden="true"></i>
-                    <span class="nav-link-text d-none d-xl-inline ms-1">Search</span>
+                    <span class="nav-link-text d-none d-xl-inline ms-1">{{ ui.search_button_label | default: "Search" }}</span>
                 </button>
 
                 <!-- Settings Offcanvas Toggle -->

data/_includes/core/hreflang.html

@@ -0,0 +1,33 @@
+{% comment %} Feature: ZER0-078 {% endcomment %}
+{%- comment -%}
+  Component:   hreflang
+  Path:        _includes/core/hreflang.html
+  Purpose:     Emit <link rel="alternate" hreflang> tags for pages that have
+               machine-generated translations, so search engines associate
+               the English original with its /fr/ (etc.) alternates.
+  Params:      none — reads page.lang / page.translation_source_url and the
+               generated _data/i18n/manifest.yml (scripts/translate.rb).
+  Depends on:  site.translation.* config, site.data.i18n.manifest
+  Notes:       Renders nothing when translation is disabled, the manifest is
+               absent, or the current page has no translations. x-default
+               always points at the English original.
+{%- endcomment -%}
+{%- if site.translation.enabled -%}
+  {%- assign _hl_source = site.translation.source_lang | default: 'en' -%}
+  {%- if page.lang and page.lang != _hl_source -%}
+    {%- assign _hl_src_url = page.translation_source_url -%}
+  {%- else -%}
+    {%- assign _hl_src_url = page.url -%}
+  {%- endif -%}
+  {%- assign _hl_entry = site.data.i18n.manifest.pages[_hl_src_url] -%}
+  {%- if _hl_src_url and _hl_entry %}
+<link rel="alternate" hreflang="{{ _hl_source }}" href="{{ _hl_src_url | absolute_url }}">
+    {%- for _hl_lang in site.translation.languages -%}
+      {%- assign _hl_t = _hl_entry[_hl_lang] -%}
+      {%- if _hl_t %}
+<link rel="alternate" hreflang="{{ _hl_lang }}" href="{{ _hl_t.url | absolute_url }}">
+      {%- endif -%}
+    {%- endfor %}
+<link rel="alternate" hreflang="x-default" href="{{ _hl_src_url | absolute_url }}">
+  {%- endif -%}
+{%- endif -%}

data/_includes/core/i18n.html

@@ -0,0 +1,36 @@
+{% comment %} Feature: ZER0-078 {% endcomment %}
+{%- comment -%}
+  Component:   i18n
+  Path:        _includes/core/i18n.html
+  Purpose:     Resolve the active UI-string set into the `ui` variable,
+               per-page-language aware. English strings come from
+               _data/ui-text.yml (the human-maintained source of truth);
+               alternate languages come from _data/i18n/<lang>.yml, which is
+               GENERATED by scripts/translate.rb — never hand-edited.
+  Params:      lang (string, optional) — overrides page.lang. REQUIRED when
+               the caller is rendered via {% include_cached %} (pass
+               lang=page.lang there) so each language gets its own cache
+               entry instead of sharing one page-invariant render.
+  Depends on:  _data/ui-text.yml, _data/i18n/<lang>.yml (generated),
+               site.translation.* config
+  Notes:       Liquid assigns made inside an include are visible to the
+               caller, so after {% include core/i18n.html %} simply use
+               {{ ui.some_key | default: "English fallback" }}. Missing
+               languages or keys degrade to English/literal defaults.
+{%- endcomment -%}
+{%- comment -%}
+  Resolve using the FULL configured language code (e.g. "fr", "pt-BR"), not a
+  2-char slice: scripts/translate.rb writes _data/i18n/<code>.yml and sets
+  page.lang to that exact code, so a regional code like "pt-BR" must look up
+  site.data.i18n["pt-BR"] — slicing to "pt" would silently miss the file and
+  fall back to English.
+{%- endcomment -%}
+{%- assign _i18n_lang = include.lang | default: page.lang | default: site.translation.source_lang | default: site.locale | default: 'en' -%}
+{%- assign _i18n_source = site.translation.source_lang | default: 'en' -%}
+{%- assign ui = site.data.ui-text[site.locale] | default: site.data.ui-text.en -%}
+{%- unless _i18n_lang == _i18n_source -%}
+  {%- assign _i18n_generated = site.data.i18n[_i18n_lang] -%}
+  {%- if _i18n_generated -%}
+    {%- assign ui = _i18n_generated -%}
+  {%- endif -%}
+{%- endunless -%}

data/_includes/navigation/breadcrumbs.html

@@ -14,7 +14,7 @@
   ===================================================================
 {%- endcomment -%}
 {% if page.url != "/" and site.breadcrumbs %}
-  {%- assign ui = site.data.ui-text[site.locale] | default: site.data.ui-text.en -%}
+  {%- include core/i18n.html -%}
   {%- assign label_root = ui.breadcrumbs_root | default: "Home" -%}
   {%- assign label_aria = ui.breadcrumbs_aria | default: "Breadcrumb" -%}
   {%- assign crumbs = page.url | remove:'/index.html' | split: '/' -%}

data/_includes/navigation/navbar.html

@@ -8,11 +8,12 @@
  -->
 
 <!-- Navigation Links - Responsive Offcanvas (inline at lg+, offcanvas below) -->
+{%- include core/i18n.html -%}
 <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="mainNavOffcanvasLabel">
 
     <!-- Main Navigation Header - Offcanvas -->
     <div class="offcanvas-header border-bottom">
-        <h2 class="offcanvas-title h5 mb-0" id="mainNavOffcanvasLabel">Main Navigation</h2>
+        <h2 class="offcanvas-title h5 mb-0" id="mainNavOffcanvasLabel">{{ ui.main_nav_label | default: "Main Navigation" }}</h2>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close navigation menu" data-bs-target="#bdNavbar"></button>
     </div>
 
@@ -24,7 +25,7 @@
             <li class="nav-item d-lg-none">
                 <a class="nav-link" href="{{ '/' | relative_url }}" {% if page.url == '/' %}aria-current="page"{% endif %}>
                     <i class="{{site.default_icon}} bi-house" aria-hidden="true"></i>
-                    Home
+                    {{ ui.home_label | default: "Home" }}
                 </a>
             </li>
             {%- comment -%}
@@ -143,7 +144,7 @@
                     aria-haspopup="dialog"
                 >
                     <i class="{{site.default_icon}} bi-search" aria-hidden="true"></i>
-                    Search
+                    {{ ui.search_button_label | default: "Search" }}
                 </button>
             </li>
             <li class="nav-item d-lg-none">
@@ -156,7 +157,7 @@
                     aria-haspopup="dialog"
                 >
                     <i class="{{site.default_icon}} bi-gear" aria-hidden="true"></i>
-                    Settings
+                    {{ ui.settings_button_label | default: "Settings" }}
                 </button>
             </li>
         </ul>

data/_includes/navigation/sidebar-right.html

@@ -5,6 +5,7 @@
   includes: nav_list.html, content/toc.html
 -->
 
+{%- include core/i18n.html -%}
 <!-- FOUC guard: apply hidden TOC preference before paint -->
 <script>
   try {
@@ -17,7 +18,7 @@
 <!-- Right sidebar container -->
 <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
   <div class="offcanvas-header">
-    <h2 class="offcanvas-title h5 mb-0" id="tocLabel">Table of Contents</h2>
+    <h2 class="offcanvas-title h5 mb-0" id="tocLabel">{{ ui.toc_title | default: "Table of Contents" }}</h2>
     <div class="d-flex align-items-center gap-1">
       <button type="button"
               class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-lg-none px-2"
@@ -37,7 +38,7 @@
       <div class="mb-3 d-flex align-items-center justify-content-between gap-2">
         <strong class="d-flex align-items-center mb-0">
           <i class="bi bi-file-text me-2" aria-hidden="true"></i>
-          On this page
+          {{ ui.toc_label | default: "On this page" }}
         </strong>
         <button type="button"
                 class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-none d-lg-inline-flex flex-shrink-0 px-1"

data/_includes/navigation/unified-drawer.html

@@ -23,7 +23,7 @@
   ===================================================================
 {%- endcomment -%}
 {% if site.navigation.unified_mobile_drawer %}
-{%- assign ui = site.data.ui-text[site.locale] | default: site.data.ui-text.en -%}
+{%- include core/i18n.html -%}
 <div class="offcanvas offcanvas-start zer0-unified-drawer d-lg-none"
      tabindex="-1"
      id="zer0UnifiedDrawer"

data/_layouts/article.html

@@ -15,6 +15,9 @@ layout: default
   Front Matter Variables:
   - post_type: Article type (standard, featured, breaking, opinion, review, tutorial, listicle, interview)
   - sidebar: Override sidebar visibility (true/false)
+  - show_hero: Opt into the top-of-article hero image (page.preview) for any
+    post_type without changing layout/sidebar/badges (true; featured and
+    breaking posts show the hero automatically)
   
   Post Type Variations:
   - standard (default): Normal article with sidebar
@@ -221,12 +224,15 @@ layout: default
     preview image is set. Breaking stories were previously skipped because the
     condition checked only post_type == "featured"; since breaking is mapped
     before featured (see top of file), breaking+featured posts showed no hero.
+    Any other post type can opt in with `show_hero: true` in front matter —
+    this flips only the hero, leaving sidebar, typography, and badges at their
+    post_type defaults (issue #303).
     Nested ifs keep the "only when page.preview exists" guard intact (Liquid has
     no parentheses, so a flat `a or b and c` would misgroup).
   {% endcomment %}
   {% assign show_hero = false %}
   {% if page.preview %}
-    {% if post_type == "featured" or post_type == "breaking" %}
+    {% if post_type == "featured" or post_type == "breaking" or page.show_hero %}
       {% assign show_hero = true %}
     {% endif %}
   {% endif %}

data/_layouts/default.html

@@ -86,8 +86,10 @@ layout: root
     <!-- ================================ -->
     <!-- MAIN CONTENT AREA               -->
     <!-- ================================ -->
-    <!-- Primary content section with scroll spy for table of contents navigation -->
-    <main class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
+    <!-- Primary content section with scroll spy for table of contents navigation.
+         Not a <main>: root.html already provides the single <main id="main-content">
+         landmark; a nested <main> here would duplicate it (issue #299). -->
+    <div class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
 
         {%- comment -%}
           Page introduction: title, breadcrumbs, metadata.
@@ -129,5 +131,5 @@ layout: root
               {% include content/backlinks.html %}
             {% endif %}
         </div>
-      </main>
+      </div>
     </div>

data/_layouts/news.html

@@ -78,7 +78,9 @@ source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
   </div>
 </div>
 
-<main class="container">
+<!-- Not a <main>: root.html already provides the single <main id="main-content">
+     landmark; a nested <main> here would duplicate it (issue #299). -->
+<div class="container">
 
 {% if section_style == "magazine" %}
   <!-- ================================ -->
@@ -578,7 +580,7 @@ source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
     </div>
   </section>
 
-</main>
+</div>
 
 <style>
   .hover-lift {

data/_layouts/root.html

@@ -46,7 +46,7 @@
 {%- else -%}
   {%- assign _bs_theme = 'dark' -%}
 {%- endif -%}
-<html lang="{{ site.locale | slice: 0,2 | default: 'en' }}" class="no-js" data-bs-theme="{{ _bs_theme }}" data-color-mode-default="{{ _cm }}" data-theme-skin="{{ site.theme_skin | default: 'dark' }}" data-zer0-bg="{{ site.theme_background.enabled | default: true }}">
+<html lang="{{ page.lang | default: site.locale | slice: 0, 2 | default: 'en' }}" class="no-js" data-bs-theme="{{ _bs_theme }}" data-color-mode-default="{{ _cm }}" data-theme-skin="{{ site.theme_skin | default: 'dark' }}" data-zer0-bg="{{ site.theme_background.enabled | default: true }}">
     <head>
         <!-- =============================================== -->
         <!-- HEAD SECTION: Meta tags, styles, and SEO setup -->
@@ -82,11 +82,13 @@
              Enable with `navigation.unified_mobile_drawer: true` in _config.yml. -->
         {% include navigation/unified-drawer.html %}
 
-        <!-- Search modal (site-wide) — page-invariant, cached once per build. -->
-        {% include_cached components/search-modal.html %}
+        <!-- Search modal (site-wide) — cached once per build PER LANGUAGE
+             (the lang param keys the include-cache entry; page.lang is nil
+             on English pages, so they all still share a single render). -->
+        {% include_cached components/search-modal.html lang=page.lang %}
 
-        <!-- Keyboard shortcuts help modal (triggered by `?`) — page-invariant. -->
-        {% include_cached components/shortcuts-modal.html %}
+        <!-- Keyboard shortcuts help modal (triggered by `?`) — cached per language. -->
+        {% include_cached components/shortcuts-modal.html lang=page.lang %}
 
         <!-- Settings offcanvas (Appearance / Site / Developer tabs) -->
         {% include components/info-section.html %}
@@ -98,10 +100,14 @@
         <!-- MAIN CONTENT AREA        -->
         <!-- ======================== -->
         <!-- Skip-link target: keep a single, consistent #main-content anchor site-wide.
-             Semantic <main> landmark (consistent with the default/section/news layouts)
-             so assistive tech, search engines, and AI content extractors can isolate the
+             This is the ONE <main> landmark per page — child layouts (default/section/
+             news) must use non-landmark wrappers (<div>) inside it (issue #299) — so
+             assistive tech, search engines, and AI content extractors can isolate the
              primary content from the surrounding header/nav/footer chrome. -->
         <main id="main-content">
+            <!-- Machine-translation disclosure — renders only on generated
+                 translations (page.machine_translated); no-op elsewhere. -->
+            {%- include components/translation-notice.html -%}
             {{ content }}
         </main>
 
@@ -116,7 +122,7 @@
              fresh: jekyll-include-cache stores in memory only (Jekyll 3.x has no
              Jekyll::Cache) and clears on every build's :pre_render hook — it never
              persists to .jekyll-cache. -->
-        {%- include_cached core/footer.html -%}
+        {%- include_cached core/footer.html lang=page.lang -%}
         {%- include core/footer-fabs.html -%}
 
         <!-- Privacy-compliant cookie consent banner — page-invariant. -->
@@ -125,6 +131,9 @@
         <!-- AI Chat Assistant -->
         {%- include components/ai-chat.html -%}
 
+        <!-- Page-feedback capture widget ("Improve this page" → GitHub issue) -->
+        {%- include components/page-feedback.html -%}
+
         <!-- JavaScript dependencies and custom scripts -->
         <div>
             <!-- Search functionality -->

data/_layouts/section.html

@@ -156,7 +156,9 @@ layout: root
     <!-- ================================ -->
     <!-- MAIN CONTENT AREA                -->
     <!-- ================================ -->
-    <main class="col-lg-9 col-xl-10 section-layout-main">
+    <!-- Not a <main>: root.html already provides the single <main id="main-content">
+         landmark; a nested <main> here would duplicate it (issue #299). -->
+    <div class="col-lg-9 col-xl-10 section-layout-main">
       
       <!-- Section Header -->
       <header class="section-header mb-4">
@@ -526,7 +528,7 @@ layout: root
         </div>
       </aside>
 
-    </main>
+    </div>
   </div>
 </div>
 

data/_sass/components/_page-feedback.scss

@@ -0,0 +1,276 @@
+// ============================================================================
+// Page-feedback widget — global FAB + capture modal
+// ----------------------------------------------------------------------------
+// Markup:     _includes/components/page-feedback.html
+// Behaviour:  assets/js/page-feedback.js
+// Tokens:     shared FAB + layer scale (_sass/tokens/_spacing.scss, _layers.scss)
+// Theming:    leans on Bootstrap 5.3 CSS variables (--bs-body-bg / -color /
+//             -border-color) so it follows [data-bs-theme] light/dark for free.
+// ============================================================================
+
+// --- Global FAB (bottom-left, clear of the right-hand FAB stack) ------------
+.pf-fab {
+  position: fixed;
+  bottom: var(--zer0-space-fab-offset, 1rem);
+  left: var(--zer0-space-fab-offset, 1rem);
+  z-index: var(--zer0-layer-fab-feedback, 1051);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--zer0-space-fab-size, 3.5rem);
+  height: var(--zer0-space-fab-size, 3.5rem);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background-color: var(--zer0-color-primary, var(--bs-primary));
+  color: #fff;
+  font-size: 1.25rem;
+  opacity: .9;
+  box-shadow: var(--zer0-shadow-fab, 0 .5rem 1rem rgba(0, 0, 0, .25));
+  transition:
+    opacity var(--zer0-motion-duration-fast, 120ms) var(--zer0-motion-ease-standard, ease),
+    transform var(--zer0-motion-duration-fast, 120ms) var(--zer0-motion-ease-standard, ease);
+
+  &:hover,
+  &:focus-visible {
+    opacity: 1;
+    color: #fff;
+    transform: translateY(-2px);
+  }
+}
+
+// Lock background scroll while the dialog is open (set by page-feedback.js).
+.pf-no-scroll { overflow: hidden; }
+
+// --- Modal overlay ----------------------------------------------------------
+.pf-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--zer0-layer-feedback-modal, 1096); // above the cookie banner (1095)
+  display: flex;
+  align-items: flex-end;                 // bottom sheet on phones
+  justify-content: center;
+  background: rgba(0, 0, 0, .5);
+  opacity: 0;
+  transition: opacity var(--zer0-motion-duration, 180ms) var(--zer0-motion-ease-standard, ease);
+
+  &[hidden] { display: none; }
+  &.pf-overlay--open { opacity: 1; }
+
+  @media (min-width: 576px) {
+    align-items: center;
+    padding: var(--zer0-space-3, 1rem);
+  }
+}
+
+.pf-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 40rem;
+  max-height: 92vh;
+  overflow: hidden;
+  color: var(--bs-body-color);
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .15));
+  border-radius: 1rem 1rem 0 0;
+  transform: translateY(20px);
+  transition: transform var(--zer0-motion-duration, 180ms) var(--zer0-motion-ease-standard, ease);
+
+  .pf-overlay--open & { transform: translateY(0); }
+
+  @media (min-width: 576px) { border-radius: 1rem; }
+}
+
+// --- Header -----------------------------------------------------------------
+.pf-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--zer0-space-2, .5rem);
+  padding: var(--zer0-space-3, 1rem) var(--zer0-space-3, 1rem) var(--zer0-space-2, .5rem);
+  border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, .1));
+}
+
+.pf-title { display: flex; align-items: center; }
+
+.pf-intro { font-size: .875rem; line-height: 1.4; }
+
+.pf-close {
+  flex-shrink: 0;
+  color: var(--bs-body-color);
+  background: transparent;
+  border: 0;
+  opacity: .6;
+  &:hover, &:focus-visible { opacity: 1; }
+}
+
+// --- Body (scrolls) ---------------------------------------------------------
+.pf-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--zer0-space-3, 1rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--zer0-space-3, 1rem);
+}
+
+.pf-field { border: 0; padding: 0; margin: 0; min-width: 0; }
+
+.pf-legend,
+.pf-label {
+  display: block;
+  font-size: .8125rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .02em;
+  color: var(--bs-secondary-color, var(--zer0-color-ink-muted, #6c757d));
+  margin-bottom: var(--zer0-space-2, .5rem);
+}
+
+.pf-help { font-size: .8125rem; margin: .35rem 0 0; }
+
+// --- Type selector ----------------------------------------------------------
+.pf-types-group {
+  font-size: .75rem;
+  font-weight: 600;
+  color: var(--bs-secondary-color, #6c757d);
+  margin: var(--zer0-space-2, .5rem) 0 .35rem;
+}
+
+.pf-types-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: .5rem;
+
+  @media (min-width: 480px) { grid-template-columns: 1fr 1fr; }
+}
+
+.pf-type {
+  display: flex;
+  align-items: flex-start;
+  gap: .625rem;
+  text-align: left;
+  padding: .625rem .75rem;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .15));
+  border-radius: .625rem;
+  cursor: pointer;
+  transition: border-color 120ms ease, background-color 120ms ease;
+
+  &:hover { border-color: var(--zer0-color-primary, var(--bs-primary)); }
+
+  &:focus-visible {
+    outline: 2px solid var(--zer0-color-primary, var(--bs-primary));
+    outline-offset: 2px;
+  }
+
+  &.pf-type--active {
+    border-color: var(--zer0-color-primary, var(--bs-primary));
+    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
+    box-shadow: inset 0 0 0 1px var(--zer0-color-primary, var(--bs-primary));
+  }
+}
+
+.pf-type-icon { flex-shrink: 0; margin-top: .1rem; font-size: 1rem; color: var(--zer0-color-primary, var(--bs-primary)); }
+.pf-type-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
+.pf-type-label { font-weight: 600; font-size: .9rem; line-height: 1.2; }
+.pf-type-desc { font-size: .78rem; line-height: 1.3; color: var(--bs-secondary-color, #6c757d); }
+
+// --- Context / logs ---------------------------------------------------------
+.pf-summary { cursor: pointer; font-weight: 600; font-size: .875rem; }
+.pf-context-count { color: var(--bs-secondary-color, #6c757d); font-weight: 400; }
+
+.pf-context-list {
+  list-style: none;
+  margin: .5rem 0 0;
+  padding: 0;
+  font-size: .8125rem;
+
+  li { display: flex; gap: .5rem; padding: .15rem 0; }
+}
+.pf-context-key { flex: 0 0 4rem; color: var(--bs-secondary-color, #6c757d); }
+.pf-context-val { min-width: 0; word-break: break-word; }
+
+.pf-logs { margin-top: .75rem; }
+.pf-check { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 500; }
+.pf-logs-preview {
+  max-height: 9rem;
+  overflow: auto;
+  margin: .5rem 0 0;
+  padding: .5rem .625rem;
+  font-size: .72rem;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: var(--bs-tertiary-bg, rgba(0, 0, 0, .04));
+  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .1));
+  border-radius: .5rem;
+}
+
+// --- AI enrichment ----------------------------------------------------------
+.pf-ai-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
+.pf-ai-hint { font-size: .8125rem; }
+.pf-ai-result { margin-top: .625rem; font-size: .875rem; }
+.pf-ai-card {
+  padding: .75rem .875rem;
+  background: var(--bs-tertiary-bg, rgba(0, 0, 0, .04));
+  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .1));
+  border-radius: .625rem;
+
+  p { margin: 0 0 .5rem; }
+  p:last-child { margin-bottom: 0; }
+}
+.pf-ai-badges .badge { margin-right: .25rem; }
+.pf-ai-questions { margin: .25rem 0 .5rem 1.1rem; padding: 0; }
+.pf-ai-labels code { font-size: .78rem; }
+.pf-ai-error { color: var(--bs-danger-text-emphasis, var(--bs-danger)); }
+.pf-ai-spinner,
+.pf-ai-note i { color: var(--zer0-color-primary, var(--bs-primary)); }
+.pf-ai-spinner {
+  display: inline-block;
+  width: .85rem;
+  height: .85rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  vertical-align: -.1rem;
+  animation: pf-spin .7s linear infinite;
+}
+@keyframes pf-spin { to { transform: rotate(360deg); } }
+
+// --- Status line ------------------------------------------------------------
+.pf-status:empty { display: none; }
+.pf-status {
+  font-size: .8125rem;
+  margin: 0;
+  padding: .5rem .625rem;
+  border-radius: .5rem;
+
+  &.pf-status--ok    { background: var(--bs-success-bg-subtle, #d1e7dd); color: var(--bs-success-text-emphasis, #0a3622); }
+  &.pf-status--warn  { background: var(--bs-warning-bg-subtle, #fff3cd); color: var(--bs-warning-text-emphasis, #664d03); }
+  &.pf-status--pending { background: var(--bs-info-bg-subtle, #cff4fc); color: var(--bs-info-text-emphasis, #055160); }
+  a { color: inherit; text-decoration: underline; }
+}
+
+// --- Footer -----------------------------------------------------------------
+.pf-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zer0-space-2, .5rem);
+  padding: var(--zer0-space-2, .5rem) var(--zer0-space-3, 1rem);
+  border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, .1));
+  background: var(--bs-body-bg);
+}
+.pf-footer-primary { display: flex; gap: .5rem; }
+.pf-copy { text-decoration: none; }
+
+// --- Reduced motion ---------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .pf-fab,
+  .pf-overlay,
+  .pf-dialog { transition: none; }
+  .pf-ai-spinner { animation: none; }
+}