Fixig color size and dvl protocol

docs/css/extra.css

@@ -7,13 +7,14 @@ html {
   --md-primary-fg-color:        #1D3556;  /* Ocean blue */
   --md-primary-fg-color--light: #2c4a72;
   --md-primary-fg-color--dark:  #14253b;
-  --md-accent-fg-color:         #2B9C6A;  /* Signal green (dark) */
+  --md-accent-fg-color:         #1F744D;  /* Signal green — WCAG-AA on white (was #2B9C6A, 3.46:1) */
 }
 [data-md-color-scheme="slate"] {
   --md-primary-fg-color:        #1D3556;  /* keep ocean-blue header + tabs in dark mode */
   --md-primary-fg-color--light: #2c4a72;
   --md-primary-fg-color--dark:  #14253b;
   --md-accent-fg-color:         #4BEF8F;  /* Signal green (light) — readable on dark */
+  --md-default-bg-color:        #222;     /* darker page background (was slate blue-grey) */
 }
 
 .md-header {
@@ -94,20 +95,56 @@ html {
     margin-right: -.4rem;
 }
 
-/* Dark green for buttons */
-.md-button {
-  background-color: #2B9C6A;
+/* Buttons: filled dark green with white text — WCAG-AA (white on #1F744D = 5.73:1). The
+   old #2B9C6A gave only ~3.5:1 (a plain button renders the theme's blue text on the green;
+   a primary button, white on #2B9C6A). Hover darkens and keeps white-on-green in BOTH
+   schemes — the theme's default hover pulls --md-accent-fg-color, which in dark mode is the
+   bright #4BEF8F and would drop the text contrast. */
+.md-typeset .md-button {
+  background-color: #1F744D;
+  border-color: #1F744D;
+  color: #fff;
+}
+.md-typeset .md-button:focus,
+.md-typeset .md-button:hover {
+  background-color: #15583A;
+  border-color: #15583A;
+  color: #fff;
 }
 
-/* Green for content links — scoped to typeset content so it doesn't tint nav/tab labels */
+/* Green for content links — scoped to typeset content so it doesn't tint nav/tab labels.
+   #1F744D is a WCAG-AA dark green on the white page (the old #2B9C6A was only 3.46:1). */
 .md-typeset a {
-  color: #2B9C6A;
+  color: #1F744D;
 }
-/* Brighter green for content links in dark mode (better contrast on slate) */
+/* Brighter green for content links in dark mode (readable on the dark background) */
 [data-md-color-scheme="slate"] .md-typeset a {
   color: #4BEF8F;
 }
 
+/* --- Headings -----------------------------------------------------------------------
+   The theme colours headings with an alpha'd foreground variable, so they render
+   semi-transparent and low-contrast. Pin them to solid, WCAG-AA colours and add a little
+   weight so they no longer read as too light. */
+[data-md-color-scheme="default"] .md-typeset h1,
+[data-md-color-scheme="default"] .md-typeset h2,
+[data-md-color-scheme="default"] .md-typeset h3,
+[data-md-color-scheme="default"] .md-typeset h4,
+[data-md-color-scheme="default"] .md-typeset h5,
+[data-md-color-scheme="default"] .md-typeset h6 {
+  color: #1D3556;
+  font-weight: 500;
+}
+[data-md-color-scheme="slate"] .md-typeset h1,
+[data-md-color-scheme="slate"] .md-typeset h2,
+[data-md-color-scheme="slate"] .md-typeset h3,
+[data-md-color-scheme="slate"] .md-typeset h4,
+[data-md-color-scheme="slate"] .md-typeset h5,
+[data-md-color-scheme="slate"] .md-typeset h6 {
+  color: #fff;
+  font-weight: 500;
+}
+
 /* Wire-colour / LED swatches — drawn in CSS instead of emoji so they look pixel-identical
    on every OS & browser. Emoji such as ⬜/⚪ are rendered by each device's own emoji font
    (white/silver ones can look pink or oddly bordered on some platforms); these boxes don't
@@ -134,16 +171,21 @@ html {
 .c-orange-white { background: linear-gradient(90deg, #ef6c00 50%, #fff 50%); }
 .c-brown-white  { background: linear-gradient(90deg, #5d4037 50%, #fff 50%); }
 
-/* Product photos / screenshots have an opaque white background baked into the file, so in
-   dark mode they render as harsh bright blocks (CSS can't make an opaque pixel transparent,
-   and many photos have a dark subject that needs a light backdrop anyway). In dark mode,
-   frame content images as a light "photo card": the white backing keeps any transparent
-   images readable, and the padding + rounded corners make white-background images read as an
-   intentional framed photo instead of a raw white rectangle. */
+/* In dark mode, paint a white backing behind content images so any transparent PNG with
+   dark content (line art, diagrams) stays legible on the dark page; for the many photos and
+   screenshots that already have an opaque white background baked in, it's a no-op.
+   This is a COLOUR-only change: no padding, border, or size, so the image box is identical
+   in light and dark and toggling the theme never shifts layout or resizes imagery. (An
+   earlier version added .35rem padding + rounded corners in dark mode only, which grew every
+   image and boxed inline icons, shifting content on toggle.) */
 [data-md-color-scheme="slate"] .md-typeset img {
   background-color: #fff;
-  padding: .35rem;
-  border-radius: .25rem;
+}
+/* Opt-out for self-coloured icons (e.g. a green help badge) that are already legible on the
+   dark page: the white backing would box them in a jarring white square. Tag such an image
+   with `{ .no-card }` in the Markdown. */
+[data-md-color-scheme="slate"] .md-typeset img.no-card {
+  background-color: transparent;
 }
 
 /* --- Sticky section tabs ------------------------------------------------------------
@@ -189,33 +231,35 @@ html {
 } 
 
   /* --- Active page / link colour --------------------------------------------------- */
-  /* Make the currently active page/tab stand out with a distinct accent colour. */
+  /* The active page in the left navigation is a content-side link, so it follows the green
+     link colours: a WCAG-AA dark green on the light sidebar, brighter green on dark. */
   .md-nav .md-nav__link--active,
   .md-nav__link--active,
   .md-nav .md-nav__link.is-active {
-    color: #2B9C6A !important; /* coral */
+    color: #1F744D !important;
     font-weight: 600;
   }
+  [data-md-color-scheme="slate"] .md-nav .md-nav__link--active,
+  [data-md-color-scheme="slate"] .md-nav__link--active,
+  [data-md-color-scheme="slate"] .md-nav .md-nav__link.is-active {
+    color: #4BEF8F !important;
+  }
 
-  /* Header / top navigation active link */
+  /* Main menu (ocean-blue header + section tabs). Its background stays ocean blue in both
+     colour schemes, so the active item uses one colour for both modes: a bright green that
+     keeps high contrast on the blue band. */
   .md-header-nav .md-nav__link--active,
-  .md-header-nav .md-nav__link.is-active {
-    color: #2B9C6A !important;
+  .md-header-nav .md-nav__link.is-active,
+  .md-tabs__item--active .md-tabs__link {
+    color: #4BEF8F !important;
+    opacity: 1;
   }
 
-  /* Tabs (section tabs) active state */
-  .md-tabs__item--active .md-tabs__link,
+  /* Tab hover/focus brightens to white (the non-active affordance on the blue band). */
   .md-tabs__link:focus,
   .md-tabs__link:hover {
     color: #ffffff !important;
     opacity: 1;
   }
 
-  /* Dark-scheme adjustment: keep good contrast in slate/dark mode */
-  [data-md-color-scheme="slate"] .md-nav .md-nav__link--active,
-  [data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link,
-  [data-md-color-scheme="slate"] .md-header-nav .md-nav__link--active {
-    color: #2B9C6A !important;
-  }
-
 

docs/dvl/dvl-a250_a100-serial-protocol.md

@@ -205,7 +205,7 @@ The supported protocols are:
 | Protocol number | Name | Description |
 | --------------- | ---- | ----------- |
 | 0 | Output disabled | No output on serial. Recommended if serial port is not used to lower latency on Ethernet protocols. |
-| 1 | WL - Serial V1 and V2 | All output including the deprecated `wrx` and `wrt` sentences. |
+| 1 | Not used | Not used |
 | 2 | PD6 | PD6 format output. See [PD6 format description](dvl-pd-formats.md#pd6-protocol-tcpserial) |
 | 3 | WL - Serial V2 | All output excluding the deprecated `wrx` and `wrt` sentences. |
 | 4 | Not used | Not used |

docs/sonar-3d/sonar-3d-15-gui.md

@@ -2,7 +2,7 @@
 
 The GUI provides a simple no-setup solution to view the Sonar 3D-15 data and change its settings.
 
-When you first start the Sonar 3D-15 GUI you will be greeted with a view showing the 3D point cloud and various settings. To get familiar with the interface, click the ![?](../img/Sonar-3D-15-question-mark-solid-transparent-20x20.png) icon (help overlay).
+When you first start the Sonar 3D-15 GUI you will be greeted with a view showing the 3D point cloud and various settings. To get familiar with the interface, click the ![?](../img/Sonar-3D-15-question-mark-solid-transparent-20x20.png){ .no-card } icon (help overlay).
 The 3D view can be controlled via mouse and keyboard, or touch controls.