UI: right-align nav, service tabs → chips, liturgical order

src/ui/app.ts

@@ -106,7 +106,7 @@ export class App {
     const t = getTranslations(this.settings.language as LanguageCode);
     this.container.innerHTML = `
       <div class="app-container min-h-screen flex flex-col">
-        <header class="bg-navy text-parchment p-3 flex items-center justify-between shadow-md">
+        <header class="bg-navy text-parchment p-3 flex items-center justify-end shadow-md">
           <nav class="flex flex-wrap gap-4 text-sm">
             <a href="#calendar" class="nav-link hover:text-gold transition-colors" data-view="calendar">${t.nav.calendar}</a>
             <details class="nav-group relative" data-nav="library">

src/ui/service-view.ts

@@ -90,14 +90,13 @@ export class ServiceView {
 
     const tabHtml = `
       <h3 class="font-bold text-red mb-3">${this.t.services.title}</h3>
-      <div class="flex flex-wrap gap-1 mb-6 border-b border-gold/20">
+      <div class="flex flex-wrap gap-2 mb-6">
         ${availableServices.map(s => `
-          ${s.divider ? '<span class="self-center mx-1 text-gold/40 select-none" aria-hidden="true">·</span>' : ''}
           <button
-            class="service-tab px-4 py-2 text-sm border-b-2 transition-colors whitespace-nowrap
+            class="service-tab text-sm transition-colors
               ${this.activeService === s.id
-                ? 'border-gold text-navy font-bold'
+                ? 'bg-navy text-parchment font-medium rounded-full px-3 py-1'
-                : 'border-transparent text-navy-light hover:text-navy hover:border-gold/50'}"
+                : 'text-navy-light hover:bg-navy/10 rounded-full px-3 py-1'}"
             data-service="${s.id}"
           >${s.name}</button>
         `).join('')}
@@ -133,9 +132,9 @@ export class ServiceView {
           this.container.querySelectorAll('.service-tab').forEach(t => {
             const id = t.getAttribute('data-service');
             if (id === serviceId) {
-              t.className = 'service-tab px-4 py-2 text-sm border-b-2 transition-colors whitespace-nowrap border-gold text-navy font-bold';
+              t.className = 'service-tab text-sm transition-colors bg-navy text-parchment font-medium rounded-full px-3 py-1';
             } else {
-              t.className = 'service-tab px-4 py-2 text-sm border-b-2 transition-colors whitespace-nowrap border-transparent text-navy-light hover:text-navy';
+              t.className = 'service-tab text-sm transition-colors text-navy-light hover:bg-navy/10 rounded-full px-3 py-1';
             }
           });
           this.loadService(service);
@@ -181,6 +180,27 @@ export class ServiceView {
       });
     }
 
+    daily.push({
+      id: 'vespers', name: this.t.services.serviceNames.vespers, serviceType: 'VESPERS',
+      template: 'Vespers',
+      description: this.t.services.serviceDescriptions.vespers,
+      titleNode: title('Vespers1', this.t.services.serviceNames.vespers, 'VesperSource'),
+    });
+
+    daily.push({
+      id: 'ninth', name: this.t.services.serviceNames.ninth, serviceType: 'NONE',
+      template: 'NinthHour',
+      description: this.t.services.serviceDescriptions.ninth,
+      titleNode: title('Ninth1', this.t.services.serviceNames.ninth),
+    });
+
+    daily.push({
+      id: 'matins', name: this.t.services.serviceNames.matins, serviceType: 'MATINS',
+      template: 'Matins',
+      description: this.t.services.serviceDescriptions.matins,
+      titleNode: title('Matins1', this.t.services.serviceNames.matins, 'MatinsSource'),
+    });
+
     daily.push({
       id: 'primes', name: this.t.services.serviceNames.primes, serviceType: 'PRIMES',
       template: 'Prime',
@@ -202,27 +222,6 @@ export class ServiceView {
       titleNode: title('Sixth1', this.t.services.serviceNames.sixth),
     });
 
-    daily.push({
-      id: 'ninth', name: this.t.services.serviceNames.ninth, serviceType: 'NONE',
-      template: 'NinthHour',
-      description: this.t.services.serviceDescriptions.ninth,
-      titleNode: title('Ninth1', this.t.services.serviceNames.ninth),
-    });
-
-    daily.push({
-      id: 'vespers', name: this.t.services.serviceNames.vespers, serviceType: 'VESPERS',
-      template: 'Vespers',
-      description: this.t.services.serviceDescriptions.vespers,
-      titleNode: title('Vespers1', this.t.services.serviceNames.vespers, 'VesperSource'),
-    });
-
-    daily.push({
-      id: 'matins', name: this.t.services.serviceNames.matins, serviceType: 'MATINS',
-      template: 'Matins',
-      description: this.t.services.serviceDescriptions.matins,
-      titleNode: title('Matins1', this.t.services.serviceNames.matins, 'MatinsSource'),
-    });
-
     daily.push({
       id: 'liturgy', name: this.t.services.serviceNames.liturgy, serviceType: 'LITURGY',
       template: 'DivineLiturgy',