Add a global, colour-coded team selector to the nav

state.js's currentTeam() was hard-coded to teams[0] and never really meant
"the team currently selected" — team.js's settings page and queue.js's
filter chips each kept their own separate, unsynchronized notion of "which
team" instead, so picking one on one page had no effect on the other.

Replaces both with a single state.selectedTeamID, set only through the new
setSelectedTeam (persisted in localStorage, unlike the queue's old per-tab
sessionStorage filter) and broadcast to listeners via onTeamChange. A new
teamselector.js control — a coloured dot plus the team's name, or "All
teams" — sits at the top of both the desktop sidebar and the mobile topbar,
opening the existing bottom-sheet menu to switch. Shown only once someone is
in more than one team, matching every other team-aware control in this app.

Colours come from a new teamColorClass() in format.js, hashing a team's id
into the six-colour rc1..rc6 palette already used for the rota's per-person
chips, so no schema or API change is needed. The queue's team filter chips
pick up the same colours.

internal/web/static/app.css

@@ -261,6 +261,33 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
   font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
 }
 
+/* ---------- team selector ---------- */
+/* The global control for which team the app is scoped to. Hidden (via the
+   `hidden` attribute, set from teamselector.js) for anybody in fewer than two
+   teams, the same rule every other team-aware control in this file follows. */
+
+.nav-team-selector,
+.team-selector-mobile {
+  display: inline-flex; align-items: center; gap: 8px;
+  border: 1px solid var(--border-strong); border-radius: 999px;
+  background: var(--surface); color: var(--text);
+  font-size: 13px; font-weight: 600; cursor: pointer;
+  padding: 4px 12px; max-width: 100%;
+}
+.team-selector-mobile { padding: 4px 10px; font-size: 12px; max-width: 120px; }
+.team-selector-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* A team's identity colour — not a status, so never the severity palette. Six
+   colours, then they repeat; teamColorClass() in format.js picks one by the
+   team's id, the same rcN convention the rota's per-person chips use. */
+.team-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
+.team-dot.rc1 { background: var(--accent); }
+.team-dot.rc2 { background: var(--ok); }
+.team-dot.rc3 { background: var(--snooze); }
+.team-dot.rc4 { background: var(--warn); }
+.team-dot.rc5 { background: var(--teal); }
+.team-dot.rc6 { background: var(--pink); }
+
 .view { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
 .view-page { padding-left: 16px; padding-right: 16px; }
 .view-page > * { max-width: 760px; margin-left: auto; margin-right: auto; }
@@ -282,6 +309,7 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 }
 .chips::-webkit-scrollbar { display: none; }
 .chip {
+  display: inline-flex; align-items: center; gap: 6px;
   flex: none;
   min-height: 34px; padding: 0 12px;
   border: 1px solid var(--border-strong); border-radius: 999px;
@@ -645,6 +673,7 @@ kbd {
     display: flex; align-items: center; gap: 10px;
     padding: 4px 10px 18px; font-size: 18px; font-weight: 750; letter-spacing: -0.01em;
   }
+  .nav-team-selector { margin: -8px 10px 14px; width: calc(100% - 20px); }
   .nav-link {
     flex-direction: row; justify-content: flex-start; gap: 12px;
     min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm);
@@ -784,7 +813,6 @@ kbd {
 .stacked-form label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
 .stacked-form label.checkbox { gap: 8px; }
 .stacked-form input.wide { min-width: min(420px, 100%); }
-.team-picker { margin-top: 8px; max-width: 100%; }
 
 /* The rota, a month at a time. A name is too wide to print thirty times and
    too alike down a column to read, so a day carries an initial in that