feat(prezentacja): kliknięcie powiększa kosmogram na pełne okno (PRE-25)

Ósma wskazówka partnerów, jako małe QoL przed PRE-22. Koło rysujemy w kolumnie
tekstu, więc na mniejszym ekranie glify i stopnie robią się nieczytelne.
Kliknięcie rozciąga wykres na całe okno, ponowne wraca do strony. SVG skaluje
się bez utraty jakości, więc nie potrzeba drugiej wersji rysunku ani biblioteki.

Wyjście z powiększenia na trzy sposoby: klik w wykres, klik w tło, Esc.
Dostępne też z klawiatury (Enter/Spacja, focus-visible), bo inaczej obejrzenie
szczegółów wymagałoby myszy.

Dwie decyzje warte odnotowania:

1. WARSTWA. z-index 1100 CELOWO pomiędzy: ponad kontrolkami Leafleta (1000),
   ale PONIŻEJ okna postępu (1200). Gdy trwa pisanie horoskopu, log operacji ma
   zostać na wierzchu. Test pilnuje tej nierówności, bo to jedyna liczba tutaj,
   którą łatwo zmienić bez zastanowienia i zepsuć coś niewidocznego na oko.

2. ROZMIAR. Koło jest kwadratowe, więc ograniczamy je KRÓTSZYM bokiem okna
   (min(96vw, 92vh)) — inaczej na szerokim ekranie wystawałoby w pionie.

Skrypt podpięty globalnie w base.html i osłonięty sprawdzeniem, czy koło w ogóle
jest na stronie — zadziała też na przyszłej zakładce „Skompiluj" bez zmian.
Przy powiększeniu blokujemy przewijanie strony pod spodem.

Weryfikacja na żywej aplikacji, pomiarami w DOM: po kliknięciu .wheel-fig ma
position:fixed, display:flex, z-index:1100; SVG rośnie z 460×460 do 662×653
przy oknie 1280×720, visibility visible; body dostaje overflow:hidden. Ponowne
kliknięcie wraca do 460×460 i zdejmuje klasę. Zrzutu ekranu stanu powiększonego
NIE mam — panel przeglądarki zaciął się w trakcie (puste klatki, viewport
raportowany jako 0×0), więc opieram się na pomiarach i testach.

Testy: 10 nowych. Całość: prezentacja 87 passed, logika 265 / 1 skip.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

services/presentation/app/static/styles.css

@@ -50,6 +50,24 @@ td.glyph { color: var(--accent); white-space: nowrap; }
 .wheel-fig figcaption { margin-top: .4rem; }
 /* glify wewnątrz SVG dziedziczą monochromatyczny stack fontów (DAN-18) */
 svg.wheel text.glyph { font-size: inherit; }
+
+/* Powiększenie na pełne okno (PRE-25). Kliknięcie rozciąga wykres na cały ekran,
+   ponowne wraca. z-index 1100 CELOWO pomiędzy: ponad kontrolki Leafleta (1000),
+   ale PONIŻEJ okna postępu (1200) — gdy trwa pisanie horoskopu, log operacji ma
+   zostać na wierzchu. */
+.wheel-fig svg.wheel { cursor: zoom-in; }
+.wheel-fig svg.wheel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
+.wheel-fig.zoomed {
+  position: fixed; inset: 0; z-index: 1100; margin: 0;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: .5rem; padding: 1rem; background: var(--bg);
+}
+/* min() po obu wymiarach: koło jest kwadratowe, więc ograniczamy je krótszym
+   bokiem okna — inaczej na szerokim ekranie wystawałoby w pionie. */
+.wheel-fig.zoomed svg.wheel {
+  max-width: min(96vw, 92vh); width: min(96vw, 92vh); height: auto; cursor: zoom-out;
+}
+body.wheel-zoom-open { overflow: hidden; }   /* nie przewijaj treści pod spodem */
 form { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; }
 .row { display: flex; gap: .5rem; }
 .row input[type=text] { flex: 1; }

services/presentation/app/static/wheelzoom.js

@@ -0,0 +1,60 @@
+// Powiększanie kosmogramu na pełne okno (PRE-25).
+//
+// Koło rysujemy w kolumnie tekstu, więc na małym ekranie glify i stopnie robią
+// się nieczytelne. Kliknięcie rozciąga wykres na całe okno, ponowne wraca do
+// strony. SVG skaluje się bez utraty jakości, więc nie potrzeba drugiej wersji
+// rysunku ani żadnej biblioteki.
+//
+// Podpięte globalnie i osłonięte sprawdzeniem, czy koło w ogóle jest na stronie
+// — dzięki temu zadziała też na przyszłej zakładce „Skompiluj", bez zmian tutaj.
+(function () {
+  'use strict';
+
+  var ZOOMED = 'zoomed';
+
+  function ready(fn) {
+    if (document.readyState !== 'loading') fn();
+    else document.addEventListener('DOMContentLoaded', fn);
+  }
+
+  ready(function () {
+    var figures = document.querySelectorAll('.wheel-fig');
+    if (!figures.length) return;
+
+    Array.prototype.forEach.call(figures, function (fig) {
+      var svg = fig.querySelector('svg.wheel');
+      if (!svg) return;
+
+      // Klawiatura ma działać tak samo jak mysz — to nie jest ozdobnik, tylko
+      // jedyny sposób na obejrzenie szczegółów wykresu.
+      svg.setAttribute('tabindex', '0');
+      svg.setAttribute('role', 'button');
+      svg.setAttribute('aria-label', 'Kosmogram — kliknij, aby powiększyć na całe okno');
+
+      function toggle() {
+        var on = fig.classList.toggle(ZOOMED);
+        // Blokujemy przewijanie strony pod spodem: inaczej scroll „przecieka"
+        // na treść, której i tak nie widać.
+        document.body.classList.toggle('wheel-zoom-open', on);
+        svg.setAttribute('aria-label', on
+          ? 'Kosmogram powiększony — kliknij lub naciśnij Esc, aby wrócić'
+          : 'Kosmogram — kliknij, aby powiększyć na całe okno');
+        if (on) svg.focus();
+      }
+
+      svg.addEventListener('click', toggle);
+      svg.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); }
+      });
+
+      // Klik w tło (poza samym rysunkiem) też zamyka — naturalne dla nakładki.
+      fig.addEventListener('click', function (e) {
+        if (e.target === fig && fig.classList.contains(ZOOMED)) toggle();
+      });
+
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && fig.classList.contains(ZOOMED)) toggle();
+      });
+    });
+  });
+})();