Move breadcrumb to header and shrink Open Tool button (THE-114)

- Breadcrumb now sits below the tool name inside panel-header, wrapped
  in #panel-header-text flex column; removes the need for the first HR
  divider between breadcrumb and the CTA button
- #panel-open-tool changed from block/width:100% to inline-block with
  auto width; #panel-cta-section centered with text-align so the button
  is pill-sized and no longer overflows the panel

Co-Authored-By: Paperclip <noreply@paperclip.ing>

public/css/panel.css

@@ -47,6 +47,14 @@
   flex-shrink: 0;
 }
 
+#panel-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  flex: 1;
+}
+
 #panel-title {
   font-size: var(--font-size-lg);
   font-weight: bold;
@@ -82,11 +90,12 @@
   overflow-y: auto;
 }
 
-/* Breadcrumb */
+/* Breadcrumb (lives in panel-header now) */
 #panel-breadcrumb {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   line-height: 1.5;
+  word-break: break-word;
 }
 
 #panel-breadcrumb.empty {
@@ -205,6 +214,7 @@
 /* CTA button */
 #panel-cta-section {
   flex-shrink: 0;
+  text-align: center;
 }
 
 #panel-cta-section.empty {
@@ -212,9 +222,8 @@
 }
 
 #panel-open-tool {
-  display: block;
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
+  display: inline-block;
+  padding: var(--space-3) var(--space-5);
   background: var(--color-accent);
   color: #fff;
   border: none;
@@ -225,6 +234,7 @@
   cursor: pointer;
   text-align: center;
   text-decoration: none;
+  white-space: nowrap;
 }
 
 #panel-open-tool:hover {

public/index.html

@@ -39,14 +39,13 @@
     <div id="panel-overlay"></div>
     <div id="tool-panel" role="complementary" aria-label="Tool details">
       <div id="panel-header">
-        <span id="panel-title"></span>
+        <div id="panel-header-text">
+          <span id="panel-title"></span>
+          <div id="panel-breadcrumb" class="empty"></div>
+        </div>
         <button id="panel-close" aria-label="Close panel">&#x2715;</button>
       </div>
       <div id="panel-body">
-        <div id="panel-breadcrumb" class="empty"></div>
-
-        <hr class="panel-divider">
-
         <div id="panel-cta-section" class="empty">
           <a id="panel-open-tool" href="#" target="_blank" rel="noopener noreferrer">Open Tool &rarr;</a>
         </div>