better focus management

app/EditButtons.css

···
   transition-duration: 0.05s;
 }
 
+.edit-btn-utility:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
 .edit-btn-add {
   font-size: 1.25rem;
   line-height: 0.9;

app/EditButtons.tsx

···
   className = "",
 }: UtilityButtonProps & { className?: string }) {
   return (
-    <button onClick={onClick} className={`edit-btn-utility ${className}`} title={title}>
+    <button
+      type="button"
+      onClick={onClick}
+      className={`edit-btn-utility ${className}`}
+      title={title}
+      aria-label={title}
+    >
       {children}
     </button>
   );
···
 
 export function DeleteButton({ onClick, title }: DeleteButtonProps) {
   return (
-    <button onClick={onClick} className="edit-btn-delete" title={title}>
+    <button
+      type="button"
+      onClick={onClick}
+      className="edit-btn-delete"
+      title={title}
+      aria-label={title}
+    >
       ×
     </button>
   );

app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.css

···
     box-shadow 0.2s ease;
   position: relative;
   flex-shrink: 0;
+  /* Reset button styles */
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
 }
 
 .TrailProgress-node--clickable {
···
   transition-duration: 0.1s;
 }
 
+.TrailProgress-node:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
 .TrailProgress-node--upcoming {
   background-color: rgba(0, 0, 0, 0.08);
-  border: none;
 }
 
 @media (prefers-color-scheme: dark) {
   .TrailProgress-node--upcoming {
-    background-color: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0.15);
   }
 }
 

app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.tsx

···
             const isCurrent = i === currentStep;
             const isVisited = i > currentStep && i <= maxReached;
 
+            const canNavigate = isUnlocked && onStepClick;
+
             return (
               <div key={i} className="TrailProgress-nodeWrapper">
-                <div
+                <button
+                  type="button"
                   className={`TrailProgress-node ${
                     isCompleted
                       ? "TrailProgress-node--completed"
···
                         : isVisited
                           ? "TrailProgress-node--visited"
                           : "TrailProgress-node--upcoming"
-                  } ${isUnlocked && onStepClick ? "TrailProgress-node--clickable" : ""}`}
-                  onClick={() => isUnlocked && onStepClick?.(i)}
+                  } ${canNavigate ? "TrailProgress-node--clickable" : ""}`}
+                  onClick={() => canNavigate && onStepClick(i)}
+                  disabled={!canNavigate}
+                  aria-label={`Go to stop ${i + 1}${isCurrent ? " (current)" : isCompleted ? " (completed)" : isVisited ? " (visited)" : ""}`}
+                  aria-current={isCurrent ? "step" : undefined}
                 />
                 {i < totalSteps - 1 && <div className="TrailProgress-line" />}
               </div>

app/at/(trail)/[handle]/trail/[rkey]/TrailRegister.css

···
   padding-bottom: 2px;
 }
 
-.TrailRegister-entry--deletable:hover .TrailRegister-deleteButton {
+.TrailRegister-entry--deletable:hover .TrailRegister-deleteButton,
+.TrailRegister-entry--deletable:has(:focus-visible) .TrailRegister-deleteButton {
   opacity: 1;
   pointer-events: auto;
 }

app/at/(trail)/[handle]/trail/[rkey]/TrailStop.css

···
   transition-duration: 0.05s;
 }
 
+.TrailStop:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
 .TrailStop--current {
   border: 2px solid var(--accent-color);
 }
···
   pointer-events: none;
 }
 
-.TrailStop--reorderActive .TrailStop-reorderControls {
+.TrailStop--reorderActive .TrailStop-reorderControls,
+.TrailStop-reorderControls:focus-within {
   opacity: 1;
 }
 
···
   z-index: 5;
 }
 
-.TrailStop-insertButton--before {
-  top: -2rem;
-  opacity: 0.3;
-  transition: opacity 0.2s ease;
-}
-
-@media (hover: hover) {
-  .TrailStop-insertButton--before:hover {
-    opacity: 1;
-  }
-}
-
 .TrailStop-insertButton--between,
 .TrailStop-insertButton--final {
   top: calc(100% + 2rem);
 }
 
-/* Between-stops buttons are subtle by default, show fully on hover */
+/* Between-stops buttons are subtle by default, show fully on hover/focus */
 .TrailStop-insertButton--between {
   opacity: 0.3;
   transition: opacity 0.2s ease;
+}
+
+.TrailStop-insertButton--between:focus-within {
+  opacity: 1;
 }
 
 /* Extend hover zone below the stop to include the gap area */

app/at/(trail)/[handle]/trail/[rkey]/TrailStop.tsx

···
   totalStops: number;
   isStepCompleted: boolean;
   isCurrent: boolean;
+  isNextCurrent: boolean;
   isVisited: boolean;
   isClickable: boolean;
   isReorderActive?: boolean;
···
   totalStops,
   isStepCompleted,
   isCurrent,
+  isNextCurrent,
   isVisited,
   isClickable,
   isReorderActive = false,
···
   const handleGoToStop = (newIndex: number) => {
     onGoToStop(newIndex);
   };
+
+  const stopLabel = `Stop ${index + 1}${stop.title ? `: ${stop.title}` : ""}${
+    isCurrent ? " (current)" : isStepCompleted ? " (completed)" : isVisited ? " (visited)" : ""
+  }`;
 
   return (
     <div>
···
                 : ""
         } ${isReorderActive && isEditing ? "TrailStop--reorderActive" : ""} ${isEditing ? "TrailStop--editing" : ""}`}
         onClick={() => isClickable && onGoToStop(index)}
+        onKeyDown={(e) => {
+          if (isClickable && (e.key === "Enter" || e.key === " ") && e.target === e.currentTarget) {
+            e.preventDefault();
+            onGoToStop(index);
+          }
+        }}
+        onFocus={() => {
+          if (!isCurrent) {
+            onGoToStop(index);
+          }
+        }}
         style={{ cursor: isClickable ? "pointer" : "default" }}
+        tabIndex={isClickable && !isEditing ? 0 : undefined}
+        role={isClickable && !isEditing ? "button" : undefined}
+        aria-label={isClickable && !isEditing ? stopLabel : undefined}
       >
         {/* Opaque background - matches page background */}
         <div className="TrailStop-bg" />
 
         <div className="TrailStop-content">
-          {/* Edit controls */}
+          {/* Stop content first for logical tab order */}
+          <div>
+            <TrailStopCard
+              stop={stop}
+              stepNumber={index + 1}
+              totalStops={totalStops}
+              isCurrent={isCurrent}
+            />
+          </div>
+
+          {/* View mode: done button */}
+          {isCurrent && !isEditing && (
+            <div className="TrailStop-actions">
+              <AccentButton
+                onClick={() => {
+                  onContinue();
+                }}
+                size="large"
+              >
+                {stop.buttonText || "done that"}
+              </AccentButton>
+            </div>
+          )}
+
+          {/* Edit mode controls - after content for tab order */}
           {isEditing && editContext && (
             <>
-              {/* Reorder controls - only show on current step */}
+              {/* Delete control - visually top right */}
+              <div className="TrailStop-deleteButton">
+                <DeleteButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (totalStops === 1) {
+                      alert("you need at least one stop");
+                      return;
+                    }
+                    const isEmpty = !stop.title.trim() && !stop.content.trim();
+                    const shouldDelete = isEmpty || confirm("delete this stop?");
+
+                    if (shouldDelete) {
+                      if (isCurrent && index > 0) {
+                        handleGoToStop(index - 1);
+                      }
+                      editContext.deleteStop(stop.tid);
+                    }
+                  }}
+                  title="delete stop"
+                />
+              </div>
+
+              {/* Reorder controls - only on current stop */}
               {isCurrent && (
                 <div className="TrailStop-reorderControls">
                   {index > 0 && (
···
                   )}
                 </div>
               )}
-              {/* Delete control - top right subtle × */}
-              <div className="TrailStop-deleteButton">
-                <DeleteButton
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    if (totalStops === 1) {
-                      alert("you need at least one stop");
-                      return;
-                    }
-                    const isEmpty = !stop.title.trim() && !stop.content.trim();
-                    const shouldDelete = isEmpty || confirm("delete this stop?");
 
-                    if (shouldDelete) {
-                      if (isCurrent && index > 0) {
-                        handleGoToStop(index - 1);
-                      }
-                      editContext.deleteStop(stop.tid);
-                    }
-                  }}
-                  title="delete stop"
-                />
-              </div>
+              {/* Insert after button - visually between this stop and next.
+                  Show if this stop is current, next stop is current (so it appears above current),
+                  or it's the last stop with content */}
+              {(isCurrent ||
+                isNextCurrent ||
+                (index === totalStops - 1 && (stop.title.trim() || stop.content.trim()))) &&
+                totalStops < 12 && (
+                  <div
+                    className={`TrailStop-insertButton ${index === totalStops - 1 ? "TrailStop-insertButton--final" : "TrailStop-insertButton--between"}`}
+                  >
+                    <AddButton
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        editContext.addStop(index);
+                        handleGoToStop(index + 1);
+                      }}
+                      title="add stop after"
+                    />
+                  </div>
+                )}
             </>
           )}
-
-          <div>
-            <TrailStopCard
-              stop={stop}
-              stepNumber={index + 1}
-              totalStops={totalStops}
-              isCurrent={isCurrent}
-            />
-          </div>
-
-          {isCurrent && !isEditing && (
-            <div className="TrailStop-actions">
-              <AccentButton
-                onClick={() => {
-                  onContinue();
-                }}
-                size="large"
-              >
-                {stop.buttonText || "done that"}
-              </AccentButton>
-            </div>
-          )}
-
-          {isEditing && editContext && isCurrent && index > 0 && totalStops < 12 && (
-            <div className="TrailStop-insertButton TrailStop-insertButton--before">
-              <AddButton
-                onClick={(e) => {
-                  e.stopPropagation();
-                  editContext.addStop(index - 1);
-                  handleGoToStop(index);
-                }}
-                title="insert stop before"
-              />
-            </div>
-          )}
-
-          {isEditing &&
-            editContext &&
-            (isCurrent ||
-              (index === totalStops - 1 && (stop.title.trim() || stop.content.trim()))) &&
-            totalStops < 12 && (
-              <div
-                className={`TrailStop-insertButton ${index === totalStops - 1 ? "TrailStop-insertButton--final" : "TrailStop-insertButton--between"}`}
-              >
-                <AddButton
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    editContext.addStop(index);
-                    handleGoToStop(index + 1);
-                  }}
-                  title="insert stop after"
-                />
-              </div>
-            )}
         </div>
       </div>
     </div>

app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.tsx

···
                       totalStops={stops.length}
                       isStepCompleted={isStepCompleted}
                       isCurrent={isCurrent}
+                      isNextCurrent={index + 1 === currentStopIndex}
                       isVisited={isVisited}
                       isClickable={isClickable}
                       isReorderActive={isReorderActive}