From 623838c861851cc596bcd48dee2d3418c0c77ef6 Mon Sep 17 00:00:00 2001
From: Joao Figueiredo <joao.figueiredo@jfig.net>
Date: Thu, 23 Jul 2026 02:29:12 +0100
Subject: [PATCH] fix: clarify compass orientation state

---
 styles.css | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/styles.css b/styles.css
index 368c5f8..98b97f5 100644
--- a/styles.css
+++ b/styles.css
@@ -518,14 +518,40 @@ button:disabled {
 }
 
 .map-wrap .ol-device-compass button:hover,
-.map-wrap .ol-device-compass button:focus,
-.map-wrap .ol-device-compass button[aria-pressed="true"] {
+.map-wrap .ol-device-compass button:focus {
   background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
   color: #fff;
   outline: 2px solid rgba(31, 122, 98, 0.35);
   outline-offset: -2px;
 }
 
+/* Compass orientation stays visibly engaged after the pointer leaves the
+   control. The inset high-contrast ring and explicit label do not rely on
+   the green active colour alone. */
+.map-wrap .ol-device-compass button[aria-pressed="true"] {
+  position: relative;
+  border: 3px solid #fffefb;
+  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
+  color: #fff;
+  outline: 2px solid #1f2a2e;
+  outline-offset: -5px;
+}
+
+.map-wrap .ol-device-compass button[aria-pressed="true"]::after {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  padding: 1px 2px;
+  border-radius: 3px;
+  background: #fffefb;
+  color: #1f2a2e;
+  content: "ON";
+  font-size: 0.45rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
 .device-compass-icon {
   display: block;
   width: 1.2em;