Keep route controls on the California board

index.html

@@ -918,7 +918,7 @@
       </div>
       <div class="card hint" id="hint">
         <span><kbd>1</kbd>–<kbd>9</kbd> chapters</span>
-        <span>choose <kbd>2</kbd> or <kbd>3</kbd> to follow</span>
+        <span id="drive-hint">choose <kbd>2</kbd> or <kbd>3</kbd> to follow</span>
         <span><kbd>[</kbd> <kbd>]</kbd> city</span>
         <span><kbd>O</kbd> office</span>
         <span><kbd>M</kbd> plan</span>

src/main.ts

@@ -1337,6 +1337,7 @@ const helpButton = document.querySelector<HTMLButtonElement>("#help");
 const planToggle = document.querySelector<HTMLButtonElement>("#plan-toggle");
 const credits = document.querySelector<HTMLElement>("#credits");
 const driveControls = document.querySelector<HTMLElement>("#drive-controls");
+const driveHint = document.querySelector<HTMLElement>("#drive-hint");
 
 function showDetail(text: string | null) {
   const card = document.querySelector<HTMLElement>("#detail");
@@ -1483,6 +1484,7 @@ function renderLegend() {
   officePlan?.setActiveView(office?.current() ?? null);
   renderOfficeBadge();
   if (driveControls) driveControls.hidden = !routeDriveIsActive();
+  if (driveHint) driveHint.hidden = inside || cityId !== "california";
 }
 
 /**