v0.1.19 - Throughput overview & responsive header

- Throughput: new "Throughput Overview" header with Gauge icon and brand-green
  badge icons on each card (Today, This week, 4-week average, Horse Mix, Grain Mix)
- Throughput: inline rolling-range selector (7d / 4w / 6w / 12w, default 4 weeks)
  driving the customer-mix cards; stats window widened to 12 weeks so switching
  range is a pure client-side re-filter
- Throughput: cards collapse to a single even 5-across row on laptop and up,
  with container-query value text that scales to each card's width
- Throughput: date logic pinned to Australian Eastern time (fixes the day-early
  date); This week subtitle shows the Mon-Sun date range
- Throughput: subtler tinted add-form; removed the inline-entry kicker and the
  "Open full form" link
- Topbar: fix cramped laptop header - action toggles no longer wrap above the
  user button; search drops to its own row earlier

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/routes/ordering/manage/integrations/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { Plug } from 'lucide-svelte';
+
+  // Connected systems. Each integration has its own page nested under this one
+  // (and a matching submenu entry in the rail).
+  const integrations = [
+    {
+      href: '/ordering/manage/integrations/xero',
+      name: 'Xero',
+      description: 'Send confirmed order invoices to Xero and map customers to their Xero contact.'
+    }
+  ];
+</script>
+
+<section class="surface-card">
+  <h2>Integrations</h2>
+  <p class="muted">Connect the ordering portal to the systems you already use.</p>
+  <ul class="integration-list">
+    {#each integrations as it (it.href)}
+      <li>
+        <a class="integration" href={it.href}>
+          <span class="ico"><Plug size={18} strokeWidth={1.75} /></span>
+          <span class="body">
+            <span class="name">{it.name}</span>
+            <span class="desc">{it.description}</span>
+          </span>
+        </a>
+      </li>
+    {/each}
+  </ul>
+</section>
+
+<style>
+  .integration-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
+  .integration {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+    padding: 0.85rem 0.95rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-control);
+    background: var(--panel-soft);
+    transition: border-color 140ms ease, background-color 140ms ease;
+  }
+  .integration:hover { border-color: var(--color-brand); background: var(--color-surface-hover); }
+  .ico {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.1rem;
+    height: 2.1rem;
+    border-radius: var(--radius-control);
+    background: var(--color-bg-surface);
+    color: var(--color-brand);
+    flex-shrink: 0;
+  }
+  .body { display: grid; gap: 0.15rem; min-width: 0; }
+  .name { font-weight: 700; font-size: 0.95rem; color: var(--color-text-primary); }
+  .desc { font-size: 0.82rem; color: var(--color-text-muted); }
+</style>