Team: fold reference links into the toolbar, drop the duplicate Compare

The reference links sat in their own strip under the header, reading as an
afterthought, and "Compare" appeared both there and as a Team mode.

- Reference links (Natures / Type chart / Breeding) now share one bar with
  the Coverage/Compare/Calc switch — quiet text links on the right, so
  they're still one tap away but clearly secondary chrome, not a pasted-on
  row. Right-aligned on wide screens, wrapping under the switch on mobile.
- Removed the standalone "Compare" reference link. The Team's own Compare
  mode now carries a "Compare any Pokémon →" link to #/compare in its
  intro line, so the free-form compare tool is reachable in context and
  only one "Compare" label is ever visible.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu

src/styles/layout.css

@@ -112,45 +112,53 @@
   color: var(--text-dim);
 }
 
-/* Row of shortcut chips under a view header (Team → Natures / Type chart / …) */
+/* Team toolbar: primary mode switch on the left, reference shortcuts on the
-.toollinks {
+   right. One band so the reference links read as part of the view's chrome
+   rather than a strip pasted above it. */
+.teamview__bar {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  align-items: center;
-  margin: -6px 0 18px;
+  justify-content: space-between;
+  gap: 8px 16px;
+  margin-bottom: 16px;
 }
-.toollink {
+.teamview__bar .seg {
+  margin-bottom: 0;
+}
+.teamview__refs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+}
+.reflink {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
-  padding: 7px 13px 7px 10px;
+  padding: 6px 10px;
-  border: 1px solid var(--border);
+  border-radius: 8px;
-  border-radius: 999px;
+  color: var(--text-dim);
-  background: var(--surface);
+  font-size: 0.8rem;
-  color: var(--text);
-  font-size: 0.82rem;
   font-weight: 600;
   text-decoration: none;
   line-height: 1;
-  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
+  transition: color 0.12s ease, background 0.12s ease;
 }
-.toollink:hover {
+.reflink:hover {
-  border-color: var(--accent);
+  color: var(--text);
-  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  background: var(--surface-2);
 }
-.toollink:active {
+.reflink:active {
   transform: scale(0.96);
 }
-.toollink__ico {
+.reflink__ico {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--accent) 16%, transparent);
   color: var(--accent);
-  font-size: 0.72rem;
+  font-size: 0.82rem;
+}
+.teamcompare__note {
+  margin: 0 0 10px;
+  font-size: 0.82rem;
+  color: var(--text-dim);
 }
 
 .link {

src/views/TeamView.js

@@ -67,16 +67,19 @@ export async function TeamView() {
       { class: 'view__header' },
       el('h1', {}, 'Team'),
       el('p', {}, `Up to ${MAX_TEAM} Pokémon — check weaknesses, coverage and stats.`),
+    ),
+    el(
+      'div',
+      { class: 'teamview__bar' },
+      seg,
       el(
         'nav',
-        { class: 'toollinks' },
+        { class: 'teamview__refs', 'aria-label': 'Reference tools' },
-        el('a', { class: 'toollink', href: '#/natures' }, el('span', { class: 'toollink__ico', 'aria-hidden': 'true' }, '✦'), 'Natures'),
+        el('a', { class: 'reflink', href: '#/natures' }, el('span', { class: 'reflink__ico', 'aria-hidden': 'true' }, '✦'), 'Natures'),
-        el('a', { class: 'toollink', href: '#/types' }, el('span', { class: 'toollink__ico', 'aria-hidden': 'true' }, '▦'), 'Type chart'),
+        el('a', { class: 'reflink', href: '#/types' }, el('span', { class: 'reflink__ico', 'aria-hidden': 'true' }, '▦'), 'Type chart'),
-        el('a', { class: 'toollink', href: '#/compare' }, el('span', { class: 'toollink__ico', 'aria-hidden': 'true' }, '⇄'), 'Compare'),
+        el('a', { class: 'reflink', href: '#/breeding' }, el('span', { class: 'reflink__ico', 'aria-hidden': 'true' }, '⬡'), 'Breeding'),
-        el('a', { class: 'toollink', href: '#/breeding' }, el('span', { class: 'toollink__ico', 'aria-hidden': 'true' }, '⬡'), 'Breeding'),
       ),
     ),
-    seg,
     lineup,
     body,
   );
@@ -355,7 +358,17 @@ export async function TeamView() {
   function compare(mem) {
     const vg = snap.versionGroupByKey.get(settings.get().versionGroup);
     const gen = vg ? vg.generation : 9;
-    return CompareTable(mem, { gen, style: settings.get().spriteStyle });
+    return el(
+      'div',
+      { class: 'teamcompare' },
+      el(
+        'p',
+        { class: 'teamcompare__note' },
+        'Your six side by side. ',
+        el('a', { class: 'link', href: '#/compare' }, 'Compare any Pokémon →'),
+      ),
+      CompareTable(mem, { gen, style: settings.get().spriteStyle }),
+    );
   }
 
   // ---- Damage calculator ------------------------------------------