Lay out hour nav horizontally and use real links

Matches the reference app's row layout instead of a vertical sidebar
list, and switches from buttons to anchors since hours are real
routes — plain click still SPA-navigates, modifier/middle clicks
fall through to native browser behavior (open in new tab, etc.).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/ui/styles.css

@@ -190,21 +190,17 @@ button:focus-visible {
    -------------------------------------------------------------------------- */
 
 .app-main {
-  display: grid;
-  grid-template-columns: 12rem 1fr;
+  display: flex;
+  flex-direction: column;
   gap: var(--space-3);
   max-width: 64rem;
   margin: 0 auto;
   padding: var(--space-3) var(--space-2);
 }
 
-@media (max-width: 40rem) {
-  .app-main {
-    grid-template-columns: 1fr;
-  }
-}
-
 .hour-list {
+  display: flex;
+  flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -214,15 +210,15 @@ button:focus-visible {
 .hour-item {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  text-align: left;
+  align-items: center;
+  text-align: center;
   padding: 0.6rem 0.75rem;
   border: none;
   background: none;
   border-radius: var(--radius);
   cursor: pointer;
   color: var(--color-ink);
+  text-decoration: none;
 }
 
 .hour-item:hover {