Add BYOC and Cloud platform badges for ADP documentation

Adds inline status badges in the sticky header for ADP pages when
features are limited to specific platforms:
- "Only in BYOC" badge when :page-byoc-only: true is set
- "Only in Cloud" badge when :page-cloud-only: true is set

Both attributes require :adp: true (set in ADP component antora.yml).
Badges are mutually exclusive - set only one.

Also includes:
- Version dropdown alignment fix (aligns left with button)
- Removed the availability block in favor of compact inline badges

Author: JakeSCahill

src/css/doc.css

@@ -201,6 +201,12 @@ html[data-theme="dark"] .component-indicator-sticky .sm-ver-pill-caret {
   color: rgba(255, 255, 255, 0.65);
 }
 
+/* Version dropdown panel positioning in sticky header - align left with button */
+.component-indicator-sticky .sm-ver-panel {
+  left: 0;
+  right: auto;
+}
+
 /* Status badges (Beta, Limited Availability) in sticky header */
 .status-badge {
   display: inline-flex;
@@ -243,6 +249,20 @@ html[data-theme="dark"] .status-badge--la {
   border-color: rgba(139, 92, 246, 0.3);
 }
 
+.status-badge--byoc,
+.status-badge--cloud {
+  background: #e0f2fe;
+  color: #0369a1;
+  border: 1px solid #7dd3fc;
+}
+
+html[data-theme="dark"] .status-badge--byoc,
+html[data-theme="dark"] .status-badge--cloud {
+  background: rgba(14, 165, 233, 0.15);
+  color: #7dd3fc;
+  border-color: rgba(14, 165, 233, 0.3);
+}
+
 @media screen and (min-width: 600px) {
   .doc .openblock.side-by-side > .content {
     display: flex;

src/partials/article.hbs

@@ -41,14 +41,32 @@
       Limited Availability
     </span>
     {{/if}}
+    {{!-- ADP platform badges: only show when limited to one platform --}}
+    {{#if page.attributes.adp}}
+    {{#if page.attributes.byoc-only}}
+    <span class="status-badge status-badge--byoc" data-tippy-content="This feature is only available in BYOC (Bring Your Own Cloud) clusters.">
+      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/>
+      </svg>
+      Only in BYOC
+    </span>
+    {{else if page.attributes.cloud-only}}
+    <span class="status-badge status-badge--cloud" data-tippy-content="This feature is only available in fully managed Redpanda Cloud clusters.">
+      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/>
+      </svg>
+      Only in Cloud
+    </span>
+    {{/if}}
+    {{/if}}
   </div>
   {{#with page.title}}
     <h1 class="page">{{{this}}}</h1>
   {{/with}}
 {{/if}}
 {{#unless (or (eq page.attributes.role 'component-home-v2') (eq page.attributes.role 'component-home-v3'))}}
 <div class="metadata metadata--main">
-  {{!-- Only show BYOC/Cloud badges on non-ADP pages (ADP uses availability block instead) --}}
+  {{!-- Only show BYOC/Cloud badges on non-ADP pages (ADP uses inline status badges instead) --}}
   {{#unless page.attributes.adp}}
   {{#if page.attributes.byoc}}
     <div class="byoc-label">
@@ -72,53 +90,6 @@
   {{> markdown-dropdown}}
 </div>
 {{/unless}}
-{{!-- Availability block for ADP pages showing platform support --}}
-{{#if page.attributes.adp}}
-{{#unless (eq page.attributes.role 'component-home-v2')}}
-{{#unless (eq page.attributes.role 'component-home-v3')}}
-{{#unless (eq page.attributes.role 'home')}}
-{{#unless (eq page.layout 'index')}}
-<div class="availability-block">
-  <strong>Available in:</strong>
-  {{#if (and page.attributes.byoc page.attributes.cloud-only)}}
-    Cloud, BYOC
-  {{else if page.attributes.byoc}}
-    BYOC
-  {{else if page.attributes.cloud-only}}
-    Cloud
-  {{else}}
-    Cloud, BYOC
-  {{/if}}
-  <span class="availability-info" tabindex="0" aria-label="Availability information">
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="12" cy="12" r="10"></circle>
-      <line x1="12" y1="16" x2="12" y2="12"></line>
-      <line x1="12" y1="8" x2="12.01" y2="8"></line>
-    </svg>
-  </span>
-</div>
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-  const availabilityInfo = document.querySelector(".availability-info");
-  if (availabilityInfo && typeof tippy !== 'undefined') {
-    tippy(availabilityInfo, {
-      content: "This indicates which Redpanda Cloud cluster types support this feature. Cloud refers to fully managed clusters. BYOC (Bring Your Own Cloud) refers to clusters running in your own cloud account.",
-      animation: "scale",
-      theme: "redpanda-term",
-      touch: "hold",
-      interactive: true,
-      allowHTML: true,
-      appendTo: () => document.body,
-      maxWidth: 300
-    });
-  }
-});
-</script>
-{{/unless}}
-{{/unless}}
-{{/unless}}
-{{/unless}}
-{{/if}}
 {{#if (or page.attributes.beta page.attributes.limited-availability page.attributes.byoc page.attributes.cloud-only page.attributes.context-switcher)}}
   <script>
   document.addEventListener("DOMContentLoaded", () => {