From 6b69e59826f0d07752cab9dfa1e1da52246f6bf8 Mon Sep 17 00:00:00 2001
From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com>
Date: Fri, 28 Nov 2025 21:24:00 +0200
Subject: [PATCH 01/13] Move styles into SVG image

---
 _static/devguide_overrides.css          | 70 +------------------
 _tools/release_cycle_template.svg.jinja | 89 +++++++++++++++++++++++++
 2 files changed, 90 insertions(+), 69 deletions(-)

diff --git a/_static/devguide_overrides.css b/_static/devguide_overrides.css
index 5b6d67b09..f652db366 100644
--- a/_static/devguide_overrides.css
+++ b/_static/devguide_overrides.css
@@ -6,16 +6,9 @@
     height: 110px;
 }
 
-/* Release cycle chart */
-
-.release-cycle-chart {
-    width: 100%;
-}
-
+/* Release cycle chart - theme-aware overrides */
 .release-cycle-chart .release-cycle-year-line {
     stroke: var(--color-foreground-primary);
-    stroke-width: 0.8px;
-    opacity: 75%;
 }
 
 .release-cycle-chart .release-cycle-year-text {
@@ -24,36 +17,16 @@
 
 .release-cycle-chart .release-cycle-today-line {
     stroke: var(--color-brand-primary);
-    stroke-width: 1.6px;
 }
 
 .release-cycle-chart .release-cycle-row-shade {
     fill: var(--color-background-item);
-    opacity: 50%;
 }
 
 .release-cycle-chart .release-cycle-version-label {
     fill: var(--color-foreground-primary);
 }
 
-.release-cycle-chart .release-cycle-blob {
-    stroke-width: 1.6px;
-    /* default colours, overridden below for individual statuses */
-    fill: var(--color-background-primary);
-    stroke: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-blob-label {
-    /* white looks good on both light & dark */
-    fill: white;
-}
-
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-security,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-bugfix {
-    /* but use black to improve contrast for lighter backgrounds */
-    fill: black;
-}
-
 .release-cycle-chart .release-cycle-blob-label.release-cycle-status-end-of-life,
 .release-cycle-chart .release-cycle-blob-label.release-cycle-status-prerelease,
 .release-cycle-chart .release-cycle-blob-label.release-cycle-status-feature {
@@ -61,47 +34,6 @@
     fill: var(--color-foreground-primary);
 }
 
-.release-cycle-chart .release-cycle-status-end-of-life {
-    --status-bg-color: #DD2200;
-    --status-border-color: #FF8888;
-}
-
-.release-cycle-chart .release-cycle-status-security {
-    --status-bg-color: #FFDD44;
-    --status-border-color: #FF8800;
-}
-
-.release-cycle-chart .release-cycle-status-bugfix {
-    --status-bg-color: #00DD22;
-    --status-border-color: #008844;
-}
-
-.release-cycle-chart .release-cycle-status-prerelease {
-    --status-bg-color: teal;
-    --status-border-color: darkgreen;
-}
-
-.release-cycle-chart .release-cycle-status-feature {
-    --status-bg-color: #2222EE;
-    --status-border-color: #008888;
-}
-
-.release-cycle-chart .release-cycle-blob {
-    fill: var(--status-bg-color);
-    stroke: transparent;
-}
-
-.release-cycle-chart .release-cycle-blob-full {
-    fill: var(--status-bg-color);
-    stroke: var(--status-border-color);
-}
-
-.release-cycle-chart .release-cycle-border {
-    fill: transparent;
-    stroke: var(--status-border-color);
-    stroke-width: 1.6px;
-}
-
 .good pre {
   border-left: 3px solid rgba(74, 182, 93, 1);
 }
diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index d3d5866a0..91d20b2e2 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -4,6 +4,95 @@
     class="release-cycle-chart"
     viewBox="0 0 {{ diagram_width }} {{ diagram_height }}"
 >
+    <style>
+        /* Embedded styles for standalone viewing */
+        .release-cycle-chart {
+            width: 100%;
+        }
+        .release-cycle-year-line {
+            stroke: #333;
+            stroke-width: 0.8px;
+            opacity: 75%;
+        }
+        .release-cycle-year-text {
+            fill: #333;
+        }
+        .release-cycle-today-line {
+            stroke: #4B8BBE; /* Python blue */
+            stroke-width: 1.6px;
+        }
+        .release-cycle-row-shade {
+            fill: #e0e0e0;
+            opacity: 50%;
+        }
+        .release-cycle-version-label {
+            fill: #333;
+        }
+        .release-cycle-blob {
+            stroke-width: 1.6px;
+        }
+        .release-cycle-blob-label {
+            fill: white;
+        }
+        .release-cycle-blob-label.release-cycle-status-security,
+        .release-cycle-blob-label.release-cycle-status-bugfix {
+            fill: black;
+        }
+        .release-cycle-blob-label.release-cycle-status-end-of-life,
+        .release-cycle-blob-label.release-cycle-status-prerelease,
+        .release-cycle-blob-label.release-cycle-status-feature {
+            fill: #333;
+        }
+        .release-cycle-status-end-of-life .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-end-of-life {
+            fill: #DD2200;
+            stroke: #FF8888;
+        }
+        .release-cycle-status-security .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-security {
+            fill: #FFDD44;
+            stroke: transparent;
+        }
+        .release-cycle-status-bugfix .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-bugfix {
+            fill: #00DD22;
+            stroke: transparent;
+        }
+        .release-cycle-status-prerelease .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-prerelease {
+            fill: teal;
+            stroke: transparent;
+        }
+        .release-cycle-status-feature .release-cycle-blob,
+        .release-cycle-blob.release-cycle-status-feature {
+            fill: #2222EE;
+            stroke: transparent;
+        }
+        .release-cycle-blob-full.release-cycle-status-end-of-life {
+            fill: #DD2200;
+            stroke: #FF8888;
+        }
+        .release-cycle-border.release-cycle-status-security {
+            fill: transparent;
+            stroke: #FF8800;
+            stroke-width: 1.6px;
+        }
+        .release-cycle-border.release-cycle-status-bugfix {
+            fill: transparent;
+            stroke: #008844;
+            stroke-width: 1.6px;
+        }
+        .release-cycle-border.release-cycle-status-prerelease {
+            fill: transparent;
+            stroke: darkgreen;
+            stroke-width: 1.6px;
+        }
+        .release-cycle-border.release-cycle-status-feature {
+            fill: transparent;
+            stroke: #008888;
+            stroke-width: 1.6px;
+        }
+    </style>
     <defs>
         <linearGradient id="release-cycle-mask-gradient-{{ id_key }}">
             <stop stop-color="black" offset="0%" />

From a0195fcc41aa1dcffbce4096300d4c5d7e7fcaed Mon Sep 17 00:00:00 2001
From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com>
Date: Fri, 28 Nov 2025 21:34:36 +0200
Subject: [PATCH 02/13] Put scalable vector graphics on the world wide web

---
 conf.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/conf.py b/conf.py
index 0f6a820d8..68f7a640e 100644
--- a/conf.py
+++ b/conf.py
@@ -37,6 +37,10 @@
     "source_branch": "main",
 }
 html_static_path = ['_static']
+html_extra_path = [
+    'include/release-cycle.svg',
+    'include/release-cycle-all.svg',
+]
 html_css_files = [
     'devguide_overrides.css',
 ]

From abc7ce50adca832ccecf500ebf187598c11d3107 Mon Sep 17 00:00:00 2001
From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com>
Date: Fri, 28 Nov 2025 22:12:44 +0200
Subject: [PATCH 03/13] Set a font in the SVG

---
 _tools/release_cycle_template.svg.jinja | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 91d20b2e2..e64debda8 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -7,6 +7,7 @@
     <style>
         /* Embedded styles for standalone viewing */
         .release-cycle-chart {
+            font-family: Arial, sans-serif;
             width: 100%;
         }
         .release-cycle-year-line {

From cd4f76a506ee263fbeb82401380f0de4321d0ba6 Mon Sep 17 00:00:00 2001
From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com>
Date: Sat, 29 Nov 2025 16:58:30 +0200
Subject: [PATCH 04/13] Update comments

---
 _static/devguide_overrides.css          | 2 +-
 _tools/release_cycle_template.svg.jinja | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/_static/devguide_overrides.css b/_static/devguide_overrides.css
index f652db366..2661c6810 100644
--- a/_static/devguide_overrides.css
+++ b/_static/devguide_overrides.css
@@ -6,7 +6,7 @@
     height: 110px;
 }
 
-/* Release cycle chart - theme-aware overrides */
+/* Release cycle chart */
 .release-cycle-chart .release-cycle-year-line {
     stroke: var(--color-foreground-primary);
 }
diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index e64debda8..ff85924e6 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -19,7 +19,7 @@
             fill: #333;
         }
         .release-cycle-today-line {
-            stroke: #4B8BBE; /* Python blue */
+            stroke: #4B8BBE;
             stroke-width: 1.6px;
         }
         .release-cycle-row-shade {
@@ -33,10 +33,12 @@
             stroke-width: 1.6px;
         }
         .release-cycle-blob-label {
+            /* white looks good on both light & dark */
             fill: white;
         }
         .release-cycle-blob-label.release-cycle-status-security,
         .release-cycle-blob-label.release-cycle-status-bugfix {
+            /* but use black to improve contrast for lighter backgrounds */
             fill: black;
         }
         .release-cycle-blob-label.release-cycle-status-end-of-life,

From 60d4439f82fc0c84a23bfedcfb682f27d63e46c0 Mon Sep 17 00:00:00 2001
From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com>
Date: Sat, 29 Nov 2025 18:45:28 +0200
Subject: [PATCH 05/13] Fix xmlParseEntityRef error caused by unescape
 ampersand

---
 _tools/release_cycle_template.svg.jinja | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index ff85924e6..702a8cf18 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -33,7 +33,7 @@
             stroke-width: 1.6px;
         }
         .release-cycle-blob-label {
-            /* white looks good on both light & dark */
+            /* white looks good on both light and dark */
             fill: white;
         }
         .release-cycle-blob-label.release-cycle-status-security,

From f2717455c33670434a81612e10fb1f9cb4da7b62 Mon Sep 17 00:00:00 2001
From: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com>
Date: Sat, 29 Nov 2025 18:53:47 +0200
Subject: [PATCH 06/13] Save release charts to _static

---
 .gitignore                       | 4 ++--
 Makefile                         | 4 ++--
 _tools/generate_release_cycle.py | 4 ++--
 conf.py                          | 4 ----
 make.ps1                         | 2 +-
 versions.rst                     | 6 +++---
 6 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/.gitignore b/.gitignore
index b71249201..f61a10830 100644
--- a/.gitignore
+++ b/.gitignore
@@ -90,5 +90,5 @@ celerybeat-schedule
 # Generated CSV and SVG files
 include/branches.csv
 include/end-of-life.csv
-include/release-cycle.svg
-include/release-cycle-all.svg
+_static/release-cycle.svg
+_static/release-cycle-all.svg
diff --git a/Makefile b/Makefile
index 3d485ae2d..d4fe89a79 100644
--- a/Makefile
+++ b/Makefile
@@ -22,8 +22,8 @@ REQUIREMENTS = requirements.txt
 _ALL_SPHINX_OPTS = --jobs $(JOBS) $(SPHINXOPTS)
 _RELEASE_CYCLE   = include/branches.csv \
                    include/end-of-life.csv \
-                   include/release-cycle-all.svg \
-                   include/release-cycle.svg
+                   _static/release-cycle-all.svg \
+                   _static/release-cycle.svg
 
 .PHONY: help
 help:
diff --git a/_tools/generate_release_cycle.py b/_tools/generate_release_cycle.py
index dd0a3a7c6..b7c2afe0e 100644
--- a/_tools/generate_release_cycle.py
+++ b/_tools/generate_release_cycle.py
@@ -198,10 +198,10 @@ def main() -> None:
     versions = Versions()
     assert len(versions.versions) > 10
     versions.write_csv()
-    versions.write_svg(args.today, "include/release-cycle-all.svg")
+    versions.write_svg(args.today, "_static/release-cycle-all.svg")
 
     versions = Versions(limit_to_active=True, special_py27=True)
-    versions.write_svg(args.today, "include/release-cycle.svg")
+    versions.write_svg(args.today, "_static/release-cycle.svg")
 
 
 if __name__ == "__main__":
diff --git a/conf.py b/conf.py
index 68f7a640e..0f6a820d8 100644
--- a/conf.py
+++ b/conf.py
@@ -37,10 +37,6 @@
     "source_branch": "main",
 }
 html_static_path = ['_static']
-html_extra_path = [
-    'include/release-cycle.svg',
-    'include/release-cycle-all.svg',
-]
 html_css_files = [
     'devguide_overrides.css',
 ]
diff --git a/make.ps1 b/make.ps1
index ffda67269..c8ad842c9 100644
--- a/make.ps1
+++ b/make.ps1
@@ -65,7 +65,7 @@ if ($target -Eq "clean") {
         $BUILDDIR,
         $_VENV_DIR,
         "include/branches.csv", "include/end-of-life.csv",
-        "include/release-cycle.svg", "include/release-cycle-all.svg"
+        "_static/release-cycle.svg", "_static/release-cycle-all.svg"
     )
     foreach ($item in $ToClean) {
         if (Test-Path -Path $item) {
diff --git a/versions.rst b/versions.rst
index 0a52829c2..5f3a287ce 100644
--- a/versions.rst
+++ b/versions.rst
@@ -11,7 +11,7 @@ version can be found on the `download page <https://www.python.org/downloads/>`_
 
 
 .. raw:: html
-   :file: include/release-cycle.svg
+   :file: _static/release-cycle.svg
 
 (See :ref:`below <full-chart>` for a chart with older versions.
 Another useful visualization is `endoflife.date/python <https://endoflife.date/python>`_.)
@@ -36,7 +36,7 @@ Unsupported versions
 .. csv-table::
    :header-rows: 1
    :width: 100%
-   :file: include/end-of-life.csv
+   :file: _static/end-of-life.csv
 
 
 .. _full-chart:
@@ -45,7 +45,7 @@ Full chart
 ==========
 
 .. raw:: html
-   :file: include/release-cycle-all.svg
+   :file: _static/release-cycle-all.svg
 
 
 Status key

From d36cf008f8e986882994187373b523f10d4d44d5 Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Mon, 1 Dec 2025 16:48:47 +0100
Subject: [PATCH 07/13] Adjust standalone release chart CSS

- Use CSS variables from outside if present
- Use light or dark theme
- Add an outline to labels to improve readability (especially on
  incompatible background colours, and above the day line)
- Reorder elements to improve readability (put text on top of
  the day line)
---
 _static/devguide_overrides.css          |  28 ----
 _tools/release_cycle_template.svg.jinja | 175 ++++++++++++++----------
 2 files changed, 102 insertions(+), 101 deletions(-)

diff --git a/_static/devguide_overrides.css b/_static/devguide_overrides.css
index 2661c6810..625a9dda2 100644
--- a/_static/devguide_overrides.css
+++ b/_static/devguide_overrides.css
@@ -6,34 +6,6 @@
     height: 110px;
 }
 
-/* Release cycle chart */
-.release-cycle-chart .release-cycle-year-line {
-    stroke: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-year-text {
-    fill: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-today-line {
-    stroke: var(--color-brand-primary);
-}
-
-.release-cycle-chart .release-cycle-row-shade {
-    fill: var(--color-background-item);
-}
-
-.release-cycle-chart .release-cycle-version-label {
-    fill: var(--color-foreground-primary);
-}
-
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-end-of-life,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-prerelease,
-.release-cycle-chart .release-cycle-blob-label.release-cycle-status-feature {
-    /* and FG when it's not in a blob */
-    fill: var(--color-foreground-primary);
-}
-
 .good pre {
   border-left: 3px solid rgba(74, 182, 93, 1);
 }
diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 702a8cf18..c41537942 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -5,95 +5,108 @@
     viewBox="0 0 {{ diagram_width }} {{ diagram_height }}"
 >
     <style>
+        :root {
+            color-scheme: light dark;
+
+            {# Copy vars from Furo theme if present #}
+            {% for varname, default in {
+                'color-foreground-primary': 'light-dark(#333, #fff)',
+                'color-background-primary': 'light-dark(#fff, #333)',
+                'color-brand-primary': '#4B8BBE',
+                'color-background-item': '#e0e0e0',
+            }.items() %}
+                --svg-{{varname}}: var(--{{varname}}, {{default}});
+            {% endfor %}
+        }
         /* Embedded styles for standalone viewing */
         .release-cycle-chart {
-            font-family: Arial, sans-serif;
+            font-family: var(
+                --font-stack,
+                -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
+                Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
             width: 100%;
+
+            --blob-border-width: 1.6px;
         }
         .release-cycle-year-line {
-            stroke: #333;
+            stroke: var(--svg-color-foreground-primary);
             stroke-width: 0.8px;
             opacity: 75%;
         }
         .release-cycle-year-text {
-            fill: #333;
+            fill: var(--svg-color-foreground-primary);
         }
         .release-cycle-today-line {
-            stroke: #4B8BBE;
-            stroke-width: 1.6px;
+            stroke: var(--svg-color-brand-primary);
+            stroke-width: var(--blob-border-width);
         }
         .release-cycle-row-shade {
-            fill: #e0e0e0;
+            fill: var(--svg-color-background-item);
             opacity: 50%;
         }
         .release-cycle-version-label {
-            fill: #333;
+            fill: var(--svg-color-foreground-primary);
         }
         .release-cycle-blob {
-            stroke-width: 1.6px;
-        }
-        .release-cycle-blob-label {
-            /* white looks good on both light and dark */
-            fill: white;
+            stroke-width: var(--blob-border-width);
         }
-        .release-cycle-blob-label.release-cycle-status-security,
-        .release-cycle-blob-label.release-cycle-status-bugfix {
-            /* but use black to improve contrast for lighter backgrounds */
-            fill: black;
+        text {
+            fill: var(--svg-color-foreground-primary);
+
+            /* an outline of the background color, in case it's not set
+               correctly */
+            stroke: var(--svg-color-background-primary);
+            stroke-width: var(--blob-border-width);
+            /* draw stroke first (half of it will be visible as outline) */
+            paint-order: stroke;
+
+            /* use specific colours on known backgrounds */
+            &amp;.release-cycle-status-security ,
+            &amp;.release-cycle-status-bugfix {
+                fill: black;
+                stroke: var(--status-bg-color);
+            }
+            /* For year labels, keep outline below the row shading
+               (it's a separate element) */
+            &amp;.release-cycle-version-label-outline {
+                fill: transparent;
+            }
+            &amp;.release-cycle-version-label {
+                stroke: none;
+            }
         }
-        .release-cycle-blob-label.release-cycle-status-end-of-life,
-        .release-cycle-blob-label.release-cycle-status-prerelease,
-        .release-cycle-blob-label.release-cycle-status-feature {
-            fill: #333;
+        .release-cycle-status-end-of-life {
+            --status-bg-color: #DD2200;
+            --status-border-color: #FF8888;
         }
-        .release-cycle-status-end-of-life .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-end-of-life {
-            fill: #DD2200;
-            stroke: #FF8888;
+        .release-cycle-status-security {
+            --status-bg-color: #FFDD44;
+            --status-border-color: #FF8800;
         }
-        .release-cycle-status-security .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-security {
-            fill: #FFDD44;
-            stroke: transparent;
+        .release-cycle-status-bugfix {
+            --status-bg-color: #00DD22;
+            --status-border-color: #008844;
         }
-        .release-cycle-status-bugfix .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-bugfix {
-            fill: #00DD22;
-            stroke: transparent;
+        .release-cycle-status-prerelease {
+            --status-bg-color: teal;
+            --status-border-color: darkgreen;
         }
-        .release-cycle-status-prerelease .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-prerelease {
-            fill: teal;
-            stroke: transparent;
+        .release-cycle-status-feature {
+            --status-bg-color: #2222EE;
+            --status-border-color: #008888;
         }
-        .release-cycle-status-feature .release-cycle-blob,
-        .release-cycle-blob.release-cycle-status-feature {
-            fill: #2222EE;
+        .release-cycle-blob {
+            fill: var(--status-bg-color);
             stroke: transparent;
         }
-        .release-cycle-blob-full.release-cycle-status-end-of-life {
-            fill: #DD2200;
-            stroke: #FF8888;
-        }
-        .release-cycle-border.release-cycle-status-security {
-            fill: transparent;
-            stroke: #FF8800;
-            stroke-width: 1.6px;
-        }
-        .release-cycle-border.release-cycle-status-bugfix {
-            fill: transparent;
-            stroke: #008844;
-            stroke-width: 1.6px;
+        .release-cycle-blob-full {
+            fill: var(--status-bg-color);
+            stroke: var(--status-border-color);
         }
-        .release-cycle-border.release-cycle-status-prerelease {
+        .release-cycle-border {
             fill: transparent;
-            stroke: darkgreen;
-            stroke-width: 1.6px;
-        }
-        .release-cycle-border.release-cycle-status-feature {
-            fill: transparent;
-            stroke: #008888;
-            stroke-width: 1.6px;
+            stroke: var(--status-border-color);
+            stroke-width: var(--blob-border-width);
         }
     </style>
     <defs>
@@ -105,6 +118,15 @@
 
     {% for version in versions %}
         {% set y = version.y * line_height %}
+        <!-- Outline for legend on the left -->
+        <text
+            class="release-cycle-version-label-outline"
+            x="{{ 0.5 * SCALE }}"
+            y="{{ version.y * line_height }}"
+            font-size="{{ SCALE }}"
+        >
+            Python {{ version.key }}
+        </text>
 
         {% if version.y % 2 %}
             <!-- Row shading -->
@@ -166,7 +188,7 @@
     </mask>
 
     {% for version in versions %}
-        <!-- Colourful blob with a label. -->
+        <!-- Colourful blob. -->
 
         {% set top_y = version.y * line_height - 1 * SCALE %}
         {% set height = 1.25 * SCALE %}
@@ -174,8 +196,6 @@
         {% set end_x = date_to_x(version.end_of_life_date) %}
         {% set radius = 0.25 * SCALE %}
 
-        {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
-
         <!-- bugfix/security blobs need to be split between the two phases.
             Draw the rectangle with two path elements instead.
             Thanks Claude.ai for the initial conversion.
@@ -243,6 +263,25 @@
                 mask="url(#release-cycle-mask-{{ id_key }})"
             />
         {% endif %}
+    {% endfor %}
+
+    <!-- A line for today -->
+    <line
+        class="release-cycle-today-line"
+        x1="{{ date_to_x(today) }}"
+        x2="{{ date_to_x(today) }}"
+        y1="0"
+        y2="{{ diagram_height - line_height }}"
+        font-size="{{ SCALE }}"
+    />
+
+    {% for version in versions %}
+        <!-- Label for colourful blob -->
+
+        {% set start_x = date_to_x(version.first_release_date) %}
+        {% set end_x = date_to_x(version.end_of_life_date) %}
+        {% set middle_x = ([end_x, date_to_x(version.start_security_date)]|min)  %}
+        {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
 
         <!-- Add text before/after/inside the blob -->
         <text
@@ -276,14 +315,4 @@
             Python {{ version.key }}
         </text>
     {% endfor %}
-
-    <!-- A line for today -->
-    <line
-        class="release-cycle-today-line"
-        x1="{{ date_to_x(today) }}"
-        x2="{{ date_to_x(today) }}"
-        y1="0"
-        y2="{{ diagram_height - line_height }}"
-        font-size="{{ SCALE }}"
-    />
 </svg>

From 2f0db0bd80b9d7f109ff40bb28d6431e123d171a Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 15:47:25 +0100
Subject: [PATCH 08/13] Draw outlines and text separately

---
 _tools/release_cycle_template.svg.jinja | 97 ++++++++++++-------------
 1 file changed, 46 insertions(+), 51 deletions(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index c41537942..89f9d9ad2 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -33,9 +33,6 @@
             stroke-width: 0.8px;
             opacity: 75%;
         }
-        .release-cycle-year-text {
-            fill: var(--svg-color-foreground-primary);
-        }
         .release-cycle-today-line {
             stroke: var(--svg-color-brand-primary);
             stroke-width: var(--blob-border-width);
@@ -44,36 +41,30 @@
             fill: var(--svg-color-background-item);
             opacity: 50%;
         }
-        .release-cycle-version-label {
-            fill: var(--svg-color-foreground-primary);
-        }
         .release-cycle-blob {
             stroke-width: var(--blob-border-width);
         }
-        text {
+        .text-main {
             fill: var(--svg-color-foreground-primary);
 
+            /* use specific colours on known backgrounds */
+            &amp;.release-cycle-status-security,
+            &amp;.release-cycle-status-bugfix {
+                fill: black;
+            }
+        }
+        .text-outline {
             /* an outline of the background color, in case it's not set
-               correctly */
+            correctly */
+            fill: transparent;
             stroke: var(--svg-color-background-primary);
             stroke-width: var(--blob-border-width);
-            /* draw stroke first (half of it will be visible as outline) */
-            paint-order: stroke;
 
             /* use specific colours on known backgrounds */
-            &amp;.release-cycle-status-security ,
+            &amp;.release-cycle-status-security,
             &amp;.release-cycle-status-bugfix {
-                fill: black;
                 stroke: var(--status-bg-color);
             }
-            /* For year labels, keep outline below the row shading
-               (it's a separate element) */
-            &amp;.release-cycle-version-label-outline {
-                fill: transparent;
-            }
-            &amp;.release-cycle-version-label {
-                stroke: none;
-            }
         }
         .release-cycle-status-end-of-life {
             --status-bg-color: #DD2200;
@@ -120,7 +111,7 @@
         {% set y = version.y * line_height %}
         <!-- Outline for legend on the left -->
         <text
-            class="release-cycle-version-label-outline"
+            class="release-cycle-version-label text-outline"
             x="{{ 0.5 * SCALE }}"
             y="{{ version.y * line_height }}"
             font-size="{{ SCALE }}"
@@ -141,15 +132,17 @@
     {% endfor %}
 
     {% for year in years %}
-        <text
-            class="release-cycle-year-text"
-            x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
-            y="{{ diagram_height - line_height }}"
-            font-size="{{ SCALE * 0.75 }}"
-            text-anchor="middle"
-        >
-            {{ format_year(year) }}
-        </text>
+        {% for cls in ('text-outline', 'text-main') %}
+            <text
+                class="release-cycle-year-text {{cls}}"
+                x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
+                y="{{ diagram_height - line_height }}"
+                font-size="{{ SCALE * 0.75 }}"
+                text-anchor="middle"
+            >
+                {{ format_year(year) }}
+            </text>
+        {% endfor %}
         {% if not loop.last %}
         <line
             class="release-cycle-year-line"
@@ -284,30 +277,32 @@
         {% set small_text_y = version.y * line_height - 0.1 * SCALE %}
 
         <!-- Add text before/after/inside the blob -->
-        <text
-            class="release-cycle-blob-label release-cycle-status-{{ version.status }}"
-            font-size="{{ SCALE * 0.75 }}"
-            y="{{ small_text_y }}"
-            {% if version.status == "bugfix" %}
-                x="{{ (start_x + middle_x) / 2 }}"
-                text-anchor="middle"
-            {% elif version.status == "security" %}
-                x="{{ (middle_x + end_x) / 2 }}"
-                text-anchor="middle"
-            {% elif version.status == "end-of-life" %}
-                x="{{ end_x + (0.25 * SCALE) }}"
-                text-anchor="start"
-            {% else %}
-                x="{{ start_x - (0.25 * SCALE) }}"
-                text-anchor="end"
-            {% endif %}
-        >
-            {{ version.status }}
-        </text>
+        {% for cls in ('text-outline', 'text-main') %}
+            <text
+                class="release-cycle-blob-label {{cls}} release-cycle-status-{{ version.status }}"
+                font-size="{{ SCALE * 0.75 }}"
+                y="{{ small_text_y }}"
+                {% if version.status == "bugfix" %}
+                    x="{{ (start_x + middle_x) / 2 }}"
+                    text-anchor="middle"
+                {% elif version.status == "security" %}
+                    x="{{ (middle_x + end_x) / 2 }}"
+                    text-anchor="middle"
+                {% elif version.status == "end-of-life" %}
+                    x="{{ end_x + (0.25 * SCALE) }}"
+                    text-anchor="start"
+                {% else %}
+                    x="{{ start_x - (0.25 * SCALE) }}"
+                    text-anchor="end"
+                {% endif %}
+            >
+                {{ version.status }}
+            </text>
+        {% endfor %}
 
         <!-- Legend on the left -->
         <text
-            class="release-cycle-version-label"
+            class="release-cycle-version-label text-main"
             x="{{ 0.5 * SCALE }}"
             y="{{ version.y * line_height }}"
             font-size="{{ SCALE }}"

From 29c0602eb752cd0d6b5dfb4bb5259850e9d252cc Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 15:48:41 +0100
Subject: [PATCH 09/13] Set background color explicitly

---
 _tools/release_cycle_template.svg.jinja | 32 +++++++++----------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 89f9d9ad2..744073335 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -27,6 +27,8 @@
             width: 100%;
 
             --blob-border-width: 1.6px;
+
+            background-color: var(--color-background-primary);
         }
         .release-cycle-year-line {
             stroke: var(--svg-color-foreground-primary);
@@ -109,16 +111,6 @@
 
     {% for version in versions %}
         {% set y = version.y * line_height %}
-        <!-- Outline for legend on the left -->
-        <text
-            class="release-cycle-version-label text-outline"
-            x="{{ 0.5 * SCALE }}"
-            y="{{ version.y * line_height }}"
-            font-size="{{ SCALE }}"
-        >
-            Python {{ version.key }}
-        </text>
-
         {% if version.y % 2 %}
             <!-- Row shading -->
             <rect
@@ -132,17 +124,15 @@
     {% endfor %}
 
     {% for year in years %}
-        {% for cls in ('text-outline', 'text-main') %}
-            <text
-                class="release-cycle-year-text {{cls}}"
-                x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
-                y="{{ diagram_height - line_height }}"
-                font-size="{{ SCALE * 0.75 }}"
-                text-anchor="middle"
-            >
-                {{ format_year(year) }}
-            </text>
-        {% endfor %}
+        <text
+            class="release-cycle-year-text {{cls}}"
+            x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
+            y="{{ diagram_height - line_height }}"
+            font-size="{{ SCALE * 0.75 }}"
+            text-anchor="middle"
+        >
+            {{ format_year(year) }}
+        </text>
         {% if not loop.last %}
         <line
             class="release-cycle-year-line"

From eabf2f04ee2be3f196eb0cdf36ca69fdacb27391 Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 15:50:26 +0100
Subject: [PATCH 10/13] Fix

---
 _tools/release_cycle_template.svg.jinja | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 744073335..20b3bc9c4 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -125,7 +125,7 @@
 
     {% for year in years %}
         <text
-            class="release-cycle-year-text {{cls}}"
+            class="release-cycle-year-text"
             x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
             y="{{ diagram_height - line_height }}"
             font-size="{{ SCALE * 0.75 }}"

From fb4e66e986adce617839220ea320bed267c5a2c8 Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 16:18:18 +0100
Subject: [PATCH 11/13] Avoid :root

---
 _tools/release_cycle_template.svg.jinja | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 20b3bc9c4..ee44edbd6 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -5,7 +5,8 @@
     viewBox="0 0 {{ diagram_width }} {{ diagram_height }}"
 >
     <style>
-        :root {
+        /* Embedded styles for standalone viewing */
+        .release-cycle-chart {
             color-scheme: light dark;
 
             {# Copy vars from Furo theme if present #}
@@ -17,9 +18,7 @@
             }.items() %}
                 --svg-{{varname}}: var(--{{varname}}, {{default}});
             {% endfor %}
-        }
-        /* Embedded styles for standalone viewing */
-        .release-cycle-chart {
+
             font-family: var(
                 --font-stack,
                 -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,

From 4bdcd0d24c373053204ff60d9bab1ff5667557e7 Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Tue, 2 Dec 2025 19:04:33 +0100
Subject: [PATCH 12/13] Responsive colours for years

---
 _tools/release_cycle_template.svg.jinja | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index ee44edbd6..436fd7c96 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -124,7 +124,7 @@
 
     {% for year in years %}
         <text
-            class="release-cycle-year-text"
+            class="release-cycle-year-text text-main"
             x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
             y="{{ diagram_height - line_height }}"
             font-size="{{ SCALE * 0.75 }}"

From 53a698cca6c06f152c4287646199f4b41d78e19d Mon Sep 17 00:00:00 2001
From: Petr Viktorin <encukou@gmail.com>
Date: Wed, 3 Dec 2025 12:25:47 +0100
Subject: [PATCH 13/13] Light only; add background

---
 _tools/release_cycle_template.svg.jinja | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/_tools/release_cycle_template.svg.jinja b/_tools/release_cycle_template.svg.jinja
index 436fd7c96..9f23814a9 100644
--- a/_tools/release_cycle_template.svg.jinja
+++ b/_tools/release_cycle_template.svg.jinja
@@ -7,7 +7,7 @@
     <style>
         /* Embedded styles for standalone viewing */
         .release-cycle-chart {
-            color-scheme: light dark;
+            color-scheme: light;
 
             {# Copy vars from Furo theme if present #}
             {% for varname, default in {
@@ -26,8 +26,9 @@
             width: 100%;
 
             --blob-border-width: 1.6px;
-
-            background-color: var(--color-background-primary);
+        }
+        .background {
+            fill: var(--svg-color-background-primary);
         }
         .release-cycle-year-line {
             stroke: var(--svg-color-foreground-primary);
@@ -108,6 +109,14 @@
         </linearGradient>
     </defs>
 
+    <rect
+        class="background"
+        x="0"
+        y="0"
+        width="{{ diagram_width }}"
+        height="{{ diagram_height }}"
+    />
+
     {% for version in versions %}
         {% set y = version.y * line_height %}
         {% if version.y % 2 %}