From 759083ea7d087d77c9e2b4700474feb7b03ed537 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Tue, 17 Feb 2026 17:15:07 -0600
Subject: [PATCH] Made font size match device preference

---
 src/components/FilterBar.tsx  | 22 +++++++--------
 src/components/ImportTool.tsx | 30 ++++++++++-----------
 src/components/Navigation.tsx | 12 ++++-----
 src/components/QuickEntry.tsx | 14 +++++-----
 src/components/SlashMenu.tsx  |  2 +-
 src/components/TagPicker.tsx  |  4 +--
 src/components/TaskCard.tsx   | 10 +++----
 src/components/TaskDetail.tsx | 22 +++++++--------
 src/views/MatrixView.tsx      | 22 +++++++--------
 src/views/SettingsView.tsx    | 50 +++++++++++++++++------------------
 10 files changed, 94 insertions(+), 94 deletions(-)

diff --git a/src/components/FilterBar.tsx b/src/components/FilterBar.tsx
index 85e88f5..013cd7e 100644
--- a/src/components/FilterBar.tsx
+++ b/src/components/FilterBar.tsx
@@ -55,7 +55,7 @@ export const FilterBar: Component = () => {
                             <button
                                 onClick={() => setFilter({ editedToday: !store.filter.editedToday })}
                                 class={cn(
-                                    "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9px] font-black uppercase tracking-tight transition-all border",
+                                    "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[0.5625rem] font-black uppercase tracking-tight transition-all border",
                                     store.filter.editedToday
                                         ? "bg-primary/10 text-primary border-primary/20"
                                         : "bg-muted/50 text-muted-foreground border-transparent hover:bg-muted"
@@ -70,7 +70,7 @@ export const FilterBar: Component = () => {
                                 <Button
                                     variant="ghost"
                                     size="sm"
-                                    class="h-7 px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground hover:text-destructive"
+                                    class="h-7 px-2 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground hover:text-destructive"
                                     onClick={clearFilter}
                                 >
                                     Clear
@@ -109,7 +109,7 @@ export const FilterBar: Component = () => {
                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                             {/* Priority Range */}
                             <div class="space-y-2.5">
-                                <label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Priority Range</label>
+                                <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Priority Range</label>
                                 <div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
                                     <Select
                                         value={store.filter.priorityMin.toString()}
@@ -144,7 +144,7 @@ export const FilterBar: Component = () => {
 
                             {/* Urgency Range */}
                             <div class="space-y-2.5">
-                                <label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Urgency Range</label>
+                                <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Urgency Range</label>
                                 <div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
                                     <Select
                                         value={store.filter.urgencyMin.toString()}
@@ -180,9 +180,9 @@ export const FilterBar: Component = () => {
 
                         {/* Tags Multi-select */}
                         <div class="space-y-2.5">
-                            <label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1 flex items-center justify-between">
+                            <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1 flex items-center justify-between">
                                 Filter by Tags
-                                <span class="text-[9px] lowercase font-medium opacity-50 tracking-normal text-right">
+                                <span class="text-[0.5625rem] lowercase font-medium opacity-50 tracking-normal text-right">
                                     Click tag name to toggle exclude<br />
                                     Click X to remove
                                 </span>
@@ -245,7 +245,7 @@ export const FilterBar: Component = () => {
                                     placeholder="Add tag..."
                                     itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
                                 >
-                                    <SelectTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
+                                    <SelectTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
                                         <span>+ Tag</span>
                                     </SelectTrigger>
                                     <SelectContent />
@@ -257,14 +257,14 @@ export const FilterBar: Component = () => {
                     {/* Filter Templates Section */}
                     <div class="px-4 pb-4 pt-4 border-t border-border/50 space-y-4 bg-muted/5">
                         <div class="flex items-center justify-between ml-1">
-                            <label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                            <label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
                                 <Bookmark size={12} class="text-primary" />
                                 Saved Filters
                             </label>
                             <Show when={!isSaving() && hasActiveFilters()}>
                                 <button
                                     onClick={() => setIsSaving(true)}
-                                    class="text-[9px] font-bold uppercase tracking-wider text-primary hover:underline flex items-center gap-1"
+                                    class="text-[0.5625rem] font-bold uppercase tracking-wider text-primary hover:underline flex items-center gap-1"
                                 >
                                     <Save size={10} />
                                     Save Current
@@ -318,7 +318,7 @@ export const FilterBar: Component = () => {
                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                             <For each={store.filterTemplates} fallback={
                                 <div class="col-span-2 py-4 text-center border border-dashed border-border/40 rounded-xl bg-muted/5">
-                                    <p class="text-[10px] text-muted-foreground uppercase tracking-widest">No saved filters yet</p>
+                                    <p class="text-[0.625rem] text-muted-foreground uppercase tracking-widest">No saved filters yet</p>
                                 </div>
                             }>
                                 {(template) => (
@@ -328,7 +328,7 @@ export const FilterBar: Component = () => {
                                             onClick={() => applyFilterTemplate(template.id)}
                                         >
                                             <div class="flex items-center gap-2">
-                                                <p class="text-[11px] font-bold text-foreground truncate">{template.name}</p>
+                                                <p class="text-[0.6875rem] font-bold text-foreground truncate">{template.name}</p>
                                                 <div class="flex gap-1 opacity-60 shrink-0">
                                                     <Show when={template.filter.query}>
                                                         <div class="w-1 h-1 rounded-full bg-primary" />
diff --git a/src/components/ImportTool.tsx b/src/components/ImportTool.tsx
index 4d5c986..dd8a620 100644
--- a/src/components/ImportTool.tsx
+++ b/src/components/ImportTool.tsx
@@ -137,7 +137,7 @@ export const ImportTool: Component = () => {
             <Show when={step() === "paste"}>
                 <div class="space-y-3 animate-in fade-in duration-300">
                     <div class="space-y-1.5">
-                        <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
+                        <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
                             Paste your task list
                         </label>
                         <textarea
@@ -154,7 +154,7 @@ export const ImportTool: Component = () => {
                         </p>
                         <Button
                             size="sm"
-                            class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[10px] h-9 px-4"
+                            class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem] h-9 px-4"
                             disabled={!rawText().trim()}
                             onClick={parseText}
                         >
@@ -170,13 +170,13 @@ export const ImportTool: Component = () => {
                     {/* Bulk defaults */}
                     <div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
                         <div class="flex items-center justify-between">
-                            <p class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                            <p class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">
                                 Bulk Defaults
                             </p>
                             <Button
                                 variant="ghost"
                                 size="sm"
-                                class="h-7 text-[10px] font-bold uppercase tracking-wider rounded-lg"
+                                class="h-7 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg"
                                 onClick={applyBulkDefaults}
                             >
                                 Apply to All
@@ -185,7 +185,7 @@ export const ImportTool: Component = () => {
 
                         <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                             <div class="space-y-1">
-                                <label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Priority</label>
+                                <label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Priority</label>
                                 <select
                                     value={bulkPriority()}
                                     onChange={(e) => setBulkPriority(e.currentTarget.value)}
@@ -197,7 +197,7 @@ export const ImportTool: Component = () => {
                                 </select>
                             </div>
                             <div class="space-y-1">
-                                <label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Urgency</label>
+                                <label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Urgency</label>
                                 <select
                                     value={bulkUrgency()}
                                     onChange={(e) => setBulkUrgency(e.currentTarget.value)}
@@ -209,7 +209,7 @@ export const ImportTool: Component = () => {
                                 </select>
                             </div>
                             <div class="space-y-1">
-                                <label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Size</label>
+                                <label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Size</label>
                                 <select
                                     value={bulkSize()}
                                     onChange={(e) => setBulkSize(e.currentTarget.value)}
@@ -221,14 +221,14 @@ export const ImportTool: Component = () => {
                                 </select>
                             </div>
                             <div class="space-y-1">
-                                <label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Tags</label>
+                                <label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Tags</label>
                                 <div class="flex items-center gap-1 flex-wrap">
                                     <TagPicker selectedTags={bulkTags()} onTagsChange={setBulkTags} />
                                     <For each={bulkTags()}>
                                         {(tag) => (
                                             <Badge
                                                 variant="secondary"
-                                                class="h-6 px-1.5 text-[10px] gap-1 cursor-pointer hover:bg-destructive/10"
+                                                class="h-6 px-1.5 text-[0.625rem] gap-1 cursor-pointer hover:bg-destructive/10"
                                                 onClick={() => setBulkTags(bulkTags().filter(t => t !== tag))}
                                             >
                                                 {tag}
@@ -250,7 +250,7 @@ export const ImportTool: Component = () => {
                             <Button
                                 variant="ghost"
                                 size="sm"
-                                class="h-7 text-[10px] font-bold uppercase tracking-wider rounded-lg text-muted-foreground"
+                                class="h-7 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg text-muted-foreground"
                                 onClick={reset}
                             >
                                 ← Back
@@ -284,7 +284,7 @@ export const ImportTool: Component = () => {
                                             <select
                                                 value={task.priority}
                                                 onChange={(e) => updateTask(task.id, "priority", e.currentTarget.value)}
-                                                class="h-7 rounded-lg border border-input bg-background px-1.5 text-[11px] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
+                                                class="h-7 rounded-lg border border-input bg-background px-1.5 text-[0.6875rem] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
                                                 title="Priority"
                                             >
                                                 <For each={PRIORITY_OPTIONS}>
@@ -295,7 +295,7 @@ export const ImportTool: Component = () => {
                                             <select
                                                 value={task.urgency}
                                                 onChange={(e) => updateTask(task.id, "urgency", e.currentTarget.value)}
-                                                class="h-7 rounded-lg border border-input bg-background px-1.5 text-[11px] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
+                                                class="h-7 rounded-lg border border-input bg-background px-1.5 text-[0.6875rem] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
                                                 title="Urgency"
                                             >
                                                 <For each={URGENCY_OPTIONS}>
@@ -306,7 +306,7 @@ export const ImportTool: Component = () => {
                                             <select
                                                 value={task.size}
                                                 onChange={(e) => updateTask(task.id, "size", e.currentTarget.value)}
-                                                class="h-7 rounded-lg border border-input bg-background px-1.5 text-[11px] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
+                                                class="h-7 rounded-lg border border-input bg-background px-1.5 text-[0.6875rem] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
                                                 title="Size"
                                             >
                                                 <For each={SIZE_OPTIONS}>
@@ -323,7 +323,7 @@ export const ImportTool: Component = () => {
                                                     {(tag) => (
                                                         <Badge
                                                             variant="secondary"
-                                                            class="h-6 px-1.5 text-[10px] gap-0.5 cursor-pointer hover:bg-destructive/10"
+                                                            class="h-6 px-1.5 text-[0.625rem] gap-0.5 cursor-pointer hover:bg-destructive/10"
                                                             onClick={() => updateTask(task.id, "tags", task.tags.filter(t => t !== tag))}
                                                         >
                                                             {tag}
@@ -352,7 +352,7 @@ export const ImportTool: Component = () => {
                         </Show>
                         <Button
                             size="sm"
-                            class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[10px] h-9 px-5"
+                            class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem] h-9 px-5"
                             disabled={tasks().length === 0 || importing()}
                             onClick={handleImport}
                         >
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 9b44a92..a401302 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -68,7 +68,7 @@ export const BottomNav: Component<{ currentView: string; setView: (v: string) =>
                             )}
                         >
                             <group.icon size={20} />
-                            <span class="text-[10px] font-medium uppercase tracking-wider">{group.label}</span>
+                            <span class="text-[0.625rem] font-medium uppercase tracking-wider">{group.label}</span>
                         </button>
                     }>
                         <Popover>
@@ -82,7 +82,7 @@ export const BottomNav: Component<{ currentView: string; setView: (v: string) =>
                                     <group.icon size={20} />
                                     <ChevronDown size={10} class="absolute -right-2 -bottom-0.5 opacity-60" />
                                 </div>
-                                <span class="text-[10px] font-medium uppercase tracking-wider">{group.label}</span>
+                                <span class="text-[0.625rem] font-medium uppercase tracking-wider">{group.label}</span>
                             </PopoverTrigger>
                             <PopoverContent class="w-40 p-1 bg-card border-border shadow-xl mb-2">
                                 <div class="space-y-0.5">
@@ -233,9 +233,9 @@ export const ContextSwitcher: Component<{
                             <div class="py-1">
                                 <div class="h-px bg-border/50" />
                             </div>
-                            <div class="px-2 py-1 text-[10px] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
+                            <div class="px-2 py-1 text-[0.625rem] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
                                 <span>Buckets</span>
-                                <span class="ml-auto bg-muted px-1.5 rounded text-[9px]">{store.subscribedBuckets.length}</span>
+                                <span class="ml-auto bg-muted px-1.5 rounded text-[0.5625rem]">{store.subscribedBuckets.length}</span>
                             </div>
                             <For each={store.buckets.filter(b => store.subscribedBuckets.includes(b.id))}>
                                 {(bucket) => (
@@ -262,9 +262,9 @@ export const ContextSwitcher: Component<{
                             <div class="py-1">
                                 <div class="h-px bg-border/50" />
                             </div>
-                            <div class="px-2 py-1 text-[10px] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
+                            <div class="px-2 py-1 text-[0.625rem] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
                                 <span>Oversight</span>
-                                <span class="ml-auto bg-muted px-1.5 rounded text-[9px]">{oversightUsers()?.length}</span>
+                                <span class="ml-auto bg-muted px-1.5 rounded text-[0.5625rem]">{oversightUsers()?.length}</span>
                             </div>
                             <For each={oversightUsers()}>
                                 {(user) => (
diff --git a/src/components/QuickEntry.tsx b/src/components/QuickEntry.tsx
index d29934d..991fdca 100644
--- a/src/components/QuickEntry.tsx
+++ b/src/components/QuickEntry.tsx
@@ -290,7 +290,7 @@ export const QuickEntry: Component = () => {
                             {/* Row 1: Priority, Size, Urgency */}
                             <div class="flex flex-col md:flex-row flex-wrap items-stretch md:items-center p-4 gap-4 border-b border-border bg-muted/10">
                                 <div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
-                                    <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
+                                    <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
                                         Priority <span class="text-destructive">*</span>
                                     </label>
                                     <Select<any>
@@ -322,7 +322,7 @@ export const QuickEntry: Component = () => {
                                 </div>
 
                                 <div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
-                                    <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Size</label>
+                                    <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Size</label>
                                     <Select<any>
                                         value={size()}
                                         onChange={(val) => {
@@ -352,7 +352,7 @@ export const QuickEntry: Component = () => {
                                 </div>
 
                                 <div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
-                                    <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
+                                    <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
                                         Urgency <span class="text-destructive">*</span>
                                     </label>
                                     <Select<any>
@@ -421,7 +421,7 @@ export const QuickEntry: Component = () => {
                                 </div>
 
                                 <div class="w-full md:w-auto md:min-w-[200px] space-y-1.5">
-                                    <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Due Date</label>
+                                    <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Due Date</label>
                                     <div class="relative">
                                         <input
                                             type="datetime-local"
@@ -453,7 +453,7 @@ export const QuickEntry: Component = () => {
                         </div>
 
                         <div class="p-4 bg-muted/30 flex justify-between items-center shrink-0 border-t border-border">
-                            <div class="flex items-center space-x-2 text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
+                            <div class="flex items-center space-x-2 text-[0.625rem] font-bold text-muted-foreground uppercase tracking-widest">
                                 <Command size={10} />
                                 <span class="hidden sm:inline">K to focus • Enter to Add</span>
                                 <span class="sm:hidden">Enter to Add</span>
@@ -469,7 +469,7 @@ export const QuickEntry: Component = () => {
                                             class="h-9 px-3 gap-2 hover:bg-primary/10 hover:text-primary text-muted-foreground transition-all rounded-xl border border-border/40"
                                         >
                                             <Copy size={14} />
-                                            <span class="text-[10px] font-bold uppercase tracking-wider hidden sm:inline">Use Template</span>
+                                            <span class="text-[0.625rem] font-bold uppercase tracking-wider hidden sm:inline">Use Template</span>
                                             <ChevronDown size={12} class="opacity-50" />
                                         </PopoverTrigger>
                                         <PopoverContent class="w-64 p-2 bg-card border-border shadow-xl">
@@ -485,7 +485,7 @@ export const QuickEntry: Component = () => {
                                                             </div>
                                                             <div class="min-w-0">
                                                                 <p class="text-sm font-bold truncate tracking-tight">{template.name}</p>
-                                                                <p class="text-[9px] uppercase font-black text-muted-foreground opacity-60 tracking-widest">
+                                                                <p class="text-[0.5625rem] uppercase font-black text-muted-foreground opacity-60 tracking-widest">
                                                                     P:{template.priority} / U:{template.urgency}
                                                                 </p>
                                                             </div>
diff --git a/src/components/SlashMenu.tsx b/src/components/SlashMenu.tsx
index d5ec17c..9a7fb39 100644
--- a/src/components/SlashMenu.tsx
+++ b/src/components/SlashMenu.tsx
@@ -150,7 +150,7 @@ export const SlashMenu: Component<{
                             </div>
                             <div class="flex flex-col min-w-0 overflow-hidden">
                                 <span class="text-sm font-medium leading-none">{item.title}</span>
-                                <span class="text-[11px] text-muted-foreground truncate mt-1">{item.description}</span>
+                                <span class="text-[0.6875rem] text-muted-foreground truncate mt-1">{item.description}</span>
                             </div>
                         </button>
                     )}
diff --git a/src/components/TagPicker.tsx b/src/components/TagPicker.tsx
index 450088a..2dedeab 100644
--- a/src/components/TagPicker.tsx
+++ b/src/components/TagPicker.tsx
@@ -63,7 +63,7 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
             </PopoverTrigger>
             <PopoverContent class="p-3 w-[min(calc(100vw-2rem),280px)] flex flex-col gap-3" align="start">
                 <div class="space-y-1.5">
-                    <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Tag Name</label>
+                    <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Tag Name</label>
                     <div class="relative">
                         <input
                             list="existing-tags"
@@ -81,7 +81,7 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
                 </div>
 
                 <div class="space-y-1.5">
-                    <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Value (Sorting Influence)</label>
+                    <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Value (Sorting Influence)</label>
                     <select
                         value={valueScore().toString()}
                         onInput={(e) => setValueScore(parseInt(e.currentTarget.value))}
diff --git a/src/components/TaskCard.tsx b/src/components/TaskCard.tsx
index fe7c6e5..b20c5f8 100644
--- a/src/components/TaskCard.tsx
+++ b/src/components/TaskCard.tsx
@@ -73,7 +73,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
                     {props.task.title}
                 </h3>
                 {props.task.content && (
-                    <div class="text-[11px] sm:text-xs text-muted-foreground/60 line-clamp-1 mt-1 leading-tight whitespace-pre">
+                    <div class="text-[0.6875rem] sm:text-xs text-muted-foreground/60 line-clamp-1 mt-1 leading-tight whitespace-pre">
                         {(() => {
                             let html = props.task.content || "";
                             // Replace block tags with newlines first to preserve structure
@@ -97,7 +97,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
                     {/* Priority */}
                     <div class="flex items-center gap-1.5 shrink-0">
                         <ArrowUpCircle size={12} class="text-primary opacity-60" />
-                        <span class="text-[10px] font-medium">P{props.task.priority}</span>
+                        <span class="text-[0.625rem] font-medium">P{props.task.priority}</span>
                     </div>
 
                     {/* Shared Indicator - shows for individual shares OR tag-based ShareRules */}
@@ -132,7 +132,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
                                 {(tag) => (
                                     <Badge
                                         variant="secondary"
-                                        class="h-4 px-1.5 text-[9px] gap-1 bg-muted/50 border-border/50 shrink-0"
+                                        class="h-4 px-1.5 text-[0.5625rem] gap-1 bg-muted/50 border-border/50 shrink-0"
                                         style={{
                                             "background-color": (() => {
                                                 const def = store.tagDefinitions.find(d => d.name === tag);
@@ -166,7 +166,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
                     {/* Due Date + Urgency Slide-out */}
                     <div class="relative group/date flex items-center h-5 cursor-help shrink-0 min-w-0">
                         {/* Due Date - Static Layer on Top */}
-                        <div class="flex items-center space-x-1 text-[9px] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
+                        <div class="flex items-center space-x-1 text-[0.5625rem] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
                             <Clock size={11} class="text-primary/60" />
                             <span class="truncate">{formattedDate()}</span>
                         </div>
@@ -176,7 +176,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
                             "absolute left-4 top-0 bottom-0 flex items-center transition-all duration-300 ease-out z-10 opacity-0 group-hover/date:opacity-100 group-hover/date:left-full whitespace-nowrap",
                             urgencyColor()
                         )}>
-                            <span class="text-[9px] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
+                            <span class="text-[0.5625rem] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
                                 Urgency {urgencyLevel()}
                             </span>
                         </div>
diff --git a/src/components/TaskDetail.tsx b/src/components/TaskDetail.tsx
index 860d24a..fbb2a29 100644
--- a/src/components/TaskDetail.tsx
+++ b/src/components/TaskDetail.tsx
@@ -181,7 +181,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
 
                         {/* Priority */}
                         <div class="flex items-center gap-1 group shrink-0">
-                            <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
+                            <span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
                             <Select<any>
                                 value={props.task.priority.toString()}
                                 onChange={(val: string | null) => val && updatePriority(val)}
@@ -205,7 +205,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
 
                         {/* Urgency */}
                         <div class="flex items-center gap-1 group shrink-0">
-                            <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Time</span>
+                            <span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Time</span>
                             <Select<any>
                                 value={currentUrgency()}
                                 onChange={(val: string | null) => val && updateUrgency(val)}
@@ -229,7 +229,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
 
                         {/* Size */}
                         <div class="flex items-center gap-1 group shrink-0">
-                            <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Size</span>
+                            <span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Size</span>
                             <Select<any>
                                 value={(props.task.size ?? 5).toString()}
                                 onChange={(val: any) => {
@@ -262,7 +262,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                             <Button
                                 variant="ghost"
                                 size="sm"
-                                class="h-8 px-1 sm:px-2 text-[10px] font-bold uppercase tracking-wider hover:bg-muted/50 flex items-center gap-1 sm:gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
+                                class="h-8 px-1 sm:px-2 text-[0.625rem] font-bold uppercase tracking-wider hover:bg-muted/50 flex items-center gap-1 sm:gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
                                 onClick={() => {
                                     const instance = editorInstance();
                                     if (instance) {
@@ -325,7 +325,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                     {/* Tags at the bottom */}
                     <div class="mt-auto pt-6 border-t border-border/50">
                         <div class="flex flex-wrap items-center gap-3">
-                            <span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
+                            <span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
                             <div class="flex flex-wrap items-center gap-1.5 min-w-0 flex-1">
                                 <TagPicker
                                     selectedTags={props.task.tags || []}
@@ -404,7 +404,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                             <PopoverContent class="w-72 p-0 overflow-hidden" align="end">
                                 <div class="flex flex-col">
                                     <div class="p-2 border-b border-border/50">
-                                        <div class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1">Recurrence</div>
+                                        <div class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1">Recurrence</div>
                                         <div class="flex flex-col gap-2 p-2 pt-0">
                                             <Select
                                                 value={props.task.recurrence?.type || "none"}
@@ -442,7 +442,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                                                         {(day, index) => (
                                                             <button
                                                                 class={cn(
-                                                                    "w-7 h-7 rounded-full text-[10px] font-bold flex items-center justify-center transition-colors shadow-sm",
+                                                                    "w-7 h-7 rounded-full text-[0.625rem] font-bold flex items-center justify-center transition-colors shadow-sm",
                                                                     props.task.recurrence?.days?.includes(index())
                                                                         ? "bg-primary text-primary-foreground"
                                                                         : "bg-muted text-muted-foreground hover:bg-muted/80"
@@ -509,7 +509,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
 
                                     {/* Sharing Section */}
                                     <div class="p-2 border-t border-border/50">
-                                        <div class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1 mb-1">Sharing</div>
+                                        <div class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1 mb-1">Sharing</div>
                                         <UserSharePicker
                                             taskId={props.task.id}
                                             sharedWith={props.task.sharedWith || []}
@@ -569,12 +569,12 @@ const MetadataItem: Component<{
                     isToggled() ? "-translate-y-4" : "translate-y-0"
                 )}>
                     {/* Layer 1: Date */}
-                    <div class="h-4 flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground/80 whitespace-nowrap">
+                    <div class="h-4 flex items-center gap-1.5 text-[0.6875rem] font-medium text-muted-foreground/80 whitespace-nowrap">
                         {props.icon}
                         {props.date}
                     </div>
                     {/* Layer 2: Time */}
-                    <div class="h-4 flex items-center gap-2 text-[11px] font-bold text-foreground whitespace-nowrap">
+                    <div class="h-4 flex items-center gap-2 text-[0.6875rem] font-bold text-foreground whitespace-nowrap">
                         <Clock size={11} class="text-primary/60 shrink-0" />
                         <span>{props.time}</span>
                     </div>
@@ -706,7 +706,7 @@ const UserSharePicker: Component<{
                                     {rule.type === 'tag' ? <Tag size={10} /> : <Settings size={10} />}
                                 </div>
                                 <div class="flex flex-col min-w-0">
-                                    <span class="text-[11px] font-medium leading-none truncate">
+                                    <span class="text-[0.6875rem] font-medium leading-none truncate">
                                         {getUserName(rule.targetUserId)}
                                     </span>
                                     <span class="text-[9px] text-muted-foreground/50 mt-0.5 uppercase tracking-tighter">
diff --git a/src/views/MatrixView.tsx b/src/views/MatrixView.tsx
index dc15d0e..5e5e34b 100644
--- a/src/views/MatrixView.tsx
+++ b/src/views/MatrixView.tsx
@@ -17,10 +17,10 @@ export const MatrixView: Component = () => {
 
             <div class="flex-1 relative border-2 border-dashed border-muted rounded-2xl md:rounded-3xl overflow-hidden bg-muted/20">
                 {/* Axis Labels */}
-                <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-1 md:gap-2 z-30 w-[calc(100%-2rem)] justify-center">
+                <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-[0.5625rem] md:text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-1 md:gap-2 z-30 w-[calc(100%-2rem)] justify-center">
                     <span class="truncate">← Soon</span>
                     <div class="flex items-center gap-1 bg-background/50 backdrop-blur-sm px-1.5 md:px-2 py-0.5 rounded-full border border-border/50 group hover:bg-background/80 transition-colors cursor-pointer shrink-0">
-                        <span class="text-[8px] md:text-[9px]">Time:</span>
+                        <span class="text-[0.5rem] md:text-[0.5625rem]">Time:</span>
                         <Select
                             value={store.matrixScaleDays.toString()}
                             onChange={(val) => val && setStore("matrixScaleDays", parseInt(val))}
@@ -32,7 +32,7 @@ export const MatrixView: Component = () => {
                                 </SelectItem>
                             )}
                         >
-                            <SelectTrigger class="h-auto p-0 min-w-[40px] md:min-w-[50px] bg-transparent border-none shadow-none focus:ring-0 text-[8px] md:text-[10px] font-black text-foreground">
+                            <SelectTrigger class="h-auto p-0 min-w-[40px] md:min-w-[50px] bg-transparent border-none shadow-none focus:ring-0 text-[0.5rem] md:text-[0.625rem] font-black text-foreground">
                                 <span>{store.matrixScaleDays} {store.matrixScaleDays === 1 ? 'day' : 'days'}</span>
                             </SelectTrigger>
                             <SelectContent class="z-[150]" />
@@ -40,7 +40,7 @@ export const MatrixView: Component = () => {
                     </div>
                     <span class="truncate">Later →</span>
                 </div>
-                <div class="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 -rotate-90 text-[8px] md:text-[10px] font-bold uppercase tracking-widest text-muted-foreground/30 pointer-events-none">
+                <div class="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 -rotate-90 text-[0.5rem] md:text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground/30 pointer-events-none">
                     ← Low (Priority) High →
                 </div>
 
@@ -55,10 +55,10 @@ export const MatrixView: Component = () => {
                 </div>
 
                 {/* Quadrant Labels */}
-                <div class="absolute top-4 left-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">DO FIRST</div>
-                <div class="absolute top-4 right-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">SCHEDULE</div>
-                <div class="absolute bottom-4 left-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">DELEGATE</div>
-                <div class="absolute bottom-4 right-4 text-[10px] font-bold text-muted-foreground/30 pointer-events-none">ELIMINATE</div>
+                <div class="absolute top-4 left-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">DO FIRST</div>
+                <div class="absolute top-4 right-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">SCHEDULE</div>
+                <div class="absolute bottom-4 left-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">DELEGATE</div>
+                <div class="absolute bottom-4 right-4 text-[0.625rem] font-bold text-muted-foreground/30 pointer-events-none">ELIMINATE</div>
 
                 {/* Task Pips */}
                 <For each={activeTasks()}>
@@ -122,9 +122,9 @@ export const MatrixView: Component = () => {
                                     <div class="bg-popover text-popover-foreground border border-border rounded-xl p-3 shadow-2xl scale-95 group-hover:scale-100 transition-transform">
                                         <p class="text-xs font-bold leading-tight">{task.title}</p>
                                         <div class="flex items-center justify-between mt-2 pt-2 border-t border-border">
-                                            <span class="text-[9px] text-muted-foreground">U: {urgencyScore}</span>
-                                            <span class="text-[9px] text-muted-foreground">S: {task.size ?? 5}</span>
-                                            <span class="text-[9px] text-muted-foreground">P: {task.priority}</span>
+                                            <span class="text-[0.5625rem] text-muted-foreground">U: {urgencyScore}</span>
+                                            <span class="text-[0.5625rem] text-muted-foreground">S: {task.size ?? 5}</span>
+                                            <span class="text-[0.5625rem] text-muted-foreground">P: {task.priority}</span>
                                         </div>
                                     </div>
                                     <div class={cn(
diff --git a/src/views/SettingsView.tsx b/src/views/SettingsView.tsx
index a6911f8..fb88993 100644
--- a/src/views/SettingsView.tsx
+++ b/src/views/SettingsView.tsx
@@ -58,14 +58,14 @@ export const SettingsView: Component = () => {
             <header class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                 <div class="min-w-0 flex-1">
                     <h1 class="text-2xl sm:text-4xl font-black tracking-tighter">Settings</h1>
-                    <p class="text-[10px] sm:text-xs text-muted-foreground truncate opacity-70 font-mono tracking-tight" title={pb.authStore.model?.email}>
+                    <p class="text-[0.625rem] sm:text-xs text-muted-foreground truncate opacity-70 font-mono tracking-tight" title={pb.authStore.model?.email}>
                         {pb.authStore.model?.email}
                     </p>
                 </div>
                 <Button
                     variant="outline"
                     size="sm"
-                    class="w-full sm:w-auto font-black uppercase tracking-widest text-[10px] h-10 sm:h-8 rounded-xl shadow-sm border-border/60"
+                    class="w-full sm:w-auto font-black uppercase tracking-widest text-[0.625rem] h-10 sm:h-8 rounded-xl shadow-sm border-border/60"
                     onClick={() => { pb.authStore.clear(); location.reload(); }}
                 >
                     Sign Out
@@ -134,7 +134,7 @@ export const SettingsView: Component = () => {
                                     <Button
                                         variant={shareMode() === 'ADD_USER' ? 'default' : 'outline'}
                                         size="sm"
-                                        class="h-7 text-[10px] gap-1 px-2"
+                                        class="h-7 text-[0.625rem] gap-1 px-2"
                                         title="Recipient gets edit access (Collaboration)"
                                         onClick={() => setShareMode('ADD_USER')}
                                     >
@@ -144,7 +144,7 @@ export const SettingsView: Component = () => {
                                     <Button
                                         variant={shareMode() === 'SEND_TASK' ? 'default' : 'outline'}
                                         size="sm"
-                                        class="h-7 text-[10px] gap-1 px-2"
+                                        class="h-7 text-[0.625rem] gap-1 px-2"
                                         title="Task ownership is transferred to recipient (Handoff)"
                                         onClick={() => setShareMode('SEND_TASK')}
                                     >
@@ -215,7 +215,7 @@ export const SettingsView: Component = () => {
                                         Share
                                     </Button>
                                 </div>
-                                <p class="text-[10px] text-muted-foreground italic px-1 pt-1">
+                                <p class="text-[0.625rem] text-muted-foreground italic px-1 pt-1">
                                     {shareMode() === 'ADD_USER'
                                         ? "User will be added to the task's shared list."
                                         : "Task owner will change to the recipient immediately when tagged."}
@@ -226,7 +226,7 @@ export const SettingsView: Component = () => {
                             {/* Active share rules */}
                             {/* Active share rules - Outgoing */}
                             <div class="space-y-3">
-                                <h4 class="text-[10px] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
+                                <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
                                     <div class="w-1 h-1 rounded-full bg-primary" />
                                     Sharing With Others
                                 </h4>
@@ -237,7 +237,7 @@ export const SettingsView: Component = () => {
                                     const isOwner = r.ownerId === pb.authStore.model?.id;
                                     return !isSystem && isOwner;
                                 })} fallback={
-                                    <div class="text-center py-4 text-muted-foreground text-[10px] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
+                                    <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
                                         You aren't sharing with anyone yet.
                                     </div>
                                 }>
@@ -249,7 +249,7 @@ export const SettingsView: Component = () => {
                                                 </div>
                                                 <div class="min-w-0">
                                                     <p class="text-xs font-bold truncate">To: {getUserName(rule.targetUserId)}</p>
-                                                    <p class="text-[9px] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
+                                                    <p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
                                                         {rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName}`}
                                                         <span class="mx-1">•</span>
                                                         <button
@@ -278,7 +278,7 @@ export const SettingsView: Component = () => {
 
                             {/* Active share rules - Incoming */}
                             <div class="space-y-3 pt-4 border-t border-border/20">
-                                <h4 class="text-[10px] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
+                                <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground pb-1 flex items-center gap-2">
                                     <div class="w-1 h-1 rounded-full bg-indigo-500" />
                                     Shared With You
                                 </h4>
@@ -289,7 +289,7 @@ export const SettingsView: Component = () => {
                                     const isTarget = r.targetUserId === pb.authStore.model?.id;
                                     return !isSystem && isTarget;
                                 })} fallback={
-                                    <div class="text-center py-4 text-muted-foreground text-[10px] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
+                                    <div class="text-center py-4 text-muted-foreground text-[0.625rem] uppercase tracking-widest italic border border-dashed border-border/40 rounded-xl bg-muted/5">
                                         No one has shared with you yet.
                                     </div>
                                 }>
@@ -301,7 +301,7 @@ export const SettingsView: Component = () => {
                                                 </div>
                                                 <div class="min-w-0">
                                                     <p class="text-xs font-bold truncate">From: {getUserName(rule.ownerId)}</p>
-                                                    <p class="text-[9px] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
+                                                    <p class="text-[0.5625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60 flex items-center gap-1">
                                                         {rule.type === 'all' ? 'All Tasks' : `Tag: ${rule.tagName}`}
                                                         <span class="mx-1">•</span>
                                                         {rule.share_mode === 'SEND_TASK' ? 'HANDOFF' : 'COLLAB'}
@@ -340,7 +340,7 @@ export const SettingsView: Component = () => {
                                                                 {tagDef?.isUser ? getUserName(rule.targetUserId) : rule.tagName}
                                                                 {tagDef?.isUser ? <Users size={10} class="text-muted-foreground" /> : <Archive size={10} class="text-muted-foreground" />}
                                                             </p>
-                                                            <p class="text-[10px] text-muted-foreground uppercase tracking-wider flex items-center gap-1">
+                                                            <p class="text-[0.625rem] text-muted-foreground uppercase tracking-wider flex items-center gap-1">
                                                                 Auto-shared via {tagDef?.isUser ? 'User' : 'Bucket'} Tag
                                                                 <span class="mx-1">•</span>
                                                                 <button
@@ -387,7 +387,7 @@ export const SettingsView: Component = () => {
                         <div class="space-y-4 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                             {/* Create Bucket */}
                             <div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
-                                <h4 class="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket</h4>
+                                <h4 class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">Create New Bucket</h4>
                                 <form
                                     class="flex gap-2"
                                     onSubmit={(e) => {
@@ -474,7 +474,7 @@ export const SettingsView: Component = () => {
                                                                 autofocus
                                                             />
                                                         </Show>
-                                                        <p class="text-[10px] text-muted-foreground truncate opacity-80">{bucket.description || "No description"}</p>
+                                                        <p class="text-[0.625rem] text-muted-foreground truncate opacity-80">{bucket.description || "No description"}</p>
                                                     </div>
                                                 </div>
 
@@ -620,7 +620,7 @@ export const SettingsView: Component = () => {
 
                                                 <div class="flex items-center grow sm:grow-0 justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 border-border/20">
                                                     <div class="flex items-center gap-2">
-                                                        <span class="text-[10px] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
+                                                        <span class="text-[0.625rem] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
                                                         <select
                                                             value={String(tag.value)}
                                                             onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
@@ -679,7 +679,7 @@ export const SettingsView: Component = () => {
 
                                                 <div class="flex items-center grow sm:grow-0 justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 border-border/20">
                                                     <div class="flex items-center gap-2">
-                                                        <span class="text-[10px] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
+                                                        <span class="text-[0.625rem] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
                                                         <select
                                                             value={String(tag.value)}
                                                             onChange={(e) => upsertTagDefinition(tag.name, parseInt(e.currentTarget.value), tag.color, resolvedTheme())}
@@ -720,7 +720,7 @@ export const SettingsView: Component = () => {
                         </div>
                         <Button
                             size="sm"
-                            class="h-9 gap-2 rounded-xl font-bold uppercase tracking-wider text-[10px]"
+                            class="h-9 gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem]"
                             onClick={() => {
                                 addTemplate({
                                     name: "New Template",
@@ -793,7 +793,7 @@ export const SettingsView: Component = () => {
                                                     ) : (
                                                         <div class="min-w-0 cursor-pointer flex-1" onClick={() => setExpandedTemplateId(isExpanded() ? null : template.id)}>
                                                             <p class="font-bold text-sm tracking-tight truncate">{template.name}</p>
-                                                            <p class="text-[10px] text-muted-foreground uppercase font-black tracking-widest opacity-60">
+                                                            <p class="text-[0.625rem] text-muted-foreground uppercase font-black tracking-widest opacity-60">
                                                                 P:{template.priority} / U:{template.urgency} / {template.tags?.length || 0} Tags
                                                             </p>
                                                         </div>
@@ -832,7 +832,7 @@ export const SettingsView: Component = () => {
                                                 <div class="border-t border-border/50 p-4 space-y-4 bg-background/50 animate-in fade-in slide-in-from-top-2 duration-300">
                                                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                                         <div class="space-y-1.5">
-                                                            <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Title Placeholder</label>
+                                                            <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Title Placeholder</label>
                                                             <input
                                                                 class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                                                                 value={editTitle()}
@@ -843,7 +843,7 @@ export const SettingsView: Component = () => {
                                                         </div>
                                                         <div class="flex gap-4">
                                                             <div class="flex-1 space-y-1.5">
-                                                                <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Priority</label>
+                                                                <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Priority</label>
                                                                 <select
                                                                     class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus:ring-1 focus:ring-primary appearance-none px-2"
                                                                     value={template.priority}
@@ -855,7 +855,7 @@ export const SettingsView: Component = () => {
                                                                 </select>
                                                             </div>
                                                             <div class="flex-1 space-y-1.5">
-                                                                <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Urgency</label>
+                                                                <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Urgency</label>
                                                                 <select
                                                                     class="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus:ring-1 focus:ring-primary appearance-none px-2"
                                                                     value={template.urgency}
@@ -870,7 +870,7 @@ export const SettingsView: Component = () => {
                                                     </div>
 
                                                     <div class="space-y-1.5">
-                                                        <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Tags</label>
+                                                        <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Tags</label>
                                                         <div class="flex flex-wrap gap-2 p-2 rounded-xl bg-muted/30 border border-border/40">
                                                             <TagPicker
                                                                 selectedTags={template.tags || []}
@@ -897,7 +897,7 @@ export const SettingsView: Component = () => {
                                                     </div>
 
                                                     <div class="space-y-1.5">
-                                                        <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Description (Content)</label>
+                                                        <label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Description (Content)</label>
                                                         <div class="min-h-[120px] rounded-xl border border-border/40 bg-background/50 p-2 overflow-hidden prose-sm">
                                                             <Suspense fallback={<div class="h-20 animate-pulse bg-muted/20 rounded-lg" />}>
                                                                 <TaskEditor
@@ -982,13 +982,13 @@ export const SettingsView: Component = () => {
                                         <div class="flex flex-col sm:flex-row sm:items-center justify-between p-3.5 rounded-2xl bg-muted/20 border border-border/40 group hover:bg-muted/40 transition-all gap-3 min-w-0">
                                             <div class="min-w-0 flex-1 px-1">
                                                 <p class="font-semibold truncate text-sm sm:text-base">{task.title || "Untitled"}</p>
-                                                <p class="text-[11px] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
+                                                <p class="text-[0.5rem] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
                                             </div>
                                             <div class="flex items-center justify-end gap-2 shrink-0 border-t sm:border-t-0 pt-3 sm:pt-0 border-border/10">
                                                 <Button
                                                     variant="secondary"
                                                     size="sm"
-                                                    class="h-9 px-4 text-[10px] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
+                                                    class="h-9 px-4 text-[0.625rem] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
                                                     onClick={() => {
                                                         restoreTask(task.id);
                                                         toast.success("Task restored");