Add PWA reminders and flexible walk scoring

assets/css/app.css

@@ -144,6 +144,12 @@ button {
     cursor: pointer;
 }
 
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+    transform: none !important;
+}
+
 .aurora {
     position: fixed;
     inset: auto;
@@ -314,6 +320,10 @@ button {
     margin-top: 2rem;
 }
 
+.mobile-nav {
+    display: none;
+}
+
 .main-nav a {
     display: flex;
     align-items: center;
@@ -1014,6 +1024,30 @@ input[type="range"] {
     margin-top: 0.95rem;
 }
 
+.push-panel {
+    display: grid;
+    gap: 0.9rem;
+}
+
+.push-panel h5 {
+    margin: 0 0 0.35rem;
+    font-size: 1rem;
+}
+
+.push-panel [data-push-status][data-tone="success"] {
+    color: var(--good);
+}
+
+.push-panel [data-push-status][data-tone="error"] {
+    color: var(--danger);
+}
+
+.push-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.7rem;
+}
+
 .primary-button,
 .ghost-button,
 .button-link {
@@ -1239,6 +1273,14 @@ input[type="range"] {
     gap: 0.7rem;
 }
 
+.checkbox-row--panel {
+    padding: 0.95rem 1rem;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    min-height: 100%;
+}
+
 .checkbox-row input {
     width: auto;
 }
@@ -1340,6 +1382,10 @@ input[type="range"] {
 }
 
 @media (max-width: 820px) {
+    .shell {
+        grid-template-columns: 1fr;
+    }
+
     .topbar,
     .section-head,
     .form-actions {
@@ -1362,6 +1408,53 @@ input[type="range"] {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
+    .sidebar {
+        display: none;
+    }
+
+    .mobile-nav {
+        position: fixed;
+        left: 0.8rem;
+        right: 0.8rem;
+        bottom: max(0.8rem, env(safe-area-inset-bottom));
+        z-index: 30;
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 0.45rem;
+        padding: 0.6rem;
+        border-radius: 28px;
+    }
+
+    .mobile-nav a {
+        display: grid;
+        justify-items: center;
+        gap: 0.35rem;
+        padding: 0.7rem 0.5rem;
+        border-radius: 22px;
+        color: var(--muted);
+        transition: transform 180ms ease, background 180ms ease, color 180ms ease;
+    }
+
+    .mobile-nav a.active {
+        background: var(--nav-hover-bg);
+        color: var(--text);
+        transform: translateY(-1px);
+    }
+
+    .mobile-nav a span {
+        font-size: 0.76rem;
+        line-height: 1.1;
+    }
+
+    .mobile-nav .nav-icon {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+
+    body.is-authenticated .content {
+        padding-bottom: calc(6.8rem + env(safe-area-inset-bottom));
+    }
+
     .bar-chart {
         overflow-x: auto;
         padding-bottom: 0.4rem;
@@ -1426,4 +1519,20 @@ input[type="range"] {
     .bar-chart {
         min-height: 9.5rem;
     }
+
+    .mobile-nav {
+        left: 0.7rem;
+        right: 0.7rem;
+        bottom: max(0.7rem, env(safe-area-inset-bottom));
+        padding: 0.5rem;
+        gap: 0.3rem;
+    }
+
+    .mobile-nav a {
+        padding: 0.62rem 0.35rem;
+    }
+
+    .mobile-nav a span {
+        font-size: 0.72rem;
+    }
 }