From 28a97d9f5a16715ca8bba18998c280f31388b106 Mon Sep 17 00:00:00 2001
From: bboysoul <bboysoulcn@gmail.com>
Date: Wed, 23 Sep 2026 08:29:07 +0800
Subject: [PATCH] fix: sheet Escape & focus management, detail a11y, 44px touch
 targets

- AppSheet: Escape closes any sheet branch; non-modal/inline sheets move
  focus into panel on open; modal<->inline transition keeps overlay stack
- Task detail: initial focus on close button; note textarea aria-label
- Global sr-only status region for toast announcements (visual toast hidden
  from AT to avoid double reading)
- Focus view: drop duplicate topbar h1 (page keeps its own single h1)
- Archived lists toggle hidden until loaded (no more 'archived 0' flash)
- Touch: date-clear/time-remove 44px; edit/preview switch hit area 44px
  with 3px gap; calendar filter row gets a scroll-right mask hint
---
 frontend/src/App.vue                     | 13 ++++++----
 frontend/src/CalendarPanel.vue           |  8 ++++--
 frontend/src/PomodoroIntegration.test.ts |  2 +-
 frontend/src/TodayEnvironment.test.ts    |  2 +-
 frontend/src/calendar.css                |  2 +-
 frontend/src/components/AppSheet.vue     | 32 +++++++++++++++++-------
 frontend/src/style.css                   |  6 ++---
 frontend/src/style.test.ts               |  2 +-
 8 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a37f38b..e6e06a4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -45,6 +45,7 @@ const password = ref('')
 const folders = ref<FolderItem[]>([])
 const lists = ref<TaskList[]>([])
 const archivedLists = ref<TaskList[]>([])
+const archivedListsLoaded = ref(false)
 const archivedListsExpanded = ref(false)
 const archivedListAction = ref<TaskList | null>(null)
 const archivedListsToggle = ref<HTMLButtonElement | null>(null)
@@ -1360,6 +1361,7 @@ async function deleteFolder(item: FolderItem) {
 }
 async function loadArchivedLists() {
   try { archivedLists.value = await api('/lists?archived=true') } catch { archivedLists.value = [] }
+  archivedListsLoaded.value = true
 }
 async function restoreList(item: TaskList) {
   archivedListAction.value = null
@@ -1756,7 +1758,7 @@ onUnmounted(() => {
         </div>
         <div v-for="list in lists.filter(l=>!l.folder_id&&!l.is_inbox)" :key="list.id" :data-list-id="list.id" class="list-row" :class="{active:activeView==='tasks'&&activeList===list.id,'list-dragging':listDrag?.id===list.id,'list-reorder-target':listReorderTarget===list.id&&listDrag?.id!==list.id}" :style="{'--list-drag-y':`${listDrag?.id===list.id?listDrag.offsetY:0}px`}" @pointermove="moveListDrag(list,$event)" @pointerup="finishListDrag(list,$event)" @pointercancel="cancelListDrag"><button class="list-drag-handle" aria-label="拖动清单排序或移动到文件夹" title="长按拖动清单" @pointerdown.stop="startListHandlePress(list,$event)" @pointermove.stop="moveListHandle(list,$event)" @pointerup.stop="finishListDrag(list,$event)" @pointercancel.stop="cancelListDrag"><GripVertical/></button><button class="list-row-main draggable-list-row-main" :title="list.name" :aria-label="list.name" @click="selectListUnlessDragged(list)"><span>{{list.name}}</span></button><span class="row-actions"><button aria-label="打开清单操作" :aria-expanded="listEditorTarget?.id===list.id" @click="openSidebarAction('lists',list)"><Ellipsis/></button></span></div>
         <div class="archived-lists">
-          <button ref="archivedListsToggle" class="archived-lists-toggle" :class="{ empty: archivedLists.length === 0 }" :aria-expanded="archivedLists.length > 0 && archivedListsExpanded" aria-controls="archived-task-lists" :disabled="archivedLists.length === 0" @click="toggleArchivedLists"><ChevronRight :class="{ expanded: archivedListsExpanded }"/><span>已归档 {{ archivedLists.length }}</span></button>
+          <button v-if="archivedListsLoaded" ref="archivedListsToggle" class="archived-lists-toggle" :class="{ empty: archivedLists.length === 0 }" :aria-expanded="archivedLists.length > 0 && archivedListsExpanded" aria-controls="archived-task-lists" :disabled="archivedLists.length === 0" @click="toggleArchivedLists"><ChevronRight :class="{ expanded: archivedListsExpanded }"/><span>已归档 {{ archivedLists.length }}</span></button>
           <div id="archived-task-lists" v-show="archivedListsExpanded" class="archived-list-items">
             <div v-for="list in archivedLists" :key="list.id" class="list-row archived-row"><span class="archived-row-label" :title="list.name">{{list.name}}</span><span class="archived-row-menu"><button class="archived-row-menu-trigger" :aria-label="`${list.name}操作`" aria-haspopup="menu" :aria-expanded="archivedListAction?.id===list.id" @click="toggleArchivedListAction(list,$event.currentTarget)"><Ellipsis/></button></span></div>
           </div>
@@ -1803,7 +1805,7 @@ onUnmounted(() => {
     <main :class="{'today-main':activeView==='today','list-main':activeView==='tasks'||activeView==='upcoming'||activeView==='habits'}">
       <header class="topbar" :class="{'settings-topbar':activeView==='settings'}" :inert="memoBackgroundInert ? true : undefined">
         <button class="icon" :aria-label="(sidebarCollapsed ? '展开' : '收起') + '菜单'" :aria-expanded="sidebarCollapsed ? 'false' : 'true'" @click="toggleSidebar"><Menu /></button>
-        <div v-if="!['today','tasks','upcoming','trash','habits','settings'].includes(activeView)" class="topbar-title"><h1 :title="activeName">{{ activeName }}</h1></div>
+        <div v-if="!['today','tasks','upcoming','trash','habits','settings','focus'].includes(activeView)" class="topbar-title"><h1 :title="activeName">{{ activeName }}</h1></div>
       </header>
       <template v-if="['habits','settings'].includes(activeView)">
         <MvpPanel ref="habitComposer" :key="activeView" :view="activeView as 'habits'|'settings'" :show-completed="showCompleted" :compact-layout="compactLayout" @update:show-completed="showCompleted=$event" @detail="handleHabitDetail" @changed="refreshAll" @notice="toast" @logout="completeLogout" />
@@ -1877,7 +1879,7 @@ onUnmounted(() => {
     </main>
     <div v-if="selectedTask || habitDetailOpen || calendarDetailOpen" class="pane-resizer pane-resizer--detail" role="separator" :aria-label="detailSeparatorLabel" aria-orientation="vertical" aria-valuemin="300" :aria-valuemax="detailMaxWidth" :aria-valuenow="detailWidth" tabindex="0" @pointerdown="startPaneResize('detail',$event)" @lostpointercapture="handlePaneLostPointerCapture" @keydown="resizePaneWithKeyboard('detail',$event)" />
 
-    <AppSheet v-if="selectedTask" :open="true" :modal="compactLayout" variant="detail" panel-class="detail" title-id="task-detail-title" :close-on-scrim="compactLayout" :busy="taskDetailBusy" @close="closeTaskDetail" @submit.prevent="saveSelectedTaskChanges">
+    <AppSheet v-if="selectedTask" :open="true" :modal="compactLayout" variant="detail" panel-class="detail" title-id="task-detail-title" initial-focus="button[aria-label='关闭详情']" :close-on-scrim="compactLayout" :busy="taskDetailBusy" @close="closeTaskDetail" @submit.prevent="saveSelectedTaskChanges">
       <div class="detail-head"><span id="task-detail-title">任务详情</span><button class="icon" type="button" :disabled="taskDetailBusy" aria-label="关闭详情" @click="closeTaskDetail"><X/></button></div>
       <fieldset class="detail-form" :disabled="taskDetailBusy">
         <div class="detail-title"><button class="task-check detail-task-check" type="button" :aria-label="selectedTask.completed ? `重新打开${selectedTask.title}` : `完成${selectedTask.title}`" :aria-pressed="selectedTask.completed" @click="toggle(selectedTask)"><span class="task-check-mark" :class="`p${selectedTask.priority}`"><Check v-if="selectedTask.completed" /></span></button><textarea v-model="selectedTask.title" rows="2" aria-label="任务标题"/></div>
@@ -1898,7 +1900,7 @@ onUnmounted(() => {
             <div class="markdown-toolbar" role="toolbar" aria-label="Markdown 格式">
               <button type="button" aria-label="标题" title="标题" @click="formatTaskNote('heading')"><Heading2/></button><button type="button" aria-label="粗体" title="粗体" @click="formatTaskNote('bold')"><Bold/></button><button type="button" aria-label="斜体" title="斜体" @click="formatTaskNote('italic')"><Italic/></button><button type="button" aria-label="无序列表" title="无序列表" @click="formatTaskNote('bullet')"><List/></button><button type="button" aria-label="有序列表" title="有序列表" @click="formatTaskNote('ordered')"><ListOrdered/></button><button type="button" aria-label="待办" title="待办" @click="formatTaskNote('task')"><ListChecks/></button><button type="button" aria-label="链接" title="链接" @click="formatTaskNote('link')"><Link/></button><button type="button" aria-label="行内代码" title="行内代码" @click="formatTaskNote('code')"><Code/></button><button type="button" aria-label="代码块" title="代码块" class="markdown-codeblock" @click="formatTaskNote('codeblock')">{ }</button><button type="button" aria-label="引用" title="引用" @click="formatTaskNote('quote')"><Quote/></button>
             </div>
-            <textarea ref="taskNoteEditor" v-model="selectedTask.description" rows="9" placeholder="写备注，选中文字后可用上方工具栏添加格式…" @keydown="handleTaskNoteShortcut"/>
+            <textarea ref="taskNoteEditor" v-model="selectedTask.description" rows="9" aria-label="任务备注" placeholder="写备注，选中文字后可用上方工具栏添加格式…" @keydown="handleTaskNoteShortcut"/>
           </div>
           <div v-else class="markdown-preview" :class="{'markdown-preview-empty':!selectedTask.description.trim()}" v-html="selectedTask.description.trim() ? renderMarkdown(selectedTask.description) : '<p>暂无备注，切回编辑开始书写。</p>'"/>
         </section>
@@ -1934,7 +1936,8 @@ onUnmounted(() => {
           </div>
           <footer class="app-sheet__footer"><button type="button" class="secondary" :disabled="creatingTask" @click="closeTaskCompose">取消</button><button class="primary-small" :disabled="creatingTask || !composeTitle.trim() || !composeListId">{{ creatingTask ? '正在添加…' : '添加任务' }}</button></footer>
     </AppSheet>
-    <Transition name="toast"><div v-if="notice" class="toast" role="status">{{notice}}</div></Transition>
+    <div class="sr-only" role="status" aria-live="polite">{{ notice }}</div>
+    <Transition name="toast"><div v-if="notice" class="toast" aria-hidden="true">{{notice}}</div></Transition>
     <div v-if="error" class="error-toast" role="alert">{{error}}<button @click="error=''"><X/></button></div>
     <Teleport to="body">
       <span v-if="trashAction" class="trash-action-mask" @click.self="closeTrashAction()"><span ref="trashMenu" class="trash-action-menu" role="menu" aria-label="回收站任务操作" @keydown.esc.stop="closeTrashAction()" @keydown.tab.prevent="moveTrashMenuFocus($event.shiftKey?-1:1)" @keydown.down.prevent="moveTrashMenuFocus(1)" @keydown.up.prevent="moveTrashMenuFocus(-1)"><span class="trash-action-title" :title="trashAction.title">{{trashAction.title}}</span><button role="menuitem" @click="requestRestoreTask"><ArchiveRestore/>恢复</button><button role="menuitem" class="danger-text" @click="requestPurgeTask"><Trash2/>永久删除</button></span></span>
diff --git a/frontend/src/CalendarPanel.vue b/frontend/src/CalendarPanel.vue
index acb692e..2f706f2 100644
--- a/frontend/src/CalendarPanel.vue
+++ b/frontend/src/CalendarPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUpdated, ref, watch } from 'vue'
 import { CalendarDays, ChevronLeft, ChevronRight, Pencil, Plus, RefreshCw, Settings2, Trash2, X } from 'lucide-vue-next'
 import { csrfHeader } from './lib/csrf'
 import { formatApiErrorDetail } from './lib/mvp-utils'
@@ -19,6 +19,10 @@ const selectedDay=ref(new Date(new Date().getFullYear(),new Date().getMonth(),ne
 const selected=ref<CalendarEvent|null>(null),manageOpen=ref(false),formOpen=ref(false),editing=ref<Subscription|null>(null),busyId=ref('')
 const form=ref<Form>({name:'',url:'',color:'#f15a29',enabled:true})
 const appDialog=ref<{show:(options:AppDialogOptions)=>Promise<boolean|string|null>}|null>(null)
+const filtersEl=ref<HTMLElement|null>(null),filtersScrollHint=ref(false)
+const syncFiltersHint=()=>{const el=filtersEl.value;filtersScrollHint.value=!!el&&el.scrollLeft+el.clientWidth<el.scrollWidth-4}
+onMounted(syncFiltersHint)
+onUpdated(syncFiltersHint)
 const request=async(path:string,options:RequestInit={})=>{const headers:Record<string,string>={...(options.headers as Record<string,string>||{})};if(options.body)headers['Content-Type']='application/json';Object.assign(headers,csrfHeader(options.method));const response=await fetch('/api/v1'+path,{credentials:'include',...options,headers});if(!response.ok){const body=await response.json().catch(()=>({}));throw new Error(formatApiErrorDetail((body as {detail?:unknown}).detail??body))}return response.status===204?null:response.json()}
 const key=(date:Date)=>`${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`
 const startOfWeek=(value:Date)=>{const date=new Date(value.getFullYear(),value.getMonth(),value.getDate());date.setDate(date.getDate()-((date.getDay()+6)%7));return date}
@@ -67,7 +71,7 @@ onMounted(()=>void load())
  <p v-if="error" class="inline-error" role="alert">{{error}}</p>
  <div class="calendar-toolbar"><button aria-label="上一周" @click="moveWeek(-1)"><ChevronLeft/></button><button class="calendar-today" aria-label="回到今天" @click="today">今天</button><strong>{{weekLabel}}</strong><button aria-label="下一周" @click="moveWeek(1)"><ChevronRight/></button></div>
  <div class="calendar-week-strip" role="group" aria-label="选择日期"><button v-for="day in weekDays" :key="key(day)" class="calendar-week-day" :class="{'is-selected':key(day)===selectedDayKey,'is-today':isToday(day)}" :data-day="key(day)" :aria-label="`${displayDay(key(day))}${dayEventCount(day)?`，${dayEventCount(day)}个日程`:'，无日程'}`" :aria-pressed="key(day)===selectedDayKey" @click="selectDay(day)"><small>{{weekDayLabel(day)}}</small><b>{{day.getDate()}}</b><i v-if="dayEventCount(day)" aria-hidden="true">{{dayEventCount(day)}}</i></button></div>
- <div v-if="subscriptions.length" class="calendar-filters" aria-label="筛选日历源"><label v-for="source in subscriptions" :key="source.id"><input type="checkbox" :aria-label="`筛选${source.name}`" :checked="!hiddenSources.has(source.id)" @change="toggleFilter(source.id)"><i :style="{background:source.color}"/>{{source.name}}</label></div>
+ <div v-if="subscriptions.length" ref="filtersEl" class="calendar-filters" :class="{'has-scroll-hint':filtersScrollHint}" aria-label="筛选日历源" @scroll.passive="syncFiltersHint"><label v-for="source in subscriptions" :key="source.id"><input type="checkbox" :aria-label="`筛选${source.name}`" :checked="!hiddenSources.has(source.id)" @change="toggleFilter(source.id)"><i :style="{background:source.color}"/>{{source.name}}</label></div>
  <div v-if="visibleEvents.length" class="calendar-agenda"><section><h2>{{selectedDayLabel}} · {{visibleEvents.length}} 个日程</h2><button v-for="event in visibleEvents" :key="eventKey(event)" :data-event-id="event.id" class="calendar-event-row" @click="selected=event"><i :style="{background:eventColor(event)}"/><time>{{displayTime(event)}}</time><span><b>{{eventTitle(event)}}</b><small>{{eventSource(event)}}<template v-if="event.location"> · {{event.location}}</template></small></span><ChevronRight/></button></section></div>
  <div v-else-if="!loading" class="calendar-empty"><CalendarDays/><b>这一天还没有日程</b><span>{{subscriptions.length?'可以选择本周其他日期或检查来源筛选':'先添加一个 iCal 日历订阅'}}</span><button v-if="!subscriptions.length" class="primary-small" @click="manageOpen=true;openCreate()">添加日历源</button></div>
  <AppSheet :open="Boolean(selected)" :modal="compactLayout" inline-target=".shell" variant="detail" panel-class="calendar-event-detail" title-id="calendar-event-title" initial-focus="button[aria-label='关闭日程详情']" :close-on-scrim="compactLayout" @close="selected=null"><template v-if="selected"><header class="app-sheet__header"><h3 id="calendar-event-title">{{eventTitle(selected)}}</h3><button aria-label="关闭日程详情" @click="selected=null"><X/></button></header><div class="app-sheet__body"><div class="calendar-event-detail__meta"><span>{{displayDay(localDayKey(eventStart(selected)))}}</span><span>{{displayTime(selected)}}<template v-if="eventEnd(selected) && !selected.all_day"> - {{displayTime({...selected,starts_at:eventEnd(selected)})}}</template></span><span><i :style="{background:eventColor(selected)}"/>{{eventSource(selected)}}</span><span v-if="selected.location">{{selected.location}}</span></div><section v-if="selected.description" class="calendar-event-detail__content"><p>{{selected.description}}</p></section><p v-else class="calendar-event-detail__empty">没有备注</p></div></template></AppSheet>
diff --git a/frontend/src/PomodoroIntegration.test.ts b/frontend/src/PomodoroIntegration.test.ts
index 9b2c33d..92cc53b 100644
--- a/frontend/src/PomodoroIntegration.test.ts
+++ b/frontend/src/PomodoroIntegration.test.ts
@@ -18,7 +18,7 @@ describe('pomodoro integration', () => {
 
   it('renders the focus panel without the shared FAB and includes accessible stage controls', () => {
     expect(app).toContain("<PomodoroPanel v-else-if=\"activeView==='focus'\"")
-    expect(app).not.toContain("'focus'].includes(activeView)")
+    expect(app).toContain("'focus'].includes(activeView)")
     expect(css).toContain('.pomodoro-controls button{min-height:44px')
     expect(css).toContain('@media(prefers-reduced-motion:reduce)')
   })
diff --git a/frontend/src/TodayEnvironment.test.ts b/frontend/src/TodayEnvironment.test.ts
index 60ceea2..ac7cc9f 100644
--- a/frontend/src/TodayEnvironment.test.ts
+++ b/frontend/src/TodayEnvironment.test.ts
@@ -90,7 +90,7 @@ describe('Today environment integration', () => {
     expect(filter).toBeGreaterThan(remaining)
     expect(overdue).toBeGreaterThan(filter)
     expect(main.match(/>今天<\/h1>/g)).toHaveLength(1)
-    expect(main).toContain("<div v-if=\"!['today','tasks','upcoming','trash','habits','settings'].includes(activeView)\" class=\"topbar-title\"><h1")
+    expect(main).toContain("<div v-if=\"!['today','tasks','upcoming','trash','habits','settings','focus'].includes(activeView)\" class=\"topbar-title\"><h1")
     expect(main).not.toContain('class="topbar-actions"')
     expect(main).not.toContain('class="topbar-filter"')
     expect(main).not.toContain('aria-label="刷新当前页面"')
diff --git a/frontend/src/calendar.css b/frontend/src/calendar.css
index 23485b0..762e369 100644
--- a/frontend/src/calendar.css
+++ b/frontend/src/calendar.css
@@ -1,4 +1,4 @@
-.calendar-view{min-width:0;width:min(100%,900px);margin:0 auto;padding-bottom:var(--space-40);display:grid;gap:16px}.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.calendar-heading p{margin:0;color:var(--text-secondary);font-size:13px}.calendar-manage{min-height:44px}.calendar-toolbar{min-height:48px;display:grid;grid-template-columns:44px 64px minmax(0,1fr) 44px;align-items:center;border-block:1px solid var(--border-hairline)}.calendar-toolbar button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--radius-control)}.calendar-toolbar .calendar-today{width:64px}.calendar-toolbar strong{text-align:center;font-size:16px}.calendar-week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:var(--space-10);border:1px solid var(--border-cream);border-radius:var(--radius-list);background:var(--surface-raised);box-shadow:inset 0 1px rgba(255,255,255,.9)}.calendar-week-day{position:relative;min-width:0;min-height:76px;display:grid;place-items:center;align-content:center;gap:4px;border:0;border-radius:var(--radius-control);background:transparent}.calendar-week-day small{color:var(--text-secondary);font-size:11px}.calendar-week-day b{font-size:18px}.calendar-week-day i{position:absolute;right:7px;top:7px;min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:var(--calendar-week-day-bg);color:var(--calendar-week-day-ink);font-size:11px;font-style:normal}.calendar-week-day.is-selected{background:var(--accent);color:var(--white);box-shadow:0 8px 18px rgba(241,90,41,.22)}.calendar-week-day.is-selected small{color:var(--white)}.calendar-week-day.is-selected i{background:var(--calendar-week-day-bg-2);color:var(--accent)}.calendar-week-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 1px var(--calendar-week-day-shadow)}.calendar-filters{min-width:0;max-width:100%;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;contain:layout paint;padding-bottom:var(--space-2);overscroll-behavior-inline:contain}.calendar-filters label{min-height:44px;display:flex;align-items:center;gap:7px;padding:0 var(--space-12);border:1px solid var(--border-cream);border-radius:999px;background:var(--surface-raised);font-size:12px;white-space:nowrap}.calendar-filters input{position:absolute;opacity:0;pointer-events:none}.calendar-filters label:has(input:not(:checked)){opacity:.48}.calendar-filters i,.calendar-event-row>i,.calendar-event-detail dd i,.calendar-source-copy i{width:9px;height:9px;display:inline-block;flex:0 0 auto;border-radius:50%}.calendar-agenda{display:grid;gap:20px}.calendar-agenda section{display:grid}.calendar-agenda h2{min-height:40px;margin:0;display:flex;align-items:center;border-bottom:1px solid var(--border-hairline);font-size:13px}.calendar-event-row{min-height:62px;display:grid;grid-template-columns:10px 54px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:0 var(--space-4);border:0;border-bottom:1px solid var(--border-hairline);background:transparent;text-align:left}.calendar-event-row:hover{background:var(--event-hover)}.calendar-event-row time{color:var(--text-secondary);font-size:12px}.calendar-event-row span{min-width:0;display:grid;gap:4px}.calendar-event-row b,.calendar-event-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-event-row b{font-size:14px;font-weight:600}.calendar-event-row small{color:var(--text-secondary);font-size:11px}.calendar-event-row>svg{color:var(--calendar-event-row-ink)}.calendar-empty{min-height:260px;display:grid;place-items:center;align-content:center;gap:9px;color:var(--text-secondary);text-align:center}.calendar-empty svg{width:32px;height:32px}.calendar-empty b{color:var(--text-primary)}.calendar-event-detail,.calendar-sources-sheet{width:min(520px,100%);max-height:min(88dvh,760px)}.calendar-event-detail .app-sheet__header{padding:var(--space-24) var(--space-24) var(--space-18);align-items:flex-start;border-bottom:0}.calendar-event-detail .app-sheet__header h3{max-width:calc(100% - 48px);font-size:22px;font-weight:700;line-height:1.38;letter-spacing:-.02em}.calendar-event-detail .app-sheet__body{padding:0 var(--space-24) var(--space-32)}.calendar-event-detail__meta{display:flex;flex-wrap:wrap;gap:8px 14px;padding:0 0 var(--space-20);border-bottom:1px solid var(--border-hairline);color:var(--text-secondary);font-size:12px;line-height:1.45}.calendar-event-detail__meta span{display:inline-flex;align-items:center;gap:7px;min-width:0}.calendar-event-detail__meta i{width:8px;height:8px;display:inline-block;flex:0 0 auto;border-radius:50%}.calendar-event-detail__content{padding-top:var(--space-20)}.calendar-event-detail__content p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-primary);font-size:14px;line-height:1.9}.calendar-event-detail__empty{margin:0;padding-top:var(--space-20);color:var(--text-secondary);font-size:13px}.calendar-source-add{justify-self:start}.calendar-source-list{display:grid}.calendar-source-list article{min-height:72px;display:grid;grid-template-columns:minmax(0,1fr) auto 44px 44px 44px;align-items:center;gap:4px;border-bottom:1px solid var(--border-hairline)}.calendar-source-copy{min-width:0;display:grid;gap:3px}.calendar-source-copy b{display:flex;align-items:center;gap:7px;font-size:13px}.calendar-source-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:11px}.calendar-source-copy .calendar-source-error{color:var(--danger);white-space:normal}.calendar-source-list article>button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--radius-control)}.calendar-source-toggle{min-height:44px;display:flex;align-items:center;gap:5px;font-size:11px}.calendar-subscription-form{width:min(460px,100%)}.calendar-subscription-form .app-sheet__body label{display:grid;gap:6px;color:var(--text-secondary);font-size:12px;font-weight:600}.calendar-subscription-form input{min-height:44px;width:100%;padding:var(--space-8) var(--space-10);border:1px solid var(--border-cream)}.calendar-subscription-form input[type=color]{padding:var(--space-4);width:72px}.calendar-subscription-form .calendar-form-toggle{display:flex;align-items:center;min-height:44px}.calendar-subscription-form .calendar-form-toggle input{width:18px;min-height:18px}.calendar-view.loading{opacity:.72}@media(max-width:930px){.calendar-view{width:min(100%,630px)}.calendar-event-detail,.calendar-sources-sheet,.calendar-subscription-form{width:100%;max-width:100%;border-radius:var(--radius-panel) var(--radius-panel) 0 0!important}}@media(max-width:720px){.calendar-view{width:100%;gap:13px}.calendar-heading .calendar-manage{font-size:0;padding:0;width:44px}.calendar-heading .calendar-manage svg{width:19px;height:19px}.calendar-toolbar{grid-template-columns:44px 54px minmax(0,1fr) 44px}.calendar-toolbar .calendar-today{width:54px}.calendar-week-strip{gap:3px;padding:var(--space-6)}.calendar-week-day{min-height:64px}.calendar-week-day i{right:4px;top:4px;min-width:16px;height:16px}.calendar-source-list article{grid-template-columns:minmax(0,1fr) 44px 44px 44px}.calendar-source-toggle{grid-column:1/-1;grid-row:2}.calendar-event-row{grid-template-columns:9px 48px minmax(0,1fr) 20px}.calendar-filters{width:100%;margin-inline:-4px;padding-inline:var(--space-4)}}@media(max-width:390px){.calendar-week-strip{display:flex;overflow-x:auto;scroll-snap-type:x proximity}.calendar-week-day{flex:0 0 44px;scroll-snap-align:start}.calendar-event-row{gap:7px}.calendar-source-list article{gap:1px}}@media(min-width:931px){.calendar-view{padding-top:var(--space-4)}.calendar-event-detail{grid-column:3;grid-row:1;width:var(--detail-width,350px);height:100vh;max-height:none;padding:0;border-radius:0;border-top:0;border-right:0;border-bottom:0;box-shadow:inset 1px 0 0 var(--white);overflow:hidden;display:flex;flex-direction:column}.calendar-event-detail .app-sheet__body{flex:1 1 auto;overflow-y:auto}.calendar-sources-sheet{border-radius:var(--radius-panel)}}@media(min-width:1440px){.calendar-view{width:min(100%,1040px)}}
+.calendar-view{min-width:0;width:min(100%,900px);margin:0 auto;padding-bottom:var(--space-40);display:grid;gap:16px}.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.calendar-heading p{margin:0;color:var(--text-secondary);font-size:13px}.calendar-manage{min-height:44px}.calendar-toolbar{min-height:48px;display:grid;grid-template-columns:44px 64px minmax(0,1fr) 44px;align-items:center;border-block:1px solid var(--border-hairline)}.calendar-toolbar button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--radius-control)}.calendar-toolbar .calendar-today{width:64px}.calendar-toolbar strong{text-align:center;font-size:16px}.calendar-week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:var(--space-10);border:1px solid var(--border-cream);border-radius:var(--radius-list);background:var(--surface-raised);box-shadow:inset 0 1px rgba(255,255,255,.9)}.calendar-week-day{position:relative;min-width:0;min-height:76px;display:grid;place-items:center;align-content:center;gap:4px;border:0;border-radius:var(--radius-control);background:transparent}.calendar-week-day small{color:var(--text-secondary);font-size:11px}.calendar-week-day b{font-size:18px}.calendar-week-day i{position:absolute;right:7px;top:7px;min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:var(--calendar-week-day-bg);color:var(--calendar-week-day-ink);font-size:11px;font-style:normal}.calendar-week-day.is-selected{background:var(--accent);color:var(--white);box-shadow:0 8px 18px rgba(241,90,41,.22)}.calendar-week-day.is-selected small{color:var(--white)}.calendar-week-day.is-selected i{background:var(--calendar-week-day-bg-2);color:var(--accent)}.calendar-week-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 1px var(--calendar-week-day-shadow)}.calendar-filters{min-width:0;max-width:100%;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;contain:layout paint;padding-bottom:var(--space-2);overscroll-behavior-inline:contain}.calendar-filters.has-scroll-hint{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}.calendar-filters label{min-height:44px;display:flex;align-items:center;gap:7px;padding:0 var(--space-12);border:1px solid var(--border-cream);border-radius:999px;background:var(--surface-raised);font-size:12px;white-space:nowrap}.calendar-filters input{position:absolute;opacity:0;pointer-events:none}.calendar-filters label:has(input:not(:checked)){opacity:.48}.calendar-filters i,.calendar-event-row>i,.calendar-event-detail dd i,.calendar-source-copy i{width:9px;height:9px;display:inline-block;flex:0 0 auto;border-radius:50%}.calendar-agenda{display:grid;gap:20px}.calendar-agenda section{display:grid}.calendar-agenda h2{min-height:40px;margin:0;display:flex;align-items:center;border-bottom:1px solid var(--border-hairline);font-size:13px}.calendar-event-row{min-height:62px;display:grid;grid-template-columns:10px 54px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:0 var(--space-4);border:0;border-bottom:1px solid var(--border-hairline);background:transparent;text-align:left}.calendar-event-row:hover{background:var(--event-hover)}.calendar-event-row time{color:var(--text-secondary);font-size:12px}.calendar-event-row span{min-width:0;display:grid;gap:4px}.calendar-event-row b,.calendar-event-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-event-row b{font-size:14px;font-weight:600}.calendar-event-row small{color:var(--text-secondary);font-size:11px}.calendar-event-row>svg{color:var(--calendar-event-row-ink)}.calendar-empty{min-height:260px;display:grid;place-items:center;align-content:center;gap:9px;color:var(--text-secondary);text-align:center}.calendar-empty svg{width:32px;height:32px}.calendar-empty b{color:var(--text-primary)}.calendar-event-detail,.calendar-sources-sheet{width:min(520px,100%);max-height:min(88dvh,760px)}.calendar-event-detail .app-sheet__header{padding:var(--space-24) var(--space-24) var(--space-18);align-items:flex-start;border-bottom:0}.calendar-event-detail .app-sheet__header h3{max-width:calc(100% - 48px);font-size:22px;font-weight:700;line-height:1.38;letter-spacing:-.02em}.calendar-event-detail .app-sheet__body{padding:0 var(--space-24) var(--space-32)}.calendar-event-detail__meta{display:flex;flex-wrap:wrap;gap:8px 14px;padding:0 0 var(--space-20);border-bottom:1px solid var(--border-hairline);color:var(--text-secondary);font-size:12px;line-height:1.45}.calendar-event-detail__meta span{display:inline-flex;align-items:center;gap:7px;min-width:0}.calendar-event-detail__meta i{width:8px;height:8px;display:inline-block;flex:0 0 auto;border-radius:50%}.calendar-event-detail__content{padding-top:var(--space-20)}.calendar-event-detail__content p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-primary);font-size:14px;line-height:1.9}.calendar-event-detail__empty{margin:0;padding-top:var(--space-20);color:var(--text-secondary);font-size:13px}.calendar-source-add{justify-self:start}.calendar-source-list{display:grid}.calendar-source-list article{min-height:72px;display:grid;grid-template-columns:minmax(0,1fr) auto 44px 44px 44px;align-items:center;gap:4px;border-bottom:1px solid var(--border-hairline)}.calendar-source-copy{min-width:0;display:grid;gap:3px}.calendar-source-copy b{display:flex;align-items:center;gap:7px;font-size:13px}.calendar-source-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:11px}.calendar-source-copy .calendar-source-error{color:var(--danger);white-space:normal}.calendar-source-list article>button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--radius-control)}.calendar-source-toggle{min-height:44px;display:flex;align-items:center;gap:5px;font-size:11px}.calendar-subscription-form{width:min(460px,100%)}.calendar-subscription-form .app-sheet__body label{display:grid;gap:6px;color:var(--text-secondary);font-size:12px;font-weight:600}.calendar-subscription-form input{min-height:44px;width:100%;padding:var(--space-8) var(--space-10);border:1px solid var(--border-cream)}.calendar-subscription-form input[type=color]{padding:var(--space-4);width:72px}.calendar-subscription-form .calendar-form-toggle{display:flex;align-items:center;min-height:44px}.calendar-subscription-form .calendar-form-toggle input{width:18px;min-height:18px}.calendar-view.loading{opacity:.72}@media(max-width:930px){.calendar-view{width:min(100%,630px)}.calendar-event-detail,.calendar-sources-sheet,.calendar-subscription-form{width:100%;max-width:100%;border-radius:var(--radius-panel) var(--radius-panel) 0 0!important}}@media(max-width:720px){.calendar-view{width:100%;gap:13px}.calendar-heading .calendar-manage{font-size:0;padding:0;width:44px}.calendar-heading .calendar-manage svg{width:19px;height:19px}.calendar-toolbar{grid-template-columns:44px 54px minmax(0,1fr) 44px}.calendar-toolbar .calendar-today{width:54px}.calendar-week-strip{gap:3px;padding:var(--space-6)}.calendar-week-day{min-height:64px}.calendar-week-day i{right:4px;top:4px;min-width:16px;height:16px}.calendar-source-list article{grid-template-columns:minmax(0,1fr) 44px 44px 44px}.calendar-source-toggle{grid-column:1/-1;grid-row:2}.calendar-event-row{grid-template-columns:9px 48px minmax(0,1fr) 20px}.calendar-filters{width:100%;margin-inline:-4px;padding-inline:var(--space-4)}}@media(max-width:390px){.calendar-week-strip{display:flex;overflow-x:auto;scroll-snap-type:x proximity}.calendar-week-day{flex:0 0 44px;scroll-snap-align:start}.calendar-event-row{gap:7px}.calendar-source-list article{gap:1px}}@media(min-width:931px){.calendar-view{padding-top:var(--space-4)}.calendar-event-detail{grid-column:3;grid-row:1;width:var(--detail-width,350px);height:100vh;max-height:none;padding:0;border-radius:0;border-top:0;border-right:0;border-bottom:0;box-shadow:inset 1px 0 0 var(--white);overflow:hidden;display:flex;flex-direction:column}.calendar-event-detail .app-sheet__body{flex:1 1 auto;overflow-y:auto}.calendar-sources-sheet{border-radius:var(--radius-panel)}}@media(min-width:1440px){.calendar-view{width:min(100%,1040px)}}
 
 
 /* Restrained motion: picker open (scale 140ms desktop / rise 180ms mobile) and month shift crossfade. */
diff --git a/frontend/src/components/AppSheet.vue b/frontend/src/components/AppSheet.vue
index 9eeb157..21ca3a9 100644
--- a/frontend/src/components/AppSheet.vue
+++ b/frontend/src/components/AppSheet.vue
@@ -39,6 +39,13 @@ function focusables() {
     .filter(isVisibleFocusable)
 }
 function keydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    if (props.busy || (props.modal && !isTopOverlay(overlayId))) return
+    event.preventDefault()
+    event.stopPropagation()
+    emit('close')
+    return
+  }
   if (!props.modal || event.key !== 'Tab' || !isTopOverlay(overlayId)) return
   const controls = focusables()
   if (!controls.length) { event.preventDefault(); panel.value?.focus(); return }
@@ -54,19 +61,26 @@ function focusIntoPanel() {
   }
 }
 async function activate() {
-  if (!props.open || !props.modal || overlayId) return
-  overlayId = pushOverlay(requestClose, () => props.busy, focusIntoPanel)
-  layerZIndex.value = overlayZIndex(overlayId)
+  if (!props.open) return
+  if (!props.modal && overlayId) deactivate()
+  if (props.modal) {
+    if (!overlayId) {
+      overlayId = pushOverlay(requestClose, () => props.busy, focusIntoPanel)
+      layerZIndex.value = overlayZIndex(overlayId)
+    }
+    await nextTick()
+    if (props.open && overlayId) focusIntoPanel()
+    return
+  }
   await nextTick()
-  if (!props.open || !props.modal || !overlayId) return
-  focusIntoPanel()
+  if (props.open) focusIntoPanel()
 }
 function deactivate() {
   if (overlayId) popOverlay(overlayId)
   overlayId = null
 }
-watch([() => props.open, () => props.modal], ([open, modal]) => {
-  if (open && modal) void activate()
+watch([() => props.open, () => props.modal], ([open]) => {
+  if (open) void activate()
   else deactivate()
 }, { immediate: true })
 onBeforeUnmount(deactivate)
@@ -83,11 +97,11 @@ onBeforeUnmount(deactivate)
     </Transition>
   </Teleport>
   <Teleport v-else-if="inlineTarget" :to="inlineTarget">
-    <component v-if="open" :is="$attrs.onSubmit ? 'form' : 'section'" ref="panel" class="app-sheet" :class="[`app-sheet--${variant}`, panelClass]" role="dialog" :aria-labelledby="titleId" :aria-describedby="descriptionId" :aria-label="label" :aria-busy="busy || undefined" v-bind="$attrs">
+    <component v-if="open" :is="$attrs.onSubmit ? 'form' : 'section'" ref="panel" class="app-sheet" :class="[`app-sheet--${variant}`, panelClass]" role="dialog" :aria-labelledby="titleId" :aria-describedby="descriptionId" :aria-label="label" :aria-busy="busy || undefined" tabindex="-1" v-bind="$attrs" @keydown="keydown">
       <slot />
     </component>
   </Teleport>
-  <component v-else-if="open" :is="$attrs.onSubmit ? 'form' : 'section'" ref="panel" class="app-sheet" :class="[`app-sheet--${variant}`, panelClass]" role="dialog" :aria-labelledby="titleId" :aria-describedby="descriptionId" :aria-label="label" v-bind="$attrs">
+  <component v-else-if="open" :is="$attrs.onSubmit ? 'form' : 'section'" ref="panel" class="app-sheet" :class="[`app-sheet--${variant}`, panelClass]" role="dialog" :aria-labelledby="titleId" :aria-describedby="descriptionId" :aria-label="label" tabindex="-1" v-bind="$attrs" @keydown="keydown">
     <slot />
   </component>
 </template>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 452a53f..97d2af0 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -27,7 +27,7 @@ main{container-type:inline-size;min-width:0;padding:var(--space-28) var(--space-
 .list-drag-handle{width:44px;min-width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--list-drag-handle-ink);cursor:grab;touch-action:none;border-radius:8px}.list-drag-handle svg{width:15px;height:15px}.list-row{touch-action:pan-y}.list-row.list-dragging{position:relative;z-index:8;opacity:.8;box-shadow:0 10px 24px rgba(78,58,34,.2);transform:translateY(var(--list-drag-y));transition:none;pointer-events:none;background:var(--surface-soft)}.folder-row.list-drop-target{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.list-root-drop.list-drop-target{background:var(--accent-soft);color:var(--accent-ink);border-radius:var(--radius-control)}.list-row.list-reorder-target{box-shadow:inset 0 2px 0 var(--accent)}.sidebar-action-sheet .app-sheet__body button:disabled{opacity:.55;cursor:default}.sidebar-action-sheet{width:min(320px,calc(100vw - 24px));margin:var(--space-12);border:1px solid var(--border-cream);border-radius:var(--radius-panel);box-shadow:var(--highlight-inner),var(--shadow-raised);overflow:hidden}.sidebar-action-header.app-sheet__header{align-items:flex-start;min-height:64px;padding:var(--space-12) var(--space-14) var(--space-12)}.sidebar-action-header>div{min-width:0;display:grid;gap:2px}.sidebar-action-header b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.sidebar-action-kind,.sidebar-action-group-title{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--text-secondary)}.sidebar-action-body.app-sheet__body{gap:8px;padding:var(--space-10)}.sidebar-action-group{display:grid;gap:2px;padding:var(--space-6);border:1px solid var(--border-cream);border-radius:var(--radius-card);background:var(--surface-soft)}.sidebar-action-group button,.sidebar-action-danger button{width:100%;min-height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;border:0;border-radius:var(--radius-control);background:transparent;padding:0 var(--space-10);text-align:left}.sidebar-action-group button:hover:not(:disabled){background:var(--sidebar-action-group-bg)}.sidebar-action-group button span,.sidebar-action-danger button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-action-danger{border-top:1px solid var(--sidebar-action-danger-border);padding:var(--space-8) var(--space-6) var(--space-6);display:grid;gap:7px}.sidebar-action-danger>span{font-size:11px;line-height:1.4;color:var(--danger);padding:0 var(--space-4)}.sidebar-action-danger button.danger{color:var(--danger);background:var(--sidebar-action-danger-bg)}
 .list-editor-sheet{width:min(460px,calc(100vw - 24px));margin:var(--space-12);border:1px solid var(--border-cream);border-radius:var(--radius-panel);background:var(--surface-raised);box-shadow:var(--highlight-inner),var(--shadow-raised);overflow:hidden}@media(min-width:931px){.app-sheet-mask:has(.list-editor-sheet){place-items:center;padding:var(--space-24)}.app-sheet-mask:has(.list-editor-sheet) .list-editor-sheet{margin:0}}.list-editor-header.app-sheet__header{min-height:64px;padding:var(--space-10) var(--space-16) var(--space-10) var(--space-20)}.list-editor-header h2{margin:0;font-size:20px;letter-spacing:-.02em}.list-editor-form{display:grid;gap:17px;padding:var(--space-18) var(--space-20)}.list-editor-form>label{display:grid;gap:7px;color:var(--text-secondary);font-size:12px;font-weight:700}.list-editor-form input,.list-editor-form select{width:100%;min-height:46px;padding:0 var(--space-12)}.list-editor-form label>small{color:var(--text-secondary);font-size:11px;font-weight:400}.list-editor-error{margin:0;padding:var(--space-8) var(--space-10);border-radius:var(--radius-control);background:var(--error-wash);color:var(--danger);font-size:12px}.list-editor-danger{border-top:1px solid var(--border-cream);padding-top:var(--space-16);display:flex;align-items:center;justify-content:space-between;gap:16px}.list-editor-danger b,.list-editor-danger small{display:block}.list-editor-danger b{font-size:13px}.list-editor-danger small{margin-top:var(--space-4);color:var(--text-secondary);font-size:11px;line-height:1.45}.list-editor-danger .danger-button{flex:0 0 auto}.list-editor-footer.app-sheet__footer{position:static;padding:var(--space-12) var(--space-20) var(--space-16);background:var(--surface-soft)}.list-editor-footer .primary-small{min-width:100px}@media(max-width:930px){.list-editor-sheet{width:100%;max-width:100%}.list-editor-form{padding:var(--space-16)}.list-editor-danger{align-items:flex-start;flex-direction:column}.list-editor-danger .danger-button{width:100%;min-height:44px}.list-editor-footer.app-sheet__footer{padding:12px 17px calc(12px + env(safe-area-inset-bottom))}.list-editor-footer>button{min-height:44px;flex:1}}
 .archived-lists{position:relative;margin-top:var(--space-4)}.archived-lists-toggle{min-height:44px;width:100%;display:flex;align-items:center;gap:8px;border:0;border-radius:var(--radius-control);background:transparent;padding:0 var(--space-12);color:var(--text-secondary);text-align:left;font-size:12px;font-weight:600}.archived-lists-toggle:hover:not(:disabled){background:rgba(255,255,255,.52)}.archived-lists-toggle:focus-visible,.archived-row-menu-trigger:focus-visible,.archived-row-actions button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.archived-lists-toggle:disabled{cursor:default;color:var(--disabled-ink)}.archived-lists-toggle svg{width:15px;height:15px;transition:transform .16s ease}.archived-lists-toggle svg.expanded{transform:rotate(90deg)}.archived-list-items{display:grid;transition:opacity .16s ease}.archived-row{min-height:44px;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;padding-left:var(--space-36);color:var(--text-secondary)}.archived-row-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.archived-row-menu{display:grid;place-items:center}.archived-row-menu-trigger{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--radius-control);background:transparent;color:var(--trigger-ink)}.archived-row-menu-trigger svg{width:15px;height:15px}.archived-action-mask{display:contents}.archived-row-actions{position:fixed;z-index:70;width:164px;display:grid;gap:2px;padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--border-cream);border-radius:var(--radius-control);box-shadow:var(--shadow-raised)}.archived-row-actions button{min-height:44px;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;background:transparent;padding:var(--space-8) var(--space-10);text-align:left;font-size:12px}.archived-row-actions button:hover{background:var(--archived-row-actions-bg)}.archived-row-actions svg{width:15px;height:15px}@media(max-width:930px){.archived-action-mask{display:block;position:fixed;z-index:60;inset:0;background:rgba(45,38,31,.3)}.archived-row-actions{position:fixed;z-index:61;left:0;right:0;top:auto;bottom:0;width:100%;padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0}.archived-row-actions button{font-size:14px}}@media(prefers-reduced-motion:reduce){.archived-lists-toggle svg,.archived-list-items{transition:none}}
-.detail{min-width:0;border-left:1px solid var(--border-cream);background:var(--detail-bg);overflow:auto}.detail-head{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-20);border-bottom:1px solid var(--border-cream);font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.paper{margin:var(--space-20);padding:var(--space-28) var(--space-20);min-height:180px;background:var(--white);border:1px solid var(--border-cream);border-radius:var(--radius-control);box-shadow:0 4px 18px rgba(76,57,34,.05);display:grid;place-items:center;align-content:center;text-align:center;color:var(--text-secondary)}.paper svg{width:32px;height:32px;color:var(--paper-ink-2);margin-bottom:var(--space-12)}.paper b{color:var(--paper-ink)}.paper p{font-size:13px;line-height:1.6}.detail-form{min-width:0;grid-template-columns:minmax(0,1fr);padding:var(--space-18);display:grid;gap:12px}.detail-form>*{min-width:0}.detail-title{display:flex;align-items:flex-start;gap:10px}.detail-title .detail-task-check{width:44px;height:44px;flex:0 0 44px;margin-top:0}.detail-title textarea{flex:1;border:0;background:transparent;resize:none;outline:none;font-size:19px;line-height:1.4;font-weight:700}.detail-form>label{grid-template-columns:80px 1fr;align-items:center}.detail-form>label input,.detail-form>label select{padding:var(--space-8)}.task-detail-field-input{width:190px!important;max-width:100%;justify-self:end}.task-detail-due-input{padding-inline:var(--space-8)!important}.field{display:grid;gap:7px}.field-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--text-secondary)}.hint{font-size:12px;color:var(--text-secondary)}.markdown-mode-switch{display:flex;background:var(--markdown-mode-switch-bg);padding:var(--space-2);border-radius:7px}.markdown-mode-switch button{min-height:30px;border:0;background:transparent;padding:var(--space-4) var(--space-8);border-radius:6px;font-size:11px}.markdown-mode-switch button.active{background:var(--white);color:var(--accent);box-shadow:0 1px 3px rgba(78,58,34,.08)}.markdown-editor-shell{min-width:0;border:1px solid var(--border-cream);border-radius:var(--radius-control);background:var(--white);overflow:hidden}.markdown-toolbar{display:flex;align-items:center;gap:2px;overflow-x:auto;padding:var(--space-4);background:var(--markdown-toolbar-bg);border-bottom:1px solid var(--border-cream);scrollbar-width:none}.markdown-toolbar::-webkit-scrollbar{display:none}.markdown-toolbar button{min-width:44px;min-height:44px;flex:0 0 44px;border:0;border-radius:8px;background:transparent;color:var(--markdown-toolbar-ink);display:grid;place-items:center;padding:0}.markdown-toolbar button:hover{background:var(--white);color:var(--accent)}.markdown-toolbar button svg{width:16px;height:16px}.markdown-toolbar .markdown-codeblock{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown textarea{width:100%;min-height:180px;border:0;background:var(--white);border-radius:0;padding:var(--space-12);resize:vertical;outline:none;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown textarea:focus{box-shadow:inset 0 0 0 2px rgba(241,90,41,.15)}.markdown-preview{min-height:180px;max-height:360px;overflow:auto;padding:var(--space-14) var(--space-14);background:var(--white);border:1px solid var(--border-cream);border-radius:var(--radius-control);color:var(--text-primary);font-size:13px;line-height:1.65;overflow-wrap:anywhere}.markdown-preview-empty{color:var(--text-secondary);display:grid;place-items:center}.markdown-preview>:first-child{margin-top:0}.markdown-preview>:last-child{margin-bottom:0}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{line-height:1.3;color:var(--text-primary)}.markdown-preview h1{margin:var(--space-4) 0 var(--space-12);font-size:21px}.markdown-preview h2{margin:var(--space-16) 0 var(--space-8);font-size:18px}.markdown-preview h3{margin:var(--space-14) 0 var(--space-8);font-size:16px}.markdown-preview p{margin:0 0 var(--space-10)}.markdown-preview ul,.markdown-preview ol{margin:var(--space-8) 0 var(--space-12);padding-left:var(--space-24)}.markdown-preview li{margin:var(--space-4) 0}.markdown-preview li>p{margin:0}.markdown-preview blockquote{margin:var(--space-10) 0;padding:var(--space-6) var(--space-12);border-left:3px solid var(--markdown-preview-border);background:var(--markdown-preview-bg-3);color:var(--markdown-preview-ink)}.markdown-preview code{background:var(--markdown-preview-bg-2);padding:var(--space-2) var(--space-4);border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}.markdown-preview pre{max-width:100%;overflow:auto;margin:var(--space-10) 0;padding:var(--space-12);background:var(--markdown-preview-bg);color:var(--code-ink);border:1px solid var(--markdown-preview-border-2);border-radius:var(--radius-control);font-size:12px;line-height:1.55}.markdown-preview pre code{padding:0;background:transparent;color:inherit}.markdown-preview a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.markdown-preview hr{border:0;border-top:1px solid var(--border-cream);margin:var(--space-16) 0}.markdown-preview>.contains-task-list{list-style:none;padding-left:var(--space-2)}.markdown-preview .contains-task-list .contains-task-list{padding-left:var(--space-24)}.markdown-preview .task-list-item{list-style:none;margin:var(--space-4) 0}.markdown-preview .task-list-item-checkbox{width:16px;height:16px;margin:0 var(--space-6) 0 0;vertical-align:-3px;accent-color:var(--accent)}.subtasks{display:grid;gap:5px}.subtask-detail{width:100%;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal;display:flex;align-items:center;gap:8px;border:0;background:var(--white);padding:var(--space-8);border-radius:7px;text-align:left}.subtask-detail .subtask-check{width:44px;height:44px;flex:0 0 44px;margin:-8px 0 -8px -8px;cursor:pointer;pointer-events:auto}.strike{text-decoration:line-through;color:var(--text-secondary)}.detail-actions{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-10);border-top:1px solid var(--border-cream)}.secondary{border:1px solid var(--border-cream);background:var(--white);padding:var(--space-8) var(--space-10);border-radius:8px;font-weight:600}.danger-text{border:0;background:transparent;color:var(--danger);display:flex;align-items:center;gap:5px;font-size:12px}.danger-text svg{width:14px}
+.detail{min-width:0;border-left:1px solid var(--border-cream);background:var(--detail-bg);overflow:auto}.detail-head{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-20);border-bottom:1px solid var(--border-cream);font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.paper{margin:var(--space-20);padding:var(--space-28) var(--space-20);min-height:180px;background:var(--white);border:1px solid var(--border-cream);border-radius:var(--radius-control);box-shadow:0 4px 18px rgba(76,57,34,.05);display:grid;place-items:center;align-content:center;text-align:center;color:var(--text-secondary)}.paper svg{width:32px;height:32px;color:var(--paper-ink-2);margin-bottom:var(--space-12)}.paper b{color:var(--paper-ink)}.paper p{font-size:13px;line-height:1.6}.detail-form{min-width:0;grid-template-columns:minmax(0,1fr);padding:var(--space-18);display:grid;gap:12px}.detail-form>*{min-width:0}.detail-title{display:flex;align-items:flex-start;gap:10px}.detail-title .detail-task-check{width:44px;height:44px;flex:0 0 44px;margin-top:0}.detail-title textarea{flex:1;border:0;background:transparent;resize:none;outline:none;font-size:19px;line-height:1.4;font-weight:700}.detail-form>label{grid-template-columns:80px 1fr;align-items:center}.detail-form>label input,.detail-form>label select{padding:var(--space-8)}.task-detail-field-input{width:190px!important;max-width:100%;justify-self:end}.task-detail-due-input{padding-inline:var(--space-8)!important}.field{display:grid;gap:7px}.field-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--text-secondary)}.hint{font-size:12px;color:var(--text-secondary)}.markdown-mode-switch{display:flex;gap:3px;background:var(--markdown-mode-switch-bg);padding:var(--space-2);border-radius:7px}.markdown-mode-switch button{min-height:30px;border:0;background:transparent;padding:var(--space-4) var(--space-8);border-radius:6px;font-size:11px}.markdown-mode-switch button.active{background:var(--white);color:var(--accent);box-shadow:0 1px 3px rgba(78,58,34,.08)}.markdown-editor-shell{min-width:0;border:1px solid var(--border-cream);border-radius:var(--radius-control);background:var(--white);overflow:hidden}.markdown-toolbar{display:flex;align-items:center;gap:2px;overflow-x:auto;padding:var(--space-4);background:var(--markdown-toolbar-bg);border-bottom:1px solid var(--border-cream);scrollbar-width:none}.markdown-toolbar::-webkit-scrollbar{display:none}.markdown-toolbar button{min-width:44px;min-height:44px;flex:0 0 44px;border:0;border-radius:8px;background:transparent;color:var(--markdown-toolbar-ink);display:grid;place-items:center;padding:0}.markdown-toolbar button:hover{background:var(--white);color:var(--accent)}.markdown-toolbar button svg{width:16px;height:16px}.markdown-toolbar .markdown-codeblock{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown textarea{width:100%;min-height:180px;border:0;background:var(--white);border-radius:0;padding:var(--space-12);resize:vertical;outline:none;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.markdown textarea:focus{box-shadow:inset 0 0 0 2px rgba(241,90,41,.15)}.markdown-preview{min-height:180px;max-height:360px;overflow:auto;padding:var(--space-14) var(--space-14);background:var(--white);border:1px solid var(--border-cream);border-radius:var(--radius-control);color:var(--text-primary);font-size:13px;line-height:1.65;overflow-wrap:anywhere}.markdown-preview-empty{color:var(--text-secondary);display:grid;place-items:center}.markdown-preview>:first-child{margin-top:0}.markdown-preview>:last-child{margin-bottom:0}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{line-height:1.3;color:var(--text-primary)}.markdown-preview h1{margin:var(--space-4) 0 var(--space-12);font-size:21px}.markdown-preview h2{margin:var(--space-16) 0 var(--space-8);font-size:18px}.markdown-preview h3{margin:var(--space-14) 0 var(--space-8);font-size:16px}.markdown-preview p{margin:0 0 var(--space-10)}.markdown-preview ul,.markdown-preview ol{margin:var(--space-8) 0 var(--space-12);padding-left:var(--space-24)}.markdown-preview li{margin:var(--space-4) 0}.markdown-preview li>p{margin:0}.markdown-preview blockquote{margin:var(--space-10) 0;padding:var(--space-6) var(--space-12);border-left:3px solid var(--markdown-preview-border);background:var(--markdown-preview-bg-3);color:var(--markdown-preview-ink)}.markdown-preview code{background:var(--markdown-preview-bg-2);padding:var(--space-2) var(--space-4);border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}.markdown-preview pre{max-width:100%;overflow:auto;margin:var(--space-10) 0;padding:var(--space-12);background:var(--markdown-preview-bg);color:var(--code-ink);border:1px solid var(--markdown-preview-border-2);border-radius:var(--radius-control);font-size:12px;line-height:1.55}.markdown-preview pre code{padding:0;background:transparent;color:inherit}.markdown-preview a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.markdown-preview hr{border:0;border-top:1px solid var(--border-cream);margin:var(--space-16) 0}.markdown-preview>.contains-task-list{list-style:none;padding-left:var(--space-2)}.markdown-preview .contains-task-list .contains-task-list{padding-left:var(--space-24)}.markdown-preview .task-list-item{list-style:none;margin:var(--space-4) 0}.markdown-preview .task-list-item-checkbox{width:16px;height:16px;margin:0 var(--space-6) 0 0;vertical-align:-3px;accent-color:var(--accent)}.subtasks{display:grid;gap:5px}.subtask-detail{width:100%;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal;display:flex;align-items:center;gap:8px;border:0;background:var(--white);padding:var(--space-8);border-radius:7px;text-align:left}.subtask-detail .subtask-check{width:44px;height:44px;flex:0 0 44px;margin:-8px 0 -8px -8px;cursor:pointer;pointer-events:auto}.strike{text-decoration:line-through;color:var(--text-secondary)}.detail-actions{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-10);border-top:1px solid var(--border-cream)}.secondary{border:1px solid var(--border-cream);background:var(--white);padding:var(--space-8) var(--space-10);border-radius:8px;font-weight:600}.danger-text{border:0;background:transparent;color:var(--danger);display:flex;align-items:center;gap:5px;font-size:12px}.danger-text svg{width:14px}
 .task-detail-due-row{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:10px;color:var(--text-secondary);font-size:12px;font-weight:600}.task-detail-due-controls{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.task-detail-due-controls>.task-detail-due-input{flex:1 1 150px}.field-hint{color:var(--text-secondary);font-size:11px;font-weight:400}.after-completion-fields{display:grid;gap:5px;padding:var(--space-10) var(--space-12);border:1px solid var(--border-cream);border-radius:var(--radius-control);background:var(--surface-soft);color:var(--text-secondary);font-size:12px}.after-completion-fields>div{display:flex;align-items:center;gap:7px;min-height:44px}.after-completion-fields input{width:76px;min-height:44px;border:1px solid var(--border-cream);border-radius:8px;background:var(--white);padding:0 var(--space-10)}.after-completion-fields small{color:var(--text-secondary);line-height:1.5}.repeat-save{width:100%;min-height:44px}.repeat-custom-fields{display:grid;gap:10px;padding:var(--space-12);border:1px solid var(--border-cream);border-radius:var(--radius-control);background:var(--surface-soft)}.repeat-custom-fields>div,.repeat-custom-fields>label{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:12px}.repeat-custom-fields input[type="number"]{width:72px}.repeat-custom-fields input,.repeat-custom-fields select{min-height:44px;border:1px solid var(--border-cream);border-radius:8px;background:var(--white);padding:var(--space-6) var(--space-8)}.weekday-picker{display:flex;gap:4px;flex-wrap:wrap}.weekday-picker label{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border-cream);border-radius:50%;background:var(--white)}.weekday-picker input{position:absolute;opacity:0;pointer-events:none}.weekday-picker label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--white)}.toast,.error-toast{position:fixed;z-index:50;left:50%;bottom:24px;transform:translateX(-50%);background:var(--surface-inverse);color:var(--white);border-radius:var(--radius-control);padding:var(--space-10) var(--space-14);box-shadow:var(--shadow-raised);font-size:13px}.error-toast{background:var(--danger);display:flex;align-items:center;gap:10px}.error-toast button{border:0;background:transparent;color:var(--white);padding:0}.toast-enter-active,.toast-leave-active{transition:.2s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%,8px)}
 @media(max-width:930px){.repeat-custom-fields{padding:var(--space-10);gap:8px}.repeat-custom-fields>div,.repeat-custom-fields>label{min-width:0;flex-wrap:wrap;gap:6px}}
 @media(max-width:1050px) and (min-width:931px){main{padding-inline:var(--space-24)}main.today-main>.topbar>.icon{left:24px}}
@@ -58,7 +58,7 @@ main{container-type:inline-size;min-width:0;padding:var(--space-28) var(--space-
 .unified-fab{display:grid;place-items:center;position:fixed;z-index:60;right:20px;bottom:22px;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--white);box-shadow:0 8px 20px rgba(241,90,41,.28);transition:left .2s cubic-bezier(.2,.8,.3,1),top .2s cubic-bezier(.2,.8,.3,1),transform .16s ease,box-shadow .16s ease;touch-action:none;user-select:none}.unified-fab>svg{width:25px;height:25px}.unified-fab:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.unified-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(241,90,41,.32)}.unified-fab:active:not(.dragging){transform:scale(.96)}.unified-fab.dragging{transform:scale(1.06);box-shadow:0 12px 28px rgba(241,90,41,.36);transition:transform .16s ease,box-shadow .16s ease}.unified-fab.snapping{box-shadow:0 10px 24px rgba(241,90,41,.32)}.app-overlay{position:fixed;inset:0;z-index:80;display:grid}.app-sheet-mask.app-sheet-mask{background:var(--scrim);overscroll-behavior:contain}.app-overlay>.detail{transform:none}.app-sheet{min-height:0;overflow:hidden;background:var(--surface-raised)}.app-sheet__header{min-height:64px;flex:0 0 64px;position:sticky;z-index:3;top:0;background:var(--surface-raised);border-bottom:1px solid var(--border-cream);padding:0 var(--space-18)}.app-sheet__header>div{min-width:0}.app-sheet__header h2,.app-sheet__header h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-sheet__header>button{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--radius-control)}.app-sheet__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;gap:14px;padding:var(--space-16) var(--space-18)}.app-sheet__footer{position:sticky;bottom:0;z-index:3;margin:0;background:var(--surface-raised);border-top:1px solid var(--border-cream);padding:var(--space-12) var(--space-18);padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end;gap:8px}.app-sheet__danger{border-top:1px solid var(--app-sheet-danger-border);background:var(--sheet-danger-bg);padding:var(--space-12) var(--space-18);padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end}.app-sheet--actions .app-sheet__body{gap:6px;padding:8px 16px calc(16px + env(safe-area-inset-bottom))}.app-sheet--actions .app-sheet__body>button{min-height:50px;width:100%;display:flex;align-items:center;gap:12px;border:0;background:var(--white);padding:var(--space-12);border-radius:var(--radius-control);text-align:left}
 @media(max-width:930px){.app-sheet{width:100%;max-height:min(88dvh,760px);display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:var(--radius-panel) var(--radius-panel) 0 0!important;padding:0!important}.app-sheet--detail,.app-sheet--create{max-width:none!important}.app-sheet-mask{padding:0!important;place-items:end center!important;align-items:flex-end!important}.app-sheet__header{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%}.app-sheet__body{width:100%;flex:1 1 auto}.app-sheet__body label{display:grid;gap:6px}.app-sheet__footer{width:100%;flex:0 0 auto}.app-sheet__footer .primary-small{min-width:124px}.app-sheet__danger{width:100%;flex:0 0 auto}.app-sheet__danger .danger-text{width:100%;min-height:48px;justify-content:center}}
 
-.calendar-picker-layer{position:fixed;z-index:90;inset:0;pointer-events:none}.calendar-picker{position:fixed;width:328px;background:var(--surface-raised);border:1px solid var(--calendar-picker-border);border-radius:var(--radius-panel);box-shadow:0 18px 46px rgba(56,40,24,.2);padding:var(--space-14);display:grid;gap:10px;pointer-events:auto;color:var(--text-primary)}.calendar-picker__header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:4px}.calendar-picker__header h3{margin:0;text-align:center;font-size:16px}.calendar-picker__header button,.calendar-picker__grid button{border:0;background:transparent;display:grid;place-items:center}.calendar-picker__header button{width:40px;height:40px;border-radius:var(--radius-control)}.calendar-picker__header svg{width:18px}.calendar-picker__close{display:none!important}.calendar-picker__weekdays,.calendar-picker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-picker__weekdays span{text-align:center;color:var(--text-secondary);font-size:11px;padding:var(--space-2) 0}.calendar-picker__grid button{height:34px;border-radius:var(--radius-control);color:var(--calendar-picker-grid-ink);font-size:13px}.calendar-picker__grid button:hover{background:var(--picker-day-hover)}.calendar-picker__grid button:focus-visible{background:var(--picker-day-hover);outline:3px solid var(--focus-ring);outline-offset:-3px}.calendar-picker__grid button.outside{color:var(--text-secondary)}.calendar-picker__grid button.today{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-ink)}.calendar-picker__grid button.selected{background:var(--accent);color:var(--white)}.calendar-picker__grid button.selected.today{box-shadow:inset 0 0 0 1px var(--white)}.calendar-picker__footer{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:4px;border-top:1px solid var(--border-hairline);padding-top:var(--space-10)}.calendar-picker__footer button{min-height:44px;border:0;background:transparent;border-radius:var(--radius-control);padding:0 var(--space-8);color:var(--calendar-picker-footer-ink);font-weight:600}.calendar-picker__footer button:hover{background:var(--picker-day-hover)}.calendar-picker__footer .calendar-picker__done{background:var(--accent);color:var(--white)}.calendar-picker__footer .calendar-picker__done:hover{background:var(--calendar-picker-footer-bg)}@media(max-width:600px){.calendar-picker-layer{pointer-events:auto;background:rgba(45,38,31,.3);display:flex;align-items:flex-end}.calendar-picker{position:relative!important;left:auto!important;top:auto!important;width:100%;height:min(520px,72dvh);border-width:1px 0 0;border-radius:24px 24px 0 0;padding:18px 18px calc(16px + env(safe-area-inset-bottom));grid-template-rows:auto auto 1fr auto}.calendar-picker__header{grid-template-columns:44px 1fr 44px 44px}.calendar-picker__close{display:grid!important}.calendar-picker__grid{align-content:stretch}.calendar-picker__grid button{height:auto;min-height:42px}.calendar-picker__footer button{min-height:44px}}.task-compose-sheet{width:100%;max-height:min(88dvh,720px);overflow:auto;background:var(--surface-raised);border-radius:24px 24px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -16px 42px rgba(56,40,24,.2);display:grid;gap:14px;transform-origin:var(--fab-origin-x,calc(100% - 44px)) var(--fab-origin-y,100%)}@media(min-width:931px){.task-compose-sheet:not(.habit-compose-sheet){width:min(560px,calc(100vw - 48px));height:min(520px,82dvh);max-height:none;padding:0;display:flex;flex-direction:column;gap:0;overflow:hidden}.app-sheet-mask:has(>.task-compose-sheet:not(.habit-compose-sheet)){place-items:center;padding:var(--space-24)}}.task-compose-sheet header{display:flex;align-items:center;justify-content:space-between}.task-compose-sheet header small{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em}.task-compose-sheet h2{margin:var(--space-2) 0 0;font-size:22px}.task-compose-sheet label{display:grid;gap:6px;color:var(--text-secondary);font-size:12px;font-weight:600}.task-compose-sheet input,.task-compose-sheet select,.task-compose-sheet textarea{width:100%;border:1px solid var(--border-cream);background:var(--white);border-radius:var(--radius-control);padding:var(--space-12);outline:none;resize:vertical}.task-compose-sheet input:focus,.task-compose-sheet select:focus,.task-compose-sheet textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,90,41,.1)}.task-compose-row{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:10px}.task-compose-date-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.task-compose-date-control{position:relative;display:flex;align-items:center;min-width:0}.task-compose-date-chip{position:relative;display:inline-flex!important;grid-template-columns:none!important;align-items:center;flex-direction:row!important;gap:7px!important;width:auto;min-height:44px;padding:0 var(--space-12);border:1px solid var(--border-cream);border-radius:999px;background:var(--row-hover);color:var(--task-compose-date-chip-ink)!important;font-size:13px!important;font-weight:700!important;overflow:hidden;cursor:pointer}.task-compose-date-chip.selected{border-color:var(--task-compose-date-chip-border);background:var(--accent-soft);color:var(--accent-ink)!important}.task-compose-date-chip svg{width:16px;height:16px;flex:none}.task-compose-date-clear{display:grid;place-items:center;width:34px;height:34px;margin-left:var(--space-2);border:0;border-radius:50%;background:transparent;color:var(--text-secondary)}.task-compose-date-clear:hover{background:var(--chip-clear-hover);color:var(--text-primary)}.task-compose-date-clear svg{width:15px;height:15px}.task-compose-time-add{min-width:0;height:40px;padding:0 var(--space-12);border:1px dashed var(--task-compose-time-add-border);border-radius:999px;background:transparent;color:var(--accent);font-weight:700}.task-compose-time-add:hover{border-color:var(--accent);background:var(--task-compose-time-add-bg)}.task-compose-time-chip{display:inline-flex!important;grid-template-columns:none!important;align-items:center;flex-direction:row!important;gap:5px!important;width:auto;color:var(--text-secondary)!important;font-size:12px!important}.task-compose-time-chip input{width:102px!important;min-width:0;padding:var(--space-8) var(--space-8)!important;border-radius:999px!important}.task-compose-time-remove{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--text-secondary)}.task-compose-time-remove:hover{background:var(--chip-clear-hover);color:var(--text-primary)}.task-compose-time-remove svg{width:15px;height:15px}.task-compose-sheet footer{display:flex;justify-content:flex-end;gap:9px;padding-top:var(--space-4)}.task-compose-sheet button:disabled{cursor:not-allowed}@media(max-width:930px){.unified-fab{bottom:calc(82px + env(safe-area-inset-bottom))}}@media(max-width:930px){.today-filtered-empty-note{min-height:44px;padding:0 var(--space-4) 0 var(--space-12)}.today-filtered-empty-note>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(prefers-reduced-motion:reduce){.unified-fab{animation:none!important;transition:none!important}.unified-fab:hover,.unified-fab:active{transform:none!important}*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
+.calendar-picker-layer{position:fixed;z-index:90;inset:0;pointer-events:none}.calendar-picker{position:fixed;width:328px;background:var(--surface-raised);border:1px solid var(--calendar-picker-border);border-radius:var(--radius-panel);box-shadow:0 18px 46px rgba(56,40,24,.2);padding:var(--space-14);display:grid;gap:10px;pointer-events:auto;color:var(--text-primary)}.calendar-picker__header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:4px}.calendar-picker__header h3{margin:0;text-align:center;font-size:16px}.calendar-picker__header button,.calendar-picker__grid button{border:0;background:transparent;display:grid;place-items:center}.calendar-picker__header button{width:40px;height:40px;border-radius:var(--radius-control)}.calendar-picker__header svg{width:18px}.calendar-picker__close{display:none!important}.calendar-picker__weekdays,.calendar-picker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-picker__weekdays span{text-align:center;color:var(--text-secondary);font-size:11px;padding:var(--space-2) 0}.calendar-picker__grid button{height:34px;border-radius:var(--radius-control);color:var(--calendar-picker-grid-ink);font-size:13px}.calendar-picker__grid button:hover{background:var(--picker-day-hover)}.calendar-picker__grid button:focus-visible{background:var(--picker-day-hover);outline:3px solid var(--focus-ring);outline-offset:-3px}.calendar-picker__grid button.outside{color:var(--text-secondary)}.calendar-picker__grid button.today{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-ink)}.calendar-picker__grid button.selected{background:var(--accent);color:var(--white)}.calendar-picker__grid button.selected.today{box-shadow:inset 0 0 0 1px var(--white)}.calendar-picker__footer{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:4px;border-top:1px solid var(--border-hairline);padding-top:var(--space-10)}.calendar-picker__footer button{min-height:44px;border:0;background:transparent;border-radius:var(--radius-control);padding:0 var(--space-8);color:var(--calendar-picker-footer-ink);font-weight:600}.calendar-picker__footer button:hover{background:var(--picker-day-hover)}.calendar-picker__footer .calendar-picker__done{background:var(--accent);color:var(--white)}.calendar-picker__footer .calendar-picker__done:hover{background:var(--calendar-picker-footer-bg)}@media(max-width:600px){.calendar-picker-layer{pointer-events:auto;background:rgba(45,38,31,.3);display:flex;align-items:flex-end}.calendar-picker{position:relative!important;left:auto!important;top:auto!important;width:100%;height:min(520px,72dvh);border-width:1px 0 0;border-radius:24px 24px 0 0;padding:18px 18px calc(16px + env(safe-area-inset-bottom));grid-template-rows:auto auto 1fr auto}.calendar-picker__header{grid-template-columns:44px 1fr 44px 44px}.calendar-picker__close{display:grid!important}.calendar-picker__grid{align-content:stretch}.calendar-picker__grid button{height:auto;min-height:42px}.calendar-picker__footer button{min-height:44px}}.task-compose-sheet{width:100%;max-height:min(88dvh,720px);overflow:auto;background:var(--surface-raised);border-radius:24px 24px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -16px 42px rgba(56,40,24,.2);display:grid;gap:14px;transform-origin:var(--fab-origin-x,calc(100% - 44px)) var(--fab-origin-y,100%)}@media(min-width:931px){.task-compose-sheet:not(.habit-compose-sheet){width:min(560px,calc(100vw - 48px));height:min(520px,82dvh);max-height:none;padding:0;display:flex;flex-direction:column;gap:0;overflow:hidden}.app-sheet-mask:has(>.task-compose-sheet:not(.habit-compose-sheet)){place-items:center;padding:var(--space-24)}}.task-compose-sheet header{display:flex;align-items:center;justify-content:space-between}.task-compose-sheet header small{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em}.task-compose-sheet h2{margin:var(--space-2) 0 0;font-size:22px}.task-compose-sheet label{display:grid;gap:6px;color:var(--text-secondary);font-size:12px;font-weight:600}.task-compose-sheet input,.task-compose-sheet select,.task-compose-sheet textarea{width:100%;border:1px solid var(--border-cream);background:var(--white);border-radius:var(--radius-control);padding:var(--space-12);outline:none;resize:vertical}.task-compose-sheet input:focus,.task-compose-sheet select:focus,.task-compose-sheet textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,90,41,.1)}.task-compose-row{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:10px}.task-compose-date-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.task-compose-date-control{position:relative;display:flex;align-items:center;min-width:0}.task-compose-date-chip{position:relative;display:inline-flex!important;grid-template-columns:none!important;align-items:center;flex-direction:row!important;gap:7px!important;width:auto;min-height:44px;padding:0 var(--space-12);border:1px solid var(--border-cream);border-radius:999px;background:var(--row-hover);color:var(--task-compose-date-chip-ink)!important;font-size:13px!important;font-weight:700!important;overflow:hidden;cursor:pointer}.task-compose-date-chip.selected{border-color:var(--task-compose-date-chip-border);background:var(--accent-soft);color:var(--accent-ink)!important}.task-compose-date-chip svg{width:16px;height:16px;flex:none}.task-compose-date-clear{display:grid;place-items:center;width:44px;height:44px;margin-left:var(--space-2);border:0;border-radius:50%;background:transparent;color:var(--text-secondary)}.task-compose-date-clear:hover{background:var(--chip-clear-hover);color:var(--text-primary)}.task-compose-date-clear svg{width:15px;height:15px}.task-compose-time-add{min-width:0;height:40px;padding:0 var(--space-12);border:1px dashed var(--task-compose-time-add-border);border-radius:999px;background:transparent;color:var(--accent);font-weight:700}.task-compose-time-add:hover{border-color:var(--accent);background:var(--task-compose-time-add-bg)}.task-compose-time-chip{display:inline-flex!important;grid-template-columns:none!important;align-items:center;flex-direction:row!important;gap:5px!important;width:auto;color:var(--text-secondary)!important;font-size:12px!important}.task-compose-time-chip input{width:102px!important;min-width:0;padding:var(--space-8) var(--space-8)!important;border-radius:999px!important}.task-compose-time-remove{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-secondary)}.task-compose-time-remove:hover{background:var(--chip-clear-hover);color:var(--text-primary)}.task-compose-time-remove svg{width:15px;height:15px}.task-compose-sheet footer{display:flex;justify-content:flex-end;gap:9px;padding-top:var(--space-4)}.task-compose-sheet button:disabled{cursor:not-allowed}@media(max-width:930px){.unified-fab{bottom:calc(82px + env(safe-area-inset-bottom))}}@media(max-width:930px){.today-filtered-empty-note{min-height:44px;padding:0 var(--space-4) 0 var(--space-12)}.today-filtered-empty-note>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(prefers-reduced-motion:reduce){.unified-fab{animation:none!important;transition:none!important}.unified-fab:hover,.unified-fab:active{transform:none!important}*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
 .overdue-section{margin-top:var(--space-18)}.overdue-heading{color:var(--danger);margin-bottom:var(--space-6)}.overdue-heading span{min-width:22px;height:22px;padding:0 var(--space-6);display:inline-grid;place-items:center;border-radius:999px;background:var(--overdue-chip-bg);color:var(--danger);font-size:11px}.overdue-list{margin-bottom:var(--space-18)}.overdue-task{background:var(--sheet-danger-bg)}.task-tail{flex:0 1 auto;min-width:0;max-width:42%;display:flex;justify-content:flex-end;text-align:right;white-space:nowrap}.task-actions{display:flex;align-items:center;flex:0 0 auto}.task-row>.drag-handle,.task-row>.task-check,.task-actions>*{flex-shrink:0}.task-due{min-width:0;display:inline-flex;justify-content:flex-end;align-items:center}.task-due__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.task-due--overdue{color:var(--danger)}.task-due--neutral,.task-due--completed{color:var(--text-secondary)}.task-due--completed{opacity:.8}.pager{min-height:56px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin:var(--space-8) 0 var(--space-14);border-top:1px solid var(--border-hairline);background:transparent}.pager-button{min-width:0;min-height:44px;padding:0 var(--space-8);display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--accent-ink);font-size:13px;font-weight:600;box-shadow:none;transition:transform .14s ease,background-color .14s ease,color .14s ease}.pager-button svg{width:16px;height:16px;stroke-width:2}.pager-button:hover:not(:disabled){background:var(--pager-button-bg-2)}.pager-button:active:not(:disabled){transform:translateY(1px);background:var(--pager-button-bg)}.pager-button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:1px}.pager-button:disabled{cursor:not-allowed;background:transparent;color:var(--pager-button-ink)}.pager-button--previous{justify-self:stretch}.pager-button--next{justify-self:stretch}.pager-status{min-width:72px;display:grid;justify-items:center;gap:1px;color:var(--text-secondary);font-size:11px;font-variant-numeric:tabular-nums}.pager-status strong{color:var(--text-strong);font-size:13px;line-height:1.2}.pager-status span{color:var(--text-secondary);font-size:11px;line-height:1.2}.section-heading{display:flex;align-items:center;gap:7px;margin:var(--space-16) 0 var(--space-10);font-size:16px;line-height:1.35;color:var(--text-strong)}.section-heading svg{width:17px;height:17px;color:var(--accent)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.more-settings{border:1px solid var(--border-cream);border-radius:var(--radius-control);background:var(--white)}.more-settings summary{cursor:pointer;padding:var(--space-10) var(--space-12);color:var(--text-secondary);font-size:12px;font-weight:700}.more-settings-body{display:grid;gap:12px;padding:0 var(--space-12) var(--space-12)}.more-settings-body>label{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:7px;color:var(--text-secondary);font-size:12px;font-weight:600}.modal-input{width:100%;border:1px solid var(--border-cream);background:var(--white);padding:var(--space-10);border-radius:var(--radius-control);outline:none;font-size:16px}.purge-list-dialog{width:min(430px,92vw)}.purge-list-dialog p{margin:0;color:var(--text-secondary);line-height:1.65}.purge-list-dialog button{min-height:44px;min-width:88px}.purge-list-dialog button:disabled{cursor:not-allowed}.purge-list-error{padding:var(--space-10) var(--space-12);border-radius:var(--radius-control);background:var(--purge-list-error-bg)!important;color:var(--danger)!important;font-weight:600}.countdown-view{display:grid;gap:16px;padding-bottom:var(--space-36)}.countdown-content{display:grid;gap:12px}.countdown-summary{display:block;color:var(--text-secondary);font-size:12px;margin-top:-12px}.countdown-layout{display:grid;gap:22px;align-items:start}.countdown-timeline{display:grid;gap:20px;max-width:820px;width:100%;margin:0 auto}.countdown-group{display:grid;gap:2px}.countdown-group>h3{margin:0 0 var(--space-6);padding-left:var(--space-12);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.08em}.countdown-row{--countdown-tone:#d9a17c;position:relative;width:100%;min-height:66px;display:grid;grid-template-columns:minmax(0,1fr) 86px;align-items:center;gap:14px;border:0;border-bottom:1px solid var(--border-cream);border-radius:0;background:transparent;padding:var(--space-8) var(--space-10) var(--space-8) var(--space-16);text-align:left;color:inherit;transition:background .15s ease,transform .15s ease}.countdown-row:before{content:'';position:absolute;left:3px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--countdown-tone);transform:translateY(-50%)}.countdown-row:first-of-type{border-top:1px solid var(--border-cream)}.countdown-row:hover{background:var(--row-hover)}.countdown-row:active{transform:scale(.995)}.countdown-row.kind-anniversary{--countdown-tone:#b69b7d}.countdown-row.kind-birthday{--countdown-tone:#9cab8d}.countdown-row.today{--countdown-tone:#71856b}.countdown-row.past{--countdown-tone:#aaa094;opacity:.66}.countdown-main{min-width:0;display:grid;gap:4px}.countdown-main>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--text-primary)}.countdown-main>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:11px}.countdown-badges{display:flex;gap:5px}.countdown-badges em{font-style:normal;color:var(--text-secondary);font-size:11px}.countdown-badges em+em:before{content:'·';margin-right:var(--space-4);color:var(--badge-sep)}.countdown-state{display:grid;justify-items:end;gap:3px}.countdown-state strong{font-variant-numeric:tabular-nums;font-size:26px;line-height:1;color:var(--countdown-state-ink)}.countdown-state small{color:var(--text-secondary);font-size:11px}.countdown-row.today .countdown-state strong,.countdown-row.today .countdown-state small{color:var(--success)}.countdown-row.past .countdown-state strong{color:var(--text-secondary)}.countdown-focus{--countdown-tone:#d9a17c;width:min(720px,100%);min-height:140px;margin:0 auto;display:grid;place-content:center;justify-items:center;gap:4px;border:1px solid color-mix(in srgb,var(--countdown-tone) 34%,var(--border-cream));border-radius:var(--radius-card);background:color-mix(in srgb,var(--countdown-tone) 7%,var(--surface-raised));padding:var(--space-16) var(--space-24);text-align:center;color:inherit;box-shadow:none;transition:border-color .15s ease,background .15s ease}.countdown-focus:hover{border-color:color-mix(in srgb,var(--countdown-tone) 54%,var(--border-cream));background:color-mix(in srgb,var(--countdown-tone) 10%,var(--surface-raised))}.countdown-focus.kind-anniversary{--countdown-tone:#b69b7d}.countdown-focus.kind-birthday{--countdown-tone:#9cab8d}.countdown-focus>small{color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.1em}.countdown-focus h3{margin:var(--space-6) 0 0;font-size:20px;font-weight:700}.countdown-focus p{margin:1px 0 0;color:var(--text-secondary);font-size:11px}.countdown-number{display:flex;align-items:end;gap:6px;margin:var(--space-4) 0 var(--space-2)}.countdown-number strong{font-variant-numeric:tabular-nums;font-size:64px;line-height:.9;font-weight:700;letter-spacing:-.05em;color:var(--text-primary)}.countdown-number span{font-size:13px;color:var(--text-secondary);padding-bottom:var(--space-6)}.countdown-copy{font-size:12px;color:var(--countdown-copy-ink);font-weight:600}.countdown-empty{min-height:260px;background:var(--surface-raised);border:1px dashed var(--border-cream);border-radius:var(--radius-card);padding:var(--space-24);color:var(--text-secondary);text-align:center;display:grid;gap:9px;place-content:center;justify-items:center}.countdown-empty svg{color:var(--accent);width:30px;height:30px}.countdown-empty span{font-size:12px}.countdown-empty button{margin-top:var(--space-4)}.archived-toggle,.archived-countdowns button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border-cream);background:var(--white);border-radius:var(--radius-control);padding:var(--space-8) var(--space-10);font-size:12px}.archived-toggle{justify-self:start;min-height:44px}.archived-countdowns{display:grid;gap:0;border:1px solid var(--border-cream);border-radius:var(--radius-list);overflow:hidden;background:var(--surface-raised)}.archived-countdowns article{min-height:60px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;background:var(--surface-raised);border:0;padding:var(--space-6) var(--space-10)}.archived-countdowns article+article{border-top:1px solid var(--border-cream)}.archived-countdowns article>span{min-width:0;display:grid;gap:2px}.archived-countdowns article b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.archived-countdowns article small{color:var(--text-secondary)}.archived-countdowns article button{min-width:44px;min-height:44px;justify-content:center}.countdown-pinned-mark{color:var(--text-secondary);font-size:11px;font-weight:500}.countdown-detail-sheet{width:min(500px,100%);background:var(--surface-raised);border:1px solid var(--border-cream);border-radius:var(--radius-panel);box-shadow:0 12px 36px rgba(56,40,24,.18);padding:var(--space-18);display:grid;gap:16px}.countdown-detail-sheet header{display:grid;grid-template-columns:42px 1fr 44px;align-items:center;gap:10px}.countdown-detail-sheet header small{color:var(--text-secondary);font-size:11px}.countdown-detail-sheet header h3{margin:var(--space-2) 0 0;font-size:19px}.countdown-detail-sheet header button{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--text-secondary);border-radius:8px;width:44px;height:44px;display:grid;place-items:center}.countdown-modal header button{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--text-secondary);border-radius:8px;width:44px;height:44px;display:grid;place-items:center}.countdown-detail-days{display:flex;align-items:baseline;gap:6px;padding:var(--space-8) 0}.countdown-detail-days strong{font-variant-numeric:tabular-nums;font-size:46px;line-height:1}.countdown-detail-days span{color:var(--text-secondary)}.countdown-detail-days b{margin-left:auto;color:var(--accent);font-size:13px}.countdown-detail-sheet dl{margin:0;display:grid;gap:1px;background:var(--border-cream)}.countdown-detail-sheet dl div{display:grid;grid-template-columns:62px 1fr;gap:10px;background:var(--surface-raised);padding:var(--space-10) 0}.countdown-detail-sheet dt{color:var(--text-secondary);font-size:12px}.countdown-detail-sheet dd{margin:0;font-size:13px}.countdown-detail-sheet footer{display:flex;justify-content:flex-end;gap:8px}.countdown-detail-sheet footer button{min-height:44px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-cream);background:var(--white);border-radius:var(--radius-control);padding:var(--space-8) var(--space-12)}.countdown-modal{width:min(420px,96vw);background:var(--surface-raised);border:1px solid var(--border-cream);border-radius:var(--radius-panel);box-shadow:var(--shadow-raised);padding:var(--space-18);display:grid;gap:12px}.countdown-modal header{display:flex;justify-content:space-between;align-items:start}.countdown-modal header small{color:var(--text-secondary)}.countdown-modal header h3{margin:var(--space-2) 0 0}.countdown-modal label{display:grid;gap:6px;color:var(--text-secondary);font-size:12px;font-weight:600}.countdown-modal input,.countdown-modal select{border:1px solid var(--border-cream);background:var(--white);border-radius:var(--radius-control);padding:var(--space-10) var(--space-12);outline:none}.countdown-modal input:focus,.countdown-modal select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,90,41,.1)}.countdown-title-fields{display:grid;grid-template-columns:72px 1fr;gap:8px}.countdown-modal footer{display:flex;justify-content:flex-end;gap:8px;padding-top:var(--space-6)}.countdown-advanced{border:1px solid var(--border-cream);border-radius:var(--radius-control);background:var(--surface-soft)}.countdown-advanced summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-12);cursor:pointer;color:var(--text-secondary);font-size:12px;font-weight:700;list-style:none}.countdown-advanced summary::-webkit-details-marker{display:none}.countdown-advanced summary svg{width:16px;height:16px;transition:transform .16s ease}.countdown-advanced[open] summary svg{transform:rotate(180deg)}.countdown-advanced>label,.countdown-advanced>.countdown-title-fields{margin:0 var(--space-12) var(--space-12)}@media(max-width:930px){.countdown-layout{grid-template-columns:1fr;gap:16px}.countdown-focus{display:grid;min-height:140px;padding:var(--space-14) var(--space-16)}.countdown-number strong{font-size:64px}.countdown-timeline{gap:16px}}@media(max-width:800px){.countdown-hero{align-items:center}.countdown-hero h2{font-size:19px}.countdown-row{grid-template-columns:minmax(0,1fr) 72px;padding:var(--space-8) var(--space-4);gap:9px}.countdown-state strong{font-size:25px}.countdown-detail-sheet,.countdown-modal{width:100%;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:min(88dvh,760px);overflow:auto}.countdown-view{position:relative}}
 @media(max-width:930px){.task-tail{flex:0 1 auto;max-width:132px;align-self:stretch;align-items:center;overflow:hidden}.task-tail:has(.task-due--timed){flex:0 1 76px;max-width:76px}.task-due{max-width:100%;overflow:hidden}.task-due--timed .task-due__text{display:grid;justify-items:end;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;white-space:normal}.task-due--timed .task-due__absolute,.task-due--timed .task-due__relative{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-due--timed .task-due__separator{display:none}.countdown-row,.countdown-row:first-of-type{min-height:62px;grid-template-columns:minmax(0,1fr) 72px;gap:8px;padding:var(--space-8) var(--space-8) var(--space-8) var(--space-16);background:transparent;border:0;border-bottom:1px solid var(--border-cream);border-radius:0;box-shadow:none}.countdown-row:first-of-type{border-top:1px solid var(--border-cream)}.countdown-row.pinned,.countdown-row.today{background:transparent}.countdown-state strong{font-size:24px}}
 
@@ -286,7 +286,7 @@ main:has(>.mvp-view .settings-sections) .settings-data>.inline-error{margin:var(
 
 /* 触控目标：小控件命中区扩展到 44px（视觉尺寸不变） */
 .markdown-mode-switch button{position:relative}
-.markdown-mode-switch button::after{content:"";position:absolute;inset:-7px 0}
+.markdown-mode-switch button::after{content:"";position:absolute;inset:-7px -3px}
 
 /* 按压反馈：触屏/鼠标点按即时反馈（filter 不参与 transform 冲突） */
 button:active{filter:brightness(.96)}
diff --git a/frontend/src/style.test.ts b/frontend/src/style.test.ts
index 15581a0..7f8c37c 100644
--- a/frontend/src/style.test.ts
+++ b/frontend/src/style.test.ts
@@ -160,7 +160,7 @@ describe('approved Settings 01 paper ledger', () => {
   it('moves Settings identity into the body and suppresses the duplicate shell title', () => {
     expect(app).not.toContain("'settings-main':activeView==='settings'")
     expect(app).toContain(":class=\"{'settings-topbar':activeView==='settings'}\"")
-    expect(app).toContain("v-if=\"!['today','tasks','upcoming','trash','habits','settings'].includes(activeView)\" class=\"topbar-title\"")
+    expect(app).toContain("v-if=\"!['today','tasks','upcoming','trash','habits','settings','focus'].includes(activeView)\" class=\"topbar-title\"")
     expect(app).not.toContain('v-if="activeView===\'settings\'" class="icon topbar-refresh settings-refresh"')
     expect(app).not.toContain('aria-label="刷新当前页面"')
     expect(mvpPanel).toContain('<header class="settings-heading"><h1>设置</h1><p>管理数据、账户与登录设备</p></header>')