fix(ui): add mobile media queries for header and legend (THE-74)

Reduce #header font-size from 40px to 16px at max-width 768px to
prevent overlap with the D3 tree on narrow screens. Switch .legend
from absolute/fixed-width to relative/auto so it no longer overflows
viewports narrower than 400px.

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

public/css/arf.css

@@ -215,3 +215,19 @@ a {
   color: var(--color-text-secondary);
   text-align: center;
 }
+
+/* === Mobile responsive === */
+@media (max-width: 768px) {
+  #header {
+    font-size: var(--font-size-lg);
+    top: 10px;
+  }
+
+  .legend {
+    position: relative;
+    width: auto;
+    max-width: 100%;
+    padding: var(--space-2) var(--space-3);
+    box-sizing: border-box;
+  }
+}