style: separate query preview actions

src/app/App.tsx

@@ -587,22 +587,25 @@ export function App() {
           </button>
         </div>
 
-        <section className="query-panel" aria-labelledby="query-heading">
+        <section className="query-panel query-panel-separated" aria-labelledby="query-heading">
           <div className="panel-heading">
-            <h2 id="query-heading">Query Preview</h2>
+            <div>
-            <div className="query-actions">
+              <h2 id="query-heading">Query Preview</h2>
-              <button type="button" disabled={!queryPreview.query} onClick={handleCopyQuery}>
+              <p className="field-note">Advanced output generated from the current search.</p>
-                Copy query
-              </button>
-              <button
-                type="button"
-                disabled={!queryPreview.query}
-                onClick={handleOpenOverpassTurbo}
-              >
-                Open in Overpass Turbo
-              </button>
             </div>
           </div>
+          <div className="query-actions">
+            <button type="button" disabled={!queryPreview.query} onClick={handleCopyQuery}>
+              Copy query
+            </button>
+            <button
+              type="button"
+              disabled={!queryPreview.query}
+              onClick={handleOpenOverpassTurbo}
+            >
+              Open in Overpass Turbo
+            </button>
+          </div>
           <pre className="query-preview">
             {queryPreview.query || queryPreview.error || 'Choose a preset to generate a query.'}
           </pre>

src/styles.css

@@ -630,6 +630,43 @@ a {
   min-height: 0;
 }
 
+.query-panel-separated {
+  position: relative;
+  gap: 0.65rem;
+  border-top: 1px solid #dbe3dc;
+  background:
+    linear-gradient(180deg, rgb(238 246 242 / 62%) 0%, rgb(250 251 248 / 0%) 100%);
+  margin-top: 0.15rem;
+  padding-top: 1rem;
+}
+
+.query-panel-separated::before {
+  content: "Advanced";
+  position: absolute;
+  top: -0.62rem;
+  left: 0;
+  background: #fafbf8;
+  color: #6b7770;
+  padding-right: 0.55rem;
+  font-size: 0.72rem;
+  font-weight: 760;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.query-actions {
+  border: 1px solid #d7ded5;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 0.45rem;
+}
+
+.query-actions button {
+  min-height: 34px;
+  padding: 0.42rem 0.64rem;
+  font-size: 0.82rem;
+}
+
 .panel-heading {
   display: flex;
   align-items: center;