Step 1: split port picker hint into separate blue info-box

- Port picker hint ('select USB JTAG/serial debug unit') now in a blue
  .info-box (replaces old .skip-link CSS)
- BOOT hint stays in its own yellow .hint-box below
- Added dark mode support for .info-box
- Applied to both stable and staging pages

Author: nevvkid

docs/flash/10_stable_channel.rst

@@ -185,21 +185,16 @@ All releases are on `GitHub <https://github.com/dadamachines/ctag-tbd/releases>`
         color: #374151;
         display: none;
       }
-      .sd-recovery .skip-link {
-        font-size: 0.9em;
-        color: #2563EB;
-        cursor: pointer;
-        text-decoration: underline;
+      .sd-recovery .info-box {
+        font-size: 0.88em;
+        color: #1e40af;
         margin-top: 0.5em;
-        display: inline-block;
-        padding: 0.3em 0.6em;
+        display: block;
+        padding: 0.5em 0.7em;
         background: #eff6ff;
         border-radius: 4px;
         border: 1px solid #bfdbfe;
-      }
-      .sd-recovery .skip-link:hover {
-        color: #1d4ed8;
-        background: #dbeafe;
+        line-height: 1.5;
       }
       .sd-recovery .complete-card {
         border: 2px solid #10b981;
@@ -251,6 +246,9 @@ All releases are on `GitHub <https://github.com/dadamachines/ctag-tbd/releases>`
       body[data-theme="dark"] .sd-recovery .hint-box {
         background: #422006; color: #fbbf24; border-color: #78350f;
       }
+      body[data-theme="dark"] .sd-recovery .info-box {
+        background: #1e3a5f; color: #93c5fd; border-color: #1e3a5f;
+      }
       body[data-theme="dark"] .sd-recovery .file-log {
         background: #0f172a; border-color: #334155; color: #cbd5e1;
       }
@@ -287,6 +285,9 @@ All releases are on `GitHub <https://github.com/dadamachines/ctag-tbd/releases>`
         body:not([data-theme="light"]) .sd-recovery .hint-box {
           background: #422006; color: #fbbf24; border-color: #78350f;
         }
+        body:not([data-theme="light"]) .sd-recovery .info-box {
+          background: #1e3a5f; color: #93c5fd; border-color: #1e3a5f;
+        }
         body:not([data-theme="light"]) .sd-recovery .file-log {
           background: #0f172a; border-color: #334155; color: #cbd5e1;
         }
@@ -417,8 +418,10 @@ All releases are on `GitHub <https://github.com/dadamachines/ctag-tbd/releases>`
           Connect both USB-C cables: <b>front JTAG port</b> (serial) and <b>back Port&nbsp;#1</b> (SD card drive).
           This step flashes the USB Mass Storage firmware via the front port. After reboot the
           SD card will appear as a removable drive on the <b>back port</b>.
+          <div class="info-box">
+            📌 In the port picker, select <b>"USB JTAG/serial debug unit"</b> (not "Debug Probe").
+          </div>
           <div class="hint-box">
-            📌 In the port picker, select <b>"USB JTAG/serial debug unit"</b> (not "Debug Probe").<br>
             <b>Port not showing?</b> Hold <b>BOOT</b> (between Port&nbsp;#1 and #2) → press <b>Reset</b> → release <b>BOOT</b> → press <b>Reset</b> again.
           </div>
         </div>

docs/flash/20_staging_channel.rst

@@ -182,21 +182,16 @@ or any active feature-test branch build.
         color: #374151;
         display: none;
       }
-      .sd-recovery .skip-link {
-        font-size: 0.9em;
-        color: #2563EB;
-        cursor: pointer;
-        text-decoration: underline;
+      .sd-recovery .info-box {
+        font-size: 0.88em;
+        color: #1e40af;
         margin-top: 0.5em;
-        display: inline-block;
-        padding: 0.3em 0.6em;
+        display: block;
+        padding: 0.5em 0.7em;
         background: #eff6ff;
         border-radius: 4px;
         border: 1px solid #bfdbfe;
-      }
-      .sd-recovery .skip-link:hover {
-        color: #1d4ed8;
-        background: #dbeafe;
+        line-height: 1.5;
       }
       .sd-recovery .complete-card {
         border: 2px solid #10b981;
@@ -248,6 +243,9 @@ or any active feature-test branch build.
       body[data-theme="dark"] .sd-recovery .hint-box {
         background: #422006; color: #fbbf24; border-color: #78350f;
       }
+      body[data-theme="dark"] .sd-recovery .info-box {
+        background: #1e3a5f; color: #93c5fd; border-color: #1e3a5f;
+      }
       body[data-theme="dark"] .sd-recovery .file-log {
         background: #0f172a; border-color: #334155; color: #cbd5e1;
       }
@@ -281,6 +279,9 @@ or any active feature-test branch build.
         body:not([data-theme="light"]) .sd-recovery .hint-box {
           background: #422006; color: #fbbf24; border-color: #78350f;
         }
+        body:not([data-theme="light"]) .sd-recovery .info-box {
+          background: #1e3a5f; color: #93c5fd; border-color: #1e3a5f;
+        }
         body:not([data-theme="light"]) .sd-recovery .file-log {
           background: #0f172a; border-color: #334155; color: #cbd5e1;
         }
@@ -412,8 +413,10 @@ or any active feature-test branch build.
           Connect both USB-C cables: <b>front JTAG port</b> (serial) and <b>back Port&nbsp;#1</b> (SD card drive).
           This step flashes the USB Mass Storage firmware via the front port. After reboot the
           SD card will appear as a removable drive on the <b>back port</b>.
+          <div class="info-box">
+            📌 In the port picker, select <b>"USB JTAG/serial debug unit"</b> (not "Debug Probe").
+          </div>
           <div class="hint-box">
-            📌 In the port picker, select <b>"USB JTAG/serial debug unit"</b> (not "Debug Probe").<br>
             <b>Port not showing?</b> Hold <b>BOOT</b> (between Port&nbsp;#1 and #2) → press <b>Reset</b> → release <b>BOOT</b> → press <b>Reset</b> again.
           </div>
         </div>