style(ui): restyle cards, buttons, and icons for consistency

- Redesign brew cards: replace pill badges with text notes, add
  full-width Brew Again button with cup icon, adjust card height
- Redesign bag cards: move Brew/Close buttons below progress bar,
  add Close button label, reduce card height
- Restyle account page buttons (Sign Out, Restore, Reset, Cancel)
  to use consistent bordered-accent pattern
- Replace thin logout icon with Font Awesome person-running SVG
- Update homepage stats labels and quick action buttons to text-sm
- Add empty state placeholders for brews, bags, and activity sections
- Enlarge logo click target, swap theme toggle icons, add font-medium
  to mobile tab selector
- Remove small-caps from scan input "or" labels

static/css/input.css

@@ -344,6 +344,7 @@ input.input-field[type="number"] {
   width: 100%;
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
+  font-weight: 500;
   text-align: left;
   cursor: pointer;
   border: none;

templates/pages/account.html

@@ -74,7 +74,7 @@
         <button
           type="button"
           data-on:click="$_showPasskeyForm = false; document.getElementById('add-passkey-error').classList.add('hidden'); document.getElementById('passkey-name').value = ''"
-          class="shrink-0 rounded-md px-3 py-2 text-sm font-medium text-text-muted transition hover:text-text"
+          class="shrink-0 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
         >
           Cancel
         </button>
@@ -175,7 +175,7 @@
           <button
             type="button"
             data-on:click="$_showTokenForm = false; $_tokenError = ''"
-            class="shrink-0 rounded-md px-3 py-2 text-sm font-medium text-text-muted transition hover:text-text"
+            class="shrink-0 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
           >
             Cancel
           </button>
@@ -239,14 +239,14 @@
       </a>
       <button
         type="button"
-        class="rounded-md border bg-surface-alt px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt hover:text-text"
+        class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
         onclick="document.getElementById('restore-file-input').click()"
       >
         Restore from Backup
       </button>
       <button
         type="button"
-        class="rounded-md border px-4 py-2 text-sm font-medium text-red-600 transition hover:bg-red-50 hover:border-red-300 dark:text-red-400 dark:hover:bg-red-950/30 dark:hover:border-red-800"
+        class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
         onclick="resetDatabase()"
       >
         Reset Database
@@ -294,7 +294,7 @@
     </div>
     <div>
       <form method="post" action="/logout">
-        <button type="submit" class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:border-accent hover:text-text">
+        <button type="submit" class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt">
           {{ icons::logout("h-4 w-4") }}
           Sign Out
         </button>

templates/pages/add.html

@@ -86,7 +86,7 @@
         >
           {{ icons::camera("h-5 w-5") }}
         </brew-photo-capture>
-        <span class="text-xs text-text-muted" style="font-variant: small-caps">or</span>
+        <span class="text-xs text-text-muted" >or</span>
         <input type="text" name="prompt" form="roaster-extract-form" class="input-field w-full" placeholder="Describe a roaster&hellip;" />
       </div>
       <div data-show="$_roasterExtracting" style="display:none" class="flex items-center gap-3 text-sm text-accent">
@@ -153,7 +153,7 @@
         >
           {{ icons::camera("h-5 w-5") }}
         </brew-photo-capture>
-        <span class="text-xs text-text-muted" style="font-variant: small-caps">or</span>
+        <span class="text-xs text-text-muted" >or</span>
         <input type="text" name="prompt" form="roast-extract-form" class="input-field w-full" placeholder="Describe a coffee bag&hellip;" />
       </div>
       <div data-show="$_roastExtracting" style="display:none" class="flex items-center gap-3 text-sm text-accent">

templates/pages/home.html

@@ -60,7 +60,7 @@ is_authenticated %}
         aria-label="Scan Bag"
       >
         {{ icons::camera("h-5 w-5") }}
-        <span class="text-xs font-bold" style="font-variant: small-caps">Scan</span>
+        <span class="text-sm font-medium">Scan</span>
       </brew-photo-capture>
       <a href="/check-in"
         class="inline-flex flex-col items-center justify-center gap-1.5 rounded-md border px-4 py-3 text-accent transition hover:bg-surface-alt"
@@ -68,7 +68,7 @@ is_authenticated %}
         aria-label="Check in at a cafe"
       >
         {{ icons::location("h-5 w-5") }}
-        <span class="text-xs font-bold" style="font-variant: small-caps">Check In</span>
+        <span class="text-sm font-medium">Check In</span>
       </a>
       <a href="/add"
         class="inline-flex flex-col items-center justify-center gap-1.5 rounded-md border px-4 py-3 text-accent transition hover:bg-surface-alt"
@@ -76,7 +76,7 @@ is_authenticated %}
         aria-label="Add manually"
       >
         {{ icons::plus("h-5 w-5") }}
-        <span class="text-xs font-bold" style="font-variant: small-caps">Add</span>
+        <span class="text-sm font-medium">Add</span>
       </a>
     </div>
     <div data-show="$_extracting" style="display:none" class="flex items-center justify-center gap-3 text-sm text-accent">
@@ -100,7 +100,6 @@ is_authenticated %}
 {% endif %}
 
 <!-- Recent Brews -->
-{% if !recent_brews.is_empty() %}
 <section data-signals:_brewing="false">
   <div class="flex items-center justify-between mb-3">
     <h2 class="text-lg font-semibold text-text">Recent Brews</h2>
@@ -108,14 +107,18 @@ is_authenticated %}
       >View all brews &rarr;</a
     >
   </div>
+  {% if !recent_brews.is_empty() %}
   <div class="flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-hide">
     {% for brew in recent_brews %} {{ brew_card::card(brew, is_authenticated) }} {% endfor %}
   </div>
-</section>
+  {% else %}
+  <div class="flex h-[280px] items-center justify-center rounded-lg border border-dashed text-sm text-text-muted">
+    No brews yet.
+  </div>
   {% endif %}
+</section>
 
 <!-- Open Bags -->
-{% if !open_bags.is_empty() %}
 <section id="open-bags-section">
   <div class="flex items-center justify-between mb-3">
     <h2 class="text-lg font-semibold text-text">Open Bags</h2>
@@ -123,17 +126,21 @@ is_authenticated %}
       >View all bags &rarr;</a
     >
   </div>
+  {% if !open_bags.is_empty() %}
   <div
     id="open-bags-grid"
     class="flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-hide"
   >
     {% for bag in open_bags %} {{ bag_card::card(bag, is_authenticated) }} {% endfor %}
   </div>
-</section>
+  {% else %}
+  <div class="flex h-[222px] items-center justify-center rounded-lg border border-dashed text-sm text-text-muted">
+    No open bags.
+  </div>
   {% endif %}
+</section>
 
 <!-- Recent Activity -->
-{% if !recent_events.is_empty() %}
 <section>
   <div class="flex items-center justify-between mb-3">
     <h2 class="text-lg font-semibold text-text">Recent Activity</h2>
@@ -141,6 +148,7 @@ is_authenticated %}
       >View full timeline &rarr;</a
     >
   </div>
+  {% if !recent_events.is_empty() %}
   <div class="space-y-2">
     {% for event in recent_events %}
     <div class="rounded-lg border bg-surface px-4 py-3 flex items-center justify-between gap-3">
@@ -161,8 +169,12 @@ is_authenticated %}
     </div>
     {% endfor %}
   </div>
-</section>
+  {% else %}
+  <div class="flex h-[180px] items-center justify-center rounded-lg border border-dashed text-sm text-text-muted">
+    No activity yet.
+  </div>
   {% endif %}
+</section>
 
 <!-- Stats -->
 <section>
@@ -172,59 +184,59 @@ is_authenticated %}
   <div class="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-7">
     <a
       href="/data?type=brews"
-      class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
+      class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
     >
       {{ icons::beaker("h-6 w-6 text-accent") }}
-      <span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.brews }}</span>
+      <span class="text-lg font-bold text-text">{{ stats.brews }}</span>
-      <span class="text-xs text-text-muted" style="font-variant: small-caps">Brews</span>
+      <span class="text-sm font-medium text-accent">Brews</span>
     </a>
     <a
       href="/data?type=roasts"
-      class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
+      class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
     >
       {{ icons::fire("h-6 w-6 text-accent") }}
-      <span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.roasts }}</span>
+      <span class="text-lg font-bold text-text">{{ stats.roasts }}</span>
-      <span class="text-xs text-text-muted" style="font-variant: small-caps">Roasts</span>
+      <span class="text-sm font-medium text-accent">Roasts</span>
     </a>
     <a
       href="/data?type=roasters"
-      class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
+      class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
     >
       {{ icons::building("h-6 w-6 text-accent") }}
-      <span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.roasters }}</span>
+      <span class="text-lg font-bold text-text">{{ stats.roasters }}</span>
-      <span class="text-xs text-text-muted" style="font-variant: small-caps">Roasters</span>
+      <span class="text-sm font-medium text-accent">Roasters</span>
     </a>
     <a
       href="/data?type=bags"
-      class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
+      class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
     >
       {{ icons::bag("h-6 w-6 text-accent") }}
-      <span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.bags }}</span>
+      <span class="text-lg font-bold text-text">{{ stats.bags }}</span>
-      <span class="text-xs text-text-muted" style="font-variant: small-caps">Bags</span>
+      <span class="text-sm font-medium text-accent">Bags</span>
     </a>
     <a
       href="/data?type=cups"
-      class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
+      class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
     >
       {{ icons::cup("h-6 w-6 text-accent") }}
-      <span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.cups }}</span>
+      <span class="text-lg font-bold text-text">{{ stats.cups }}</span>
-      <span class="text-xs text-text-muted" style="font-variant: small-caps">Cups</span>
+      <span class="text-sm font-medium text-accent">Cups</span>
     </a>
     <a
       href="/data?type=cafes"
-      class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
+      class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
     >
       {{ icons::location("h-6 w-6 text-accent") }}
-      <span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.cafes }}</span>
+      <span class="text-lg font-bold text-text">{{ stats.cafes }}</span>
-      <span class="text-xs text-text-muted" style="font-variant: small-caps">Cafes</span>
+      <span class="text-sm font-medium text-accent">Cafes</span>
     </a>
     <a
       href="/data?type=gear"
-      class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
+      class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
     >
       {{ icons::wrench("h-6 w-6 text-accent") }}
-      <span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.gear }}</span>
+      <span class="text-lg font-bold text-text">{{ stats.gear }}</span>
-      <span class="text-xs text-text-muted" style="font-variant: small-caps">Gear</span>
+      <span class="text-sm font-medium text-accent">Gear</span>
     </a>
   </div>
 </section>

templates/pages/login.html

@@ -21,8 +21,7 @@
       <button
         id="login-button"
         type="button"
-        class="w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
+        class="w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"      >
-      >
         Sign in with Passkey
       </button>
 

templates/pages/register.html

@@ -44,8 +44,7 @@
       <button
         id="register-button"
         type="button"
-        class="mt-2 w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
+        class="mt-2 w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"      >
-      >
         Register Passkey
       </button>
 
@@ -61,8 +60,7 @@
       </div>
       <a
         href="/"
-        class="mt-4 block w-full rounded-md bg-accent px-4 py-3 text-center text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
+        class="mt-4 block w-full rounded-md bg-accent px-4 py-3 text-center text-sm font-semibold text-accent-text transition hover:bg-accent-hover"      >
-      >
         Go to Brewlog
       </a>
     </div>

templates/partials/bag_card.html

@@ -1,36 +1,35 @@
 {% import "partials/icons.html" as icons %}
 {% macro card(bag, is_authenticated) %}
-<div id="bag-card-{{ bag.id }}" class="relative w-[45vw] md:w-[200px] h-[222px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
+<div id="bag-card-{{ bag.id }}" class="relative w-[45vw] md:w-[200px] h-[200px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
-  {% if is_authenticated %}
+  <div class="flex-1">
-  <button
-    type="button"
-    class="absolute top-4 right-3 inline-flex h-6 w-6 items-center justify-center rounded-md text-text-muted transition hover:text-red-600 hover:bg-surface-alt"
-    title="Close Bag"
-    onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
-  >
-    {{ icons::x_mark("h-4.5 w-4.5") }}
-  </button>
-  {% endif %}
-  <div class="flex-1 pr-5">
     <span class="block font-semibold text-text truncate">{{ bag.roast_name }}</span>
     <p class="mt-1 text-sm text-text-muted truncate">{{ bag.roaster_name }}</p>
   </div>
-  {% if is_authenticated %}
-  <div class="mb-4 flex items-center">
-    <a href="/add?type=brew&bag_id={{ bag.id }}"
-      class="inline-flex h-8 items-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt">
-      {{ icons::cup("h-4 w-4") }}
-      Brew
-    </a>
-  </div>
-  {% endif %}
   <div class="flex flex-col items-center">
     <div class="w-full">
       <div class="h-2 rounded-full bg-surface-alt overflow-hidden">
         <div class="h-full rounded-full bg-accent" style="width: {{ bag.used_percent }}%"></div>
       </div>
-      <p class="mt-1 text-text-muted" style="font-variant: small-caps; font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</p>
+      <p class="mt-1 text-text-muted" style="font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</p>
     </div>
   </div>
+  {% if is_authenticated %}
+  <div class="mt-3 flex items-center gap-2">
+    <a href="/add?type=brew&bag_id={{ bag.id }}"
+      class="flex-1 inline-flex h-8 items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt">
+      {{ icons::cup("h-4 w-4") }}
+      Brew
+    </a>
+    <button
+      type="button"
+      class="flex-1 inline-flex h-8 items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
+      title="Close Bag"
+      onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
+    >
+      {{ icons::x_mark("h-4 w-4") }}
+      Close
+    </button>
+  </div>
+  {% endif %}
 </div>
 {% endmacro %}

templates/partials/brew_card.html

@@ -1,33 +1,25 @@
 {% import "partials/icons.html" as icons %}
 {% macro card(brew, is_authenticated) %}
-<div class="relative w-[45vw] md:w-[200px] h-[280px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
+<div class="relative w-[45vw] md:w-[200px] h-[279px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
-  {% if is_authenticated %}
+  <div class="h-[4.5rem] overflow-hidden">
-  <a
-    href="{{ brew.brew_again_url() }}"
-    class="absolute top-4 right-3 inline-flex h-6 w-6 items-center justify-center rounded-md text-text-muted transition hover:text-accent hover:bg-surface-alt"
-    title="Brew Again"
-  >
-    {{ icons::refresh("h-4.5 w-4.5") }}
-  </a>
-  {% endif %}
-  <div class="h-[4.5rem] overflow-hidden pr-5">
     <span class="block font-semibold text-text truncate">{{ brew.roast_name }}</span>
     <p class="mt-0.5 text-sm text-text-muted truncate">{{ brew.roaster_name }}</p>
   </div>
-  <div class="mt-2 flex-1 space-y-1 text-text-secondary" style="font-size: 0.8125rem">
+  <div class="mt-1 flex-1 space-y-1 text-text-secondary" style="font-size: 0.8125rem">
     <p>{{ brew.coffee_weight }} &middot; {{ brew.water_volume }}{% if let Some(bt) = brew.brew_time %} &middot; {{ bt }}{% endif %}</p>
     <p>{{ brew.grinder_model }} &middot; {{ brew.grind_setting }}</p>
     <p>{{ brew.brewer_name }}</p>
     {% if let Some(fp) = brew.filter_paper_name %}<p>{{ fp }}</p>{% endif %}
+    {% if !brew.quick_notes.is_empty() %}<p class="truncate">{{ brew.quick_notes_label }}</p>{% endif %}
+  </div>
+  {% if is_authenticated %}
+  <div class="mt-3">
+    <a href="{{ brew.brew_again_url() }}"
+      class="inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt">
+      {{ icons::cup("h-4 w-4") }}
+      Brew Again
+    </a>
   </div>
-  <div class="flex flex-wrap gap-1">
-    {% if !brew.quick_notes.is_empty() %}
-    {% for qn in brew.quick_notes %}
-    <span class="{{ qn.pill_class }}" style="font-size: 0.65rem">{{ qn.label }}</span>
-    {% endfor %}
-    {% else %}
-    <span class="pill pill-muted" style="font-size: 0.65rem">No Notes</span>
   {% endif %}
 </div>
-</div>
 {% endmacro %}

templates/partials/forms/scan_result_form.html

@@ -129,16 +129,16 @@
         <!-- Roaster matched, roast not: create roast only -->
         <button
           type="submit"
-          data-show="$_matchedRoasterId && !$_matchedRoastId" style="display:none"
+          data-show="$_matchedRoasterId && !$_matchedRoastId"
-          class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
+          class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
         >
           Save Roast
         </button>
         <!-- Both matched + open bag: create bag only -->
         <button
           type="submit"
-          data-show="$_matchedRoastId && $_openBag" style="display:none"
+          data-show="$_matchedRoastId && $_openBag"
-          class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
+          class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
         >
           Open Bag
         </button>

templates/partials/icons.html

@@ -73,9 +73,8 @@
 {% endmacro %}
 
 {% macro logout(class) %}
-<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<svg class="{{ class }}" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true">
-  <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
+  <path d="M320 48a48 48 0 1 0-96 0 48 48 0 1 0 96 0zM125.7 175.5c9.9-9.9 23.4-15.5 37.5-15.5 1.9 0 3.8.1 5.6.3L137.6 254c-9.3 28 1.7 58.8 26.8 74.5l86.2 53.9-25.4 88.8c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l28.7-100.4c5.9-20.6-2.6-42.6-20.7-53.9L238 299l30.9-82.4 5.1 12.3C289 264.7 323.9 288 362.7 288h21.3c17.7 0 32-14.3 32-32s-14.3-32-32-32h-21.3c-12.9 0-24.6-7.8-29.5-19.7l-6.3-15c-14.6-35.1-44.1-61.9-80.5-73.1l-48.7-15c-11.1-3.4-22.7-5.2-34.4-5.2-31 0-60.8 12.3-82.7 34.3L57.4 153.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l23.1-23.1zM91.2 352H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h69.6c19 0 36.2-11.2 43.9-28.5L157 361.6l-9.5-6c-17.5-10.9-30.5-26.8-37.9-44.9L91.2 352z"/>
-  <path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" clip-rule="evenodd" />
 </svg>
 {% endmacro %}
 

templates/partials/nav.html

@@ -1,7 +1,7 @@
 {% import "partials/icons.html" as icons %}
 <nav class="border-b pb-4 text-sm">
     <div class="flex items-center justify-between">
-        <div class="font-semibold uppercase tracking-[0.25em] text-accent"><a href="/">B{rew}log</a></div>
+        <div class="font-semibold uppercase tracking-[0.25em] text-accent"><a href="/" class="-m-2 inline-block p-2">B{rew}log</a></div>
         <div class="flex items-center gap-1">
             {% if is_authenticated %}
             <a class="rounded-md p-1.5 text-text-muted transition hover:text-text-secondary" href="/add" title="Add" aria-label="Add">
@@ -9,8 +9,8 @@
             </a>
             {% endif %}
             <button type="button" class="rounded-md p-1.5 text-text-muted transition hover:text-text-secondary" title="Toggle theme" aria-label="Toggle theme" onclick="toggleTheme()">
-                <span class="theme-icon-light">{{ icons::sun("h-5 w-5") }}</span>
+                <span class="theme-icon-light">{{ icons::moon("h-5 w-5") }}</span>
-                <span class="theme-icon-dark hidden">{{ icons::moon("h-5 w-5") }}</span>
+                <span class="theme-icon-dark hidden">{{ icons::sun("h-5 w-5") }}</span>
             </button>
             {% if is_authenticated %}
             <a class="rounded-md p-1.5 transition {% if nav_active == "account" %}text-accent{% else %}text-text-muted hover:text-text-secondary{% endif %}" href="/account" title="Account" aria-label="Account">

templates/partials/scan_input.html

@@ -9,7 +9,7 @@
   >
     {{ icons::camera("h-5 w-5") }}
   </brew-photo-capture>
-  <span class="text-xs text-text-muted" style="font-variant: small-caps">or</span>
+  <span class="text-xs text-text-muted">or</span>
   <input
     type="text"
     name="prompt"

templates/partials/tab_bar.html

@@ -17,7 +17,7 @@
   <div class="md:hidden">
     <button
       type="button"
-      class="flex w-full items-center justify-between rounded-md border border-accent p-3 text-sm text-accent"
+      class="flex w-full items-center justify-between rounded-md border border-accent p-3 text-sm font-medium text-accent"
       data-on:click="$_tabsOpen = !$_tabsOpen"
     >
       <span>