fix(ui): improve mobile card layout for list views

Right-align values in mobile card cells while keeping labels left-aligned.
Move tasting notes to a label-free strip at the bottom of roast cards.

static/css/input.css

@@ -584,6 +584,7 @@ input.input-field[type="number"] {
     padding: 0.25rem 0;
     white-space: normal;
     font-size: 0.875rem;
+    text-align: end;
     border: none !important;
   }
 
@@ -595,6 +596,7 @@ input.input-field[type="number"] {
     font-weight: 500;
     color: var(--text-secondary);
     margin-right: 0.75rem;
+    text-align: start;
   }
 
   .responsive-table td[data-label=""]::before {
@@ -643,6 +645,19 @@ input.input-field[type="number"] {
     margin-right: 0.5rem;
   }
 
+  /* Tasting notes: bottom strip, no label, left-aligned pills */
+  .responsive-table td.card-notes {
+    order: 98;
+    display: flex;
+    justify-content: flex-start;
+    text-align: start;
+    padding-top: 0.5rem !important;
+  }
+
+  .responsive-table td.card-notes::before {
+    display: none;
+  }
+
   /* Actions: absolute top-right in header area */
   .responsive-table td.card-actions {
     order: -1;

templates/partials/lists/roast_list.html

@@ -94,11 +94,9 @@
                     {{ roast.producer }}
                   </td>
                 {% endif %}
-                <td data-label="Tasting Notes" class="px-4 py-3">
+                <td data-label="Tasting Notes" class="card-notes px-4 py-3">
                   {% if !roast.tasting_notes.is_empty() %}
-                    <div
-                      class="flex flex-wrap gap-1 md:justify-start justify-end"
-                    >
+                    <div class="flex flex-wrap gap-1">
                       {% for note in roast.tasting_notes %}
                         <span class="{{ note.pill_class }}"
                           >{{ note.label }}</span