Skip to main content

max / goingson

CSS dedup + UI mode separation + §3 launch-readiness fixes CSS dedup (todo.md §§A–K, dated 2026-05-22 through 2026-05-24): - Buttons: 15 bespoke `*-btn` classes migrated onto `.btn` family (`.settings-btn`, `.shortcut-hint-btn`, `.settings-back-btn`, `.undo-btn`, `.account-delete-btn`, `.bulk-modal-option-btn`, `.toggle-cc-btn`, `.attachment-delete-btn`, `.welcome-step-btn`, `.kebab-btn`, `.time-block-quick-btn`, `.month-goal-status-btn`, `.month-goal-delete-btn`, `.btn-danger-text`). Dead rules (`.email-attachment-remove-btn`, `.schedule-task-btn`) removed. - Form inputs: `.header-input`/`.header-select` onto `.form-input--ghost`/`.form-select--ghost`. `.quick-add-input` dead-code path removed. - Cards: `.review-card`, `.kanban-card`, `.email-list`, `.contact-info-section` onto `.card` family with `--static`, `--shell`, `--muted` variants. - Badges: 9 bespoke task/email status badges replaced by `.badge.badge--xs.badge--filled[data-color="..."]` via a `chip()` helper in task-overview.js. - Avatars: 5 bespoke contact-avatar variants onto `.avatar` + `--sm`/`--lg`/`--unknown`. - Misplaced utilities relocated (`.kbd-hint`). - Weekly Review V1 dead classes (20+) deleted; §49 326→106 lines. - Print styles §48/§52 consolidated into one @media print block. UI Mode Separation (todo.md §K, 2026-05-22): - Mode set once at boot via <html class="ui-mode-{mobile,desktop}">. - 8 viewport-width @media queries → 0 mode-switching queries. - 228 mobile selectors prefixed `.ui-mode-mobile`. - JS layout-mode checks replaced by `GoingsOn.viewport.isMobile()` (new `js/viewport.js`). - Latent keyframe-override bug fixed (modal slide animations). - CONTRIBUTING.md UI Modes section added. §3 launch-readiness (from `~/Code/launchplan_final.md`): - Emoji sweep in 3 empty-state strings (projects-render.js, tasks.js, day-planning.js) per brand rule. - About modal (app.js) + Settings → About (settings.js) populated with publisher, license (PolyForm-NC), contact (info@makenot.work), source, privacy, copyright. `Tauri runtime` dev-jargon line dropped. - Hard-fail error copy humanized with support contact (app.js). - privacy-policy.md contact: `questions@` → `info@makenot.work`. - README trust block + "Your data" section added (local-first, no-telemetry, export/backup/restore documented). - Bulk actions bar: contradictory `color` declaration removed in styles.css; 4 bulk Delete buttons given `.btn-danger`. - styles.min.css rebuilt via build-css.sh. Deferrals from the §3.4 four-axis audit (rust-fuzz + use-fuzz + creator-fuzz + ux-audit) appended to todo.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-06-01 01:25 UTC
Commit: 94cc2e9266a7ef19edfa39795bbc0303541a830c
Parent: a64799c
42 files changed, +1188 insertions, -467 deletions
M CONTRIBUTING.md +21
@@ -241,6 +241,27 @@ Never insert user-provided strings into innerHTML without escaping.
241 241 - **Never** edit `styles.min.css` directly — it's auto-generated via clean-css-cli
242 242 - The HTML loads `styles.min.css`
243 243
244 + ## UI Modes
245 +
246 + GoingsOn has two UI modes: `desktop` and `mobile`. The mode is decided once at boot by an inline script in `index.html` (runs before the stylesheet loads, so no flash) and exposed two ways:
247 +
248 + - **CSS:** `<html class="ui-mode-desktop">` or `<html class="ui-mode-mobile">`. Mobile-specific rules: `.ui-mode-mobile .foo { ... }`. Desktop-specific layout: `.ui-mode-desktop .foo { ... }`.
249 + - **JS:** `GoingsOn.viewport.isMobile()` / `isDesktop()` from `js/viewport.js`.
250 +
251 + Mode does **not** change at runtime. Desktop binaries stay desktop even when the window is narrowed; mobile binaries stay mobile. The mode is a property of the build, not the viewport size.
252 +
253 + **Detection precedence** (`index.html` inline script):
254 + 1. `?ui=mobile|desktop` URL param — dev / testing / bug repros.
255 + 2. `localStorage.goingson.uiMode` — dev Settings toggle.
256 + 3. `navigator.userAgentData.mobile` (UA Client Hints) when available.
257 + 4. UA regex (`iPhone OS|iPad|Android`) with iPad-as-Mac fallback (`navigator.maxTouchPoints > 1` on a Mac-reporting platform).
258 +
259 + **Dev preview:** `?ui=mobile` URL param, or `GoingsOn.viewport.setOverride('mobile')` from the console.
260 +
261 + **Adding mobile rules:** prefix the selector with `.ui-mode-mobile`. Do **not** add new `@media (max-width: ...)` queries to switch UI modes — that path is gone. Intra-mode responsive queries (e.g. wide-vs-narrow desktop) are allowed, but their selectors must be `.ui-mode-desktop`-prefixed inside the query.
262 +
263 + **Input capability is a separate axis.** Use `@media (hover: none)` only for hover suppression. Use `GoingsOn.touch.isTouchDevice` only for input-model decisions (drag vs long-press, tap targets). Never use either for visibility or layout — that's what UI mode is for.
264 +
244 265 ## SyncKit Integration
245 266
246 267 Cloud sync is optional. The `SyncKitClient` lives in `AppState.sync_client` behind `Arc<RwLock<Option<Arc<SyncKitClient>>>>`.
M README.md +11
@@ -2,6 +2,17 @@
2 2
3 3 A desktop productivity app -- tasks, email, calendar, contacts, and project management in one place. Built with Tauri 2, Rust, and vanilla JS.
4 4
5 + Local-first. Your data lives in a SQLite database on your own machine. No telemetry, no analytics, no remote logging. Cloud sync is optional and end-to-end encrypted.
6 +
7 + Published by Make Creative, LLC. Contact: info@makenot.work. Privacy policy: `docs/privacy-policy.md`.
8 +
9 + ## Your data
10 +
11 + - **Export** -- JSON (full), CSV (tasks), ICS (calendar events).
12 + - **Backup and restore** -- full snapshots restorable into a fresh install.
13 + - **Storage** -- SQLite on disk; you can copy or back up the file directly.
14 + - **Updates** -- checked on launch; install is user-initiated, never forced.
15 +
5 16 ## Prerequisites
6 17
7 18 - **Rust** (stable toolchain, 2021 edition)
M docs/privacy-policy.md +1 -1
@@ -46,4 +46,4 @@ Material changes to this policy will be noted in the app's release notes.
46 46
47 47 ## Contact
48 48
49 - questions@makenot.work
49 + info@makenot.work
M src-tauri/frontend/compose.html +3 -62
@@ -4,68 +4,9 @@
4 4 <meta charset="UTF-8">
5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6 6 <title>Compose Email</title>
7 - <link rel="stylesheet" href="css/styles.css">
8 - <style>
9 - /* Compose-specific layout overrides */
10 - body {
11 - height: 100vh;
12 - display: flex;
13 - flex-direction: column;
14 - overflow: hidden;
15 - }
16 -
17 - .compose-toolbar {
18 - display: flex;
19 - gap: 0.5rem;
20 - padding: 0.75rem 1rem;
21 - background: var(--bg-secondary);
22 - border-bottom: 1px solid var(--border-color);
23 - }
24 -
25 - .toolbar-spacer {
26 - flex: 1;
27 - }
28 -
29 - .compose-form {
30 - flex: 1;
31 - display: flex;
32 - flex-direction: column;
33 - overflow: hidden;
34 - background: var(--bg-card);
35 - }
36 -
37 - /* Field-row, autocomplete-wrapper, body-container/textarea, and
38 - toggle-cc-btn styles moved to css/styles.css as part of stage 3 —
39 - shared with the in-app compose modal. */
40 -
41 - .status-bar {
42 - padding: 0.5rem 1rem;
43 - background: var(--bg-secondary);
44 - border-top: 1px solid var(--border-color);
45 - font-size: 0.8125rem;
46 - color: var(--text-secondary);
47 - }
48 -
49 - .status-bar.error {
50 - color: var(--accent-red);
51 - }
52 -
53 - .status-bar.success {
54 - color: var(--accent-green);
55 - }
56 -
57 - .compose-loading {
58 - opacity: 0.6;
59 - pointer-events: none;
60 - }
61 -
62 - /* Attachment list, autocomplete-dropdown, header-row--tight,
63 - toggle-cc-btn, reply-indicator now live in css/styles.css
64 - (stages 3/5 shared). save-contact-bar removed: implicit-contact
65 - prompts moved to the main-app shell in Phase 7 Tier 1 #3. */
66 - </style>
7 + <link rel="stylesheet" href="css/styles.min.css">
67 8 </head>
68 - <body>
9 + <body class="compose-window">
69 10 <div class="compose-toolbar">
70 11 <button class="btn btn-primary" id="send-btn" onclick="sendEmail()">Send</button>
71 12 <span id="reply-indicator" class="reply-indicator"></span>
@@ -81,7 +22,7 @@
81 22 toggle-cc binds via JS, not an inline onclick. -->
82 23 <form class="compose-form" id="compose-form" onsubmit="event.preventDefault(); return false;"></form>
83 24
84 - <div class="compose-attachments" id="attachments-bar" style="display: none;"></div>
25 + <div class="compose-attachments hidden" id="attachments-bar"></div>
85 26 <div class="status-bar" id="status-bar">Ready</div>
86 27
87 28 <script src="js/address-highlight.js"></script>
M src-tauri/frontend/css/styles.css +269 -118
@@ -1,69 +1,210 @@
1 - /* GoingsOn - Neobrute Theme */
2 -
3 - /* ===================================================================
4 - TABLE OF CONTENTS
5 - ===================================================================
6 - 1. Font Face .................................................. ~68
7 - 2. CSS Reset & Base .......................................... ~79
8 - 3. Design System Variables (Neobrute) ........................ ~88
9 - 4. Utility Classes (Shadow, Hover, Border) ................... ~214
10 - 5. Body & App Shell .......................................... ~239
11 - 6. Header .................................................... ~253
12 - 7. Tab Navigation ............................................ ~296
13 - 8. Main Content & Page Header ................................ ~347
14 - 9. Buttons ................................................... ~374
15 - 10. Quick Add Input ........................................... ~452
16 - 11. Cards ..................................................... ~482
17 - 12. Tags & Badges ............................................. ~537
18 - 13. Data Table ................................................ ~579
19 - 14. Task Table & Rows ......................................... ~625
20 - 15. Due Date Badges ........................................... ~870
21 - 16. Events .................................................... ~892
22 - 17. Email List ................................................ ~1180
23 - 18. Toast Notifications ....................................... ~1296
24 - 19. Modals .................................................... ~1344
25 - 20. Form Elements ............................................. ~1484
26 - 21. Footer .................................................... ~1559
27 - 22. Empty & Error States ...................................... ~1601
28 - 23. Filter Bar ................................................ ~1640
29 - 24. Responsive - Large Screens & Tablet ....................... ~1718
30 - 25. Responsive - Mobile (768px) ............................... ~1775
31 - 26. Screen Reader & Accessibility ............................. ~1866
32 - 27. Pagination ................................................ ~1881
33 - 28. Focus & Keyboard Accessibility ............................ ~1910
34 - 29. Source Email Link ......................................... ~1957
35 - 30. Email Reader Mode ......................................... ~1967
36 - 31. Dropdown Menus ............................................ ~2107
37 - 32. Context Menus ............................................. ~2157
38 - 33. Scrollbar Styling ......................................... ~2245
39 - 34. Desktop App Styles (Loading, Skeleton, Spinner) ........... ~2268
40 - 35. Project Dashboard ......................................... ~2378
41 - 36. Task Badges ............................................... ~2451
42 - 37. Progress Bar .............................................. ~2489
43 - 38. Day Plan View ............................................. ~2515
44 - 39. Timeline .................................................. ~2606
45 - 40. Unscheduled Tasks ......................................... ~2779
46 - 41. Settings .................................................. ~2829
47 - 42. Snooze Options ............................................ ~2918
48 - 43. Bulk Selection ............................................ ~2988
49 - 44. Time Blocking ............................................. ~3074
50 - 45. App Layout ................................................ ~3152
51 - 46. Saved Views Sidebar ....................................... ~3219
52 - 47. Contacts .................................................. ~3334
53 - 48. Print Styles .............................................. ~3465
54 - 49. Weekly Review ............................................. ~3570
55 - 50. Weekly Review V2 - Grid Layout ............................ ~3903
56 - 51. Weekly Review Transitions & Keyboard Navigation ........... ~4448
57 - 52. Weekly Review Print Styles ................................ ~4493
58 - 53. Import Wizard ............................................. ~4647
59 - 54. Plugin Manager ............................................ ~4809
60 - 55. Toggle Switch ............................................. ~4857
61 - 56. Project Milestones ........................................ ~4947
62 - 58. Mobile Navigation (Nav Dot, Dial, Bottom Sheets) .......... ~5102
63 - 59. Mobile Responsive (768px overrides) ....................... ~5458
64 - 60. Touch Device Hover Disable ................................ ~5847
65 - 61. Kanban Board ............................................... ~5912
66 - =================================================================== */
1 + /* ============================================================================
2 + GoingsOn — Neobrute Theme
3 +
4 + Build new UI by COMPOSING the existing vocabulary, in this order of preference:
5 +
6 + 1. Use a UTILITY class for one-off adjustments (.mb-1, .mb-2, .flex-1,
7 + .text-sm-secondary, .hidden)
8 + 2. Use a LAYOUT PRIMITIVE to position content (.row-flex + .row-flex-{2,3,4},
9 + .row, .stack-{2,3,4})
10 + 3. Use a COMPONENT PRIMITIVE for a UI element (.card, .btn, .form-input,
11 + .form-select, .modal, .badge,
12 + .tag, .toggle-switch)
13 + 4. Extend a primitive with a modifier (.btn-primary, .btn-sm,
14 + .form-select--compact,
15 + .subtask-item--linked)
16 + 5. ONLY THEN consider a new class — and add it to the right
17 + BAND below
18 +
19 + A new class is a smell, not a goal. Before writing one:
20 + • grep this file for the visual shape you want; almost everything is here
21 + • check whether an existing primitive + modifier composes to your shape
22 + • page-scoped rules under a feature class (`.day-plan .foo`) are a last
23 + resort, not a first move
24 +
25 + WHEN UTILITY-STACKING IS WRONG: A row of mixed-intent elements (one fills,
26 + others size to content) belongs in a NAMED LAYOUT with an explicit
27 + `grid-template-columns`, not in `.row-flex` + utilities. The utility form
28 + encodes intent in browser flex-shrink math rather than in CSS that reads
29 + as intent — especially fragile when the row contains a native `<select>`,
30 + whose intrinsic-min-content sizing fights `flex: 1`. Smell test: if you
31 + find yourself reaching for `.form-select--compact`, `style="width: auto;"`,
32 + or `min-width: 0 !important` to make a row lay out right, the layout
33 + itself wants a name. See `.email-filter-row`, `.contacts-filter-row`, and
34 + `.work-hours-row` (all 2026-05-24) for the canonical form.
35 +
36 + ----------------------------------------------------------------------------
37 + FILE STRUCTURE — search by BAND name (uppercase anchors) to navigate.
38 + Per-section titles use `=== N. Title ===` headers; numbered for stability,
39 + not because order matters. Bands group related sections; cascade order is
40 + load-bearing only inside the RESPONSIVE LAYERS and PRINT LAYERS bands.
41 +
42 + BAND: FOUNDATIONS
43 + 1. Font Face
44 + 2. CSS Reset & Base
45 + 3. Design System Variables (Neobrute) — tokens (:root)
46 + 4. Utility Classes — shadow/hover/border,
47 + layout, form sizing,
48 + settings, subtask
49 +
50 + BAND: APP SHELL & CHROME
51 + 5. Body & App Shell
52 + 6. Header
53 + 7. Tab Navigation
54 + 8. Main Content & Page Header
55 +
56 + BAND: COMPONENT PRIMITIVES & WIDGETS
57 + 9. Buttons — .btn + variants/sizes
58 + 10. Quick Add Input
59 + 11. Cards
60 + 12. Tags & Badges
61 + 13. Data Table
62 + 14. Task Table & Rows
63 + 15. Due Date Badges
64 + 16. Events
65 + 17. Email List
66 + 18. Toast Notifications
67 + 19. Modals
68 + 20. Form Elements — .form-input,
69 + .form-select, +
70 + JS-rendered layout
71 + utilities tail
72 + 21. Footer
73 + 22. Empty & Error States
74 + 23. Filter Bar
75 +
76 + BAND: RESPONSIVE LAYER 1 (see RESPONSIVE STRATEGY)
77 + 24. Responsive - Large Screens & Tablet
78 + 25. Responsive - Mobile (768px, base pass)
79 +
80 + BAND: A11Y, PAGINATION, FOCUS
81 + 26. Screen Reader & Accessibility
82 + 27. Pagination
83 + 28. Focus & Keyboard Accessibility
84 +
85 + BAND: EMAIL READER
86 + 29. Source Email Link
87 + 30. Email Reader Mode
88 +
89 + BAND: OVERLAYS
90 + 31. Dropdown Menus
91 + 32. Context Menus
92 + 33. Scrollbar Styling
93 + 34. Desktop App Styles (Loading, Skeleton, Spinner)
94 +
95 + BAND: FEATURE SCREENS (A)
96 + 35. Project Dashboard 41. Settings
97 + 36. Task Badges 42. Snooze Options
98 + 37. Progress Bar 43. Bulk Selection
99 + 38. Day Plan View 44. Time Blocking
100 + 39. Timeline 45. App Layout
101 + 40. Unscheduled Tasks 46. Saved Views Sidebar
102 + 47. Contacts
103 +
104 + BAND: PRINT LAYER 1 (see PRINT STRATEGY)
105 + 48. Print Styles (global)
106 +
107 + BAND: WEEKLY REVIEW (V1 + V2 coexist)
108 + 49. Weekly Review (V1, still live)
109 + 50. Weekly Review V2 - Grid Layout
110 + 51. Weekly Review Transitions & Keyboard Navigation
111 +
112 + BAND: PRINT LAYER 2
113 + 52. Weekly Review Print Styles
114 +
115 + BAND: FEATURE SCREENS (B)
116 + 52b. Monthly Review 55. Toggle Switch
117 + 53. Import Wizard 56. Project Milestones
118 + 54. Plugin Manager (57 intentionally unused)
119 +
120 + BAND: MOBILE LAYER (see RESPONSIVE STRATEGY)
121 + 58. Mobile Navigation (Nav Dot, Dial, Bottom Sheets)
122 + 59. Mobile Responsive (768px overrides, late pass)
123 + 60. Touch Device Hover Disable
124 +
125 + BAND: FEATURE SCREENS (C)
126 + 61. Kanban Board 66. Timer Subview (Time tab pill)
127 + 62. Timer Widget 67. Task Overview
128 + 63. Focus Timer (Pomodoro) 68. Plan/Review Toggle Nudge Dot
129 + 64. Time Summary Panel 69. Finish & Review
130 + 65. Task Time Tracking UI 70. Calendar Views
131 +
132 + BAND: SCOPED STYLESHEETS
133 + Compose window (compose.html standalone Tauri window)
134 +
135 + ----------------------------------------------------------------------------
136 + EXISTING VOCABULARY — grep before inventing a new class.
137 +
138 + UTILITIES
139 + Layout .flex-1, .row, .row-flex + .row-flex-{2,3,4},
140 + .stack-{2,3,4}, .mb-{1,2}
141 + Text .text-sm-secondary, .text-xs-secondary, .text-center,
142 + .text-left, .text-muted, .text-accent-red
143 + Sizing .flex-1, .w-full
144 + State .hidden, .is-selected, .is-active
145 +
146 + LAYOUT PRIMITIVES
147 + .row-flex (display:flex; align-items:center) + gap modifier .row-flex-N
148 + .row (display:flex, no align) + gap modifier .row-flex-N
149 + .stack (vertical) + gap modifier
150 +
151 + COMPONENT PRIMITIVES
152 + .btn + .btn-primary / -secondary / -danger / -sm
153 + .card + .card--list-item / --shell / --muted (compact / container / info-panel)
154 + .form-input + .form-input--ghost
155 + .form-select + .form-select--compact / --ghost
156 + .modal + .modal-overlay
157 + .badge + variants ([data-color], --xs / --sm / --filled)
158 + .tag + variants ([data-color])
159 + .toggle-switch
160 + .avatar + .avatar--sm / --lg / --unknown
161 + .toast + variants
162 + .pagination-controls
163 + .filter-bar / .filter-select
164 + .dropdown-menu / .context-menu
165 + .empty-state
166 +
167 + CONTROL MODIFIERS
168 + Sizes: .btn-sm
169 + Intents: .btn-primary / -secondary / -danger
170 + Shapes: .form-select--compact / --ghost, .form-input--ghost
171 +
172 + ----------------------------------------------------------------------------
173 + UI MODE STRATEGY (do not casually merge)
174 +
175 + UI mode is set ONCE at boot by index.html's inline script and exposed
176 + as `<html class="ui-mode-desktop">` or `<html class="ui-mode-mobile">`.
177 + Viewport width does NOT switch UI mode — desktop binaries stay desktop
178 + even when the window is narrowed.
179 +
180 + §25 Mobile (base pass) — early `.ui-mode-mobile` rules; applies before
181 + feature CSS so feature rules can override.
182 + §59 Mobile (late pass) — late `.ui-mode-mobile` rules; runs AFTER
183 + feature CSS so it wins conflicts. Add new
184 + mobile overrides here unless you need them
185 + early.
186 + §60 Touch hover disable — `@media (hover: none)`. INPUT-CAPABILITY axis,
187 + not UI mode. Reserved for hover suppression
188 + only. Never put visibility or layout rules
189 + here — they belong under `.ui-mode-mobile`.
190 +
191 + Intra-mode responsive: `@media (max-width: ...)` queries are allowed
192 + INSIDE a UI mode (e.g. `.ui-mode-desktop` rules at narrow desktop
193 + widths). Do not use a media query to switch BETWEEN UI modes.
194 +
195 + PRINT STRATEGY
196 + §48 Global print rules — early.
197 + §52 Weekly Review print — placed after §49/§50 so V2 grid resets win.
198 +
199 + ----------------------------------------------------------------------------
200 + WEEKLY REVIEW V1 + V2 COEXISTENCE
201 +
202 + §49 (V1: .weekly-review-content, .weekly-review-header, ...) and
203 + §50 (V2: .review-grid, .review-card, ...) are BOTH live. weekly-review.js
204 + and mobile.js still render V1 classes; the V2 grid is used by newer
205 + review surfaces. Do not delete §49 until those JS render paths migrate.
206 +
207 + ============================================================================ */
67 208
68 209 /* ===================================================================
69 210 1. Font Face
@@ -206,14 +347,18 @@ html {
206 347 4. Utility Classes (Shadow, Hover, Border)
207 348 =================================================================== */
208 349 /* === LAYOUT UTILITIES === */
209 -
210 - /* === LAYOUT UTILITIES === */
350 + /* Compose: .row-flex + .row-flex-{2,3,4} for align-items:center rows.
351 + .row for raw flex with no align. .flex-1 to grow a child. */
211 352 .flex-1 { flex: 1; }
212 - .flex-center-gap { display: flex; align-items: center; gap: 0.5rem; }
353 + .row { display: flex; }
213 354 .text-sm-secondary { font-size: 0.875rem; color: var(--text-secondary); }
214 355 .text-xs-secondary { font-size: 0.75rem; color: var(--text-secondary); }
215 356 .text-accent-red { color: var(--accent-red); }
216 357 .mb-1 { margin-bottom: 1rem; }
358 + .mb-2 { margin-bottom: var(--space-2); }
359 +
360 + /* === FORM SIZING UTILITIES === */
361 + .form-select--compact { width: auto; min-width: 120px; }
217 362
218 363 /* === SETTINGS UTILITIES === */
219 364 .settings-divider { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid var(--border-color); }
@@ -221,8 +366,22 @@ html {
221 366 .settings-desc { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1rem; }
222 367
223 368 /* === SUBTASK UTILITIES === */
224 - .subtask-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 4px; margin-bottom: 0.5rem; }
225 - .subtask-item-linked { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--bg-tertiary); border-radius: 4px; margin-bottom: 0.5rem; border-left: var(--border-width) solid var(--accent-color); }
369 + /* .subtask-item is the base row; --linked is a modifier for subtasks that
370 + reference another task (raised bg + accent border). Use both classes
371 + together: <div class="subtask-item subtask-item--linked">. */
372 + .subtask-item {
373 + display: flex;
374 + align-items: center;
375 + gap: 0.5rem;
376 + padding: 0.5rem;
377 + background: var(--bg-secondary);
378 + border-radius: 4px;
379 + margin-bottom: 0.5rem;
380 + }
381 + .subtask-item--linked {
382 + background: var(--bg-tertiary);
383 + border-left: var(--border-width) solid var(--accent-color);
384 + }
226 385 .subtask-checkbox { cursor: pointer; width: 18px; height: 18px; }
227 386 .subtask-checkbox-disabled { cursor: not-allowed; width: 18px; height: 18px; opacity: 0.5; }
228 387 .subtask-text-done { text-decoration: line-through; opacity: 0.6; }
@@ -242,9 +401,11 @@ body {
242 401 }
243 402
244 403 /* ===================================================================
245 - 6. Header
404 + 6. Header (desktop UI only)
405 + The top app header is part of desktop layout. Mobile UI hides it
406 + wholesale; rules below are scoped so they cannot leak in.
246 407 =================================================================== */
247 - .app-header {
408 + .ui-mode-desktop .app-header {
248 409 background: var(--bg-card);
249 410 border-bottom: var(--border-width) solid var(--border-color);
250 411 padding: 0.75rem 1.5rem;
@@ -253,19 +414,19 @@ body {
253 414 align-items: center;
254 415 }
255 416
256 - .header-content {
417 + .ui-mode-desktop .header-content {
257 418 display: flex;
258 419 align-items: center;
259 420 gap: 0.75rem;
260 421 }
261 422
262 - .header-actions {
423 + .ui-mode-desktop .header-actions {
263 424 display: flex;
264 425 align-items: center;
265 426 gap: 0.5rem;
266 427 }
267 428
268 - .app-title {
429 + .ui-mode-desktop .app-title {
269 430 font-family: var(--font-display);
270 431 font-size: 1.75rem;
271 432 font-weight: 700;
@@ -273,7 +434,7 @@ body {
273 434 letter-spacing: -0.02em;
274 435 }
275 436
276 - .app-subtitle {
437 + .ui-mode-desktop .app-subtitle {
277 438 font-size: 0.875rem;
278 439 color: var(--text-muted);
279 440 font-weight: 500;
@@ -285,15 +446,16 @@ body {
285 446 }
286 447
287 448 /* ===================================================================
288 - 7. Tab Navigation
449 + 7. Tab Navigation (desktop UI only)
450 + The top tab strip is desktop-only; mobile UI uses the bottom tab bar.
289 451 =================================================================== */
290 - .tab-navigation {
452 + .ui-mode-desktop .tab-navigation {
291 453 display: flex;
292 454 justify-content: center;
293 455 gap: 0.5rem;
294 456 }
295 457
296 - .tab {
458 + .ui-mode-desktop .tab {
297 459 display: flex;
298 460 align-items: center;
299 461 gap: 0.5rem;
@@ -307,35 +469,35 @@ body {
307 469 transition: background-color 0.15s ease;
308 470 }
309 471
310 - .tab:hover {
472 + .ui-mode-desktop .tab:hover {
311 473 background: var(--bg-secondary);
312 474 }
313 475
314 - .tab.active {
476 + .ui-mode-desktop .tab.active {
315 477 background-color: var(--accent-blue);
316 478 color: var(--text-on-accent);
317 479 }
318 480
319 - .tab-icon {
481 + .ui-mode-desktop .tab-icon {
320 482 font-size: 1.1rem;
321 483 }
322 484
323 - .tab-label {
485 + .ui-mode-desktop .tab-label {
324 486 font-weight: 600;
325 487 font-size: 0.9rem;
326 488 }
327 489
328 - .tab.tab-right {
490 + .ui-mode-desktop .tab.tab-right {
329 491 margin-left: auto;
330 492 }
331 493
332 - /* --- Tab Groups & Sub-Views --- */
494 + /* --- Tab Groups & Sub-Views (shared) --- */
333 495 .tab-group .subview.hidden {
334 496 display: none;
335 497 }
336 498
337 - /* --- Pill Sub-Navigation --- */
338 - .pill-nav {
499 + /* --- Pill Sub-Navigation (desktop UI only — mobile uses slide menu) --- */
500 + .ui-mode-desktop .pill-nav {
339 501 display: flex;
340 502 align-items: center;
341 503 gap: var(--space-1);
@@ -344,7 +506,7 @@ body {
344 506 min-height: 2rem;
345 507 }
346 508
347 - .pill {
509 + .ui-mode-desktop .pill {
348 510 padding: var(--space-1) var(--space-3);
349 511 border-radius: var(--radius-xl);
350 512 border: var(--border-width-sm) solid var(--border-color);
@@ -356,11 +518,11 @@ body {
356 518 transition: background-color var(--transition-fast);
357 519 }
358 520
359 - .pill:hover {
521 + .ui-mode-desktop .pill:hover {
360 522 background: var(--bg-tertiary);
361 523 }
362 524
363 - .pill.active {
525 + .ui-mode-desktop .pill.active {
364 526 background: var(--text-primary);
365 527 color: var(--bg-card);
366 528 border-color: var(--text-primary);
@@ -498,34 +660,10 @@ body {
498 660 }
499 661
500 662 /* ===================================================================
501 - 10. Quick Add Input
663 + 10. (vacated — Quick Add Input was deleted 2026-05-24; the modal at
664 + keyboard.js:openQuickAddModal uses .form-input, not a bespoke
665 + primitive. Section number kept for stable navigation.)
502 666 =================================================================== */
503 - .quick-add {
504 - display: flex;
505 - gap: 0.75rem;
506 - margin-bottom: 1.5rem;
507 - }
508 -
509 - .quick-add-input {
510 - flex: 1;
511 - padding: 0.875rem 1rem;
512 - border: var(--border-width) solid var(--border-color);
513 - border-radius: var(--radius-md);
514 - background-color: var(--bg-card);
515 - font-size: 1rem;
516 - color: var(--text-primary);
517 - }
518 -
519 - .quick-add-input::placeholder {
520 - color: var(--text-muted);
521 - }
522 -
523 - .quick-add-input:focus {
524 - outline: none;
525 - background-color: var(--accent-blue);
526 - color: var(--text-on-accent);
527 - box-shadow: 0 0 0 2px var(--border-color);
528 - }
529 667
530 668 /* ===================================================================
531 669 11. Cards
@@ -552,6 +690,56 @@ body {
552 690 box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--border-color);
553 691 }
554 692
693 + /* Compact card for use in dense vertical lists (e.g. Project Dashboard).
694 + Tighter padding, square corners, adds list spacing. */
695 + .card--list-item {
696 + padding: 0.75rem;
697 + border-radius: 0;
698 + margin-bottom: 0.5rem;
699 + }
700 +
701 + /* Container shell — keeps card chrome (border/radius/shadow) but strips
702 + padding/cursor/hover and arranges children as a flex column. For list
703 + wrappers like .email-list. */
704 + .card--shell {
705 + padding: 0;
Lines truncated
M src-tauri/frontend/css/styles.min.css +1 -1
@@ -1 +1 @@
1 - @font-face{font-family:Reglo;src:url('../fonts/Reglo-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:root{--timeline-slot-h:12px;--bg-primary:#E0E4FA;--bg-secondary:#CDD3F0;--bg-tertiary:#BAC2E6;--bg-card:#FFFFFF;--text-primary:#000000;--text-secondary:#2D2D2D;--text-muted:#6B6B6B;--accent-yellow:#F7D154;--accent-green:#5CB85C;--accent-blue:#6196FF;--accent-purple:#7B68EE;--accent-red:#DC3545;--accent-cyan:#17A2B8;--border-color:#000000;--border-width:2px;--border-width-sm:2px;--accent-color:var(--accent-blue);--accent-primary:var(--accent-blue);--bg-hover:var(--bg-tertiary);--border-light:var(--bg-tertiary);--text-on-accent:var(--bg-card);--shadow-offset-xs:1px;--shadow-offset-md:3px;--shadow-offset:4px;--shadow-offset-lg:6px;--shadow-offset-xl:8px;--shadow-brutal-xs:var(--shadow-offset-xs) var(--shadow-offset-xs) 0 var(--border-color);--shadow-brutal-md:var(--shadow-offset-md) var(--shadow-offset-md) 0 var(--border-color);--shadow-brutal-lg:var(--shadow-offset-lg) var(--shadow-offset-lg) 0 var(--border-color);--shadow-brutal-xl:var(--shadow-offset-xl) var(--shadow-offset-xl) 0 var(--border-color);--radius-xs:3px;--radius-sm:5px;--radius-md:5px;--radius-lg:10px;--radius-xl:20px;--radius-full:50%;--width-container:1400px;--width-modal:560px;--width-sidebar:280px;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-serif:Georgia,'Times New Roman',serif;--font-mono:'SF Mono','Consolas','Liberation Mono',monospace;--font-display:'Reglo',var(--font-serif);--font-heading:var(--font-sans);--font-body:var(--font-sans);--font-size-xxs:0.65rem;--font-size-xs:0.7rem;--font-size-sm:0.75rem;--font-size-md:0.8rem;--font-size-base:0.875rem;--font-size-lg:1rem;--font-size-xl:1.1rem;--font-size-2xl:1.25rem;--font-size-3xl:1.5rem;--font-size-4xl:1.75rem;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--transition-fast:0.1s;--transition-normal:0.15s;--transition-slow:0.3s;--overlay-color:color-mix(in srgb, var(--text-primary) 60%, transparent)}html{font-size:16px}.flex-1{flex:1}.flex-center-gap{display:flex;align-items:center;gap:.5rem}.text-sm-secondary{font-size:.875rem;color:var(--text-secondary)}.text-xs-secondary{font-size:.75rem;color:var(--text-secondary)}.text-accent-red{color:var(--accent-red)}.mb-1{margin-bottom:1rem}.settings-divider{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid var(--border-color)}.settings-heading{margin-bottom:1rem;font-family:var(--font-heading)}.settings-desc{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem}.subtask-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--bg-secondary);border-radius:4px;margin-bottom:.5rem}.subtask-item-linked{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--bg-tertiary);border-radius:4px;margin-bottom:.5rem;border-left:var(--border-width) solid var(--accent-color)}.subtask-checkbox{cursor:pointer;width:18px;height:18px}.subtask-checkbox-disabled{cursor:not-allowed;width:18px;height:18px;opacity:.5}.subtask-text-done{text-decoration:line-through;opacity:.6}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;height:100vh;overflow:hidden;display:flex;flex-direction:column}.app-header{background:var(--bg-card);border-bottom:var(--border-width) solid var(--border-color);padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.header-content{display:flex;align-items:center;gap:.75rem}.header-actions{display:flex;align-items:center;gap:.5rem}.app-title{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.app-subtitle{font-size:.875rem;color:var(--text-muted);font-weight:500;line-height:1}.mobile-view-title{display:none}.tab-navigation{display:flex;justify-content:center;gap:.5rem}.tab{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;text-decoration:none;color:var(--text-primary);background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);font-weight:600;transition:background-color .15s ease}.tab:hover{background:var(--bg-secondary)}.tab.active{background-color:var(--accent-blue);color:var(--text-on-accent)}.tab-icon{font-size:1.1rem}.tab-label{font-weight:600;font-size:.9rem}.tab.tab-right{margin-left:auto}.tab-group .subview.hidden{display:none}.pill-nav{display:flex;align-items:center;gap:var(--space-1);padding:0;margin-bottom:1rem;min-height:2rem}.pill{padding:var(--space-1) var(--space-3);border-radius:var(--radius-xl);border:var(--border-width-sm) solid var(--border-color);background:var(--bg-card);font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:background-color var(--transition-fast)}.pill:hover{background:var(--bg-tertiary)}.pill.active{background:var(--text-primary);color:var(--bg-card);border-color:var(--text-primary)}.main-content{flex:1;max-width:var(--width-container);width:100%;margin:0 auto;padding:1.5rem 1.75rem 2rem}.page-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:1rem}.page-title{font-family:var(--font-heading);font-size:1.75rem;font-weight:700;color:var(--text-primary)}.tab-group{position:relative}.tab-group>.subview>.page-header{position:absolute;top:0;right:0;margin:0;z-index:1}.tab-group .page-header .page-title{display:none}#day-plan-view>.page-header,#project-dashboard-view>.page-header{position:static;margin-bottom:1rem}#project-dashboard-view .page-title{display:block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:background-color .15s ease;text-decoration:none;background:var(--bg-card);color:var(--text-primary)}.btn:hover{background:var(--bg-secondary)}.btn:active{background:var(--bg-tertiary)}.btn:disabled{background:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed;opacity:.7}.btn:disabled:hover{background:var(--bg-tertiary)}.btn-primary{background-color:var(--accent-blue);color:var(--text-on-accent)}.btn-primary:hover{background-color:color-mix(in srgb,var(--accent-blue) 85%,#000)}.btn-primary:active{background-color:color-mix(in srgb,var(--accent-blue) 70%,#000)}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary)}.btn-danger{background-color:var(--accent-red);color:var(--text-on-accent)}.btn-danger:hover{background-color:color-mix(in srgb,var(--accent-red) 85%,#000)}.btn-danger:active{background-color:color-mix(in srgb,var(--accent-red) 70%,#000)}.btn-sm{padding:.375rem .75rem;font-size:.8rem}.quick-add{display:flex;gap:.75rem;margin-bottom:1.5rem}.quick-add-input{flex:1;padding:.875rem 1rem;border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-card);font-size:1rem;color:var(--text-primary)}.quick-add-input::placeholder{color:var(--text-muted)}.quick-add-input:focus{outline:0;background-color:var(--accent-blue);color:var(--text-on-accent);box-shadow:0 0 0 2px var(--border-color)}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}.card{background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;cursor:pointer}.card:hover{background-color:var(--bg-secondary);transform:translate(-2px,-2px);box-shadow:calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--border-color)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.card-title{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;color:var(--text-primary)}.card-description{font-size:.9rem;color:var(--text-secondary);margin-bottom:1rem}.markdown-content{font-size:.9rem;color:var(--text-secondary);line-height:1.5}.markdown-content p{margin:0 0 .5em 0}.markdown-content p:last-child{margin-bottom:0}.markdown-content ol,.markdown-content ul{margin:0 0 .5em 1.5em;padding:0}.markdown-content code{background:var(--bg-tertiary);padding:.1em .3em;border-radius:3px;font-size:.85em}.markdown-content pre{background:var(--bg-tertiary);padding:.5em;border-radius:4px;overflow-x:auto;margin:0 0 .5em 0}.markdown-content pre code{background:0 0;padding:0}.markdown-content a{color:var(--accent-color)}.markdown-content blockquote{border-left:3px solid var(--border-color);margin:0 0 .5em 0;padding-left:.75em;color:var(--text-secondary)}.markdown-content h1,.markdown-content h2,.markdown-content h3{margin:.5em 0 .25em 0;font-size:1em;font-weight:600;color:var(--text-primary)}.markdown-content table{border-collapse:collapse;margin:.5em 0}.markdown-content td,.markdown-content th{border:1px solid var(--border-color);padding:.25em .5em}.markdown-content img{max-width:100%}.card-meta{display:flex;gap:.5rem;flex-wrap:wrap}.badge,.tag{display:inline-flex;align-items:center;padding:.25rem .625rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);font-size:.8125rem;font-weight:600;background:var(--bg-card);color:var(--text-primary)}.badge[data-color=green],.tag[data-color=green]{background-color:color-mix(in srgb,var(--accent-green) 20%,var(--bg-card));border-color:var(--accent-green)}.badge[data-color=yellow],.tag[data-color=yellow]{background-color:color-mix(in srgb,var(--accent-yellow) 20%,var(--bg-card));border-color:var(--accent-yellow)}.badge[data-color=red],.tag[data-color=red]{background-color:color-mix(in srgb,var(--accent-red) 20%,var(--bg-card));border-color:var(--accent-red)}.badge[data-color=cyan],.tag[data-color=cyan]{background-color:color-mix(in srgb,var(--accent-cyan) 20%,var(--bg-card));border-color:var(--accent-cyan)}.badge[data-color=purple],.tag[data-color=purple]{background-color:color-mix(in srgb,var(--accent-purple) 20%,var(--bg-card));border-color:var(--accent-purple)}.badge[data-color=muted],.tag[data-color=muted]{background-color:var(--bg-tertiary);border-color:var(--text-muted)}.tag.status-active{background-color:color-mix(in srgb,var(--accent-green) 20%,var(--bg-card));border-color:var(--accent-green)}.tag.status-on_hold,.tag.status-onhold{background-color:color-mix(in srgb,var(--accent-yellow) 20%,var(--bg-card));border-color:var(--accent-yellow)}.tag.status-archived{background-color:var(--bg-tertiary);border-color:var(--text-muted)}.tag.status-inactive{background-color:color-mix(in srgb,var(--accent-red) 20%,var(--bg-card));border-color:var(--accent-red)}.tag.status-completed{background-color:color-mix(in srgb,var(--accent-cyan) 20%,var(--bg-card));border-color:var(--accent-cyan)}.data-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.data-table td,.data-table th{padding:1rem 1.25rem;text-align:left;border-bottom:2px solid var(--border-color)}.data-table th{background-color:var(--bg-secondary);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-primary)}.data-table tbody tr{transition:background-color .15s ease}.data-table tbody tr:hover{background-color:var(--bg-secondary)}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr.keyboard-selected,.data-table tbody tr.selected{background-color:color-mix(in srgb,var(--accent-blue) 25%,var(--bg-card))}.task-table{width:100%;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.task-header-row,.task-row{display:grid;grid-template-columns:1fr 140px 60px 110px 90px 100px 90px;align-items:center;gap:.75rem}.task-header-row{background-color:var(--bg-secondary);border-bottom:2px solid var(--border-color);padding:0 1.25rem}.task-header-row .task-cell{padding:.75rem 0;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary)}.task-list-container{flex:1;min-height:0;overflow-y:auto;position:relative}.task-row{padding:.75rem 1.25rem;border-bottom:1px solid var(--border-color);transition:background-color .15s ease,opacity .25s ease,transform .25s ease;cursor:pointer}.task-row-removing{opacity:0;transform:translateX(20px)}.task-row:hover{background-color:var(--bg-secondary)}.task-row:last-child{border-bottom:none}.task-row.keyboard-selected,.task-row.selected{background-color:color-mix(in srgb,var(--accent-blue) 25%,var(--bg-card))}.task-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.task-actions-header{text-align:right}.event-table tbody tr{cursor:pointer}.task-description{font-weight:600;white-space:normal;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}.task-description-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.task-project{font-size:.85rem;color:var(--text-secondary);white-space:nowrap}.priority-high,.priority-low,.priority-medium{display:inline-block;padding:.25rem .5rem;border-radius:var(--radius-xs);font-weight:700;text-align:center}.priority-high{color:var(--accent-red);background:#fde8ea;background:color-mix(in srgb,var(--accent-red) 15%,var(--bg-card))}.priority-medium{color:var(--accent-yellow);background:#fef8e6;background:color-mix(in srgb,var(--accent-yellow) 15%,var(--bg-card))}.priority-low{color:var(--text-muted);background:var(--bg-secondary)}.sortable{cursor:pointer;user-select:none;white-space:nowrap}.sortable:hover{background:var(--bg-hover)}.sort-arrow{display:inline-block;width:.8em;margin-left:.25rem;opacity:.3}.sort-arrow::after{content:'\2195'}.sortable.sort-asc .sort-arrow::after{content:'\2191'}.sortable.sort-desc .sort-arrow::after{content:'\2193'}.sortable.sort-asc .sort-arrow,.sortable.sort-desc .sort-arrow{opacity:1}.task-overdue .task-description-text{color:var(--accent-red)}.task-overdue .task-due{color:var(--accent-red);font-weight:600}.task-tags{display:flex;gap:.25rem;flex-wrap:wrap}.task-tag{background-color:var(--bg-tertiary);color:var(--text-primary);padding:.125rem .5rem;border-radius:var(--radius-xs);font-size:.75rem;font-weight:600;border:1px solid var(--border-color)}.recurrence-icon{color:var(--accent-purple);font-size:.85rem;font-weight:700}.annotation-badge{background-color:var(--accent-yellow);color:var(--text-primary);padding:.125rem .5rem;border-radius:var(--radius-xs);font-size:.7rem;font-weight:700;border:var(--border-width-sm) solid var(--border-color)}.subtask-badge{background-color:var(--bg-secondary);color:var(--text-primary);padding:.125rem .5rem;border-radius:var(--radius-xs);font-size:.7rem;font-weight:700;border:var(--border-width-sm) solid var(--border-color);margin-left:.25rem}.task-started{border-left:4px solid var(--accent-green)}.task-completed{opacity:.5;text-decoration:line-through}.task-deleted{display:none}.due-overdue{color:var(--accent-red);font-weight:700;background:#fde8ea;background:color-mix(in srgb,var(--accent-red) 15%,var(--bg-card));padding:.25rem .5rem;border-radius:var(--radius-xs)}.due-today{color:var(--accent-yellow);font-weight:700;background:#fef8e6;background:color-mix(in srgb,var(--accent-yellow) 15%,var(--bg-card));padding:.25rem .5rem;border-radius:var(--radius-xs)}.due-soon{color:var(--text-secondary)}.due-future{color:var(--text-muted)}.events-list{display:flex;flex-direction:column;flex:1;min-height:0;gap:1rem}.event-table-virtual{width:100%;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.event-header-row,.event-row-virtual{display:grid;grid-template-columns:100px 80px 1fr 150px 40px;align-items:center;gap:.5rem}.event-header-row{background-color:var(--bg-secondary);border-bottom:2px solid var(--border-color);flex-shrink:0}.event-header-row .event-cell{padding:1rem 1.25rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary)}.event-list-container{flex:1;min-height:0;overflow-y:auto;position:relative}.event-row-virtual{padding:.75rem 1.25rem;border-bottom:1px solid var(--border-color);transition:background-color .15s ease;cursor:pointer}.event-row-virtual:hover{background-color:var(--bg-secondary)}.event-row-virtual:last-child{border-bottom:none}.event-row-virtual.event-past{opacity:.7}.event-cell{overflow:hidden;text-overflow:ellipsis}.event-row{cursor:pointer}.event-cell-date{white-space:nowrap}.event-cell-date .event-date-num{font-weight:700;font-size:.9rem;color:var(--text-primary);margin-right:.5rem}.event-date-badge{display:inline-block;padding:.15rem .4rem;background:var(--accent-green);color:var(--text-on-accent);font-size:.7rem;font-weight:700;text-transform:uppercase;border-radius:var(--radius-xs);margin-right:.5rem}.event-cell-time{font-family:var(--font-mono);font-size:.85rem;color:var(--text-secondary)}.event-cell-title{font-weight:600}.event-cell-location{color:var(--text-secondary);font-size:.875rem}.event-date-badge.event-proximity-today{background:var(--accent-green)}.event-date-badge.event-proximity-tomorrow{background:var(--accent-yellow);color:var(--text-primary)}.event-date-badge.event-proximity-week{background:var(--accent-cyan)}.event-date-badge.event-proximity-future{background:var(--accent-blue)}.event-date-badge.event-proximity-past{background:var(--text-muted)}.event-row.event-past{opacity:.7}.no-upcoming-events{text-align:center;padding:2rem;color:var(--text-secondary);font-style:italic}.past-events-section{margin-top:.5rem}.past-events-toggle{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;font-weight:600;color:var(--text-secondary);transition:background-color .15s ease,color .15s ease;list-style:none}.past-events-toggle::-webkit-details-marker{display:none}.past-events-toggle::before{content:'▶';font-size:.7rem;transition:transform .15s ease}.past-events-section[open] .past-events-toggle::before{transform:rotate(90deg)}.past-events-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary)}.past-events-label{flex:1}.past-events-count{background:var(--text-muted);color:var(--text-on-accent);font-size:.75rem;padding:.15rem .5rem;border-radius:var(--radius-sm)}.past-events-section .event-table-past{margin-top:.75rem;opacity:.85}.past-events-section .event-list-container{max-height:300px}#recurring-events-section .event-table-virtual{opacity:1;margin-top:.75rem}#recurring-events-section .event-list-container{max-height:320px}.event-row-virtual.event-recurring .event-recurrence-pattern{font-weight:600;color:var(--accent-primary)}.events-section-heading{margin:1rem 0 .5rem;font-size:.95rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.event-item{display:flex;gap:1rem;padding:1rem;background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);transition:background-color .15s ease;cursor:pointer}.event-item:hover{background-color:var(--bg-secondary)}.event-date{flex-shrink:0;width:80px;text-align:center;padding:.75rem;background-color:var(--accent-green);border-radius:var(--radius-sm);color:var(--text-on-accent)}.event-date-day{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.event-date-num{font-size:1.5rem;font-weight:700}.event-content{flex:1}.event-title{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;color:var(--text-primary);margin-bottom:.25rem}.event-details{font-size:.875rem;color:var(--text-secondary);display:flex;gap:1rem}.event-location,.event-time{display:flex;align-items:center;gap:.25rem}.event-project{margin-top:.5rem}.email-list{display:flex;flex-direction:column;background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;flex:1;min-height:0;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.email-list-container{flex:1;min-height:0;overflow-y:auto;position:relative}.email-item{display:flex;gap:1rem;padding:1rem;border-bottom:2px solid var(--border-color);transition:background-color .15s ease;cursor:pointer}.email-item:last-child{border-bottom:none}.email-item:hover{background-color:var(--bg-secondary)}.email-item.unread{background-color:color-mix(in srgb,var(--accent-blue) 20%,var(--bg-card));border-left:4px solid var(--accent-blue)}.email-item.unread .email-subject{font-weight:700}.email-item.unread .email-from{font-weight:700}.email-item.outgoing{border-left:4px solid var(--accent-green)}.email-checkbox{flex-shrink:0;margin-top:.25rem}.email-content{flex:1;min-width:0}.email-header{display:flex;justify-content:space-between;margin-bottom:.25rem;align-items:center;gap:.5rem}.thread-badge{background-color:var(--bg-tertiary);color:var(--text-secondary);font-size:.7rem;font-weight:600;padding:.1rem .4rem;border-radius:var(--radius-md);min-width:1.25rem;text-align:center}.email-from{color:var(--text-primary);font-size:.9rem;font-weight:600}.email-date{color:var(--text-muted);font-size:.8rem;flex-shrink:0;font-weight:600}.email-subject{color:var(--text-primary);font-size:.95rem;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.email-preview{color:var(--text-muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes toastSlideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toast{position:fixed;bottom:var(--space-5);right:var(--space-5);padding:var(--space-3) var(--space-5);background:var(--bg-card);color:var(--text-primary);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-brutal-md);z-index:2000;font-weight:600;display:flex;align-items:center;gap:var(--space-3);animation:toastSlideIn .3s ease}.toast.toast-leaving{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.toast-info{background:var(--bg-card);color:var(--text-primary)}.toast-success{background:var(--accent-green);color:var(--text-on-accent)}.toast-error{background:var(--accent-red);color:var(--text-on-accent)}.toast-action{background:0 0;border:1px solid currentColor;border-radius:var(--radius-sm);color:inherit;cursor:pointer;padding:.15rem .5rem;font-size:var(--font-size-sm);font-weight:600;font-family:inherit}.toast-undo{z-index:10000}.undo-message{flex:1}.undo-btn{padding:.25rem .75rem;background:var(--accent-blue);color:var(--text-on-accent);border:2px solid var(--border-color);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:background .15s ease}.undo-btn:hover{background:color-mix(in srgb,var(--accent-blue) 80%,#000)}.undo-countdown{font-size:var(--font-size-sm);color:var(--text-muted);min-width:2.5rem;text-align:right}@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}@keyframes modalSlideOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-20px) scale(.95)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--overlay-color);display:flex;align-items:center;justify-content:center;z-index:1000;animation:modalFadeIn .15s ease-out}.modal-overlay.hidden{display:none}.modal-overlay.closing{animation:modalFadeOut .15s ease-in forwards}.modal-container{background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-brutal-xl);max-width:var(--width-modal);width:90%;max-height:90vh;overflow:auto;animation:modalSlideIn .2s ease-out}.modal-container.modal-large{max-width:calc(100vw - 4rem);width:calc(100vw - 4rem);max-height:calc(100vh - 4rem);height:calc(100vh - 4rem);display:flex;flex-direction:column}.modal-container.modal-large .modal-content{flex:1;overflow:auto;display:flex;flex-direction:column}.modal-overlay.closing .modal-container{animation:modalSlideOut .15s ease-in forwards}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:var(--border-width) solid var(--border-color);background:var(--bg-secondary)}.modal-header h2,.modal-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700}.modal-close{background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);font-size:1.25rem;color:var(--text-primary);cursor:pointer;line-height:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease}.modal-close:hover{background:var(--accent-blue);color:var(--text-on-accent)}.modal-content{padding:1.5rem}.form-group{margin-bottom:1.25rem}.form-more-toggle{display:block;background:0 0;border:none;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--accent-blue);padding:.25rem 0;margin-bottom:.75rem}.form-more-toggle::before{content:'+ '}.form-more-toggle.expanded::before{content:'- '}.form-extended-fields.hidden{display:none}.recurrence-weekday-label{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.8rem;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer}.recurrence-weekday-label:has(input:checked){background:var(--accent-primary);color:var(--bg-primary);border-color:var(--accent-primary)}.recurrence-weekday-label input[type=checkbox]{display:none}.recurrence-config .form-input,.recurrence-config .form-select{font-size:.85rem;padding:.25rem .5rem}.form-label{display:block;font-size:.9rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.form-input,.form-select,.form-textarea{width:100%;padding:.75rem 1rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-card);color:var(--text-primary);font-size:1rem;box-shadow:none}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:0;background-color:var(--bg-card);box-shadow:0 0 0 2px var(--accent-blue)}.form-textarea{min-height:100px;resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem}.form-input[aria-invalid=true],.form-select[aria-invalid=true],.form-textarea[aria-invalid=true]{border-color:var(--accent-red);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-red) 30%,transparent)}.form-input[aria-invalid=true]:focus,.form-select[aria-invalid=true]:focus,.form-textarea[aria-invalid=true]:focus{box-shadow:0 0 0 2px var(--accent-red)}.form-error{color:var(--accent-red);font-size:.8rem;font-weight:600;margin-top:.25rem;display:none}.form-error.visible{display:block}.form-hint{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-1)}.form-hint--preview{color:var(--accent-primary)}.form-checkbox-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}.empty-state-action{margin-top:var(--space-3)}.stack{display:flex;flex-direction:column}.stack-2{gap:var(--space-2)}.stack-3{gap:var(--space-3)}.stack-4{gap:var(--space-4)}.row-flex{display:flex;align-items:center}.row-flex-2{gap:var(--space-2)}.row-flex-3{gap:var(--space-3)}.row-flex-4{gap:var(--space-4)}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-danger{color:var(--accent-red)}.text-sm{font-size:var(--font-size-sm)}.text-xs{font-size:var(--font-size-xs, .75rem)}.section-divider{border-top:var(--border-width-sm) solid var(--border-color);padding-top:var(--space-4);margin-top:var(--space-4)}.sync-status-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}.sync-status-dot{width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent-green);display:inline-block}.sync-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-5)}.sync-stat{padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-md)}.sync-stat-label{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--space-1)}.sync-stat-value{font-size:var(--font-size-md, .9rem)}.sync-encryption-error{color:var(--accent-red);font-size:var(--font-size-sm);margin-top:var(--space-2);display:none}.sync-encryption-error.visible{display:block}.sync-section-actions{margin-bottom:var(--space-5)}.sync-banner{padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--font-size-sm);color:var(--text-secondary)}.sync-banner--warning{background:var(--bg-secondary);border:1px solid var(--border-color);padding:var(--space-4)}.sync-empty{padding:var(--space-5) 0}.sync-empty-message{margin-bottom:var(--space-5)}.sync-hint{margin-bottom:var(--space-4)}.sync-status-label{font-weight:500}.sync-account-row{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-5);font-size:var(--font-size-sm)}.sync-account-label{color:var(--text-muted)}.sync-account-value{color:var(--text-primary)}.sync-account-username{color:var(--text-muted)}.sync-banner-title{font-weight:500;margin:0 0 var(--space-3) 0}.sync-banner-body{margin:0 0 var(--space-2) 0;font-size:var(--font-size-sm);color:var(--text-secondary)}.sync-banner-tier-line{margin:0 0 var(--space-4) 0;font-size:var(--font-size-sm);color:var(--text-secondary)}.sync-banner-actions{display:flex;gap:var(--space-2);align-items:center}.settings-subheading{margin-bottom:var(--space-3);font-size:var(--font-size-md, .9rem)}.settings-desc-block{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-4)}.settings-actions-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}.settings-actions-row--center{align-items:center;flex-wrap:nowrap;margin-top:var(--space-3)}.settings-status-text{font-size:var(--font-size-sm);color:var(--text-secondary)}.settings-section-block{padding-top:var(--space-4);border-top:var(--border-width-sm) solid var(--border-color)}.form-hint--spaced{margin-top:var(--space-2)}.empty-italic{color:var(--text-secondary);font-style:italic}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.email-detect-status{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-1)}.email-detect-note{font-size:var(--font-size-sm);margin-top:var(--space-2);padding:var(--space-3) var(--space-3);background:var(--bg-tertiary);border-left:3px solid var(--accent-primary);border-radius:var(--radius-sm);line-height:var(--line-height-normal)}.account-row{padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--space-2)}.account-row-header{display:flex;justify-content:space-between;align-items:flex-start}.account-row-name{font-weight:600}.account-row-meta{font-size:var(--font-size-sm);color:var(--text-secondary)}.account-row-sync{font-size:var(--font-size-sm);color:var(--text-secondary)}.account-row-provider-badge{font-size:var(--font-size-xs, .7rem);padding:.125rem .375rem;background:var(--accent-blue);color:var(--text-on-accent);border-radius:var(--radius-xs);margin-left:var(--space-2)}.account-delete-btn{color:var(--accent-red)}.test-conn-result{padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--space-2)}.test-conn-result--success{color:var(--accent-green)}.test-conn-result--error{color:var(--accent-red)}.folder-list{max-height:150px;overflow-y:auto;background:var(--bg-secondary);padding:var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--font-size-sm)}.folder-list-meta{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-2)}.error-pre{background:var(--bg-secondary);padding:var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--font-size-sm);white-space:pre-wrap;max-height:150px;overflow-y:auto}.test-conn-section{border-top:var(--border-width-sm) solid var(--border-color);margin:var(--space-4) 0;padding-top:var(--space-4)}.oauth-waiting{text-align:center;padding:var(--space-5)}.oauth-waiting-title{font-size:var(--font-size-lg, 1.25rem);margin-bottom:var(--space-4)}.oauth-waiting-body{color:var(--text-secondary);margin-bottom:var(--space-5)}.oauth-waiting-spinner{margin:0 auto var(--space-5)}.contact-card-header{gap:var(--space-3)}.contact-card-body{flex:1;min-width:0}.contact-detail-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}.contact-detail-name{margin:0}.contact-detail-tags{margin-bottom:var(--space-4)}.form-actions--spaced{margin-top:var(--space-5)}.milestones-empty{color:var(--text-muted);font-size:var(--font-size-sm);margin-bottom:var(--space-4)}.bulk-modal-prompt{color:var(--text-secondary);margin-bottom:var(--space-2)}.bulk-modal-prompt--wide{margin-bottom:var(--space-3)}.bulk-modal-option-btn{width:100%;text-align:left;margin-bottom:var(--space-1)}.bulk-modal-scroll{max-height:300px;overflow-y:auto}.bulk-priority-row{display:flex;gap:var(--space-2)}.snooze-hint{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0 0 var(--space-3) 0}.time-tracking-empty{color:var(--text-secondary);padding:var(--space-4) 0}.backups-empty{color:var(--text-secondary);font-style:italic}.backup-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:var(--space-2)}.backup-item-meta{font-size:var(--font-size-sm);color:var(--text-secondary)}.export-desc{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-5)}.export-note{margin-top:var(--space-4);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-sm)}.export-note-text{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0}.paint-time-preview{font-weight:600;color:var(--accent-primary);margin-bottom:var(--space-2)}.recurrence-config{display:none;margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--border-color);border-radius:var(--radius-sm)}.recurrence-config:not(.hidden){display:block}.recurrence-preview{font-size:var(--font-size-sm);color:var(--accent-primary);font-weight:600;margin-bottom:var(--space-2)}.recurrence-sublabel{font-size:var(--font-size-xs, .75rem)}.recurrence-unit{font-size:var(--font-size-sm)}.recurrence-day-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm)}.recurrence-nth-toggle{font-size:var(--font-size-sm);margin:var(--space-1) 0}.recurrence-row{margin-bottom:var(--space-2)}.recurrence-row.recurrence-hidden{display:none}.recurrence-interval-row{display:flex;align-items:center;gap:var(--space-2)}.recurrence-num{width:4rem}.recurrence-weekdays{display:flex;gap:var(--space-1);flex-wrap:wrap}.recurrence-monthly{margin-bottom:0}.recurrence-monthly.recurrence-hidden{display:none}.recurrence-monthly-stack{display:flex;flex-direction:column;gap:var(--space-2)}.recurrence-monthly-week{width:auto}.btn-danger-text{color:var(--accent-red)}.confirm-message-wrap{margin-bottom:var(--space-5)}.confirm-message{color:var(--text-secondary);line-height:var(--line-height-normal)}.review-intro{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0 0 var(--space-4)}.review-intro--weekly{margin:var(--space-2) 0 var(--space-4)}.no-events-day{color:var(--text-secondary)}.loading--error{color:var(--accent-red)}.project-dashboard-desc{color:var(--text-secondary);margin-bottom:var(--space-4)}.pending-key-hint{position:fixed;bottom:var(--space-5);left:50%;transform:translateX(-50%);padding:var(--space-2) var(--space-4);background:var(--bg-card);color:var(--text-primary);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-brutal-md);z-index:10000;font-size:var(--font-size-sm);white-space:nowrap;animation:toastSlideIn .15s ease}.pending-key-hint-label{opacity:.7}.pending-key-hint kbd{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xs);padding:.125rem .4rem;font-family:inherit;font-size:var(--font-size-sm)}.shortcuts-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-color);display:flex;align-items:center;justify-content:center;z-index:3000}.shortcuts-overlay-panel{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-5);max-width:600px;max-height:80vh;overflow-y:auto}.shortcuts-title{margin-top:0;margin-bottom:var(--space-4);border-bottom:1px solid var(--border-color);padding-bottom:var(--space-2)}.shortcuts-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}.shortcuts-group-heading{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-2)}.shortcuts-group-heading+.shortcut-row{margin-top:0}.shortcuts-group-heading-spaced{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-2);margin-top:var(--space-3)}.shortcuts-close{margin-top:var(--space-5);text-align:center}.shortcut-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.shortcut-row kbd{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xs);padding:.25rem .5rem;font-family:inherit;font-size:var(--font-size-sm);min-width:1.5rem;text-align:center}.shortcut-row span{color:var(--text-secondary);font-size:var(--font-size-sm);margin-left:auto}.quick-add-syntax{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-2);line-height:var(--line-height-relaxed)}.quick-add-syntax>span{margin-right:var(--space-3)}.quick-add-syntax kbd{font-size:.7rem;padding:.1rem .3rem;border:1px solid var(--border-color);border-radius:var(--radius-xs);background:var(--bg-secondary)}.virtual-scroller-wrapper{position:relative;width:100%}.virtual-scroller-spacer{height:0;width:100%}.meta-text{font-size:var(--font-size-sm);color:var(--text-muted)}.meta-text--secondary{color:var(--text-secondary)}.subtasks-empty{color:var(--text-secondary);text-align:center;padding:var(--space-4)}.subtask-linked-tag{color:var(--accent-color);font-size:var(--font-size-sm)}.task-actions-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--border-color)}.loading--error{color:var(--accent-red)}.error-state--padded{padding:var(--space-4)}.event-cell--shrink{flex:0 0 auto;padding-right:0}.hr-soft{border:none;border-top:1px solid var(--border-color);margin:var(--space-2) 0}.card-badge--success{background:var(--accent-green);color:var(--text-on-accent)}.card-badge--warning{background:var(--accent-yellow)}.card-badge--info{background:var(--accent-blue);color:var(--text-on-accent)}.card-badge--danger{background:var(--accent-red);color:var(--text-on-accent)}.card-badge--neutral{background:var(--bg-secondary)}.empty-italic--muted{color:var(--text-muted);font-style:italic}.review-history-block{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed var(--border-color)}.review-history-heading{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--space-3)}.email-attachment-row{display:flex;align-items:center;gap:var(--space-2);padding:.375rem 0}.email-attachment-size{font-size:var(--font-size-sm);color:var(--text-muted);flex-shrink:0}.email-attachments-block{margin-bottom:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border-color)}.email-attachments-heading{font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-1)}.email-thread-count{color:var(--text-muted);font-size:var(--font-size-sm)}.email-subject-line{font-weight:600;font-size:1.1rem}.email-meta-line{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-1)}.email-snoozed-tag{color:var(--accent-yellow)}.email-actions-bar{border-top:1px solid var(--border-color);padding-top:var(--space-4);margin-top:auto}.email-attachment-tag{margin-right:var(--space-2)}.email-attachment-remove-btn{background:0 0;border:none;color:var(--accent-red);cursor:pointer;padding:0;font-family:inherit}.email-draft-item{cursor:pointer;padding:var(--space-3)}.email-draft-meta{font-size:var(--font-size-sm);color:var(--text-secondary)}.label-existing-line{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-1)}.search-no-results{padding:var(--space-5);text-align:center;color:var(--text-secondary)}.email-attachment-name{flex:1;min-width:0}.email-draft-subject{font-weight:500}.compose-attachment-total{display:flex;gap:var(--space-2);align-items:baseline;padding-top:var(--space-2);margin-top:var(--space-1);font-size:var(--font-size-sm);color:var(--text-muted);border-top:1px dashed var(--border-color)}.compose-attachment-total.over-warn{color:var(--accent-yellow)}.compose-attachment-total.over-cap{color:var(--accent-red)}.compose-attachment-warn{font-style:italic}.about-info-list{display:grid;grid-template-columns:max-content 1fr;column-gap:var(--space-4);row-gap:var(--space-2);margin:var(--space-4) 0;font-size:var(--font-size-sm)}.about-info-list dt{font-weight:600;color:var(--text-secondary)}.about-info-list dd{margin:0;font-family:var(--font-mono)}.about-updater-note{margin-top:var(--space-4)}.filter-count{font-size:var(--font-size-sm);color:var(--text-muted);margin-right:var(--space-2);white-space:nowrap}.filter-count--capped{color:var(--accent-yellow);font-weight:600}@media (hover:none){#task-view-toggle{display:none}}.swipe-peek{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 var(--space-3);font-size:var(--font-size-sm);font-weight:600;color:var(--text-on-accent);pointer-events:none;opacity:0;transition:opacity .1s linear;z-index:0}.swipe-peek--right{left:0;background:var(--accent-blue);justify-content:flex-start}.swipe-peek--left{right:0;background:var(--accent-blue);justify-content:flex-end}.swipe-peek--success{background:var(--accent-green)}.swipe-peek--warn{background:var(--accent-yellow);color:var(--text-primary)}.swipe-peek--danger{background:var(--accent-red)}.swipe-peek--ready{box-shadow:inset 0 0 0 2px var(--text-on-accent)}.email-item,.event-row-virtual,.task-row{position:relative;overflow:hidden}.attachment-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border-color)}.attachment-icon{font-size:1.2rem}.attachment-meta{font-size:var(--font-size-sm);color:var(--text-muted)}.attachment-sync-warning{font-size:var(--font-size-sm);color:var(--text-muted)}.attachment-delete-btn{color:var(--accent-red)}.attachment-info{flex:1;min-width:0}.attachment-filename{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-actions{display:flex;gap:var(--space-1)}.attachment-attach-row{margin-top:var(--space-4)}.link-task-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--space-2);cursor:pointer}.link-task-item:hover{background:var(--bg-tertiary)}.link-task-project{font-size:var(--font-size-sm);color:var(--text-secondary)}.link-task-prompt{color:var(--text-secondary);margin-bottom:var(--space-4)}.link-task-desc{flex:1}.link-task-list{max-height:400px;overflow-y:auto}.form-actions--top-spaced{margin-top:var(--space-4)}.about-panel{text-align:center;padding:var(--space-4)}.about-title{font-family:var(--font-display);margin-bottom:var(--space-4)}.about-tagline{color:var(--text-secondary);margin-bottom:var(--space-2)}.about-version{color:var(--text-muted);font-size:var(--font-size-sm)}.welcome-panel{line-height:var(--line-height-relaxed)}.welcome-intro{color:var(--text-secondary);margin-bottom:var(--space-4)}.welcome-section{margin-bottom:var(--space-4)}.welcome-subhead{font-size:var(--font-size-md, .9rem);margin-bottom:var(--space-2)}.welcome-subhead--tight{margin-bottom:var(--space-1)}.welcome-step-stack{display:flex;flex-direction:column;gap:var(--space-2)}.welcome-step-btn{text-align:left}.welcome-tabs-list{color:var(--text-secondary);font-size:var(--font-size-sm);padding-left:var(--space-4);margin:0}.review-more-line{color:var(--text-muted);font-size:var(--font-size-sm);margin-top:var(--space-2)}.modal-attachments{font-size:var(--font-size-sm);margin-top:var(--space-1)}.account-row-info{flex:1}.account-row-actions{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.account-row-quick{display:flex;gap:var(--space-2)}.account-row-quick .btn{flex:1}.account-list{margin-bottom:var(--space-4);max-height:400px;overflow-y:auto}.form-actions-spacer{flex:1}.oauth-block{margin-bottom:var(--space-5)}.oauth-block-title{font-weight:500;margin-bottom:var(--space-3)}.oauth-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2)}.oauth-buttons .btn{flex:1;min-width:120px}.oauth-helptext{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-2)}.imap-block-divider{border-top:var(--border-width-sm) solid var(--border-color);margin:var(--space-4) 0;padding-top:var(--space-4)}.imap-block-title{font-weight:500;margin-bottom:var(--space-3)}.test-conn-results{margin-bottom:var(--space-4)}.sync-results{margin-bottom:var(--space-4)}.sync-result-banner{padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--space-2)}.sync-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-2)}.sync-result-tile{padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-sm)}.app-footer{background-color:var(--bg-card);border-top:var(--border-width) solid var(--border-color);padding:.75rem 1.5rem}.footer-content{max-width:var(--width-container);margin:0 auto;display:flex;justify-content:space-between;align-items:center}.keyboard-hints{display:flex;gap:1rem;font-size:.8rem;color:var(--text-muted)}kbd{display:inline-block;padding:.2rem .5rem;background-color:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:.75rem;font-weight:700}.welcome-hint{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-2)}.version{font-size:.75rem;color:var(--text-muted);font-weight:600}.empty-state{text-align:center;padding:3rem;color:var(--text-secondary)}.empty-state--compact{padding:2rem 1rem;font-size:var(--font-size-sm)}.empty-state--dashboard{padding:2rem 1rem}.empty-state--error{color:var(--accent-red)}.empty-state-icon{font-size:4rem;margin-bottom:1rem}.empty-state-text{font-size:1.1rem;font-weight:600;margin-bottom:1rem}.error-state{text-align:center;padding:2rem;color:var(--accent-red);background:color-mix(in srgb,var(--accent-red) 10%,var(--bg-card));border:var(--border-width-sm) solid var(--accent-red);border-radius:var(--radius-sm);font-weight:600}.view{display:block}.view.hidden{display:none}.filter-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem;padding:1rem;background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.filter-group{display:flex;align-items:center;gap:.5rem}.filter-label{font-size:.8rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.filter-select{padding:.5rem .75rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-card);color:var(--text-primary);font-size:.875rem;font-weight:600}.filter-select:focus{outline:0;background-color:var(--accent-blue);color:var(--text-on-accent)}.filter-checkbox{display:flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:600;color:var(--text-primary);cursor:pointer}.filter-checkbox input[type=checkbox]{width:1rem;height:1rem;cursor:pointer}.btn-link{background:0 0;border:none;box-shadow:none;color:var(--text-secondary);font-size:.875rem;cursor:pointer;text-decoration:underline;padding:.5rem}.btn-link:hover{box-shadow:none;transform:none;color:var(--text-primary)}@media (min-width:1400px){.main-content{max-width:1600px}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}.project-dashboard-grid{gap:2rem}.day-plan-sidebar{width:320px}.modal-container{max-width:640px}}@media (max-width:1024px){.saved-views-sidebar{width:180px}.day-plan-sidebar{width:240px}.project-dashboard-grid{grid-template-columns:1fr 1fr;gap:1rem}.project-dashboard-grid .dashboard-column:last-child{grid-column:span 2}.filter-bar{flex-wrap:wrap}.filter-actions{width:100%;justify-content:flex-end;margin-top:.5rem}}@media (max-width:768px){.tab-navigation{flex-wrap:wrap;gap:.5rem}.tab{flex:1 1 auto;min-width:calc(33% - .5rem);justify-content:center;padding:.625rem .75rem}.tab-label{display:none}.tab-icon{font-size:1.25rem}.kbd-hint{display:none}.cards-grid{grid-template-columns:1fr}.task-table{font-size:.85rem}.task-header-row,.task-row{grid-template-columns:1fr 80px 40px 80px}.task-header-row .task-cell:nth-child(n+5),.task-row .task-cell:nth-child(n+5){display:none}.filter-bar{flex-direction:column}.keyboard-hints{display:none}.page-title{font-size:1.5rem}.saved-views-sidebar{display:none}.day-plan-content{flex-direction:column}.day-plan-sidebar{width:100%;max-height:200px}.project-dashboard-grid{grid-template-columns:1fr}.project-dashboard-grid .dashboard-column:last-child{grid-column:span 1}.modal-container{width:95%;max-height:95vh}.bulk-actions-bar{flex-wrap:wrap}.bulk-select-all{width:100%;margin-top:.5rem}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pagination-controls{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem;margin-top:1rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md)}.pagination-info{font-weight:600;color:var(--text-secondary);font-size:.9rem}.pagination-controls .btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible,.card:focus-visible,.dashboard-item:focus-visible,.email-item:focus-visible,.event-row-virtual:focus-visible,.filter-select:focus-visible,.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible,.modal-close:focus-visible,.saved-view-item:focus-visible,.snooze-option:focus-visible,.tab:focus-visible,.task-row:focus-visible,.timeline-item:focus-visible,.unscheduled-task:focus-visible{outline:3px solid var(--accent-blue);outline-offset:2px}.event-row,.task-row-clickable{cursor:pointer}.skip-link{position:absolute;top:-100px;left:0;background:var(--accent-blue);color:var(--text-on-accent);padding:.75rem 1.5rem;z-index:9999;font-weight:700;border:var(--border-width) solid var(--border-color);text-decoration:none}.skip-link:focus{top:0}.source-email-link{padding:.75rem;background:var(--bg-secondary);border-radius:var(--radius-sm);border-left:4px solid var(--accent-blue)}.thread-message{margin-bottom:1rem;padding:.75rem;background:var(--bg-secondary);border-radius:var(--radius-sm)}.thread-message-latest{border-left:3px solid var(--accent-blue)}.thread-message-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.8rem;color:var(--text-secondary)}.thread-message-from{font-weight:700}.email-reader-body{white-space:pre-wrap;font-size:.9rem;line-height:1.6;color:var(--text-primary);word-wrap:break-word;overflow-wrap:break-word}.email-reader-body .email-link{color:var(--accent-blue);text-decoration:underline;cursor:pointer;word-break:break-all}.email-reader-body .email-link:hover{color:var(--accent-cyan)}.email-reader-body hr{border:none;border-top:2px solid var(--border-color);margin:1rem 0}.email-reader-quote{border-left:3px solid var(--text-muted);padding-left:1rem;margin:.5rem 0;color:var(--text-secondary);font-style:italic}.email-quote-toggle{display:inline-block;color:var(--text-muted);font-size:.8125rem;cursor:pointer;padding:.25rem 0;user-select:none}.email-quote-toggle:hover{color:var(--accent-blue)}.email-quote-block{border-left:3px solid var(--text-muted);padding-left:1rem;margin:.25rem 0 .5rem;color:var(--text-secondary)}.email-quote-block.hidden{display:none}.autocomplete-dropdown{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-brutal);z-index:100;max-height:200px;overflow-y:auto}.autocomplete-item{padding:.5rem .75rem;cursor:pointer;font-size:.875rem}.autocomplete-item.active,.autocomplete-item:hover{background:var(--bg-secondary)}.autocomplete-name{font-weight:500}.autocomplete-email{color:var(--text-secondary);margin-left:.25rem}.email-label-badge{display:inline-block;font-size:.6875rem;padding:.125rem .375rem;border-radius:var(--radius-sm);background:var(--accent-blue);color:var(--bg-primary);font-weight:600;vertical-align:middle}.email-reader-container{display:flex;flex-direction:column;height:100%;min-height:0}.email-reader-header{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color)}.email-sender-contact{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;padding:.4rem .5rem;background:var(--bg-tertiary);border-radius:4px}.email-sender-info{display:flex;flex-direction:column;flex:1;min-width:0}.email-sender-name{font-weight:600;font-size:.85rem}.email-sender-company{font-size:.75rem;color:var(--text-secondary)}.contact-avatar-sm{width:32px;height:32px;border-radius:50%;background:var(--accent-color);color:var(--bg-primary);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}.contact-avatar-unknown{background:var(--bg-secondary);color:var(--text-secondary);border:var(--border-width-sm) solid var(--border-color)}.email-reader-thread{flex:1;overflow-y:auto;margin-bottom:1rem;min-height:0}.dropdown{position:relative;display:inline-block}.dropdown-menu{display:none;position:absolute;bottom:100%;left:0;margin-bottom:.25rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-brutal-md);min-width:160px;z-index:100}.dropdown-menu.show{display:block}.dropdown-item{display:block;width:100%;padding:.5rem 1rem;text-align:left;background:0 0;border:none;cursor:pointer;font-size:.875rem;color:var(--text-primary)}.dropdown-item:hover{background:var(--bg-secondary)}.dropdown-item:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}.dropdown-item:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}.context-menu{position:fixed;z-index:10000;min-width:180px;max-width:280px;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-brutal-lg);padding:.25rem 0;display:none}.context-menu.visible{display:block}.context-menu-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--text-primary);cursor:pointer;border:none;background:0 0;width:100%;text-align:left;transition:background .1s}.context-menu-item:focus,.context-menu-item:hover{background:var(--accent-blue);color:var(--text-on-accent);outline:0}.context-menu-item:focus-visible{outline:2px solid var(--accent-blue);outline-offset:-2px}.context-menu-header{font-size:.7rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;padding:.5rem 1rem .25rem}.context-menu-item-icon{width:1.25rem;text-align:center;flex-shrink:0}.context-menu-item-label{flex:1}.context-menu-item-subtitle{display:block;font-size:.7rem;color:var(--text-secondary);font-weight:400}.context-menu-item-shortcut{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}.context-menu-item--danger{color:var(--accent-red)}.context-menu-item--danger:hover{background:var(--accent-red);color:var(--text-on-accent)}.context-menu-separator{height:2px;background:var(--border-color);margin:.25rem .5rem}.context-menu-hint{padding:.35rem 1rem;font-size:.7rem;color:var(--text-muted);border-top:1px solid var(--border-color);margin-top:.25rem}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-left:2px solid var(--border-color)}::-webkit-scrollbar-thumb{background:var(--text-muted);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.loading{display:flex;justify-content:center;align-items:center;height:200px;color:var(--text-secondary);font-family:var(--font-heading)}.skeleton-shimmer{display:flex;flex-direction:column;gap:1rem;padding:1rem}.skeleton-shimmer .skeleton-row{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--bg-card);border-radius:var(--radius-md);border:var(--border-width) solid var(--border-color)}.skeleton-shimmer .skeleton-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;flex-shrink:0}.skeleton-shimmer .skeleton-lines{flex:1;display:flex;flex-direction:column;gap:.4rem}.skeleton-shimmer .skeleton-line{height:.75rem;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-shimmer .skeleton-line.short{width:40%}.skeleton-shimmer .skeleton-line.medium{width:65%}.skeleton-shimmer .skeleton-line.long{width:90%}@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:var(--radius-full);animation:spin .8s linear infinite}.btn-loading{position:relative;pointer-events:none;opacity:.8}.btn-loading .btn-text{visibility:hidden}.btn-loading::after{content:'';position:absolute;left:50%;top:50%;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;border:2px solid currentColor;border-top-color:transparent;border-radius:var(--radius-full);animation:spin .8s linear infinite}.hidden{display:none!important}.project-dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;flex:1;min-height:0}.dashboard-column{background:var(--bg-card);border:var(--border-width) solid var(--border-color);padding:1rem;display:flex;flex-direction:column;overflow:hidden}.dashboard-column-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border-color)}.dashboard-column-header h3{margin:0;font-size:1rem;font-family:var(--font-heading);font-weight:700}.dashboard-list{flex:1;overflow-y:auto}.dashboard-item{padding:.75rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);margin-bottom:.5rem;cursor:pointer;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}.dashboard-item:hover{background:var(--bg-secondary);transform:translate(-2px,-2px);box-shadow:calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--border-color)}.dashboard-item-title{font-weight:600;margin-bottom:.25rem}.dashboard-item-meta{font-size:.75rem;color:var(--text-secondary)}.task-badges{display:flex;gap:.25rem;margin-top:.25rem}.task-badge{font-size:.65rem;padding:.15rem .4rem;border:var(--border-width-sm) solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-weight:600}.task-badge.has-items{background:var(--accent-blue);color:var(--text-on-accent)}.task-badge.recurrence{background:var(--accent-purple);color:var(--text-on-accent)}.task-row-clickable{cursor:pointer;transition:background .1s}.task-row-clickable:hover{background:var(--bg-secondary)}.progress-bar-container{width:100%;height:10px;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);overflow:hidden}.progress-bar{height:100%;background:var(--accent-green);transition:width .3s ease}.no-subtasks{color:var(--text-secondary);font-size:.875rem}#day-plan-view{display:flex;flex-direction:column;flex:1;min-height:0}#day-plan-view .page-header{flex-shrink:0}.day-plan-nav{display:flex;align-items:center;gap:.5rem}.day-plan-date-picker{padding:.5rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body)}.day-plan-date-display{font-size:1.25rem;font-weight:700;margin-left:1rem;font-family:var(--font-heading);line-height:1}.day-plan-content{flex:1;min-height:0;display:flex;gap:1.5rem}.day-plan-main{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.day-plan-sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.sidebar-header{padding:1rem;border-bottom:2px solid var(--border-color);flex-shrink:0}.sidebar-header h3{margin:0;font-size:1rem;font-family:var(--font-heading);font-weight:700}.sidebar-task-list{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.timeline-container{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}.timeline-scroll-area{position:relative;padding:.5rem 1rem 3rem .5rem;min-height:min-content}#timeline-slots{position:relative}#timeline-items{position:absolute;top:.5rem;left:.5rem;right:1rem;bottom:0;pointer-events:none}#timeline-items .timeline-item{pointer-events:auto}.timeline-slot{display:grid;grid-template-columns:50px 1fr;height:var(--timeline-slot-h,12px);position:relative}.timeline-slot.hour-start .timeline-slot-area{border-top:1px dashed color-mix(in srgb,var(--border-color) 50%,transparent)}.timeline-time{font-size:.7rem;color:var(--text-secondary);padding-right:.5rem;text-align:right;font-weight:500;transform:translateY(-.5em)}.timeline-hint{text-align:center;color:var(--text-secondary);font-size:.85rem;font-weight:600;margin:0 0 .5rem;padding:.35rem .75rem;background:var(--bg-secondary);border-radius:var(--radius-sm)}.timeline-slot-area{position:relative;cursor:grab}.timeline-slot-area:hover{background:var(--bg-secondary)}.timeline-item{position:absolute;left:60px;right:10px;border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);padding:.25rem .5rem;overflow:hidden;cursor:grab;z-index:10;transition:opacity .15s ease,box-shadow .15s ease}.timeline-item.task{background:var(--accent-green);color:var(--text-primary)}.timeline-item.event{background:var(--accent-blue);color:var(--text-on-accent)}.timeline-item.block{opacity:.85}.timeline-item.block-free_time{background:var(--accent-cyan);color:var(--text-primary)}.timeline-item.block-personal{background:var(--accent-yellow);color:var(--text-primary)}.timeline-item.block-vacation{background:var(--accent-purple);color:var(--text-on-accent)}.timeline-item.block-focus{background:var(--accent-red);color:var(--text-on-accent)}.timeline-item.conflict{box-shadow:0 0 0 3px var(--accent-red)}.timeline-item.selected{box-shadow:0 0 0 3px var(--bg-card),0 0 0 6px var(--accent-blue)}.timeline-item-title{font-weight:600;font-size:.75rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-item-meta{font-size:.65rem;opacity:.85;line-height:1.1}.timeline-current-time{position:absolute;left:50px;right:0;height:2px;background:var(--accent-red);z-index:20;pointer-events:none}.timeline-current-time::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;background:var(--accent-red);border-radius:var(--radius-full)}.timeline-paint-preview{position:absolute;left:70px;right:10px;background:var(--accent-blue);opacity:.4;border:var(--border-width-sm) dashed var(--border-color);border-radius:var(--radius-sm);z-index:5;pointer-events:none}.timeline-item.dragging{cursor:grabbing;opacity:.8;z-index:100;box-shadow:var(--shadow-brutal-md,4px 4px 0 var(--border-color))}.timeline-container.is-painting{cursor:crosshair;user-select:none}.timeline-container.is-painting .timeline-slot-area{pointer-events:none}.unscheduled-task{padding:.75rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-left:6px solid var(--accent-green);border-radius:var(--radius-sm);cursor:grab;transition:background-color .1s}.unscheduled-task:hover{background:var(--bg-secondary)}.unscheduled-task.priority-high{border-left-color:var(--accent-red)}.unscheduled-task.priority-medium{border-left-color:var(--accent-yellow)}.unscheduled-task.priority-low{border-left-color:var(--accent-green)}.unscheduled-task-title{font-weight:600;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unscheduled-task-meta{font-size:.75rem;color:var(--text-secondary)}.empty-unscheduled{text-align:center;color:var(--text-secondary);padding:2rem 1rem}.settings-btn{background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:1.25rem;cursor:pointer;padding:.5rem .75rem;margin-left:.5rem;transition:background-color .1s}.settings-btn:hover{background:var(--bg-secondary)}.settings-btn:active{background:var(--bg-tertiary)}.shortcut-hint-btn{font-family:var(--font-mono, monospace);font-weight:700;min-width:2rem;text-align:center;padding:.5rem}.kbd-hint{display:inline-block;font-family:var(--font-mono, monospace);font-size:.65rem;font-weight:600;padding:.1rem .35rem;margin-left:.35rem;border:1px solid currentColor;border-radius:3px;opacity:.6;vertical-align:middle;line-height:1}.settings-section h3{font-size:1rem;color:var(--text-primary)}.settings-section .form-hint{font-size:.75rem;color:var(--text-secondary)}.settings-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.settings-overlay.hidden{display:none}.settings-overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}.settings-overlay-card{position:relative;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg,8px);box-shadow:0 12px 40px rgba(0,0,0,.25);width:min(960px,100%);height:min(720px,100%);max-height:calc(100vh - 2 * var(--space-4));overflow:hidden;display:flex;flex-direction:column}.settings-overlay-card.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width:768px){.settings-overlay{padding:0}.settings-overlay-card{width:100%;height:100%;max-height:100%;border-radius:0;border:none}}.settings-page-layout{display:flex;min-height:100%}.settings-sidebar{width:200px;flex-shrink:0;border-right:1px solid var(--border-color);padding:1.5rem 0;display:flex;flex-direction:column;gap:.25rem}.settings-back-btn{background:0 0;border:none;text-align:left;padding:.5rem 1.25rem;font-size:.875rem;color:var(--text-secondary);cursor:pointer;margin-bottom:1rem}.settings-back-btn:hover{color:var(--text-primary)}.settings-nav-items{display:flex;flex-direction:column;gap:.125rem}.settings-nav-item{background:0 0;border:none;text-align:left;padding:.5rem 1.25rem;font-size:.875rem;color:var(--text-secondary);cursor:pointer;border-radius:0;border-left:2px solid transparent}.settings-nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.settings-nav-item.active{color:var(--text-primary);font-weight:600;border-left-color:var(--accent-primary);background:var(--bg-secondary)}.settings-content{flex:1;padding:1.5rem 2rem;max-width:640px;overflow-y:auto}.contact-header-card{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.5rem}.contact-avatar-large{width:64px;height:64px;border-radius:50%;background:var(--accent-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;flex-shrink:0}.contact-info-section{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1.5rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.contact-info-item{font-size:.875rem}.contact-dashboard-summary{display:flex;gap:1.5rem;margin-bottom:1.5rem}.contact-summary-stat{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.25rem;background:var(--bg-secondary);border-radius:var(--radius-md);min-width:80px}.contact-summary-count{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.contact-summary-label{font-size:.75rem;color:var(--text-secondary);margin-top:.25rem}.contact-timeline{display:flex;flex-direction:column;gap:.25rem}.contact-timeline-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem}.contact-timeline-item:hover{background:var(--bg-hover)}.contact-timeline-icon{flex-shrink:0;width:2rem;text-align:center;font-size:.8rem}.contact-timeline-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-timeline-date{flex-shrink:0;font-size:.75rem;color:var(--text-secondary)}.address-highlight-mirror{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;white-space:nowrap;overflow:hidden;z-index:0;display:flex;align-items:center}.addr-malformed{color:var(--accent-red)}.addr-contact{color:var(--accent-blue)}.addr-verified{color:var(--accent-green)}.addr-ghost{color:var(--text-muted);opacity:.5}.sync-indicator{background:0 0;border:none;cursor:pointer;padding:.25rem .5rem;display:flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.sync-indicator:hover{background:var(--bg-hover)}.sync-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--text-muted);transition:background var(--transition-slow);flex-shrink:0}.sync-dot.connected{background:var(--accent-green)}.sync-dot.syncing{background:var(--accent-blue);animation:sync-pulse 1s infinite}.sync-dot.warn{background:var(--accent-yellow)}.sync-dot.error{background:var(--accent-red)}.sync-label{font-size:var(--font-size-sm);color:var(--text-secondary);white-space:nowrap}@media (max-width:1100px){.sync-label{display:none}}@keyframes sync-pulse{0%,100%{opacity:1}50%{opacity:.4}}.snooze-options{display:flex;flex-direction:column;gap:.5rem}.snooze-option{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);color:var(--text-primary);cursor:pointer;transition:background-color .1s;text-align:left;width:100%}.snooze-option:hover{background:var(--accent-blue);color:var(--text-on-accent)}.snooze-option-label{font-weight:600}.snooze-option-time{font-size:.75rem;color:var(--text-secondary)}.snooze-option:hover .snooze-option-time{color:var(--text-on-accent)}.snooze-custom{margin-top:.5rem;padding-top:.5rem;border-top:2px solid var(--border-color)}.snooze-badge{display:inline-block;font-size:.65rem;padding:.15rem .4rem;border:var(--border-width-sm) solid var(--border-color);background:var(--accent-yellow);color:var(--text-primary);font-weight:700;margin-top:.25rem}.contact-badge{display:inline-block;font-size:.65rem;padding:.15rem .4rem;border:var(--border-width-sm) solid var(--border-color);background:var(--accent-color);color:var(--bg-primary);font-weight:700;margin-top:.25rem}.bulk-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--accent-blue);border:var(--border-width-sm) solid var(--border-color)}.task-actions-cell{text-align:right;white-space:nowrap;display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.task-actions-cell .bulk-checkbox{margin-right:.5rem}.kebab-btn{background:0 0;border:none;cursor:pointer;font-size:1.1rem;line-height:1;padding:.2rem .4rem;border-radius:var(--radius-sm);color:var(--text-secondary);opacity:0;transition:opacity .15s ease}.email-item:focus-within .kebab-btn,.email-item:hover .kebab-btn,.event-row-virtual:focus-within .kebab-btn,.event-row-virtual:hover .kebab-btn,.task-row:focus-within .kebab-btn,.task-row:hover .kebab-btn{opacity:1}.kebab-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.task-recurrence{font-size:.85rem;color:var(--text-secondary)}.task-due{white-space:nowrap}.bulk-actions-bar{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--accent-blue);color:var(--text-on-accent);border:var(--border-width) solid var(--border-color);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);margin-bottom:1rem;color:var(--text-primary)}.bulk-actions-bar.hidden{display:none}.bulk-count{font-weight:700;margin-right:1rem;font-family:var(--font-heading)}.bulk-actions-bar .btn{background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);color:var(--text-primary)}.bulk-actions-bar .btn:hover{background:var(--bg-secondary)}.bulk-select-all{margin-left:auto}.email-checkbox-cell{padding:.75rem .5rem;display:flex;align-items:center}.email-item-with-checkbox{display:flex;align-items:flex-start}.email-item-with-checkbox .email-content{flex:1}.schedule-task-btn{display:flex;align-items:center;gap:.5rem}.time-block-form{display:flex;flex-direction:column;gap:1rem}.time-block-quick-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.time-block-quick-btn{padding:.5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);color:var(--text-primary);cursor:pointer;font-size:.875rem;font-weight:600;transition:background-color .1s}.time-block-quick-btn:hover{background:var(--bg-tertiary)}.time-block-quick-btn.selected{background:var(--accent-blue);color:var(--text-on-accent);box-shadow:inset 0 0 0 2px var(--border-color)}.duration-presets{display:flex;gap:.5rem;flex-wrap:wrap}.duration-preset{padding:.35rem .75rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);color:var(--text-primary);cursor:pointer;font-size:.75rem;font-weight:600;transition:background-color .1s}.duration-preset:hover{background:var(--bg-tertiary)}.duration-preset.selected{background:var(--accent-blue);color:var(--text-on-accent)}.conflict-warning{padding:.75rem;background:var(--accent-red);border:var(--border-width) solid var(--border-color);color:var(--text-on-accent);font-size:.875rem;font-weight:600;margin-top:.5rem}.app-body{display:flex;flex:1;min-height:0;overflow:hidden}.app-body .main-content{flex:1;min-width:0;display:flex;flex-direction:column;overflow-x:visible;overflow-y:auto}#emails-view,#events-view,#projects-view,#tasks-view{padding-bottom:2.5rem}#tasks-view{display:flex;flex-direction:column;flex:1;min-height:0}#tasks-view .bulk-actions-bar,#tasks-view .filter-bar,#tasks-view .page-header{flex-shrink:0}#events-view{display:flex;flex-direction:column;flex:1;min-height:0}#events-view .page-header{flex-shrink:0}#emails-view{display:flex;flex-direction:column;flex:1;min-height:0}#emails-view .bulk-actions-bar,#emails-view .page-header{flex-shrink:0}.saved-views-sidebar{width:200px;flex-shrink:0;background:var(--bg-card);border-right:var(--border-width) solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.sidebar-section{display:flex;flex-direction:column;flex:1;min-height:0}.sidebar-section-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-bottom:2px solid var(--border-color);background:var(--bg-secondary)}.btn-icon{background:0 0;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;font-size:.875rem;line-height:1}.btn-icon:hover{color:var(--text-primary)}.pinned-views-list{flex:1;overflow-y:auto;padding:.5rem}.sidebar-empty{text-align:center;padding:1.5rem .5rem;color:var(--text-muted);font-size:.8rem}.saved-view-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;margin-bottom:.5rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;font-weight:600;color:var(--text-primary);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease}.saved-view-item:hover{background:var(--accent-blue);color:var(--text-on-accent)}.saved-view-item.active{background:var(--accent-blue);color:var(--text-on-accent);box-shadow:inset 0 0 0 2px var(--border-color)}.saved-view-item .view-icon{font-size:.75rem}.saved-view-item .view-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-view-item .view-actions{opacity:0;transition:opacity .1s}.saved-view-item:hover .view-actions{opacity:1}.filter-actions{display:flex;gap:.5rem;margin-left:auto}.contact-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background-color:var(--accent-blue);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;font-family:var(--font-heading);border:2px solid var(--border-color)}.contact-avatar-lg{width:60px;height:60px;min-width:60px;font-size:1.2rem}.contact-card .card-header{display:flex;align-items:center}.contact-nickname{display:block;font-size:.85rem;color:var(--text-secondary);font-style:italic}.contact-company{display:block;font-size:.85rem;color:var(--text-secondary)}.contact-email{font-size:.85rem;color:var(--text-secondary)}.contact-detail .detail-row{margin-bottom:.5rem;font-size:.9rem}.contact-detail .contact-info-section{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-light)}.contact-detail .contact-notes{margin-bottom:1.5rem}.contact-detail .contact-notes p{margin-top:.25rem;white-space:pre-wrap;color:var(--text-secondary)}.sub-collection{margin-bottom:1.25rem}.sub-collection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.sub-collection-header h4{margin:0;font-size:.95rem;font-weight:600}.sub-item{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--border-light);font-size:.9rem}.sub-item:last-child{border-bottom:none}.sub-empty{font-size:.85rem;color:var(--text-secondary);font-style:italic;padding:.25rem 0}.edit-sub-collections{border-top:1px solid var(--border-color);padding-top:1rem;margin-bottom:.5rem}.edit-sub-section{margin-bottom:.75rem}.edit-sub-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.sub-item-compact{font-size:.85rem;color:var(--text-secondary);padding:.125rem 0;display:flex;align-items:center;gap:var(--space-2);justify-content:space-between}.sub-item-actions{display:inline-flex;gap:var(--space-1);flex-shrink:0}.reminder-options{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-2)}.reminder-option{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--text-secondary);cursor:pointer}.task-drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--bg-primary);border-left:1px solid var(--border-color);box-shadow:-4px 0 18px rgba(0,0,0,.18);transform:translateX(100%);transition:transform 180ms ease-out;z-index:60;display:flex;flex-direction:column;overflow:hidden}.task-drawer.visible{transform:translateX(0)}.task-drawer-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.task-drawer-title{flex:1;margin:0;font-size:var(--font-size-lg, 1.05rem);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-drawer-close{flex-shrink:0}.task-drawer-actions{display:flex;gap:var(--space-2);flex-shrink:0}.task-drawer-content{flex:1;overflow-y:auto;padding:var(--space-4)}.task-row--active{background:var(--bg-accent,var(--bg-secondary));box-shadow:inset 3px 0 0 var(--accent-color,var(--text-primary))}@media (max-width:768px){.task-drawer{width:100vw;border-left:none}}@media print{.btn,.context-menu,.filter-bar,.keyboard-hints,.modal-overlay,.pagination,.sidebar,.tabs,.toast{display:none!important}body{background:#fff;color:#000}.main-content{margin:0;padding:0;max-width:100%}.view{padding:0}.data-table{border:1px solid #333;box-shadow:none}.data-table td,.data-table th{border:1px solid #ccc;padding:.5rem}.data-table td,.data-table th{display:table-cell!important}.data-table tbody tr:hover{background:0 0}.task-table{border:1px solid #333;box-shadow:none}.task-list-container{height:auto!important;overflow:visible!important}.task-header-row,.task-row{grid-template-columns:1fr 100px 40px 80px 60px 80px 60px!important}.task-header-row .task-cell,.task-row .task-cell{display:block!important;border:1px solid #ccc;padding:.25rem .5rem}.task-row:hover{background:0 0}.virtual-scroller-spacer{display:none!important}a{color:#000;text-decoration:underline}.view-header{page-break-after:avoid}.data-table{page-break-inside:avoid}}.weekly-review-content{max-width:900px;margin:0 auto;padding:1rem}.weekly-review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:var(--border-width-sm) solid var(--border-color)}.week-info{display:flex;align-items:center;gap:1rem}.week-dates{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--text-primary)}.review-status{padding:.25rem .75rem;border-radius:var(--radius-xs);font-size:.875rem;font-weight:600;border:var(--border-width-sm) solid var(--border-color)}.review-status.completed{background:var(--accent-green);color:var(--text-on-accent)}.review-status.pending{background:var(--accent-yellow);color:var(--text-primary)}.review-status.unreviewed{background:var(--bg-secondary);color:var(--text-muted)}.stat-cards{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.stat-card{flex:1;min-width:100px;max-width:150px;padding:1rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);text-align:center;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.stat-card .stat-number{display:block;font-family:var(--font-heading);font-size:2rem;font-weight:700;color:var(--accent-blue);line-height:1}.stat-card .stat-label{display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-top:.25rem;text-transform:uppercase;letter-spacing:.5px}.stat-card.stat-warning .stat-number{color:var(--accent-yellow)}.stat-card.stat-danger .stat-number{color:var(--accent-red)}.review-section{background:var(--bg-card);border:var(--border-width) solid var(--border-color);padding:1.25rem;margin-bottom:1.5rem;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.section-title{font-family:var(--font-heading);font-size:1.125rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:var(--border-width-sm) solid var(--border-color)}.review-details{margin-top:.75rem}.review-details summary{cursor:pointer;font-weight:600;color:var(--text-secondary);padding:.5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);user-select:none}.review-details summary:hover{background:var(--bg-tertiary)}.review-details[open] summary{margin-bottom:.5rem}.review-event-list,.review-task-list{list-style:none;padding:0;margin:0}.review-event-item,.review-task-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--border-color)}.review-event-item:last-child,.review-task-item:last-child{border-bottom:none}.review-event-item .event-title,.review-task-item .task-description{flex:1;color:var(--text-primary)}.event-time{font-size:.875rem;font-weight:600;color:var(--text-muted);min-width:80px}.project-badge{font-size:.75rem;padding:.125rem .5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary)}.due-badge{font-size:.75rem;padding:.125rem .5rem;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary)}.due-badge.overdue{background:var(--accent-red);color:var(--text-on-accent);border-color:var(--accent-red)}.focus-section{background:linear-gradient(135deg,var(--bg-card) 0,color-mix(in srgb,var(--accent-yellow) 15%,var(--bg-card)) 100%)}.focus-task-list{list-style:none;padding:0;margin:0 0 1rem 0}.focus-task-list.available{opacity:.8}.focus-toggle{background:0 0;border:none;font-size:1.25rem;cursor:pointer;color:var(--text-muted);padding:0;line-height:1;transition:transform .15s ease}.focus-toggle:hover{transform:scale(1.2)}.focus-toggle.focused{color:var(--accent-yellow)}.review-task-item.focused{background:color-mix(in srgb,var(--accent-yellow) 10%,var(--bg-card))}.no-focus-message{color:var(--text-muted);font-style:italic;margin-bottom:1rem}.focused-projects{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.project-tag{background:var(--accent-blue);color:var(--text-on-accent);padding:.25rem .75rem;font-size:.875rem;font-weight:600;border:var(--border-width-sm) solid var(--border-color)}.notes-section{background:var(--bg-card)}.review-notes-input{width:100%;padding:.75rem;font-family:var(--font-mono);font-size:.9rem;border:var(--border-width-sm) solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);resize:vertical;min-height:100px}.review-notes-input:focus{outline:0;background:var(--bg-card);box-shadow:inset 0 0 0 2px var(--accent-blue)}.review-actions{margin-top:1rem;text-align:center}.tab-badge{display:inline-block;width:8px;height:8px;background:var(--accent-red);border-radius:var(--radius-full);margin-left:.5rem;vertical-align:middle;animation:pulse-badge 2s infinite}@keyframes pulse-badge{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}.tab-status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:.5rem;vertical-align:middle;transition:background-color .3s ease}.tab-status-dot.status-none{display:none}.tab-status-dot.status-green{background-color:var(--accent-green)}.tab-status-dot.status-yellow{background-color:var(--accent-yellow);animation:pulse-badge 2s ease-in-out infinite}.tab-status-dot.status-red{background-color:var(--accent-red);animation:pulse-badge 1.5s ease-in-out infinite}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1200px;margin:0 auto}.review-card{background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);padding:1.5rem;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.review-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:var(--border-width-sm) solid var(--bg-secondary)}.review-card .card-title{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.review-card .card-icon{font-size:1.25rem}.review-card .card-badge{font-size:.8rem;padding:.25rem .75rem;border-radius:var(--radius-md);font-weight:600}.week-timeline{grid-column:1/-1}.timeline-visual{display:flex;gap:.5rem;margin-top:1rem}.timeline-day{flex:1;text-align:center;padding:.75rem .5rem;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color);position:relative}.timeline-day.today{background:var(--accent-blue);color:var(--text-on-accent);border-width:2px;font-weight:700}.timeline-day.past{opacity:.7}.timeline-day.future{background:var(--bg-card)}.timeline-day .day-name{font-size:.7rem;font-weight:600;text-transform:uppercase;color:var(--text-muted)}.timeline-day .day-number{font-size:1.1rem;font-weight:700}.day-dots{display:flex;justify-content:center;gap:3px;margin-top:.5rem;min-height:8px}.day-dot{width:8px;height:8px;border-radius:var(--radius-full)}.day-dot.task{background:var(--accent-blue)}.day-dot.event{background:var(--accent-purple)}.day-dot.completed{background:var(--accent-green)}.day-dot.overdue{background:var(--accent-red)}.day-dot.vacation-off{background:var(--text-muted);opacity:.5;width:12px;height:4px;border-radius:2px}.day-events{display:flex;flex-direction:column;gap:2px;margin-top:.5rem;text-align:left}.day-event{font-size:.6rem;line-height:1.3;padding:1px 4px;border-left:2px solid var(--accent-purple);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary)}.day-event .event-time{font-size:.55rem;font-weight:600;color:var(--accent-purple);margin-right:2px;min-width:auto}.day-event-more{font-size:.55rem;color:var(--text-muted);padding:1px 4px;font-style:italic}.week-timeline-events{grid-column:1/-1}.timeline-events-day{margin-bottom:.75rem}.timeline-events-day:last-child{margin-bottom:0}.timeline-events-day-label{font-family:var(--font-heading);font-size:.8rem;font-weight:700;color:var(--text-secondary);margin-bottom:.25rem;text-transform:uppercase}.vacation-toggles-section{margin-top:1rem;padding-top:1rem;border-top:2px solid var(--border-color)}.vacation-toggles-section h3{margin:0 0 .75rem 0;font-size:.9rem;font-family:var(--font-heading);font-weight:700}.vacation-toggles{display:flex;gap:.5rem}.vacation-toggle{width:2.5rem;height:2.5rem;border-radius:var(--radius-sm);border:var(--border-width) solid var(--border-color);background:var(--bg-secondary);font-family:var(--font-heading);font-weight:700;font-size:.8rem;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);display:flex;align-items:center;justify-content:center}.vacation-toggle:hover{background:var(--bg-hover)}.vacation-toggle.active{background:var(--accent-purple);color:var(--text-on-accent);border-color:var(--accent-purple)}.timeline-day.vacation{opacity:.5}.timeline-day.vacation .day-name{text-decoration:line-through}.vacation-day-banner{text-align:center;padding:.5rem 1rem;background:color-mix(in srgb,var(--accent-purple) 15%,var(--bg-secondary));border:var(--border-width-sm) solid var(--accent-purple);border-radius:var(--radius-sm);font-family:var(--font-heading);font-weight:700;font-size:.85rem;color:var(--accent-purple);margin-bottom:.75rem}.stats-row{display:flex;gap:1rem;margin-bottom:1rem}.stat-box{flex:1;text-align:center;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.stat-box .stat-number{font-family:var(--font-heading);font-size:2rem;font-weight:800;line-height:1}.stat-box .stat-number.green{color:var(--accent-green)}.stat-box .stat-number.red{color:var(--accent-red)}.stat-box .stat-number.blue{color:var(--accent-blue)}.stat-box .stat-number.purple{color:var(--accent-purple)}.stat-box .stat-label{font-size:.75rem;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-top:.25rem}.task-list{list-style:none;max-height:200px;overflow-y:auto}.task-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:var(--bg-secondary);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-normal)}.task-item:hover{background:var(--accent-blue);color:var(--text-on-accent)}.task-item.completed{opacity:.6;text-decoration:line-through}.task-checkbox{width:20px;height:20px;border:2px solid var(--border-color);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0}.task-checkbox.checked{background:var(--accent-green);color:var(--text-on-accent)}.task-text{flex:1;font-size:.9rem}.task-project{font-size:.75rem;padding:.2rem .5rem;background:var(--bg-card);border-radius:var(--radius-xs);color:var(--text-muted)}.task-due{font-size:.75rem;color:var(--text-muted)}.task-due.overdue{color:var(--accent-red);font-weight:600}.focus-section.full-width{grid-column:1/-1}.scope-slots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}.scope-slot{padding:1.25rem;background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:var(--radius-md);min-height:100px;display:flex;flex-direction:column;gap:.5rem;transition:background .15s,border-color .15s}.scope-slot.filled{border-style:solid;background:var(--bg-card)}.scope-slot.empty{cursor:pointer}.scope-slot.empty:hover{border-color:var(--accent-primary);background:var(--bg-tertiary)}.scope-slot-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:600}.scope-slot-title{font-weight:600;font-size:.95rem}.scope-slot-meta{font-size:.8rem;color:var(--text-secondary)}.scope-slot-empty{color:var(--text-muted);font-style:italic;font-size:.9rem}.focus-slot.primary{border-color:var(--accent-yellow);background:linear-gradient(135deg,var(--bg-card) 0,color-mix(in srgb,var(--accent-yellow) 10%,var(--bg-card)) 100%)}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:.5rem}.project-health{padding:.75rem;background:var(--bg-secondary);border-radius:var(--radius-md);border-left:4px solid var(--accent-blue)}.project-health.warning{border-left-color:var(--accent-yellow)}.project-health.danger{border-left-color:var(--accent-red)}.project-name{font-weight:600;font-size:.85rem;margin-bottom:.25rem}.project-stats{font-size:.75rem;color:var(--text-muted)}.reflection-section{grid-column:1/-1}.reflection-prompts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.reflection-prompt{padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.prompt-label{font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:.5rem}.prompt-input,.reflection-textarea{width:100%;padding:.75rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-md);font-size:.9rem;font-family:inherit;resize:none;background:var(--bg-card)}.prompt-input:focus,.reflection-textarea:focus{outline:0;border-color:var(--accent-blue)}.review-actions-grid{grid-column:1/-1;display:flex;justify-content:flex-end;gap:1rem;padding-top:1rem}.event-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:var(--bg-secondary);border-radius:var(--radius-md);border-left:3px solid var(--accent-purple)}.event-item .event-time{font-size:.8rem;font-weight:600;color:var(--accent-purple);min-width:100px}.event-item .event-title{flex:1;font-size:.9rem}.accomplishment-highlight{background:linear-gradient(135deg,color-mix(in srgb,var(--accent-green) 10%,var(--bg-card)) 0,color-mix(in srgb,var(--accent-green) 5%,var(--bg-card)) 100%);border:2px solid var(--accent-green);padding:1rem;border-radius:var(--radius-md);margin-bottom:1rem;display:flex;align-items:center;gap:1rem}.accomplishment-icon{font-size:2rem}.accomplishment-text{font-size:1rem}.accomplishment-text strong{color:var(--accent-green)}.task-list::-webkit-scrollbar{width:6px}.task-list::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-xs)}.task-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-xs)}@media (max-width:900px){.review-grid{grid-template-columns:1fr}.focus-section.full-width,.reflection-section,.week-timeline,.week-timeline-events{grid-column:1}.focus-grid{grid-template-columns:1fr}.reflection-prompts{grid-template-columns:1fr}.projects-grid{grid-template-columns:1fr 1fr}}@media (max-width:600px){.stat-cards{flex-direction:column}.stat-card{max-width:none}.week-info{flex-direction:column;align-items:flex-start;gap:.5rem}.projects-grid{grid-template-columns:1fr}}.focus-slot{transition:background-color .2s ease-out,border-color .2s ease-out}.focus-slot.filled{animation:focusSlotFill .3s ease-out}@keyframes focusSlotFill{0%{transform:scale(.95);opacity:.7}100%{transform:scale(1);opacity:1}}.focus-slot:focus,.focus-slot:focus-within{outline:2px solid var(--accent-blue);outline-offset:2px}.focus-slot[tabindex]:focus{outline:2px solid var(--accent-blue);outline-offset:2px}.focus-section .btn{transition:transform .15s ease-out,opacity .15s ease-out}.focus-section .btn:active{transform:scale(.97)}@media print{.card-badge,.focus-section .btn,.focus-slot .btn,.header,.review-actions-grid,.sidebar,.tab-badge,.tab-nav,.tab-status-dot{display:none!important}.main-content,.weekly-review-content{margin:0;padding:0;width:100%;max-width:100%}.event-item,.focus-slot,.project-health,.reflection-prompt,.review-card,.weekly-review-content,body{background:#fff!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.review-card{border:1px solid #ccc!important;box-shadow:none!important;page-break-inside:avoid;margin-bottom:1rem}.focus-slot{border:1px solid #999!important}.focus-slot.primary{border:2px solid #f7d154!important;background:#fffbea!important}.review-grid{display:block!important}.review-card{display:inline-block;vertical-align:top;width:48%;margin-right:2%}.focus-section.full-width,.reflection-section,.week-timeline,.week-timeline-events{width:100%!important;display:block!important}.weekly-review-header{border-bottom:2px solid #333;padding-bottom:1rem;margin-bottom:1.5rem}.week-dates{font-size:1.5rem;font-weight:700}.day-dot{-webkit-print-color-adjust:exact;print-color-adjust:exact}.day-dot.completed{background:#5cb85c!important}.day-dot.event{background:#9b59b6!important}.day-dot.overdue{background:#d9534f!important}.project-health{border-left:4px solid #337ab7!important}.project-health.warning{border-left-color:#f7d154!important}.project-health.danger{border-left-color:#d9534f!important}.focus-grid{display:flex!important;gap:1rem}.focus-slot{flex:1}.reflection-prompts{display:flex!important;gap:1rem}.reflection-prompt{flex:1}.prompt-input{border:1px solid #ccc!important;min-height:80px}.focus-section{page-break-before:auto}.reflection-section{page-break-before:always}}.monthly-review-nav,.weekly-review-nav{display:flex;align-items:center;gap:.5rem}.weekly-review-nav .week-dates{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-left:.5rem}.monthly-review-month-display{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-left:.5rem}.monthly-review-content{max-width:900px;margin:0 auto;padding:1rem}.month-heatmap{margin-bottom:1.5rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-md);padding:1rem;background:var(--bg-secondary)}.month-heatmap-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:.5rem}.month-heatmap-day-header{font-family:var(--font-heading);font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase}.month-heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.month-heatmap-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius-xs);cursor:pointer;transition:transform .1s ease;border:var(--border-width-sm) solid transparent;position:relative;min-height:40px}.month-heatmap-cell:not(.empty):hover{transform:scale(1.1);border-color:var(--border-color);z-index:1}.month-heatmap-cell.empty{cursor:default;background:0 0}.month-heatmap-cell.intensity-0{background:var(--bg-primary)}.month-heatmap-cell.intensity-1{background:color-mix(in srgb,var(--accent-green) 20%,var(--bg-primary))}.month-heatmap-cell.intensity-2{background:color-mix(in srgb,var(--accent-green) 40%,var(--bg-primary))}.month-heatmap-cell.intensity-3{background:color-mix(in srgb,var(--accent-green) 60%,var(--bg-primary))}.month-heatmap-cell.vacation{background:var(--bg-tertiary);opacity:.6}.month-heatmap-cell.today{border-color:var(--accent-primary);border-width:2px}.month-heatmap-cell.past.intensity-0{background:var(--bg-tertiary)}.month-heatmap-day-number{font-family:var(--font-heading);font-size:.8rem;font-weight:600;color:var(--text-primary)}.month-heatmap-dots{display:flex;gap:2px;margin-top:2px}.month-dot{font-size:.6rem;font-weight:700;border-radius:var(--radius-xs);padding:0 3px;line-height:1.3}.month-dot.completed{color:var(--accent-green)}.month-dot.event{color:var(--accent-purple)}.monthly-review-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.review-card.month-stats-card{grid-column:span 1}.review-card.month-goals-card{margin-bottom:1rem}.review-card.month-patterns-card,.review-card.month-pulse-card{grid-column:span 1}.review-card.month-reflection-card{grid-column:1/-1}.review-card-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin-bottom:.75rem;color:var(--text-primary)}.month-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.month-stat-item{display:flex;flex-direction:column;align-items:center;padding:.5rem;border-radius:var(--radius-xs);background:var(--bg-primary);border:var(--border-width-sm) solid var(--border-color)}.month-stat-value{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--text-primary)}.month-stat-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;font-weight:600}.month-stats-highlights{display:flex;gap:1rem;margin-top:.5rem;justify-content:center}.stat-highlight{font-size:.8rem;color:var(--text-secondary)}.month-pulse-list{display:flex;flex-direction:column;gap:.5rem}.month-pulse-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--radius-xs);background:var(--bg-primary);border:var(--border-width-sm) solid var(--border-color)}.pulse-name{font-weight:600;flex:1;font-size:.875rem}.pulse-stats{font-size:.75rem;color:var(--text-secondary)}.pulse-arrow{font-size:1rem;font-weight:700}.month-pulse-item.positive .pulse-arrow{color:var(--accent-green)}.month-pulse-item.negative .pulse-arrow{color:var(--accent-red)}.month-pulse-item.neutral .pulse-arrow{color:var(--text-secondary)}.month-goal-body{display:flex;align-items:center;gap:.5rem;flex:1}.month-goal-item.done{opacity:.7}.month-goal-item.done .month-goal-text{text-decoration:line-through}.month-goal-item.abandoned{opacity:.5}.month-goal-item.abandoned .month-goal-text{text-decoration:line-through}.month-goal-status-btn{background:0 0;border:none;cursor:pointer;font-size:1rem;padding:0;color:var(--text-secondary);width:24px;text-align:center}.month-goal-item.done .month-goal-status-btn{color:var(--accent-green)}.month-goal-item.abandoned .month-goal-status-btn{color:var(--accent-red)}.month-goal-text{flex:1;font-size:.875rem}.month-goal-delete-btn{background:0 0;border:none;cursor:pointer;color:var(--text-tertiary);padding:0 4px;font-size:.75rem;opacity:0;transition:opacity .15s}.month-goal-item:hover .month-goal-delete-btn{opacity:1}.month-goal-placeholder{color:var(--text-tertiary);font-size:.875rem}.month-reflection-fields{display:flex;flex-direction:column;gap:.5rem}.month-reflection-label{font-size:.875rem;font-weight:600;color:var(--text-secondary)}.month-reflection-textarea{width:100%;padding:.5rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-xs);background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);font-size:.875rem;resize:vertical}.month-reflection-textarea:focus{outline:2px solid var(--accent-primary);outline-offset:-1px}.month-patterns-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.month-pattern-item{font-size:.875rem;color:var(--text-secondary);padding:.5rem;background:var(--bg-primary);border-radius:var(--radius-xs);border:var(--border-width-sm) solid var(--border-color)}@media (max-width:640px){.monthly-review-cards{grid-template-columns:1fr}.review-card.month-goals-card,.review-card.month-patterns-card,.review-card.month-pulse-card,.review-card.month-stats-card{grid-column:span 1}.month-heatmap-cell{min-height:32px}.month-heatmap-day-number{font-size:.7rem}.month-heatmap-dots{display:none}}.import-wizard{display:flex;flex-direction:column;gap:1.5rem}.import-step{padding:1rem;background:var(--bg-secondary);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md)}.import-step h3{margin:0 0 1rem 0;font-size:var(--font-size-md);font-weight:600}.plugin-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}.plugin-option{display:flex;flex-direction:column;align-items:flex-start;padding:.75rem 1rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:border-color var(--transition-fast),background var(--transition-fast)}.plugin-option:hover{border-color:var(--accent-primary);background:var(--bg-hover)}.plugin-option.selected{border-color:var(--accent-primary);background:color-mix(in srgb,var(--accent-primary) 10%,var(--bg-card));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-primary) 30%,transparent)}.plugin-option .plugin-name{font-weight:600;margin-bottom:.25rem}.plugin-option .plugin-meta{display:flex;gap:.5rem;font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:.25rem}.plugin-option .plugin-extensions{color:var(--accent-cyan)}.plugin-option .plugin-types{color:var(--text-secondary)}.plugin-option .plugin-description{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.4}.file-selector{display:flex;align-items:center;gap:1rem}.selected-file-name{color:var(--text-secondary);font-family:monospace;font-size:var(--font-size-sm)}.import-preview-container{min-height:100px}.import-preview-table-wrapper{max-height:300px;overflow:auto;border:1px solid var(--border-color);border-radius:var(--radius-sm)}.import-preview-table{font-size:var(--font-size-sm);margin:0}.import-preview-table th{position:sticky;top:0;background:var(--bg-secondary);z-index:1}.import-preview-table td{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.import-summary{margin:0 0 .75rem 0;color:var(--text-primary)}.import-more{margin:.5rem 0 0 0;color:var(--text-muted);font-style:italic;font-size:var(--font-size-sm)}.import-empty,.import-error{padding:2rem;text-align:center;color:var(--text-muted)}.import-error{color:var(--accent-red)}.import-warnings{margin-top:1rem;padding:.75rem;background:color-mix(in srgb,var(--accent-yellow) 10%,var(--bg-card));border:1px solid var(--accent-yellow);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.import-warnings ul{margin:.5rem 0 0 1.25rem;padding:0}.import-warnings li{margin-bottom:.25rem}.import-external-types{display:flex;gap:1rem;margin-bottom:1.5rem}.import-type-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 1rem;background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:border-color .15s,background .15s}.import-type-card:hover{border-color:var(--accent-primary);background:var(--bg-secondary)}.import-type-icon{font-size:2rem}.import-type-label{font-weight:600;color:var(--text-primary)}.import-type-desc{font-size:var(--font-size-sm);color:var(--text-muted)}.plugin-list{display:flex;flex-direction:column;gap:.75rem}.plugin-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md)}.plugin-item .plugin-info{flex:1}.plugin-item .plugin-name{font-weight:600}.plugin-item .plugin-version{color:var(--text-muted);font-size:var(--font-size-sm);margin-left:.5rem}.plugin-item .plugin-description{margin:.25rem 0;color:var(--text-secondary);font-size:var(--font-size-sm)}.plugin-item .plugin-extensions{font-size:var(--font-size-xs);color:var(--text-muted)}.plugin-item .plugin-actions{margin-left:1rem}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:var(--radius-xl);transition:background-color var(--transition-fast),border-color var(--transition-fast)}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:var(--text-muted);border-radius:var(--radius-full);transition:transform var(--transition-fast),background-color var(--transition-fast)}.toggle-switch input:checked+.toggle-slider{background-color:var(--accent-primary);border-color:var(--accent-primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px);background-color:var(--bg-card)}.toggle-switch input:focus+.toggle-slider{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-primary) 30%,transparent)}.milestones-section{margin-bottom:1.5rem}.milestones-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border-color)}.milestones-header h3{margin:0;font-size:1rem;font-family:var(--font-heading);font-weight:700}.milestone-card{background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);padding:1rem;margin-bottom:.75rem;transition:background-color .1s;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.milestone-card:hover{background:var(--bg-secondary)}.milestone-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.milestone-card-header h4{margin:0;font-size:.95rem;font-family:var(--font-heading);font-weight:700}.milestone-card-header .milestone-status{font-size:.7rem;font-weight:700;text-transform:uppercase;padding:.15rem .4rem;border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-muted)}.milestone-card-header .milestone-status.completed{background:color-mix(in srgb,var(--accent-green) 15%,var(--bg-secondary));color:var(--accent-green)}.milestone-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem}.milestone-progress{height:6px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden;border:var(--border-width-sm) solid var(--border-color)}.milestone-progress-fill{height:100%;background:var(--accent-green);border-radius:var(--radius-full);transition:width var(--transition-fast)}.milestone-actions{display:flex;gap:.5rem;margin-top:.5rem}.milestone-actions button{font-size:.75rem;padding:.2rem .5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);transition:background var(--transition-fast)}.milestone-actions button:hover{background:var(--bg-hover)}.milestone-actions button.danger:hover{background:color-mix(in srgb,var(--accent-red) 15%,var(--bg-secondary));color:var(--accent-red)}button.milestone-reorder-btn.btn{font-size:.65rem;padding:.15rem .35rem;line-height:1;min-width:1.5rem;text-align:center}.milestones-completed-section{margin-top:.75rem}.milestones-completed-toggle{font-size:.8rem;color:var(--text-secondary);padding:.25rem 0}.milestone-card-summary{padding:.5rem .75rem;opacity:.7}.milestone-card-summary .milestone-info{display:flex;align-items:center;gap:.5rem}.milestone-complete-badge{font-size:.7rem;font-weight:700;padding:.1rem .4rem;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent-green) 15%,var(--bg-secondary));color:var(--accent-green)}.mobile-tab-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:1100;background:var(--bg-card);border-top:var(--border-width) solid var(--border-color);padding-bottom:env(safe-area-inset-bottom,0);height:calc(52px + env(safe-area-inset-bottom,0px))}.mobile-tab{flex:1;display:flex;align-items:center;justify-content:center;height:52px;background:0 0;border:none;color:var(--text-muted);font-size:.7rem;font-weight:700;font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s ease}.mobile-tab.active{color:var(--accent-blue)}.mobile-tab:active{background:var(--bg-secondary)}.mobile-tab-create{font-size:1.4rem;font-weight:400;color:var(--accent-green);letter-spacing:0;text-transform:none}.mobile-more-popover{display:none;position:fixed;bottom:calc(52px + env(safe-area-inset-bottom,0px));right:0;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);padding:.25rem 0;z-index:1101;min-width:160px;box-shadow:0 -2px 8px rgba(0,0,0,.1)}.mobile-more-popover.visible{display:block}.mobile-more-popover button{display:block;width:100%;padding:.75rem 1rem;background:0 0;border:none;text-align:left;font-size:var(--font-size-sm);font-weight:600;color:var(--text-primary);cursor:pointer}.mobile-more-popover button:active{background:var(--bg-secondary)}.action-sheet{position:fixed;inset:0;z-index:10001;display:flex;flex-direction:column;justify-content:flex-end}.action-sheet.hidden{display:none}.action-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}.action-sheet-container{position:relative;background:var(--bg-card);border-top:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom,0px));max-height:60vh;overflow-y:auto;animation:sheetSlideUp .25s ease-out}.action-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--text-muted);margin:0 auto .75rem;opacity:.4}.action-sheet-content button{display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem .5rem;background:0 0;border:none;border-bottom:1px solid var(--bg-secondary);font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);text-align:left;cursor:pointer}.action-sheet-content button:last-child{border-bottom:none}.action-sheet-content button:active{background:var(--bg-secondary)}.action-sheet-content button.danger{color:var(--accent-red)}.action-sheet-cancel{display:block;width:100%;padding:.875rem;margin-top:.5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:700;color:var(--text-primary);text-align:center;cursor:pointer}.action-sheet-cancel:active{background:var(--bg-tertiary)}.modal-drag-handle{display:none;width:36px;height:4px;border-radius:2px;background:var(--text-muted);margin:.5rem auto 0;opacity:.4}.mobile-sort-bar{display:none;gap:.5rem;padding:.5rem 0;align-items:center}.mobile-sort-bar select{flex:1;font-size:var(--font-size-sm)}.mobile-filter-toggle{display:none}.swipe-actions-container{position:relative;overflow:hidden}.swipe-actions-bg{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 1rem;font-weight:700;font-size:var(--font-size-sm);color:var(--text-on-accent)}.swipe-actions-bg.swipe-left{right:0;background:var(--accent-green)}.swipe-actions-bg.swipe-right{left:0;background:var(--accent-red)}.swipe-content{position:relative;background:var(--bg-card);transition:transform .15s ease}.pull-to-refresh-indicator{display:none;text-align:center;padding:.75rem;font-size:var(--font-size-sm);color:var(--text-muted);font-weight:600}.pull-to-refresh-indicator.visible{display:block}.event-date-group-header{display:none}.day-plan-sidebar-toggle{display:none}@keyframes sheetSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheetSlideDown{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes dialFadeIn{from{opacity:0}to{opacity:1}}@media (max-width:768px){body,html{overflow-x:hidden;max-width:100vw;touch-action:pan-y;overscroll-behavior-x:none}body{padding-top:env(safe-area-inset-top,0);padding-bottom:calc(52px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}.pill-nav{touch-action:pan-x}.mobile-more-popover,.mobile-tab-bar,.timer-widget{padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}.mobile-tab-bar{display:flex}.tab-navigation{display:none!important}.app-header{display:none}.pill-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:var(--space-1) var(--space-3)}.tab-group>.subview>.page-header{position:static}.pill-nav::-webkit-scrollbar{display:none}.main-content{padding:.75rem}.page-header{flex-wrap:wrap;gap:.5rem}.page-header .btn-primary{display:none}.page-title{display:none}.modal-overlay{align-items:flex-end;bottom:calc(52px + env(safe-area-inset-bottom,0px))}.modal-container{width:100%!important;max-width:100%!important;max-height:calc(100vh - 52px - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px));border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin:0;border-bottom:none;padding-bottom:0}.modal-container.modal-large{max-width:100%!important;width:100%!important;max-height:calc(100vh - 52px - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px));border-radius:var(--radius-lg) var(--radius-lg) 0 0}.modal-drag-handle{display:block}.modal-header{padding:.75rem 1rem}.modal-content{padding:1rem}@keyframes modalSlideIn{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes modalSlideOut{from{transform:translateY(0)}to{transform:translateY(100%)}}.toast,.toast-undo{bottom:calc(env(safe-area-inset-bottom,0px) + 4.5rem)!important;left:1rem!important;right:1rem!important;max-width:none!important}.task-table{border:none;box-shadow:none;background:0 0}.task-header-row{display:none!important}.task-row{display:flex!important;flex-direction:column;gap:.25rem;padding:.75rem 1rem;margin-bottom:.5rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-md);border-left:4px solid var(--text-muted)}.task-row.task-pending{border-left-color:var(--text-muted)}.task-row .task-cell.priority-h~.task-cell:first-child,.task-row:has(.priority-h){border-left-color:var(--accent-red)}.task-row:has(.priority-m){border-left-color:var(--accent-yellow)}.task-row:has(.priority-l){border-left-color:var(--text-muted)}.task-row .task-cell{display:flex!important;overflow:visible;padding:0}.task-cell.task-description{font-weight:600;font-size:var(--font-size-base)}.task-cell.task-due,.task-cell.task-project{font-size:var(--font-size-sm);color:var(--text-secondary)}.task-row .task-cell.task-project::before{content:none}.task-cell.task-progress,.task-cell.task-recurrence,.task-row .task-cell:nth-child(3){display:none!important}.task-cell.task-project{order:2}.task-cell.task-due{order:3}.task-cell.task-description{order:1}.task-cell.task-actions-cell{order:4;justify-content:flex-end}.task-cell.task-progress:has(.progress-bar-container){display:flex!important;order:5}.task-actions-cell .bulk-checkbox{display:none}.kebab-btn{opacity:1}.mobile-sort-bar{display:flex}.mobile-filter-toggle{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem .75rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600;cursor:pointer}.filter-bar{display:none!important}.filter-bar.mobile-visible{display:flex!important;flex-direction:column;position:fixed;bottom:calc(52px + env(safe-area-inset-bottom,0px));left:0;right:0;background:var(--bg-card);border-top:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:1rem;z-index:1050;box-shadow:0 -4px 12px rgba(0,0,0,.1)}.event-header-row{display:none!important}.event-row-virtual{display:flex!important;flex-direction:column;gap:.125rem;padding:.75rem 1rem;border-bottom:1px solid var(--bg-secondary)}.event-cell-date{font-weight:700;font-size:var(--font-size-sm);color:var(--text-secondary)}.event-cell-time{font-size:var(--font-size-sm);color:var(--text-muted)}.event-cell-title{font-weight:600;font-size:var(--font-size-base)}.event-cell-location{font-size:var(--font-size-sm);color:var(--text-secondary)}.event-date-group-header{display:flex;position:sticky;top:0;z-index:5;padding:.5rem 1rem;background:var(--bg-secondary);font-weight:700;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary);border-bottom:var(--border-width-sm) solid var(--border-color)}.email-item{padding:.625rem .75rem}.email-from{font-size:var(--font-size-sm)}.email-subject{font-size:var(--font-size-base)}.email-preview{display:none}.email-date{font-size:var(--font-size-xs)}.email-item .bulk-checkbox{display:none}.day-plan-content{flex-direction:column}.day-plan-sidebar{width:100%;max-height:none;border-top:var(--border-width-sm) solid var(--border-color);order:2}.day-plan-sidebar.collapsed .sidebar-task-list{display:none}.day-plan-sidebar-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.625rem .75rem;background:var(--bg-secondary);border:none;border-bottom:1px solid var(--border-color);font-size:var(--font-size-sm);font-weight:700;cursor:pointer;color:var(--text-primary)}.day-plan-main{order:1}.day-plan-nav{flex-wrap:wrap;gap:.25rem}.weekly-review-content{padding:0}.monthly-review-content{padding:0}.month-reflection-textarea,.prompt-input{resize:none;overflow:hidden}.monthly-review-nav{flex-wrap:wrap;gap:.25rem}.monthly-review-month-display{font-size:1rem}.day-summary-sheet{padding:.5rem 0}.day-summary-date{font-size:1rem;font-weight:700;margin-bottom:.75rem;color:var(--text-primary)}.day-summary-stats{display:flex;gap:.5rem;margin-bottom:1rem}.day-summary-chip{padding:.25rem .75rem;background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary)}.day-summary-list{list-style:none;padding:0;margin:0 0 1rem 0}.day-summary-item{padding:.5rem 0;border-bottom:1px solid var(--bg-secondary);font-size:var(--font-size-sm);color:var(--text-primary)}.day-summary-time{font-weight:600;color:var(--text-secondary);margin-right:.5rem}.day-summary-more{color:var(--text-muted);font-style:italic}.day-summary-empty{color:var(--text-muted);font-size:var(--font-size-sm);margin:.5rem 0 1rem}.day-summary-go-btn{width:100%;margin-top:.5rem}.bulk-actions-bar{position:fixed;bottom:calc(52px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:1050;border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -4px 12px rgba(0,0,0,.15)}.pagination-controls{padding:.5rem}.pagination-controls .btn{padding:.5rem .75rem;font-size:var(--font-size-sm)}}@media (hover:none){.task-row:hover{background-color:transparent}.task-row-clickable:hover{background:0 0}.event-row-virtual:hover{background-color:transparent}.email-item:hover{background-color:transparent}.card:hover{background-color:var(--bg-card);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.btn:hover{background:var(--bg-card)}.btn-primary:hover{background-color:var(--accent-blue)}.btn-danger:hover{background-color:var(--accent-red)}.dashboard-item:hover{background:var(--bg-card);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.kanban-card:hover{background:var(--bg-card);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.saved-view-item:hover{background:var(--bg-card);color:var(--text-primary);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.context-menu-item:hover{background:0 0;color:var(--text-primary)}.modal-close:hover{background:var(--bg-card);color:var(--text-primary)}.month-heatmap-cell:hover{background:0 0;transform:none}.email-item .kebab-btn,.event-row-virtual .kebab-btn,.task-row .kebab-btn{opacity:1}.shortcut-hint-btn{display:none}.time-block-quick-options{grid-template-columns:1fr}.duration-preset,.time-block-quick-btn{min-height:44px;padding:.75rem;font-size:1rem}}body.is-touch .email-item .kebab-btn,body.is-touch .event-row-virtual .kebab-btn,body.is-touch .task-row .kebab-btn{opacity:1}body.is-touch .shortcut-hint-btn{display:none}.view-toggle{display:flex;gap:0;margin-left:auto}.view-toggle-btn{padding:.35rem .75rem;border:var(--border-width-sm) solid var(--border-color);background:var(--bg-secondary);font-family:var(--font-body);font-size:var(--font-size-md);cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast)}.view-toggle-btn.active{background:var(--bg-card);font-weight:600}.view-toggle-btn:first-child{border-radius:var(--radius-xs) 0 0 var(--radius-xs)}.view-toggle-btn:last-child{border-radius:0 var(--radius-xs) var(--radius-xs) 0;border-left:none}.kanban-board{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:.5rem 0;min-height:400px}.kanban-column{background:var(--bg-card);border:var(--border-width) solid var(--border-color);display:flex;flex-direction:column;min-height:300px;max-height:calc(100vh - 200px)}.kanban-column-header{padding:.75rem 1rem;border-bottom:2px solid var(--border-color);font-family:var(--font-heading);font-weight:700;display:flex;justify-content:space-between;align-items:center}.kanban-column-count{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--text-secondary)}.kanban-column-body{flex:1;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.5rem}.kanban-column.drag-over{background-color:var(--bg-tertiary)}.kanban-card{padding:.75rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);cursor:grab;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;border-left:4px solid transparent}.kanban-card:hover{background:var(--bg-secondary);transform:translate(-2px,-2px);box-shadow:calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--border-color)}.kanban-card.dragging{opacity:.5;cursor:grabbing}.kanban-card.priority-high{border-left-color:var(--accent-red)}.kanban-card.priority-medium{border-left-color:var(--accent-yellow)}.kanban-card.priority-low{border-left-color:var(--accent-green)}.kanban-card-title{font-weight:600;margin-bottom:.25rem}.kanban-card-meta{font-size:var(--font-size-sm);color:var(--text-secondary);display:flex;gap:.5rem;flex-wrap:wrap}.kanban-card-due.overdue{color:var(--accent-red);font-weight:600}.progress-bar-mini{height:3px;background:var(--bg-tertiary);border-radius:2px;margin-top:.5rem}.progress-bar-mini .progress-fill{height:100%;background:var(--accent-green);border-radius:2px}@media (max-width:768px){.kanban-board{grid-template-columns:1fr}.kanban-column{max-height:none}}.timer-widget{position:fixed;bottom:0;left:0;right:0;z-index:900;background:var(--bg-primary);border-top:var(--border-width) solid var(--border-color);box-shadow:0 -2px 8px rgba(0,0,0,.1);padding:.5rem 1rem;transition:transform .2s ease}.timer-widget.hidden{transform:translateY(100%);pointer-events:none}.timer-widget-inner{display:flex;align-items:center;gap:1rem;max-width:800px;margin:0 auto}.timer-task-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timer-elapsed{font-family:var(--font-mono, monospace);font-size:1.125rem;font-weight:700;color:var(--accent-color);min-width:5rem;text-align:center}.timer-actions{display:flex;gap:.5rem}.focus-overlay{position:fixed;inset:0;z-index:1000;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.focus-overlay.hidden{opacity:0;pointer-events:none}.focus-overlay-content{text-align:center;max-width:400px;width:100%;padding:2rem}.focus-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}.focus-label{font-family:var(--font-heading);font-size:1.25rem;font-weight:700}.focus-presets{display:flex;gap:.5rem}.focus-preset-btn.active{background:var(--accent-color);color:var(--bg-primary);border-color:var(--accent-color)}.focus-countdown{font-family:var(--font-mono, monospace);font-size:4rem;font-weight:700;line-height:1;margin-bottom:1.5rem;color:var(--text-primary)}.focus-progress-bar{height:6px;background:var(--bg-tertiary);border-radius:3px;margin-bottom:1.5rem;overflow:hidden}.focus-progress-fill{height:100%;background:var(--accent-color);border-radius:3px;transition:width 1s linear}.focus-task-name{color:var(--text-secondary);margin-bottom:2rem;font-size:.9rem}.focus-actions{display:flex;gap:1rem;justify-content:center}.time-summary-section{margin-bottom:1rem}.time-summary-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem;background:0 0;border:none;font-family:var(--font-heading);font-size:.875rem;font-weight:700;color:var(--text-primary);cursor:pointer;text-align:left}.time-summary-toggle:hover{color:var(--accent-color)}.time-summary-toggle-icon{font-size:.625rem;transition:transform .15s ease}.time-summary-body{padding:.5rem;overflow:hidden;transition:max-height .2s ease;max-height:500px}.time-summary-body.collapsed{max-height:0;padding:0 .5rem}.time-summary-today{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border-color);margin-bottom:.5rem}.time-summary-today-label{font-weight:600;font-size:.875rem}.time-summary-today-value{font-family:var(--font-mono, monospace);font-weight:700;font-size:1rem;color:var(--accent-color)}.time-summary-week-header{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:.5rem}.time-summary-project{margin-bottom:.5rem}.time-summary-project-info{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;margin-bottom:.25rem}.time-summary-project-name{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.time-summary-project-time{font-family:var(--font-mono, monospace);font-weight:600;font-size:.75rem;color:var(--text-secondary);margin-left:.5rem;flex-shrink:0}.time-summary-bar{height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.time-summary-bar-fill{height:100%;background:var(--accent-color);border-radius:2px}.unscheduled-task-actions{display:flex;gap:.25rem;margin-top:.375rem}.unscheduled-task-actions .btn{font-size:.7rem;padding:.125rem .375rem;min-height:auto;line-height:1.4}.task-time-badge{display:inline-block;font-family:var(--font-mono, monospace);font-size:.7rem;font-weight:600;color:var(--text-secondary);background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);padding:.05rem .35rem;margin-left:.375rem;vertical-align:middle;white-space:nowrap}.task-time-badge.over-estimate{color:var(--accent-red);border-color:var(--accent-red)}.task-started-icon{display:inline-block;width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--accent-green);margin-right:.375rem;vertical-align:middle;cursor:pointer;opacity:.8;flex-shrink:0}.task-started-icon:hover{opacity:1}.task-timer-active{display:inline-block;width:8px;height:8px;background:var(--accent-red);border-radius:var(--radius-full);margin-left:.375rem;vertical-align:middle;animation:timer-pulse 1.5s ease-in-out infinite}@keyframes timer-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}@media (max-width:768px){.timer-widget{bottom:calc(52px + env(safe-area-inset-bottom,0px))}.focus-countdown{font-size:3rem}}.timer-active-banner{display:flex;align-items:center;gap:1rem;padding:.875rem 1rem;background:var(--bg-secondary);border:var(--border-width) solid var(--accent-color);border-radius:var(--radius-md);margin-bottom:1.5rem}.timer-active-info{flex:1;min-width:0}.timer-active-label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-color);margin-bottom:.125rem}.timer-active-task{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timer-active-elapsed{font-family:var(--font-mono, monospace);font-size:1.25rem;font-weight:700;color:var(--accent-color);min-width:5rem;text-align:center}.timer-active-actions{display:flex;gap:.5rem}.timer-focus-split{display:flex;align-items:center;gap:.375rem;padding:.5rem 0;margin-bottom:.5rem}.timer-focus-split-label{font-size:.8125rem;color:var(--text-secondary);font-weight:600;margin-right:.25rem}.timer-split-input{width:3.5rem;padding:.25rem .375rem;font-size:.875rem;font-family:var(--font-mono, monospace);text-align:center;border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary)}.timer-focus-split-sep{font-size:.8125rem;color:var(--text-secondary)}.timer-task-list{display:flex;flex-direction:column;gap:0}.timer-task-item{display:flex;align-items:center;gap:1rem;padding:.75rem .5rem;border-bottom:1px solid var(--border-color)}.timer-task-item:last-child{border-bottom:none}.timer-task-info{flex:1;min-width:0}.timer-task-desc{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timer-task-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.25rem;font-size:.8125rem;color:var(--text-secondary)}.timer-task-project{font-weight:600}.timer-task-priority{font-weight:600}.timer-task-priority.priority-h,.timer-task-priority.priority-high{color:var(--accent-red)}.timer-task-priority.priority-m,.timer-task-priority.priority-medium{color:var(--accent-yellow,var(--accent-color))}.timer-task-estimate,.timer-task-tracked{font-family:var(--font-mono, monospace);font-size:.75rem}.timer-task-actions{display:flex;gap:.375rem;flex-shrink:0}@media (max-width:768px){.timer-active-banner{flex-wrap:wrap}.timer-active-elapsed{font-size:1rem}.timer-task-item{flex-wrap:wrap}.timer-task-actions{width:100%;justify-content:flex-end}}.task-overview-section{margin-bottom:1.5rem;padding:1rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.task-overview-section-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.task-overview-count{font-weight:400;font-size:.85rem;color:var(--text-secondary)}.task-overview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem}.task-overview-stat{text-align:center;padding:.5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color)}.task-overview-stat-value{font-family:var(--font-heading);font-size:1.25rem;font-weight:700}.task-overview-stat-label{font-size:.75rem;color:var(--text-secondary);margin-top:.25rem}.task-overview-heatmap-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.75rem;font-family:var(--font-heading);font-weight:700}.task-overview-meta{display:flex;flex-direction:column;gap:.5rem}.task-overview-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.task-overview-details{display:flex;flex-direction:column;gap:.25rem;color:var(--text-secondary);font-size:.9rem}.task-overview-subtask-list{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}.task-overview-subtask{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}.completed-text{text-decoration:line-through;color:var(--text-secondary)}.task-overview-add-form{display:flex;gap:.5rem;margin-top:.5rem}.task-overview-add-form .form-input{flex:1}.task-overview-sessions{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;color:var(--text-secondary)}.task-overview-session{padding:.25rem 0;border-bottom:var(--border-width-sm) solid var(--border-color)}.task-overview-annotations{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}.task-overview-annotation{padding:.5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color)}.task-overview-annotation-date{font-size:.75rem;color:var(--text-secondary);margin-bottom:.25rem}.task-overview-completion-list{margin-top:.75rem;font-size:.9rem;color:var(--text-secondary)}.task-overview-completion-item{padding:.25rem 0;border-bottom:var(--border-width-sm) solid var(--border-color)}.progress-bar{height:6px;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);margin-bottom:.75rem;overflow:hidden}.progress-fill{height:100%;background:var(--accent-green);transition:width .3s ease}.progress-bar.over-estimate .progress-fill{background:var(--accent-red)}.badge-completed{background:var(--accent-green);color:var(--text-on-accent);padding:.1rem .5rem;font-size:.75rem}.badge-started{background:var(--accent-blue);color:var(--text-on-accent);padding:.1rem .5rem;font-size:.75rem}.badge-pending{background:var(--bg-secondary);padding:.1rem .5rem;font-size:.75rem}.badge-priority-h{background:var(--accent-red);color:var(--text-on-accent);padding:.1rem .5rem;font-size:.75rem}.badge-priority-m{background:var(--accent-yellow);padding:.1rem .5rem;font-size:.75rem}.badge-priority-l{background:var(--bg-secondary);padding:.1rem .5rem;font-size:.75rem}.badge-focus{background:var(--accent-primary);color:var(--text-on-accent);padding:.1rem .5rem;font-size:.75rem}.badge-overdue{background:var(--accent-red);color:var(--text-on-accent);padding:.1rem .5rem;font-size:.75rem}.badge-snoozed{background:var(--accent-yellow);padding:.1rem .5rem;font-size:.75rem}@media (max-width:600px){.task-overview-stats{grid-template-columns:repeat(2,1fr)}}.toggle-nudge-dot{display:inline-block;width:7px;height:7px;background:var(--accent-red);border-radius:var(--radius-full);margin-left:.35rem;vertical-align:middle;animation:pulse-badge 2s infinite}.view-toggle-btn{position:relative}.finish-review-bar{display:flex;justify-content:flex-end;padding:1.5rem 0 1rem;margin-top:1.5rem;border-top:1px dashed var(--border-color)}.finish-review-btn{position:relative;font-size:var(--font-size-lg);padding:.65rem 1.5rem}.finish-review-modal-content{display:flex;flex-direction:column;gap:1.25rem}.past-review-banner{padding:.75rem 1rem;border:var(--border-width-sm) dashed var(--border-color);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-secondary);font-size:.9rem}.day-accomplished-inline{margin-top:1.5rem}.day-accomplished-inline:empty{display:none}.day-accomplished-stats{font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem}.events-calendar-container{padding:0}.calendar-nav{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.calendar-nav-label{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;margin-left:.5rem}.cal-month-grid{border:var(--border-width) solid var(--border-color);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.cal-month-cells,.cal-month-header{display:grid;grid-template-columns:repeat(7,1fr)}.cal-month-day-header{font-family:var(--font-heading);font-size:.75rem;font-weight:600;text-align:center;padding:.5rem;text-transform:uppercase;background:var(--bg-secondary);border-bottom:var(--border-width-sm) solid var(--border-color)}.cal-month-cell{min-height:90px;border:var(--border-width-sm) solid var(--border-color);padding:.25rem;cursor:pointer;transition:background var(--transition-fast)}.cal-month-cell:hover{background:var(--bg-secondary)}.cal-month-cell.other-month{opacity:.4}.cal-month-cell.today{border-color:var(--accent-primary);border-width:2px}.cal-month-cell-header{margin-bottom:.15rem}.cal-day-number{font-family:var(--font-heading);font-size:.8rem;font-weight:600}.cal-event-chip{font-size:.7rem;padding:1px 4px;margin-top:2px;border-radius:var(--radius-xs);background:var(--accent-blue);color:var(--text-on-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.cal-event-chip:hover{opacity:.85}.cal-event-chip.block-focus{background:var(--accent-red)}.cal-event-chip.block-personal{background:var(--accent-yellow);color:var(--text-primary)}.cal-event-chip.block-free_time{background:var(--accent-green);color:var(--text-primary)}.cal-event-more{font-size:.65rem;color:var(--text-secondary);padding:1px 4px}.month-day-detail{margin-top:1rem;border:var(--border-width) solid var(--border-color);padding:1rem;background:var(--bg-card);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.cal-day-detail-event{display:flex;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--border-color);cursor:pointer}.cal-day-detail-event:hover{background:var(--bg-secondary)}.cal-detail-time{font-weight:600;white-space:nowrap;min-width:100px}.cal-detail-location{color:var(--text-secondary);font-size:.85rem}.cal-week-grid{border:var(--border-width) solid var(--border-color);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.cal-week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:var(--border-width-sm) solid var(--border-color);background:var(--bg-secondary)}.cal-week-day-header{text-align:center;padding:.5rem;font-family:var(--font-heading)}.cal-week-day-header.today{background:color-mix(in srgb,var(--accent-primary) 15%,transparent)}.cal-week-day-name{font-size:.75rem;text-transform:uppercase;font-weight:600}.cal-week-day-num{font-size:1rem;font-weight:700;display:block}.cal-week-allday-row{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:var(--border-width-sm) solid var(--border-color);min-height:28px}.cal-allday-label{font-size:.7rem;color:var(--text-secondary);display:flex;align-items:center;justify-content:center}.cal-week-allday-cell{padding:2px;border-left:1px solid var(--border-color)}.cal-week-body{display:grid;grid-template-columns:60px repeat(7,1fr);position:relative;overflow-y:auto;max-height:70vh}.cal-week-time-gutter{position:relative}.cal-week-hour-label{position:absolute;right:.5rem;font-size:.7rem;color:var(--text-secondary);transform:translateY(-.5em)}.cal-week-day-col{position:relative;border-left:1px solid var(--border-color)}.cal-week-day-col.today{background:color-mix(in srgb,var(--accent-primary) 5%,transparent)}.cal-week-hour-line{position:absolute;left:0;right:0;border-top:1px dashed color-mix(in srgb,var(--border-color) 50%,transparent)}.cal-week-event{position:absolute;left:2px;right:2px;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);padding:2px 4px;background:var(--accent-blue);color:var(--text-on-accent);overflow:hidden;cursor:pointer;z-index:10;font-size:.7rem}.cal-week-event:hover{opacity:.85}.cal-week-event-title{font-weight:600}.cal-week-event-time{font-size:.65rem;opacity:.85}.cal-week-event.block-focus{background:var(--accent-red)}.cal-week-event.block-personal{background:var(--accent-yellow);color:var(--text-primary)}.cal-week-event.block-free_time{background:var(--accent-green);color:var(--text-primary)}@media (max-width:600px){:root{--timeline-slot-h:22px}.cal-month-cell{min-height:64px;padding:4px}.cal-day-number{font-size:.95rem;font-weight:600}.cal-event-chip{font-size:.65rem}.cal-week-body{max-height:60vh}.cal-mobile-day{display:flex;flex-direction:column;height:70vh;user-select:none}.cal-mobile-day-header{padding:.75rem;font-weight:600;text-align:center;border-bottom:1px solid var(--border-color)}.cal-mobile-day-header.today{color:var(--accent-primary)}.cal-mobile-allday{padding:.5rem;display:flex;flex-direction:column;gap:.25rem;border-bottom:1px solid var(--border-color)}.cal-mobile-day-body{position:relative;flex:1;overflow-y:auto;display:grid;grid-template-columns:48px 1fr}.cal-mobile-day-col{position:relative;border-left:1px solid var(--border-color)}}@media (max-width:768px){.settings-page-layout{flex-direction:column}.settings-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-color);padding:.75rem;flex-direction:row;flex-wrap:wrap;align-items:center}.settings-back-btn{margin-bottom:0;margin-right:.5rem;padding:.5rem}.settings-nav-items{flex-direction:row;flex-wrap:wrap;gap:.25rem}.settings-nav-item{padding:.5rem .75rem;border-left:none;border-radius:var(--radius-sm)}.settings-nav-item.active{border-left-color:transparent}.settings-content{padding:1rem}}
1 > \ No newline at end of file
1 + @font-face{font-family:Reglo;src:url('../fonts/Reglo-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:root{--timeline-slot-h:12px;--bg-primary:#E0E4FA;--bg-secondary:#CDD3F0;--bg-tertiary:#BAC2E6;--bg-card:#FFFFFF;--text-primary:#000000;--text-secondary:#2D2D2D;--text-muted:#6B6B6B;--accent-yellow:#F7D154;--accent-green:#5CB85C;--accent-blue:#6196FF;--accent-purple:#7B68EE;--accent-red:#DC3545;--accent-cyan:#17A2B8;--border-color:#000000;--border-width:2px;--border-width-sm:2px;--accent-color:var(--accent-blue);--accent-primary:var(--accent-blue);--bg-hover:var(--bg-tertiary);--border-light:var(--bg-tertiary);--text-on-accent:var(--bg-card);--shadow-offset-xs:1px;--shadow-offset-md:3px;--shadow-offset:4px;--shadow-offset-lg:6px;--shadow-offset-xl:8px;--shadow-brutal-xs:var(--shadow-offset-xs) var(--shadow-offset-xs) 0 var(--border-color);--shadow-brutal-md:var(--shadow-offset-md) var(--shadow-offset-md) 0 var(--border-color);--shadow-brutal-lg:var(--shadow-offset-lg) var(--shadow-offset-lg) 0 var(--border-color);--shadow-brutal-xl:var(--shadow-offset-xl) var(--shadow-offset-xl) 0 var(--border-color);--radius-xs:3px;--radius-sm:5px;--radius-md:5px;--radius-lg:10px;--radius-xl:20px;--radius-full:50%;--width-container:1400px;--width-modal:560px;--width-sidebar:280px;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-serif:Georgia,'Times New Roman',serif;--font-mono:'SF Mono','Consolas','Liberation Mono',monospace;--font-display:'Reglo',var(--font-serif);--font-heading:var(--font-sans);--font-body:var(--font-sans);--font-size-xxs:0.65rem;--font-size-xs:0.7rem;--font-size-sm:0.75rem;--font-size-md:0.8rem;--font-size-base:0.875rem;--font-size-lg:1rem;--font-size-xl:1.1rem;--font-size-2xl:1.25rem;--font-size-3xl:1.5rem;--font-size-4xl:1.75rem;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--transition-fast:0.1s;--transition-normal:0.15s;--transition-slow:0.3s;--overlay-color:color-mix(in srgb, var(--text-primary) 60%, transparent)}html{font-size:16px}.flex-1{flex:1}.row{display:flex}.text-sm-secondary{font-size:.875rem;color:var(--text-secondary)}.text-xs-secondary{font-size:.75rem;color:var(--text-secondary)}.text-accent-red{color:var(--accent-red)}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:var(--space-2)}.form-select--compact{width:auto;min-width:120px}.settings-divider{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid var(--border-color)}.settings-heading{margin-bottom:1rem;font-family:var(--font-heading)}.settings-desc{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem}.subtask-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--bg-secondary);border-radius:4px;margin-bottom:.5rem}.subtask-item--linked{background:var(--bg-tertiary);border-left:var(--border-width) solid var(--accent-color)}.subtask-checkbox{cursor:pointer;width:18px;height:18px}.subtask-checkbox-disabled{cursor:not-allowed;width:18px;height:18px;opacity:.5}.subtask-text-done{text-decoration:line-through;opacity:.6}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;height:100vh;overflow:hidden;display:flex;flex-direction:column}.ui-mode-desktop .app-header{background:var(--bg-card);border-bottom:var(--border-width) solid var(--border-color);padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.ui-mode-desktop .header-content{display:flex;align-items:center;gap:.75rem}.ui-mode-desktop .header-actions{display:flex;align-items:center;gap:.5rem}.ui-mode-desktop .app-title{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.ui-mode-desktop .app-subtitle{font-size:.875rem;color:var(--text-muted);font-weight:500;line-height:1}.mobile-view-title{display:none}.ui-mode-desktop .tab-navigation{display:flex;justify-content:center;gap:.5rem}.ui-mode-desktop .tab{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;text-decoration:none;color:var(--text-primary);background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);font-weight:600;transition:background-color .15s ease}.ui-mode-desktop .tab:hover{background:var(--bg-secondary)}.ui-mode-desktop .tab.active{background-color:var(--accent-blue);color:var(--text-on-accent)}.ui-mode-desktop .tab-icon{font-size:1.1rem}.ui-mode-desktop .tab-label{font-weight:600;font-size:.9rem}.ui-mode-desktop .tab.tab-right{margin-left:auto}.tab-group .subview.hidden{display:none}.ui-mode-desktop .pill-nav{display:flex;align-items:center;gap:var(--space-1);padding:0;margin-bottom:1rem;min-height:2rem}.ui-mode-desktop .pill{padding:var(--space-1) var(--space-3);border-radius:var(--radius-xl);border:var(--border-width-sm) solid var(--border-color);background:var(--bg-card);font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:background-color var(--transition-fast)}.ui-mode-desktop .pill:hover{background:var(--bg-tertiary)}.ui-mode-desktop .pill.active{background:var(--text-primary);color:var(--bg-card);border-color:var(--text-primary)}.main-content{flex:1;max-width:var(--width-container);width:100%;margin:0 auto;padding:1.5rem 1.75rem 2rem}.page-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:1rem}.page-title{font-family:var(--font-heading);font-size:1.75rem;font-weight:700;color:var(--text-primary)}.tab-group{position:relative}.tab-group>.subview>.page-header{position:absolute;top:0;right:0;margin:0;z-index:1}.tab-group .page-header .page-title{display:none}#day-plan-view>.page-header,#project-dashboard-view>.page-header{position:static;margin-bottom:1rem}#project-dashboard-view .page-title{display:block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:background-color .15s ease;text-decoration:none;background:var(--bg-card);color:var(--text-primary)}.btn:hover{background:var(--bg-secondary)}.btn:active{background:var(--bg-tertiary)}.btn:disabled{background:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed;opacity:.7}.btn:disabled:hover{background:var(--bg-tertiary)}.btn-primary{background-color:var(--accent-blue);color:var(--text-on-accent)}.btn-primary:hover{background-color:color-mix(in srgb,var(--accent-blue) 85%,#000)}.btn-primary:active{background-color:color-mix(in srgb,var(--accent-blue) 70%,#000)}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary)}.btn-danger{background-color:var(--accent-red);color:var(--text-on-accent)}.btn-danger:hover{background-color:color-mix(in srgb,var(--accent-red) 85%,#000)}.btn-danger:active{background-color:color-mix(in srgb,var(--accent-red) 70%,#000)}.btn-sm{padding:.375rem .75rem;font-size:.8rem}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}.card{background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;cursor:pointer}.card:hover{background-color:var(--bg-secondary);transform:translate(-2px,-2px);box-shadow:calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--border-color)}.card--list-item{padding:.75rem;border-radius:0;margin-bottom:.5rem}.card--shell{padding:0;cursor:default;display:flex;flex-direction:column;overflow:hidden}.card--shell:hover{background-color:var(--bg-card);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.card--muted{background:var(--bg-secondary);border:none;box-shadow:none;cursor:default}.card--muted:hover{background:var(--bg-secondary);transform:none;box-shadow:none}.card--static{cursor:default}.card--static:hover{background-color:var(--bg-card);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.card-title{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;color:var(--text-primary)}.card-description{font-size:.9rem;color:var(--text-secondary);margin-bottom:1rem}.markdown-content{font-size:.9rem;color:var(--text-secondary);line-height:1.5}.markdown-content p{margin:0 0 .5em 0}.markdown-content p:last-child{margin-bottom:0}.markdown-content ol,.markdown-content ul{margin:0 0 .5em 1.5em;padding:0}.markdown-content code{background:var(--bg-tertiary);padding:.1em .3em;border-radius:3px;font-size:.85em}.markdown-content pre{background:var(--bg-tertiary);padding:.5em;border-radius:4px;overflow-x:auto;margin:0 0 .5em 0}.markdown-content pre code{background:0 0;padding:0}.markdown-content a{color:var(--accent-color)}.markdown-content blockquote{border-left:3px solid var(--border-color);margin:0 0 .5em 0;padding-left:.75em;color:var(--text-secondary)}.markdown-content h1,.markdown-content h2,.markdown-content h3{margin:.5em 0 .25em 0;font-size:1em;font-weight:600;color:var(--text-primary)}.markdown-content table{border-collapse:collapse;margin:.5em 0}.markdown-content td,.markdown-content th{border:1px solid var(--border-color);padding:.25em .5em}.markdown-content img{max-width:100%}.card-meta{display:flex;gap:.5rem;flex-wrap:wrap}.badge,.tag{display:inline-flex;align-items:center;padding:.25rem .625rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);font-size:.8125rem;font-weight:600;background:var(--bg-card);color:var(--text-primary)}.badge[data-color=green],.tag[data-color=green]{background-color:color-mix(in srgb,var(--accent-green) 20%,var(--bg-card));border-color:var(--accent-green)}.badge[data-color=yellow],.tag[data-color=yellow]{background-color:color-mix(in srgb,var(--accent-yellow) 20%,var(--bg-card));border-color:var(--accent-yellow)}.badge[data-color=red],.tag[data-color=red]{background-color:color-mix(in srgb,var(--accent-red) 20%,var(--bg-card));border-color:var(--accent-red)}.badge[data-color=cyan],.tag[data-color=cyan]{background-color:color-mix(in srgb,var(--accent-cyan) 20%,var(--bg-card));border-color:var(--accent-cyan)}.badge[data-color=purple],.tag[data-color=purple]{background-color:color-mix(in srgb,var(--accent-purple) 20%,var(--bg-card));border-color:var(--accent-purple)}.badge[data-color=muted],.tag[data-color=muted]{background-color:var(--bg-tertiary);border-color:var(--text-muted)}.badge[data-color=blue],.tag[data-color=blue]{background-color:color-mix(in srgb,var(--accent-blue) 20%,var(--bg-card));border-color:var(--accent-blue)}.badge--xs{padding:.1rem .5rem;font-size:.75rem}.badge--sm{padding:.15rem .55rem;font-size:.78rem}.badge--filled{border:none}.badge--filled[data-color=green]{background:var(--accent-green);color:var(--text-on-accent)}.badge--filled[data-color=yellow]{background:var(--accent-yellow);color:var(--text-primary)}.badge--filled[data-color=red]{background:var(--accent-red);color:var(--text-on-accent)}.badge--filled[data-color=cyan]{background:var(--accent-cyan);color:var(--text-on-accent)}.badge--filled[data-color=purple]{background:var(--accent-purple);color:var(--text-on-accent)}.badge--filled[data-color=blue]{background:var(--accent-blue);color:var(--text-on-accent)}.badge--filled[data-color=muted]{background:var(--bg-secondary);color:var(--text-primary)}.kbd-hint{display:inline-block;font-family:var(--font-mono, monospace);font-size:.65rem;font-weight:600;padding:.1rem .35rem;margin-left:.35rem;border:1px solid currentColor;border-radius:3px;opacity:.6;vertical-align:middle;line-height:1}.tag.status-active{background-color:color-mix(in srgb,var(--accent-green) 20%,var(--bg-card));border-color:var(--accent-green)}.tag.status-on_hold,.tag.status-onhold{background-color:color-mix(in srgb,var(--accent-yellow) 20%,var(--bg-card));border-color:var(--accent-yellow)}.tag.status-archived{background-color:var(--bg-tertiary);border-color:var(--text-muted)}.tag.status-inactive{background-color:color-mix(in srgb,var(--accent-red) 20%,var(--bg-card));border-color:var(--accent-red)}.tag.status-completed{background-color:color-mix(in srgb,var(--accent-cyan) 20%,var(--bg-card));border-color:var(--accent-cyan)}.data-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.data-table td,.data-table th{padding:1rem 1.25rem;text-align:left;border-bottom:2px solid var(--border-color)}.data-table th{background-color:var(--bg-secondary);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-primary)}.data-table tbody tr{transition:background-color .15s ease}.data-table tbody tr:hover{background-color:var(--bg-secondary)}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr.keyboard-selected,.data-table tbody tr.selected{background-color:color-mix(in srgb,var(--accent-blue) 25%,var(--bg-card))}.task-table{width:100%;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.task-header-row,.task-row{display:grid;grid-template-columns:1fr 140px 60px 110px 90px 100px 90px;align-items:center;gap:.75rem}.task-header-row{background-color:var(--bg-secondary);border-bottom:2px solid var(--border-color);padding:0 1.25rem}.task-header-row .task-cell{padding:.75rem 0;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary)}.task-list-container{flex:1;min-height:0;overflow-y:auto;position:relative}.task-row{padding:.75rem 1.25rem;border-bottom:1px solid var(--border-color);transition:background-color .15s ease,opacity .25s ease,transform .25s ease;cursor:pointer}.task-row-removing{opacity:0;transform:translateX(20px)}.task-row:hover{background-color:var(--bg-secondary)}.task-row:last-child{border-bottom:none}.task-row.keyboard-selected,.task-row.selected{background-color:color-mix(in srgb,var(--accent-blue) 25%,var(--bg-card))}.task-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.task-actions-header{text-align:right}.event-table tbody tr{cursor:pointer}.task-description{font-weight:600;white-space:normal;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}.task-description-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.task-project{font-size:.85rem;color:var(--text-secondary);white-space:nowrap}.priority-high,.priority-low,.priority-medium{display:inline-block;padding:.25rem .5rem;border-radius:var(--radius-xs);font-weight:700;text-align:center}.priority-high{color:var(--accent-red);background:#fde8ea;background:color-mix(in srgb,var(--accent-red) 15%,var(--bg-card))}.priority-medium{color:var(--accent-yellow);background:#fef8e6;background:color-mix(in srgb,var(--accent-yellow) 15%,var(--bg-card))}.priority-low{color:var(--text-muted);background:var(--bg-secondary)}.sortable{cursor:pointer;user-select:none;white-space:nowrap}.sortable:hover{background:var(--bg-hover)}.sort-arrow{display:inline-block;width:.8em;margin-left:.25rem;opacity:.3}.sort-arrow::after{content:'\2195'}.sortable.sort-asc .sort-arrow::after{content:'\2191'}.sortable.sort-desc .sort-arrow::after{content:'\2193'}.sortable.sort-asc .sort-arrow,.sortable.sort-desc .sort-arrow{opacity:1}.task-overdue .task-description-text{color:var(--accent-red)}.task-overdue .task-due{color:var(--accent-red);font-weight:600}.task-tags{display:flex;gap:.25rem;flex-wrap:wrap}.task-tag{background-color:var(--bg-tertiary);color:var(--text-primary);padding:.125rem .5rem;border-radius:var(--radius-xs);font-size:.75rem;font-weight:600;border:1px solid var(--border-color)}.recurrence-icon{color:var(--accent-purple);font-size:.85rem;font-weight:700}.annotation-badge{background-color:var(--accent-yellow);color:var(--text-primary);padding:.125rem .5rem;border-radius:var(--radius-xs);font-size:.7rem;font-weight:700;border:var(--border-width-sm) solid var(--border-color)}.subtask-badge{background-color:var(--bg-secondary);color:var(--text-primary);padding:.125rem .5rem;border-radius:var(--radius-xs);font-size:.7rem;font-weight:700;border:var(--border-width-sm) solid var(--border-color);margin-left:.25rem}.task-started{border-left:4px solid var(--accent-green)}.task-completed{opacity:.5;text-decoration:line-through}.task-deleted{display:none}.due-overdue{color:var(--accent-red);font-weight:700;background:#fde8ea;background:color-mix(in srgb,var(--accent-red) 15%,var(--bg-card));padding:.25rem .5rem;border-radius:var(--radius-xs)}.due-today{color:var(--accent-yellow);font-weight:700;background:#fef8e6;background:color-mix(in srgb,var(--accent-yellow) 15%,var(--bg-card));padding:.25rem .5rem;border-radius:var(--radius-xs)}.due-soon{color:var(--text-secondary)}.due-future{color:var(--text-muted)}.events-list{display:flex;flex-direction:column;flex:1;min-height:0;gap:1rem}.event-table-virtual{width:100%;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.event-header-row,.event-row-virtual{display:grid;grid-template-columns:100px 80px 1fr 150px 40px;align-items:center;gap:.5rem}.event-header-row{background-color:var(--bg-secondary);border-bottom:2px solid var(--border-color);flex-shrink:0}.event-header-row .event-cell{padding:1rem 1.25rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary)}.event-list-container{flex:1;min-height:0;overflow-y:auto;position:relative}.event-row-virtual{padding:.75rem 1.25rem;border-bottom:1px solid var(--border-color);transition:background-color .15s ease;cursor:pointer}.event-row-virtual:hover{background-color:var(--bg-secondary)}.event-row-virtual:last-child{border-bottom:none}.event-row-virtual.event-past{opacity:.7}.event-cell{overflow:hidden;text-overflow:ellipsis}.event-row{cursor:pointer}.event-cell-date{white-space:nowrap}.event-cell-date .event-date-num{font-weight:700;font-size:.9rem;color:var(--text-primary);margin-right:.5rem}.event-date-badge{display:inline-block;padding:.15rem .4rem;background:var(--accent-green);color:var(--text-on-accent);font-size:.7rem;font-weight:700;text-transform:uppercase;border-radius:var(--radius-xs);margin-right:.5rem}.event-cell-time{font-family:var(--font-mono);font-size:.85rem;color:var(--text-secondary)}.event-cell-title{font-weight:600}.event-cell-location{color:var(--text-secondary);font-size:.875rem}.event-date-badge.event-proximity-today{background:var(--accent-green)}.event-date-badge.event-proximity-tomorrow{background:var(--accent-yellow);color:var(--text-primary)}.event-date-badge.event-proximity-week{background:var(--accent-cyan)}.event-date-badge.event-proximity-future{background:var(--accent-blue)}.event-date-badge.event-proximity-past{background:var(--text-muted)}.event-row.event-past{opacity:.7}.no-upcoming-events{text-align:center;padding:2rem;color:var(--text-secondary);font-style:italic}.past-events-section{margin-top:.5rem}.past-events-toggle{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;font-weight:600;color:var(--text-secondary);transition:background-color .15s ease,color .15s ease;list-style:none}.past-events-toggle::-webkit-details-marker{display:none}.past-events-toggle::before{content:'▶';font-size:.7rem;transition:transform .15s ease}.past-events-section[open] .past-events-toggle::before{transform:rotate(90deg)}.past-events-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary)}.past-events-label{flex:1}.past-events-count{background:var(--text-muted);color:var(--text-on-accent);font-size:.75rem;padding:.15rem .5rem;border-radius:var(--radius-sm)}.past-events-section .event-table-past{margin-top:.75rem;opacity:.85}.past-events-section .event-list-container{max-height:300px}#recurring-events-section .event-table-virtual{opacity:1;margin-top:.75rem}#recurring-events-section .event-list-container{max-height:320px}.event-row-virtual.event-recurring .event-recurrence-pattern{font-weight:600;color:var(--accent-primary)}.events-section-heading{margin:1rem 0 .5rem;font-size:.95rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.event-item{display:flex;gap:1rem;padding:1rem;background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);transition:background-color .15s ease;cursor:pointer}.event-item:hover{background-color:var(--bg-secondary)}.event-date{flex-shrink:0;width:80px;text-align:center;padding:.75rem;background-color:var(--accent-green);border-radius:var(--radius-sm);color:var(--text-on-accent)}.event-date-day{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.event-date-num{font-size:1.5rem;font-weight:700}.event-content{flex:1}.event-title{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;color:var(--text-primary);margin-bottom:.25rem}.event-details{font-size:.875rem;color:var(--text-secondary);display:flex;gap:1rem}.event-location,.event-time{display:flex;align-items:center;gap:.25rem}.event-project{margin-top:.5rem}.email-list{flex:1;min-height:0}.email-list-container{flex:1;min-height:0;overflow-y:auto;position:relative}.email-item{display:flex;gap:1rem;padding:1rem;border-bottom:2px solid var(--border-color);transition:background-color .15s ease;cursor:pointer}.email-item:last-child{border-bottom:none}.email-item:hover{background-color:var(--bg-secondary)}.email-item.unread{background-color:color-mix(in srgb,var(--accent-blue) 20%,var(--bg-card));border-left:4px solid var(--accent-blue)}.email-item.unread .email-subject{font-weight:700}.email-item.unread .email-from{font-weight:700}.email-item.outgoing{border-left:4px solid var(--accent-green)}.email-checkbox{flex-shrink:0;margin-top:.25rem}.email-content{flex:1;min-width:0}.email-header{display:flex;justify-content:space-between;margin-bottom:.25rem;align-items:center;gap:.5rem}.thread-badge{background-color:var(--bg-tertiary);color:var(--text-secondary);font-size:.7rem;font-weight:600;padding:.1rem .4rem;border-radius:var(--radius-md);min-width:1.25rem;text-align:center}.email-from{color:var(--text-primary);font-size:.9rem;font-weight:600}.email-date{color:var(--text-muted);font-size:.8rem;flex-shrink:0;font-weight:600}.email-subject{color:var(--text-primary);font-size:.95rem;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.email-preview{color:var(--text-muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes toastSlideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toast{position:fixed;bottom:var(--space-5);right:var(--space-5);padding:var(--space-3) var(--space-5);background:var(--bg-card);color:var(--text-primary);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-brutal-md);z-index:2000;font-weight:600;display:flex;align-items:center;gap:var(--space-3);animation:toastSlideIn .3s ease}.toast.toast-leaving{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.toast-info{background:var(--bg-card);color:var(--text-primary)}.toast-success{background:var(--accent-green);color:var(--text-on-accent)}.toast-error{background:var(--accent-red);color:var(--text-on-accent)}.toast-action{background:0 0;border:1px solid currentColor;border-radius:var(--radius-sm);color:inherit;cursor:pointer;padding:.15rem .5rem;font-size:var(--font-size-sm);font-weight:600;font-family:inherit}.toast-undo{z-index:10000}.undo-message{flex:1}.undo-countdown{font-size:var(--font-size-sm);color:var(--text-muted);min-width:2.5rem;text-align:right}@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}@keyframes modalSlideOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-20px) scale(.95)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--overlay-color);display:flex;align-items:center;justify-content:center;z-index:1000;animation:modalFadeIn .15s ease-out}.modal-overlay.hidden{display:none}.modal-overlay.closing{animation:modalFadeOut .15s ease-in forwards}.modal-container{background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-brutal-xl);max-width:var(--width-modal);width:90%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 2rem);overflow:auto;animation:modalSlideIn .2s ease-out}.modal-container.modal-large{max-width:calc(100vw - 4rem);width:calc(100vw - 4rem);max-height:calc(100vh - 4rem);height:calc(100vh - 4rem);display:flex;flex-direction:column}.modal-container.modal-large .modal-content{flex:1;overflow:auto;display:flex;flex-direction:column}.modal-overlay.closing .modal-container{animation:modalSlideOut .15s ease-in forwards}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:var(--border-width) solid var(--border-color);background:var(--bg-secondary)}.modal-header h2,.modal-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700}.modal-close{background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);font-size:1.25rem;color:var(--text-primary);cursor:pointer;line-height:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease}.modal-close:hover{background:var(--accent-blue);color:var(--text-on-accent)}.modal-content{padding:1.5rem}.modal-content form>.form-actions:last-child,.modal-content>.form-actions:last-child{position:sticky;bottom:0;margin-top:1.5rem;padding-top:.75rem;padding-bottom:.25rem;background:var(--bg-card);border-top:var(--border-width-sm) solid var(--border-color);z-index:1}.form-group{margin-bottom:1.25rem}.form-more-toggle{display:block;background:0 0;border:none;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--accent-blue);padding:.25rem 0;margin-bottom:.75rem}.form-more-toggle::before{content:'+ '}.form-more-toggle.expanded::before{content:'- '}.form-extended-fields.hidden{display:none}.recurrence-weekday-label{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.8rem;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer}.recurrence-weekday-label:has(input:checked){background:var(--accent-primary);color:var(--bg-primary);border-color:var(--accent-primary)}.recurrence-weekday-label input[type=checkbox]{display:none}.recurrence-config .form-input,.recurrence-config .form-select{font-size:.85rem;padding:.25rem .5rem}.form-label{display:block;font-size:.9rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.form-input,.form-select,.form-textarea{width:100%;padding:.75rem 1rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-card);color:var(--text-primary);font-size:1rem;box-shadow:none}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:0;background-color:var(--bg-card);box-shadow:0 0 0 2px var(--accent-blue)}.form-textarea{min-height:100px;resize:vertical}.form-input--ghost{background:0 0;border:none;padding:.5rem;font-size:.875rem}.form-input--ghost:focus{background:0 0;box-shadow:none}.form-select--ghost{background:var(--bg-primary);padding:.5rem;font-size:.875rem}.form-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem}.form-input[aria-invalid=true],.form-select[aria-invalid=true],.form-textarea[aria-invalid=true]{border-color:var(--accent-red);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-red) 30%,transparent)}.form-input[aria-invalid=true]:focus,.form-select[aria-invalid=true]:focus,.form-textarea[aria-invalid=true]:focus{box-shadow:0 0 0 2px var(--accent-red)}.form-error{color:var(--accent-red);font-size:.8rem;font-weight:600;margin-top:.25rem;display:none}.form-error.visible{display:block}.form-hint{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-1)}.form-hint--preview{color:var(--accent-primary)}.form-checkbox-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}.empty-state-action{margin-top:var(--space-3)}.stack{display:flex;flex-direction:column}.stack-2{gap:var(--space-2)}.stack-3{gap:var(--space-3)}.stack-4{gap:var(--space-4)}.row-flex{display:flex;align-items:center}.row-flex-2{gap:var(--space-2)}.row-flex-3{gap:var(--space-3)}.row-flex-4{gap:var(--space-4)}.text-center{text-align:center}.text-left{text-align:left}.w-full{width:100%}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-danger{color:var(--accent-red)}.text-sm{font-size:var(--font-size-sm)}.text-xs{font-size:var(--font-size-xs, .75rem)}.section-divider{border-top:var(--border-width-sm) solid var(--border-color);padding-top:var(--space-4);margin-top:var(--space-4)}.sync-status-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}.sync-status-dot{width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent-green);display:inline-block}.sync-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-5)}.sync-stat{padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-md)}.sync-stat-label{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--space-1)}.sync-stat-value{font-size:var(--font-size-md, .9rem)}.sync-encryption-error{color:var(--accent-red);font-size:var(--font-size-sm);margin-top:var(--space-2);display:none}.sync-encryption-error.visible{display:block}.sync-section-actions{margin-bottom:var(--space-5)}.sync-banner{padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--font-size-sm);color:var(--text-secondary)}.sync-banner--warning{background:var(--bg-secondary);border:1px solid var(--border-color);padding:var(--space-4)}.sync-empty{padding:var(--space-5) 0}.sync-empty-message{margin-bottom:var(--space-5)}.sync-hint{margin-bottom:var(--space-4)}.sync-status-label{font-weight:500}.sync-account-row{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-5);font-size:var(--font-size-sm)}.sync-account-label{color:var(--text-muted)}.sync-account-value{color:var(--text-primary)}.sync-account-username{color:var(--text-muted)}.sync-banner-title{font-weight:500;margin:0 0 var(--space-3) 0}.sync-banner-body{margin:0 0 var(--space-2) 0;font-size:var(--font-size-sm);color:var(--text-secondary)}.sync-banner-tier-line{margin:0 0 var(--space-4) 0;font-size:var(--font-size-sm);color:var(--text-secondary)}.sync-banner-actions{display:flex;gap:var(--space-2);align-items:center}.settings-subheading{margin-bottom:var(--space-3);font-size:var(--font-size-md, .9rem)}.settings-desc-block{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-4)}.settings-actions-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}.settings-actions-row--center{align-items:center;flex-wrap:nowrap;margin-top:var(--space-3)}.settings-status-text{font-size:var(--font-size-sm);color:var(--text-secondary)}.settings-section-block{padding-top:var(--space-4);border-top:var(--border-width-sm) solid var(--border-color)}.form-hint--spaced{margin-top:var(--space-2)}.empty-italic{color:var(--text-secondary);font-style:italic}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.email-detect-status{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-1)}.email-detect-note{font-size:var(--font-size-sm);margin-top:var(--space-2);padding:var(--space-3) var(--space-3);background:var(--bg-tertiary);border-left:3px solid var(--accent-primary);border-radius:var(--radius-sm);line-height:var(--line-height-normal)}.account-row{padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--space-2)}.account-row-header{display:flex;justify-content:space-between;align-items:flex-start}.account-row-name{font-weight:600}.account-row-meta{font-size:var(--font-size-sm);color:var(--text-secondary)}.account-row-sync{font-size:var(--font-size-sm);color:var(--text-secondary)}.account-row-provider-badge{font-size:var(--font-size-xs, .7rem);padding:.125rem .375rem;background:var(--accent-blue);color:var(--text-on-accent);border-radius:var(--radius-xs);margin-left:var(--space-2)}.test-conn-result{padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--space-2)}.test-conn-result--success{color:var(--accent-green)}.test-conn-result--error{color:var(--accent-red)}.folder-list{max-height:150px;overflow-y:auto;background:var(--bg-secondary);padding:var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--font-size-sm)}.folder-list-meta{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-2)}.error-pre{background:var(--bg-secondary);padding:var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--font-size-sm);white-space:pre-wrap;max-height:150px;overflow-y:auto}.test-conn-section{border-top:var(--border-width-sm) solid var(--border-color);margin:var(--space-4) 0;padding-top:var(--space-4)}.oauth-waiting{text-align:center;padding:var(--space-5)}.oauth-waiting-title{font-size:var(--font-size-lg, 1.25rem);margin-bottom:var(--space-4)}.oauth-waiting-body{color:var(--text-secondary);margin-bottom:var(--space-5)}.oauth-waiting-spinner{margin:0 auto var(--space-5)}.contact-card-header{gap:var(--space-3)}.contact-card-body{flex:1;min-width:0}.contact-detail-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}.contact-detail-name{margin:0}.contact-detail-tags{margin-bottom:var(--space-4)}.form-actions--spaced{margin-top:var(--space-5)}.milestones-empty{color:var(--text-muted);font-size:var(--font-size-sm);margin-bottom:var(--space-4)}.bulk-modal-prompt{color:var(--text-secondary);margin-bottom:var(--space-2)}.bulk-modal-prompt--wide{margin-bottom:var(--space-3)}.bulk-modal-scroll{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-1)}.bulk-priority-row{display:flex;gap:var(--space-2)}.snooze-hint{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0 0 var(--space-3) 0}.time-tracking-empty{color:var(--text-secondary);padding:var(--space-4) 0}.backups-empty{color:var(--text-secondary);font-style:italic}.backup-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:var(--space-2)}.backup-item-meta{font-size:var(--font-size-sm);color:var(--text-secondary)}.export-desc{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-5)}.export-note{margin-top:var(--space-4);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-sm)}.export-note-text{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0}.paint-time-preview{font-weight:600;color:var(--accent-primary);margin-bottom:var(--space-2)}.recurrence-config{display:none;margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--border-color);border-radius:var(--radius-sm)}.recurrence-config:not(.hidden){display:block}.recurrence-preview{font-size:var(--font-size-sm);color:var(--accent-primary);font-weight:600;margin-bottom:var(--space-2)}.recurrence-sublabel{font-size:var(--font-size-xs, .75rem)}.recurrence-unit{font-size:var(--font-size-sm)}.recurrence-day-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm)}.recurrence-nth-toggle{font-size:var(--font-size-sm);margin:var(--space-1) 0}.recurrence-row{margin-bottom:var(--space-2)}.recurrence-row.recurrence-hidden{display:none}.recurrence-interval-row{display:flex;align-items:center;gap:var(--space-2)}.recurrence-num{width:4rem}.recurrence-weekdays{display:flex;gap:var(--space-1);flex-wrap:wrap}.recurrence-monthly{margin-bottom:0}.recurrence-monthly.recurrence-hidden{display:none}.recurrence-monthly-stack{display:flex;flex-direction:column;gap:var(--space-2)}.recurrence-monthly-week{width:auto}.confirm-message-wrap{margin-bottom:var(--space-5)}.confirm-message{color:var(--text-secondary);line-height:var(--line-height-normal)}.review-intro{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0 0 var(--space-4)}.review-intro--weekly{margin:var(--space-2) 0 var(--space-4)}.no-events-day{color:var(--text-secondary)}.loading--error{color:var(--accent-red)}.project-dashboard-desc{color:var(--text-secondary);margin-bottom:var(--space-4)}.pending-key-hint{position:fixed;bottom:var(--space-5);left:50%;transform:translateX(-50%);padding:var(--space-2) var(--space-4);background:var(--bg-card);color:var(--text-primary);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-brutal-md);z-index:10000;font-size:var(--font-size-sm);white-space:nowrap;animation:toastSlideIn .15s ease}.pending-key-hint-label{opacity:.7}.pending-key-hint kbd{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xs);padding:.125rem .4rem;font-family:inherit;font-size:var(--font-size-sm)}.shortcuts-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-color);display:flex;align-items:center;justify-content:center;z-index:3000}.shortcuts-overlay-panel{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-5);max-width:600px;max-height:80vh;overflow-y:auto}.shortcuts-title{margin-top:0;margin-bottom:var(--space-4);border-bottom:1px solid var(--border-color);padding-bottom:var(--space-2)}.shortcuts-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}.shortcuts-group-heading{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-2)}.shortcuts-group-heading+.shortcut-row{margin-top:0}.shortcuts-group-heading-spaced{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-2);margin-top:var(--space-3)}.shortcuts-close{margin-top:var(--space-5);text-align:center}.shortcut-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.shortcut-row kbd{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xs);padding:.25rem .5rem;font-family:inherit;font-size:var(--font-size-sm);min-width:1.5rem;text-align:center}.shortcut-row span{color:var(--text-secondary);font-size:var(--font-size-sm);margin-left:auto}.quick-add-syntax{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-2);line-height:var(--line-height-relaxed)}.quick-add-syntax>span{margin-right:var(--space-3)}.quick-add-syntax kbd{font-size:.7rem;padding:.1rem .3rem;border:1px solid var(--border-color);border-radius:var(--radius-xs);background:var(--bg-secondary)}.virtual-scroller-wrapper{position:relative;width:100%}.virtual-scroller-spacer{height:0;width:100%}.meta-text{font-size:var(--font-size-sm);color:var(--text-muted)}.meta-text--secondary{color:var(--text-secondary)}.subtasks-empty{color:var(--text-secondary);text-align:center;padding:var(--space-4)}.subtask-linked-tag{color:var(--accent-color);font-size:var(--font-size-sm)}.task-actions-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--border-color)}.loading--error{color:var(--accent-red)}.error-state--padded{padding:var(--space-4)}.event-cell--shrink{flex:0 0 auto;padding-right:0}.hr-soft{border:none;border-top:1px solid var(--border-color);margin:var(--space-2) 0}.card-badge--success{background:var(--accent-green);color:var(--text-on-accent)}.card-badge--warning{background:var(--accent-yellow)}.card-badge--info{background:var(--accent-blue);color:var(--text-on-accent)}.card-badge--danger{background:var(--accent-red);color:var(--text-on-accent)}.card-badge--neutral{background:var(--bg-secondary)}.empty-italic--muted{color:var(--text-muted);font-style:italic}.review-history-block{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed var(--border-color)}.review-history-heading{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--space-3)}.email-attachment-row{display:flex;align-items:center;gap:var(--space-2);padding:.375rem 0}.email-attachment-size{font-size:var(--font-size-sm);color:var(--text-muted);flex-shrink:0}.email-attachments-block{margin-bottom:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border-color)}.email-attachments-heading{font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-1)}.email-thread-count{color:var(--text-muted);font-size:var(--font-size-sm)}.email-subject-line{font-weight:600;font-size:1.1rem}.email-meta-line{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-1)}.email-snoozed-tag{color:var(--accent-yellow)}.email-actions-bar{border-top:1px solid var(--border-color);padding-top:var(--space-4);margin-top:auto}.email-attachment-tag{margin-right:var(--space-2)}.email-draft-item{cursor:pointer;padding:var(--space-3)}.email-draft-meta{font-size:var(--font-size-sm);color:var(--text-secondary)}.label-existing-line{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-1)}.search-no-results{padding:var(--space-5);text-align:center;color:var(--text-secondary)}.email-attachment-name{flex:1;min-width:0}.email-draft-subject{font-weight:500}.header-row{display:flex;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border-color);gap:.5rem}.header-row--tight{padding:.25rem 1rem}.header-label{width:80px;color:var(--text-secondary);font-size:.875rem;flex-shrink:0}.autocomplete-wrapper{position:relative;flex:1;background:0 0;border-radius:var(--radius-sm)}.autocomplete-wrapper:focus-within{background:var(--bg-secondary)}.body-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.body-textarea{flex:1;min-height:12rem;background:var(--bg-card);border:none;color:var(--text-primary);font-size:.9375rem;font-family:inherit;padding:1rem;resize:vertical;outline:0;line-height:1.6}.body-textarea::placeholder{color:var(--text-muted)}.reply-indicator{display:none;color:var(--text-secondary);font-size:.8125rem;align-self:center}.compose-attachments{padding:.5rem 1rem;border-top:1px solid var(--border-color);background:var(--bg-secondary);font-size:.8125rem}.compose-attachment-item{padding:.25rem 0}.compose-attachment-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compose-attachment-size{color:var(--text-muted);flex-shrink:0}.compose-attachment-remove{background:0 0;border:none;color:var(--accent-red);cursor:pointer;font-size:1rem;padding:0 .25rem}.compose-attachment-total{display:flex;gap:var(--space-2);align-items:baseline;padding-top:var(--space-2);margin-top:var(--space-1);font-size:var(--font-size-sm);color:var(--text-muted);border-top:1px dashed var(--border-color)}.compose-attachment-total.over-warn{color:var(--accent-yellow)}.compose-attachment-total.over-cap{color:var(--accent-red)}.compose-attachment-warn{font-style:italic}.about-info-list{display:grid;grid-template-columns:max-content 1fr;column-gap:var(--space-4);row-gap:var(--space-2);margin:var(--space-4) 0;font-size:var(--font-size-sm)}.about-info-list dt{font-weight:600;color:var(--text-secondary)}.about-info-list dd{margin:0;font-family:var(--font-mono)}.about-updater-note{margin-top:var(--space-4)}.filter-count{font-size:var(--font-size-sm);color:var(--text-muted);margin-right:var(--space-2);white-space:nowrap}.filter-count--capped{color:var(--accent-yellow);font-weight:600}.ui-mode-mobile #task-view-toggle{display:none}.swipe-peek{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 var(--space-3);font-size:var(--font-size-sm);font-weight:600;color:var(--text-on-accent);pointer-events:none;opacity:0;transition:opacity .1s linear;z-index:0}.swipe-peek--right{left:0;background:var(--accent-blue);justify-content:flex-start}.swipe-peek--left{right:0;background:var(--accent-blue);justify-content:flex-end}.swipe-peek--success{background:var(--accent-green)}.swipe-peek--warn{background:var(--accent-yellow);color:var(--text-primary)}.swipe-peek--danger{background:var(--accent-red)}.swipe-peek--ready{box-shadow:inset 0 0 0 2px var(--text-on-accent)}.email-item,.event-row-virtual,.task-row{position:relative;overflow:hidden}.attachment-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border-color)}.attachment-icon{font-size:1.2rem}.attachment-meta{font-size:var(--font-size-sm);color:var(--text-muted)}.attachment-sync-warning{font-size:var(--font-size-sm);color:var(--text-muted)}.attachment-info{flex:1;min-width:0}.attachment-filename{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-actions{display:flex;gap:var(--space-1)}.attachment-attach-row{margin-top:var(--space-4)}.link-task-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--space-2);cursor:pointer}.link-task-item:hover{background:var(--bg-tertiary)}.link-task-project{font-size:var(--font-size-sm);color:var(--text-secondary)}.link-task-prompt{color:var(--text-secondary);margin-bottom:var(--space-4)}.link-task-desc{flex:1}.link-task-list{max-height:400px;overflow-y:auto}.form-actions--top-spaced{margin-top:var(--space-4)}.about-panel{text-align:center;padding:var(--space-4)}.about-title{font-family:var(--font-display);margin-bottom:var(--space-4)}.about-tagline{color:var(--text-secondary);margin-bottom:var(--space-2)}.about-version{color:var(--text-muted);font-size:var(--font-size-sm)}.welcome-panel{line-height:var(--line-height-relaxed)}.welcome-intro{color:var(--text-secondary);margin-bottom:var(--space-4)}.welcome-section{margin-bottom:var(--space-4)}.welcome-subhead{font-size:var(--font-size-md, .9rem);margin-bottom:var(--space-2)}.welcome-subhead--tight{margin-bottom:var(--space-1)}.welcome-step-stack{display:flex;flex-direction:column;gap:var(--space-2)}.welcome-tabs-list{color:var(--text-secondary);font-size:var(--font-size-sm);padding-left:var(--space-4);margin:0}.review-more-line{color:var(--text-muted);font-size:var(--font-size-sm);margin-top:var(--space-2)}.modal-attachments{font-size:var(--font-size-sm);margin-top:var(--space-1)}.account-row-info{flex:1}.account-row-actions{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.account-row-quick{display:flex;gap:var(--space-2)}.account-row-quick .btn{flex:1}.account-list{margin-bottom:var(--space-4);max-height:400px;overflow-y:auto}.form-actions-spacer{flex:1}.oauth-block{margin-bottom:var(--space-5)}.oauth-block-title{font-weight:500;margin-bottom:var(--space-3)}.oauth-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2)}.oauth-buttons .btn{flex:1;min-width:120px}.oauth-helptext{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:var(--space-2)}.imap-block-divider{border-top:var(--border-width-sm) solid var(--border-color);margin:var(--space-4) 0;padding-top:var(--space-4)}.imap-block-title{font-weight:500;margin-bottom:var(--space-3)}.test-conn-results{margin-bottom:var(--space-4)}.sync-results{margin-bottom:var(--space-4)}.sync-result-banner{padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:var(--space-2)}.sync-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-2)}.sync-result-tile{padding:var(--space-2);background:var(--bg-secondary);border-radius:var(--radius-sm)}.app-footer{background-color:var(--bg-card);border-top:var(--border-width) solid var(--border-color);padding:.75rem 1.5rem}.footer-content{max-width:var(--width-container);margin:0 auto;display:flex;justify-content:space-between;align-items:center}.ui-mode-desktop .keyboard-hints{display:flex;gap:1rem;font-size:.8rem;color:var(--text-muted)}kbd{display:inline-block;padding:.2rem .5rem;background-color:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:.75rem;font-weight:700}.welcome-hint{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-2)}.version{font-size:.75rem;color:var(--text-muted);font-weight:600}.empty-state{text-align:center;padding:3rem;color:var(--text-secondary)}.empty-state--compact{padding:2rem 1rem;font-size:var(--font-size-sm)}.empty-state--dashboard{padding:2rem 1rem}.empty-state--error{color:var(--accent-red)}.empty-state-icon{font-size:4rem;margin-bottom:1rem}.empty-state-text{font-size:1.1rem;font-weight:600;margin-bottom:1rem}.error-state{text-align:center;padding:2rem;color:var(--accent-red);background:color-mix(in srgb,var(--accent-red) 10%,var(--bg-card));border:var(--border-width-sm) solid var(--accent-red);border-radius:var(--radius-sm);font-weight:600}.view{display:block}.view.hidden{display:none}.filter-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem;padding:1rem;background-color:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.filter-group{display:flex;align-items:center;gap:.5rem}.filter-label{font-size:.8rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.filter-select{padding:.5rem .75rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-card);color:var(--text-primary);font-size:.875rem;font-weight:600}.filter-select:focus{outline:0;background-color:var(--accent-blue);color:var(--text-on-accent)}.filter-checkbox{display:flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:600;color:var(--text-primary);cursor:pointer}.filter-checkbox input[type=checkbox]{width:1rem;height:1rem;cursor:pointer}.btn-link{background:0 0;border:none;box-shadow:none;color:var(--text-secondary);font-size:.875rem;cursor:pointer;text-decoration:underline;padding:.5rem}.btn-link:hover{box-shadow:none;transform:none;color:var(--text-primary)}@media (min-width:1400px){.ui-mode-desktop .main-content{max-width:1600px}.ui-mode-desktop .cards-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}.ui-mode-desktop .project-dashboard-grid{gap:2rem}.ui-mode-desktop .day-plan-sidebar{width:320px}.ui-mode-desktop .modal-container{max-width:640px}}@media (max-width:1024px){.ui-mode-desktop .saved-views-sidebar{width:180px}.ui-mode-desktop .day-plan-sidebar{width:240px}.ui-mode-desktop .project-dashboard-grid{grid-template-columns:1fr 1fr;gap:1rem}.ui-mode-desktop .project-dashboard-grid .dashboard-column:last-child{grid-column:span 2}.ui-mode-desktop .filter-bar{flex-wrap:wrap}.ui-mode-desktop .filter-actions{width:100%;justify-content:flex-end;margin-top:.5rem}}.ui-mode-mobile .tab-navigation{flex-wrap:wrap;gap:.5rem}.ui-mode-mobile .tab{flex:1 1 auto;min-width:calc(33% - .5rem);justify-content:center;padding:.625rem .75rem}.ui-mode-mobile .tab-label{display:none}.ui-mode-mobile .tab-icon{font-size:1.25rem}.ui-mode-mobile .kbd-hint{display:none}.ui-mode-mobile .cards-grid{grid-template-columns:1fr}.ui-mode-mobile .task-table{font-size:.85rem}.ui-mode-mobile .task-header-row,.ui-mode-mobile .task-row{grid-template-columns:1fr 80px 40px 80px}.ui-mode-mobile .task-header-row .task-cell:nth-child(n+5),.ui-mode-mobile .task-row .task-cell:nth-child(n+5){display:none}.ui-mode-mobile .filter-bar{flex-direction:column}.ui-mode-mobile .keyboard-hints{display:none}.ui-mode-mobile .page-title{font-size:1.5rem}.ui-mode-mobile .saved-views-sidebar{display:none}.ui-mode-mobile .day-plan-content{flex-direction:column}.ui-mode-mobile .day-plan-sidebar{width:100%;max-height:200px}.ui-mode-mobile .project-dashboard-grid{grid-template-columns:1fr}.ui-mode-mobile .project-dashboard-grid .dashboard-column:last-child{grid-column:span 1}.ui-mode-mobile .modal-container{width:95%;max-height:95vh}.ui-mode-mobile .bulk-actions-bar{flex-wrap:wrap}.ui-mode-mobile .bulk-select-all{width:100%;margin-top:.5rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pagination-controls{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem;margin-top:1rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md)}.pagination-info{font-weight:600;color:var(--text-secondary);font-size:.9rem}.pagination-controls .btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible,.card:focus-visible,.email-item:focus-visible,.event-row-virtual:focus-visible,.filter-select:focus-visible,.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible,.modal-close:focus-visible,.saved-view-item:focus-visible,.snooze-option:focus-visible,.tab:focus-visible,.task-row:focus-visible,.timeline-item:focus-visible,.unscheduled-task:focus-visible{outline:3px solid var(--accent-blue);outline-offset:2px}.event-row,.task-row-clickable{cursor:pointer}.skip-link{position:absolute;top:-100px;left:0;background:var(--accent-blue);color:var(--text-on-accent);padding:.75rem 1.5rem;z-index:9999;font-weight:700;border:var(--border-width) solid var(--border-color);text-decoration:none}.skip-link:focus{top:0}.source-email-link{padding:.75rem;background:var(--bg-secondary);border-radius:var(--radius-sm);border-left:4px solid var(--accent-blue)}.thread-message{margin-bottom:1rem;padding:.75rem;background:var(--bg-secondary);border-radius:var(--radius-sm)}.thread-message-latest{border-left:3px solid var(--accent-blue)}.thread-message-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.8rem;color:var(--text-secondary)}.thread-message-from{font-weight:700}.email-reader-body{white-space:pre-wrap;font-size:.9rem;line-height:1.6;color:var(--text-primary);word-wrap:break-word;overflow-wrap:break-word}.email-reader-body .email-link{color:var(--accent-blue);text-decoration:underline;cursor:pointer;word-break:break-all}.email-reader-body .email-link:hover{color:var(--accent-cyan)}.email-reader-body hr{border:none;border-top:2px solid var(--border-color);margin:1rem 0}.email-reader-quote{border-left:3px solid var(--text-muted);padding-left:1rem;margin:.5rem 0;color:var(--text-secondary);font-style:italic}.email-quote-toggle{display:inline-block;color:var(--text-muted);font-size:.8125rem;cursor:pointer;padding:.25rem 0;user-select:none}.email-quote-toggle:hover{color:var(--accent-blue)}.email-quote-block{border-left:3px solid var(--text-muted);padding-left:1rem;margin:.25rem 0 .5rem;color:var(--text-secondary)}.email-quote-block.hidden{display:none}.autocomplete-dropdown{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-brutal);z-index:100;max-height:200px;overflow-y:auto}.autocomplete-item{padding:.5rem .75rem;cursor:pointer;font-size:.875rem}.autocomplete-item.active,.autocomplete-item:hover{background:var(--bg-secondary)}.autocomplete-name{font-weight:500}.autocomplete-email{color:var(--text-secondary);margin-left:.25rem}.email-reader-container{display:flex;flex-direction:column;height:100%;min-height:0}.email-reader-header{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color)}.email-sender-contact{margin-top:.5rem;padding:.4rem .5rem;background:var(--bg-tertiary);border-radius:4px}.email-sender-info{display:flex;flex-direction:column;flex:1;min-width:0}.email-sender-name{font-weight:600;font-size:.85rem}.email-sender-company{font-size:.75rem;color:var(--text-secondary)}.email-reader-thread{flex:1;overflow-y:auto;margin-bottom:1rem;min-height:0}.dropdown{position:relative;display:inline-block}.dropdown-menu{display:none;position:absolute;bottom:100%;left:0;margin-bottom:.25rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-brutal-md);min-width:160px;z-index:100}.dropdown-menu.show{display:block}.dropdown-item{display:block;width:100%;padding:.5rem 1rem;text-align:left;background:0 0;border:none;cursor:pointer;font-size:.875rem;color:var(--text-primary)}.dropdown-item:hover{background:var(--bg-secondary)}.dropdown-item:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}.dropdown-item:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}.context-menu{position:fixed;z-index:10000;min-width:180px;max-width:280px;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-brutal-lg);padding:.25rem 0;display:none}.context-menu.visible{display:block}.context-menu-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--text-primary);cursor:pointer;border:none;background:0 0;width:100%;text-align:left;transition:background .1s}.context-menu-item:focus,.context-menu-item:hover{background:var(--accent-blue);color:var(--text-on-accent);outline:0}.context-menu-item:focus-visible{outline:2px solid var(--accent-blue);outline-offset:-2px}.context-menu-header{font-size:.7rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;padding:.5rem 1rem .25rem}.context-menu-item-icon{width:1.25rem;text-align:center;flex-shrink:0}.context-menu-item-label{flex:1}.context-menu-item-subtitle{display:block;font-size:.7rem;color:var(--text-secondary);font-weight:400}.context-menu-item-shortcut{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}.context-menu-item--danger{color:var(--accent-red)}.context-menu-item--danger:hover{background:var(--accent-red);color:var(--text-on-accent)}.context-menu-separator{height:2px;background:var(--border-color);margin:.25rem .5rem}.context-menu-hint{padding:.35rem 1rem;font-size:.7rem;color:var(--text-muted);border-top:1px solid var(--border-color);margin-top:.25rem}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-left:2px solid var(--border-color)}::-webkit-scrollbar-thumb{background:var(--text-muted);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.loading{display:flex;justify-content:center;align-items:center;height:200px;color:var(--text-secondary);font-family:var(--font-heading)}.skeleton-shimmer{display:flex;flex-direction:column;gap:1rem;padding:1rem}.skeleton-shimmer .skeleton-row{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--bg-card);border-radius:var(--radius-md);border:var(--border-width) solid var(--border-color)}.skeleton-shimmer .skeleton-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;flex-shrink:0}.skeleton-shimmer .skeleton-lines{flex:1;display:flex;flex-direction:column;gap:.4rem}.skeleton-shimmer .skeleton-line{height:.75rem;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-shimmer .skeleton-line.short{width:40%}.skeleton-shimmer .skeleton-line.medium{width:65%}.skeleton-shimmer .skeleton-line.long{width:90%}@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:var(--radius-full);animation:spin .8s linear infinite}.btn-loading{position:relative;pointer-events:none;opacity:.8}.btn-loading .btn-text{visibility:hidden}.btn-loading::after{content:'';position:absolute;left:50%;top:50%;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;border:2px solid currentColor;border-top-color:transparent;border-radius:var(--radius-full);animation:spin .8s linear infinite}.hidden{display:none!important}.project-dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;flex:1;min-height:0}.dashboard-column{background:var(--bg-card);border:var(--border-width) solid var(--border-color);padding:1rem;display:flex;flex-direction:column;overflow:hidden}.dashboard-column-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border-color)}.dashboard-column-header h3{margin:0;font-size:1rem;font-family:var(--font-heading);font-weight:700}.dashboard-list{flex:1;overflow-y:auto}.dashboard-item-title{font-weight:600;margin-bottom:.25rem}.dashboard-item-meta{font-size:.75rem;color:var(--text-secondary)}.task-badges{display:flex;gap:.25rem;margin-top:.25rem}.task-badge{font-size:.65rem;padding:.15rem .4rem;border:var(--border-width-sm) solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-weight:600}.task-badge.has-items{background:var(--accent-blue);color:var(--text-on-accent)}.task-badge.recurrence{background:var(--accent-purple);color:var(--text-on-accent)}.task-row-clickable{cursor:pointer;transition:background .1s}.task-row-clickable:hover{background:var(--bg-secondary)}.progress-bar-container{width:100%;height:10px;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);overflow:hidden}.progress-bar{height:100%;background:var(--accent-green);transition:width .3s ease}.no-subtasks{color:var(--text-secondary);font-size:.875rem}#day-plan-view{display:flex;flex-direction:column;flex:1;min-height:0}#day-plan-view .page-header{flex-shrink:0}.day-plan-nav{display:flex;align-items:center;gap:.5rem}.day-plan-date-picker{padding:.5rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body)}.day-plan-date-display{font-size:1.25rem;font-weight:700;margin-left:1rem;font-family:var(--font-heading);line-height:1}.day-plan-content{flex:1;min-height:0;display:flex;gap:1.5rem}.day-plan-main{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.day-plan-sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.sidebar-header{padding:1rem;border-bottom:2px solid var(--border-color);flex-shrink:0}.sidebar-header h3{margin:0;font-size:1rem;font-family:var(--font-heading);font-weight:700}.sidebar-task-list{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.timeline-container{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}.timeline-scroll-area{position:relative;padding:.5rem 1rem 3rem .5rem;min-height:min-content}#timeline-slots{position:relative}#timeline-items{position:absolute;top:.5rem;left:.5rem;right:1rem;bottom:0;pointer-events:none}#timeline-items .timeline-item{pointer-events:auto}.timeline-slot{display:grid;grid-template-columns:50px 1fr;height:var(--timeline-slot-h,12px);position:relative}.timeline-slot.hour-start .timeline-slot-area{border-top:1px dashed color-mix(in srgb,var(--border-color) 50%,transparent)}.timeline-time{font-size:.7rem;color:var(--text-secondary);padding-right:.5rem;text-align:right;font-weight:500;transform:translateY(-.5em)}.timeline-hint{text-align:center;color:var(--text-secondary);font-size:.85rem;font-weight:600;margin:0 0 .5rem;padding:.35rem .75rem;background:var(--bg-secondary);border-radius:var(--radius-sm)}.timeline-slot-area{position:relative;cursor:grab}.timeline-slot-area:hover{background:var(--bg-secondary)}.timeline-item{position:absolute;left:60px;right:10px;border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);padding:.25rem .5rem;overflow:hidden;cursor:grab;z-index:10;transition:opacity .15s ease,box-shadow .15s ease}.timeline-item.task{background:var(--accent-green);color:var(--text-primary)}.timeline-item.event{background:var(--accent-blue);color:var(--text-on-accent)}.timeline-item.block{opacity:.85}.timeline-item.block-free_time{background:var(--accent-cyan);color:var(--text-primary)}.timeline-item.block-personal{background:var(--accent-yellow);color:var(--text-primary)}.timeline-item.block-vacation{background:var(--accent-purple);color:var(--text-on-accent)}.timeline-item.block-focus{background:var(--accent-red);color:var(--text-on-accent)}.timeline-item.conflict{box-shadow:0 0 0 3px var(--accent-red)}.timeline-item.selected{box-shadow:0 0 0 3px var(--bg-card),0 0 0 6px var(--accent-blue)}.timeline-item-title{font-weight:600;font-size:.75rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-item-meta{font-size:.65rem;opacity:.85;line-height:1.1}.timeline-current-time{position:absolute;left:50px;right:0;height:2px;background:var(--accent-red);z-index:20;pointer-events:none}.timeline-current-time::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;background:var(--accent-red);border-radius:var(--radius-full)}.timeline-paint-preview{position:absolute;left:70px;right:10px;background:var(--accent-blue);opacity:.4;border:var(--border-width-sm) dashed var(--border-color);border-radius:var(--radius-sm);z-index:5;pointer-events:none}.timeline-item.dragging{cursor:grabbing;opacity:.8;z-index:100;box-shadow:var(--shadow-brutal-md,4px 4px 0 var(--border-color))}.timeline-container.is-painting{cursor:crosshair;user-select:none}.timeline-container.is-painting .timeline-slot-area{pointer-events:none}.unscheduled-task{padding:.75rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-left:6px solid var(--accent-green);border-radius:var(--radius-sm);cursor:grab;transition:background-color .1s}.unscheduled-task:hover{background:var(--bg-secondary)}.unscheduled-task.priority-high{border-left-color:var(--accent-red)}.unscheduled-task.priority-medium{border-left-color:var(--accent-yellow)}.unscheduled-task.priority-low{border-left-color:var(--accent-green)}.unscheduled-task-title{font-weight:600;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unscheduled-task-meta{font-size:.75rem;color:var(--text-secondary)}.empty-unscheduled{text-align:center;color:var(--text-secondary);padding:2rem 1rem}.shortcut-hint-btn{font-family:var(--font-mono, monospace);font-weight:700;min-width:2rem;padding:.5rem}.settings-section h3{font-size:1rem;color:var(--text-primary)}.settings-section .form-hint{font-size:.75rem;color:var(--text-secondary)}.settings-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.settings-overlay.hidden{display:none}.settings-overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}.settings-overlay-card{position:relative;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg,8px);box-shadow:0 12px 40px rgba(0,0,0,.25);width:min(960px,100%);height:min(720px,100%);max-height:calc(100vh - 2 * var(--space-4));overflow:hidden;display:flex;flex-direction:column}.settings-overlay-card.hidden{display:none}.ui-mode-mobile .settings-overlay{padding:0}.ui-mode-mobile .settings-overlay-card{width:100%;height:100%;max-height:100%;border-radius:0;border:none}.settings-page-layout{display:flex;min-height:100%}.settings-sidebar{width:200px;flex-shrink:0;border-right:1px solid var(--border-color);padding:1.5rem 0;display:flex;flex-direction:column;gap:.25rem}.settings-nav-items{display:flex;flex-direction:column;gap:.125rem}.settings-nav-item{background:0 0;border:none;text-align:left;padding:.5rem 1.25rem;font-size:.875rem;color:var(--text-secondary);cursor:pointer;border-radius:0;border-left:2px solid transparent}.settings-nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.settings-nav-item.active{color:var(--text-primary);font-weight:600;border-left-color:var(--accent-primary);background:var(--bg-secondary)}.settings-content{flex:1;padding:1.5rem 2rem;max-width:640px;overflow-y:auto}.contact-header-card{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.5rem}.contact-info-section{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1.5rem;padding:1rem}.contact-info-item{font-size:.875rem}.contact-dashboard-summary{display:flex;gap:1.5rem;margin-bottom:1.5rem}.contact-summary-stat{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.25rem;background:var(--bg-secondary);border-radius:var(--radius-md);min-width:80px}.contact-summary-count{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.contact-summary-label{font-size:.75rem;color:var(--text-secondary);margin-top:.25rem}.contact-timeline{display:flex;flex-direction:column;gap:.25rem}.contact-timeline-item{padding:.5rem .75rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem}.contact-timeline-item:hover{background:var(--bg-hover)}.contact-timeline-icon{flex-shrink:0;width:2rem;text-align:center;font-size:.8rem}.contact-timeline-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-timeline-date{flex-shrink:0;font-size:.75rem;color:var(--text-secondary)}.address-highlight-mirror{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;white-space:nowrap;overflow:hidden;z-index:0;display:flex;align-items:center}.addr-malformed{color:var(--accent-red)}.addr-contact{color:var(--accent-blue)}.addr-verified{color:var(--accent-green)}.addr-ghost{color:var(--text-muted);opacity:.5}.sync-indicator{background:0 0;border:none;cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-sm);transition:background var(--transition-fast)}.sync-indicator:hover{background:var(--bg-hover)}.sync-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--text-muted);transition:background var(--transition-slow);flex-shrink:0}.sync-dot.connected{background:var(--accent-green)}.sync-dot.syncing{background:var(--accent-blue);animation:sync-pulse 1s infinite}.sync-dot.warn{background:var(--accent-yellow)}.sync-dot.error{background:var(--accent-red)}.sync-label{font-size:var(--font-size-sm);color:var(--text-secondary);white-space:nowrap}.ui-mode-mobile .sync-label{display:none}@keyframes sync-pulse{0%,100%{opacity:1}50%{opacity:.4}}.snooze-options{display:flex;flex-direction:column;gap:.5rem}.snooze-option{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);color:var(--text-primary);cursor:pointer;transition:background-color .1s;text-align:left;width:100%}.snooze-option:hover{background:var(--accent-blue);color:var(--text-on-accent)}.snooze-option-label{font-weight:600}.snooze-option-time{font-size:.75rem;color:var(--text-secondary)}.snooze-option:hover .snooze-option-time{color:var(--text-on-accent)}.snooze-custom{margin-top:.5rem;padding-top:.5rem;border-top:2px solid var(--border-color)}.snooze-badge{display:inline-block;font-size:.65rem;padding:.15rem .4rem;border:var(--border-width-sm) solid var(--border-color);background:var(--accent-yellow);color:var(--text-primary);font-weight:700;margin-top:.25rem}.contact-badge{display:inline-block;font-size:.65rem;padding:.15rem .4rem;border:var(--border-width-sm) solid var(--border-color);background:var(--accent-color);color:var(--bg-primary);font-weight:700;margin-top:.25rem}.bulk-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--accent-blue);border:var(--border-width-sm) solid var(--border-color)}.task-actions-cell{text-align:right;white-space:nowrap;display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.task-actions-cell .bulk-checkbox{margin-right:.5rem}.kebab-btn{font-size:1.1rem;padding:.2rem .4rem;border-radius:var(--radius-sm);color:var(--text-secondary);opacity:0;transition:opacity .15s ease}.email-item:focus-within .kebab-btn,.email-item:hover .kebab-btn,.event-row-virtual:focus-within .kebab-btn,.event-row-virtual:hover .kebab-btn,.task-row:focus-within .kebab-btn,.task-row:hover .kebab-btn{opacity:1}.kebab-btn:hover{background:var(--bg-hover)}.task-recurrence{font-size:.85rem;color:var(--text-secondary)}.task-due{white-space:nowrap}.bulk-actions-bar{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--accent-blue);color:var(--text-on-accent);border:var(--border-width) solid var(--border-color);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);margin-bottom:1rem}.bulk-actions-bar.hidden{display:none}.bulk-count{font-weight:700;margin-right:1rem;font-family:var(--font-heading)}.bulk-actions-bar .btn{background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);color:var(--text-primary)}.bulk-actions-bar .btn:hover{background:var(--bg-secondary)}.bulk-select-all{margin-left:auto}.email-checkbox-cell{padding:.75rem .5rem;display:flex;align-items:center}.email-item-with-checkbox{display:flex;align-items:flex-start}.email-item-with-checkbox .email-content{flex:1}.time-block-form{display:flex;flex-direction:column;gap:1rem}.time-block-quick-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.time-block-quick-btn.selected{background:var(--accent-blue);color:var(--text-on-accent);box-shadow:inset 0 0 0 2px var(--border-color)}.duration-presets{display:flex;gap:.5rem;flex-wrap:wrap}.duration-preset{padding:.35rem .75rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);color:var(--text-primary);cursor:pointer;font-size:.75rem;font-weight:600;transition:background-color .1s}.duration-preset:hover{background:var(--bg-tertiary)}.duration-preset.selected{background:var(--accent-blue);color:var(--text-on-accent)}.conflict-warning{padding:.75rem;background:var(--accent-red);border:var(--border-width) solid var(--border-color);color:var(--text-on-accent);font-size:.875rem;font-weight:600;margin-top:.5rem}.app-body{display:flex;flex:1;min-height:0;overflow:hidden}.app-body .main-content{flex:1;min-width:0;display:flex;flex-direction:column;overflow-x:visible;overflow-y:auto}#emails-view,#events-view,#projects-view,#tasks-view{padding-bottom:2.5rem}#tasks-view{display:flex;flex-direction:column;flex:1;min-height:0}#tasks-view .bulk-actions-bar,#tasks-view .filter-bar,#tasks-view .page-header{flex-shrink:0}#events-view{display:flex;flex-direction:column;flex:1;min-height:0}#events-view .page-header{flex-shrink:0}#emails-view{display:flex;flex-direction:column;flex:1;min-height:0}.email-filter-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--space-2);align-items:center}.email-filter-row>.form-input,.email-filter-row>.form-select{width:100%;min-width:0}.email-filter-row>.form-select{width:9rem}.contacts-filter-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-2);align-items:center}.contacts-filter-row>.form-input{width:100%;min-width:0}.contacts-filter-row>.filter-select{width:9rem;min-width:0}.work-hours-row{display:grid;grid-template-columns:auto auto auto;gap:var(--space-2);align-items:center}.work-hours-row>.form-select{width:auto}#emails-view .bulk-actions-bar,#emails-view .page-header{flex-shrink:0}.ui-mode-desktop .saved-views-sidebar{width:200px;flex-shrink:0;background:var(--bg-card);border-right:var(--border-width) solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.sidebar-section{display:flex;flex-direction:column;flex:1;min-height:0}.sidebar-section-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-bottom:2px solid var(--border-color);background:var(--bg-secondary)}.btn-icon{background:0 0;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;font-size:.875rem;line-height:1}.btn-icon:hover{color:var(--text-primary)}.pinned-views-list{flex:1;overflow-y:auto;padding:.5rem}.sidebar-empty{text-align:center;padding:1.5rem .5rem;color:var(--text-muted);font-size:.8rem}.saved-view-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;margin-bottom:.5rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;font-weight:600;color:var(--text-primary);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease}.saved-view-item:hover{background:var(--accent-blue);color:var(--text-on-accent)}.saved-view-item.active{background:var(--accent-blue);color:var(--text-on-accent);box-shadow:inset 0 0 0 2px var(--border-color)}.saved-view-item .view-icon{font-size:.75rem}.saved-view-item .view-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-view-item .view-actions{opacity:0;transition:opacity .1s}.saved-view-item:hover .view-actions{opacity:1}.filter-actions{display:flex;gap:.5rem;margin-left:auto}.avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background-color:var(--accent-blue);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;font-family:var(--font-heading);border:var(--border-width-sm) solid var(--border-color);flex-shrink:0}.avatar--sm{width:32px;height:32px;min-width:32px;font-size:.75rem;border:none}.avatar--lg{width:60px;height:60px;min-width:60px;font-size:1.2rem}.avatar--unknown{background:var(--bg-secondary);color:var(--text-secondary)}.contact-card .card-header{display:flex;align-items:center}.contact-nickname{display:block;font-size:.85rem;color:var(--text-secondary);font-style:italic}.contact-company{display:block;font-size:.85rem;color:var(--text-secondary)}.contact-email{font-size:.85rem;color:var(--text-secondary)}.contact-detail .detail-row{margin-bottom:.5rem;font-size:.9rem}.contact-detail .contact-info-section{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-light)}.contact-detail .contact-notes{margin-bottom:1.5rem}.contact-detail .contact-notes p{margin-top:.25rem;white-space:pre-wrap;color:var(--text-secondary)}.sub-collection{margin-bottom:1.25rem}.sub-collection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.sub-collection-header h4{margin:0;font-size:.95rem;font-weight:600}.sub-item{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--border-light);font-size:.9rem}.sub-item:last-child{border-bottom:none}.sub-empty{font-size:.85rem;color:var(--text-secondary);font-style:italic;padding:.25rem 0}.edit-sub-collections{border-top:1px solid var(--border-color);padding-top:1rem;margin-bottom:.5rem}.edit-sub-section{margin-bottom:.75rem}.edit-sub-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.sub-item-compact{font-size:.85rem;color:var(--text-secondary);padding:.125rem 0;display:flex;align-items:center;gap:var(--space-2);justify-content:space-between}.sub-item-actions{display:inline-flex;gap:var(--space-1);flex-shrink:0}.reminder-options{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-2)}.reminder-option{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--text-secondary);cursor:pointer}.task-drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--bg-primary);border-left:1px solid var(--border-color);box-shadow:-4px 0 18px rgba(0,0,0,.18);transform:translateX(100%);transition:transform 180ms ease-out;z-index:60;display:flex;flex-direction:column;overflow:hidden}.task-drawer.visible{transform:translateX(0)}.task-drawer-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.task-drawer-title{flex:1;margin:0;font-size:var(--font-size-lg, 1.05rem);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-drawer-close{flex-shrink:0}.task-drawer-actions{display:flex;gap:var(--space-2);flex-shrink:0}.task-drawer-content{flex:1;overflow-y:auto;padding:var(--space-4)}.task-row--active{background:var(--bg-accent,var(--bg-secondary));box-shadow:inset 3px 0 0 var(--accent-color,var(--text-primary))}.ui-mode-mobile .task-drawer{width:100vw;border-left:none}@media print{.btn,.card-badge,.context-menu,.filter-bar,.focus-section .btn,.focus-slot .btn,.header,.keyboard-hints,.modal-overlay,.pagination,.review-actions-grid,.sidebar,.tab-badge,.tab-nav,.tab-status-dot,.tabs,.toast,.virtual-scroller-spacer{display:none!important}body{background:#fff;color:#000}.main-content,.weekly-review-content{margin:0;padding:0;max-width:100%;width:100%}.view{padding:0}a{color:#000;text-decoration:underline}.data-table,.task-table{border:1px solid #333;box-shadow:none}.data-table{page-break-inside:avoid}.data-table td,.data-table th{border:1px solid #ccc;padding:.5rem;display:table-cell!important}.data-table tbody tr:hover,.task-row:hover{background:0 0}.task-list-container{height:auto!important;overflow:visible!important}.task-header-row,.task-row{grid-template-columns:1fr 100px 40px 80px 60px 80px 60px!important}.task-header-row .task-cell,.task-row .task-cell{display:block!important;border:1px solid #ccc;padding:.25rem .5rem}.view-header{page-break-after:avoid}.event-item,.focus-slot,.project-health,.reflection-prompt,.review-card,.weekly-review-content,body{background:#fff!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.review-card{border:1px solid #ccc!important;box-shadow:none!important;page-break-inside:avoid;margin-bottom:1rem}.focus-slot{border:1px solid #999!important}.focus-slot.primary{border:2px solid #f7d154!important;background:#fffbea!important}.review-grid{display:block!important}.review-card{display:inline-block;vertical-align:top;width:48%;margin-right:2%}.focus-section.full-width,.reflection-section,.week-timeline,.week-timeline-events{width:100%!important;display:block!important}.weekly-review-header{border-bottom:2px solid #333;padding-bottom:1rem;margin-bottom:1.5rem}.week-dates{font-size:1.5rem;font-weight:700}.day-dot{-webkit-print-color-adjust:exact;print-color-adjust:exact}.day-dot.completed{background:#5cb85c!important}.day-dot.event{background:#9b59b6!important}.day-dot.overdue{background:#d9534f!important}.project-health{border-left:4px solid #337ab7!important}.project-health.warning{border-left-color:#f7d154!important}.project-health.danger{border-left-color:#d9534f!important}.focus-grid{display:flex!important;gap:1rem}.focus-slot{flex:1}.reflection-prompts{display:flex!important;gap:1rem}.reflection-prompt{flex:1}.prompt-input{border:1px solid #ccc!important;min-height:80px}.focus-section{page-break-before:auto}.reflection-section{page-break-before:always}}.weekly-review-content{max-width:900px;margin:0 auto;padding:1rem}.weekly-review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:var(--border-width-sm) solid var(--border-color)}.week-dates{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--text-primary)}.review-status{padding:.25rem .75rem;border-radius:var(--radius-xs);font-size:.875rem;font-weight:600;border:var(--border-width-sm) solid var(--border-color)}.review-status.completed{background:var(--accent-green);color:var(--text-on-accent)}.review-status.pending{background:var(--accent-yellow);color:var(--text-primary)}.review-status.unreviewed{background:var(--bg-secondary);color:var(--text-muted)}.event-time{font-size:.875rem;font-weight:600;color:var(--text-muted);min-width:80px}.focus-section{background:linear-gradient(135deg,var(--bg-card) 0,color-mix(in srgb,var(--accent-yellow) 15%,var(--bg-card)) 100%)}.tab-badge{display:inline-block;width:8px;height:8px;background:var(--accent-red);border-radius:var(--radius-full);margin-left:.5rem;vertical-align:middle;animation:pulse-badge 2s infinite}@keyframes pulse-badge{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}.tab-status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:.5rem;vertical-align:middle;transition:background-color .3s ease}.tab-status-dot.status-none{display:none}.tab-status-dot.status-green{background-color:var(--accent-green)}.tab-status-dot.status-yellow{background-color:var(--accent-yellow);animation:pulse-badge 2s ease-in-out infinite}.tab-status-dot.status-red{background-color:var(--accent-red);animation:pulse-badge 1.5s ease-in-out infinite}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1200px;margin:0 auto}.review-card{padding:1.5rem}.review-card .card-header{align-items:center;padding-bottom:.75rem;border-bottom:var(--border-width-sm) solid var(--bg-secondary)}.review-card .card-title{display:flex;align-items:center;gap:.5rem}.review-card .card-icon{font-size:1.25rem}.review-card .card-badge{font-size:.8rem;padding:.25rem .75rem;border-radius:var(--radius-md);font-weight:600}.week-timeline{grid-column:1/-1}.timeline-visual{display:flex;gap:.5rem;margin-top:1rem}.timeline-day{flex:1;text-align:center;padding:.75rem .5rem;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color);position:relative}.timeline-day.today{background:var(--accent-blue);color:var(--text-on-accent);border-width:2px;font-weight:700}.timeline-day.past{opacity:.7}.timeline-day.future{background:var(--bg-card)}.timeline-day .day-name{font-size:.7rem;font-weight:600;text-transform:uppercase;color:var(--text-muted)}.timeline-day .day-number{font-size:1.1rem;font-weight:700}.day-dots{display:flex;justify-content:center;gap:3px;margin-top:.5rem;min-height:8px}.day-dot{width:8px;height:8px;border-radius:var(--radius-full)}.day-dot.task{background:var(--accent-blue)}.day-dot.event{background:var(--accent-purple)}.day-dot.completed{background:var(--accent-green)}.day-dot.overdue{background:var(--accent-red)}.day-dot.vacation-off{background:var(--text-muted);opacity:.5;width:12px;height:4px;border-radius:2px}.day-events{display:flex;flex-direction:column;gap:2px;margin-top:.5rem;text-align:left}.day-event{font-size:.6rem;line-height:1.3;padding:1px 4px;border-left:2px solid var(--accent-purple);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary)}.day-event .event-time{font-size:.55rem;font-weight:600;color:var(--accent-purple);margin-right:2px;min-width:auto}.day-event-more{font-size:.55rem;color:var(--text-muted);padding:1px 4px;font-style:italic}.week-timeline-events{grid-column:1/-1}.timeline-events-day{margin-bottom:.75rem}.timeline-events-day:last-child{margin-bottom:0}.timeline-events-day-label{font-family:var(--font-heading);font-size:.8rem;font-weight:700;color:var(--text-secondary);margin-bottom:.25rem;text-transform:uppercase}.vacation-toggles-section{margin-top:1rem;padding-top:1rem;border-top:2px solid var(--border-color)}.vacation-toggles-section h3{margin:0 0 .75rem 0;font-size:.9rem;font-family:var(--font-heading);font-weight:700}.vacation-toggles{display:flex;gap:.5rem}.vacation-toggle{width:2.5rem;height:2.5rem;border-radius:var(--radius-sm);border:var(--border-width) solid var(--border-color);background:var(--bg-secondary);font-family:var(--font-heading);font-weight:700;font-size:.8rem;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);display:flex;align-items:center;justify-content:center}.vacation-toggle:hover{background:var(--bg-hover)}.vacation-toggle.active{background:var(--accent-purple);color:var(--text-on-accent);border-color:var(--accent-purple)}.timeline-day.vacation{opacity:.5}.timeline-day.vacation .day-name{text-decoration:line-through}.vacation-day-banner{text-align:center;padding:.5rem 1rem;background:color-mix(in srgb,var(--accent-purple) 15%,var(--bg-secondary));border:var(--border-width-sm) solid var(--accent-purple);border-radius:var(--radius-sm);font-family:var(--font-heading);font-weight:700;font-size:.85rem;color:var(--accent-purple);margin-bottom:.75rem}.stats-row{display:flex;gap:1rem;margin-bottom:1rem}.stat-box{flex:1;text-align:center;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.stat-box .stat-number{font-family:var(--font-heading);font-size:2rem;font-weight:800;line-height:1}.stat-box .stat-number.green{color:var(--accent-green)}.stat-box .stat-number.red{color:var(--accent-red)}.stat-box .stat-number.blue{color:var(--accent-blue)}.stat-box .stat-number.purple{color:var(--accent-purple)}.stat-box .stat-label{font-size:.75rem;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-top:.25rem}.task-list{list-style:none;max-height:200px;overflow-y:auto}.task-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:var(--bg-secondary);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-normal)}.task-item:hover{background:var(--accent-blue);color:var(--text-on-accent)}.task-item.completed{opacity:.6;text-decoration:line-through}.task-checkbox{width:20px;height:20px;border:2px solid var(--border-color);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0}.task-checkbox.checked{background:var(--accent-green);color:var(--text-on-accent)}.task-text{flex:1;font-size:.9rem}.task-project{font-size:.75rem;padding:.2rem .5rem;background:var(--bg-card);border-radius:var(--radius-xs);color:var(--text-muted)}.task-due{font-size:.75rem;color:var(--text-muted)}.task-due.overdue{color:var(--accent-red);font-weight:600}.focus-section.full-width{grid-column:1/-1}.scope-slots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}.scope-slot{padding:1.25rem;background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:var(--radius-md);min-height:100px;display:flex;flex-direction:column;gap:.5rem;transition:background .15s,border-color .15s}.scope-slot.filled{border-style:solid;background:var(--bg-card)}.scope-slot.empty{cursor:pointer}.scope-slot.empty:hover{border-color:var(--accent-primary);background:var(--bg-tertiary)}.scope-slot-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:600}.scope-slot-title{font-weight:600;font-size:.95rem}.scope-slot-meta{font-size:.8rem;color:var(--text-secondary)}.scope-slot-empty{color:var(--text-muted);font-style:italic;font-size:.9rem}.focus-slot.primary{border-color:var(--accent-yellow);background:linear-gradient(135deg,var(--bg-card) 0,color-mix(in srgb,var(--accent-yellow) 10%,var(--bg-card)) 100%)}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:.5rem}.project-health{padding:.75rem;background:var(--bg-secondary);border-radius:var(--radius-md);border-left:4px solid var(--accent-blue)}.project-health.warning{border-left-color:var(--accent-yellow)}.project-health.danger{border-left-color:var(--accent-red)}.project-name{font-weight:600;font-size:.85rem;margin-bottom:.25rem}.project-stats{font-size:.75rem;color:var(--text-muted)}.reflection-section{grid-column:1/-1}.reflection-prompts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.reflection-prompt{padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.prompt-label{font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:.5rem}.prompt-input,.reflection-textarea{width:100%;padding:.75rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-md);font-size:.9rem;font-family:inherit;resize:none;background:var(--bg-card)}.prompt-input:focus,.reflection-textarea:focus{outline:0;border-color:var(--accent-blue)}.review-actions-grid{grid-column:1/-1;display:flex;justify-content:flex-end;gap:1rem;padding-top:1rem}.event-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:var(--bg-secondary);border-radius:var(--radius-md);border-left:3px solid var(--accent-purple)}.event-item .event-time{font-size:.8rem;font-weight:600;color:var(--accent-purple);min-width:100px}.event-item .event-title{flex:1;font-size:.9rem}.accomplishment-highlight{background:linear-gradient(135deg,color-mix(in srgb,var(--accent-green) 10%,var(--bg-card)) 0,color-mix(in srgb,var(--accent-green) 5%,var(--bg-card)) 100%);border:2px solid var(--accent-green);padding:1rem;border-radius:var(--radius-md);margin-bottom:1rem;display:flex;align-items:center;gap:1rem}.accomplishment-icon{font-size:2rem}.accomplishment-text{font-size:1rem}.accomplishment-text strong{color:var(--accent-green)}.task-list::-webkit-scrollbar{width:6px}.task-list::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-xs)}.task-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-xs)}.ui-mode-mobile .review-grid{grid-template-columns:1fr}.ui-mode-mobile .focus-section.full-width,.ui-mode-mobile .reflection-section,.ui-mode-mobile .week-timeline,.ui-mode-mobile .week-timeline-events{grid-column:1}.ui-mode-mobile .focus-grid{grid-template-columns:1fr}.ui-mode-mobile .reflection-prompts{grid-template-columns:1fr}.ui-mode-mobile .projects-grid{grid-template-columns:1fr 1fr}.ui-mode-mobile .stat-cards{flex-direction:column}.ui-mode-mobile .stat-card{max-width:none}.ui-mode-mobile .week-info{flex-direction:column;align-items:flex-start;gap:.5rem}.ui-mode-mobile .projects-grid{grid-template-columns:1fr}.focus-slot{transition:background-color .2s ease-out,border-color .2s ease-out}.focus-slot.filled{animation:focusSlotFill .3s ease-out}@keyframes focusSlotFill{0%{transform:scale(.95);opacity:.7}100%{transform:scale(1);opacity:1}}.focus-slot:focus,.focus-slot:focus-within{outline:2px solid var(--accent-blue);outline-offset:2px}.focus-slot[tabindex]:focus{outline:2px solid var(--accent-blue);outline-offset:2px}.focus-section .btn{transition:transform .15s ease-out,opacity .15s ease-out}.focus-section .btn:active{transform:scale(.97)}.monthly-review-nav,.weekly-review-nav{display:flex;align-items:center;gap:.5rem}.weekly-review-nav .week-dates{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-left:.5rem}.monthly-review-month-display{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-left:.5rem}.monthly-review-content{max-width:900px;margin:0 auto;padding:1rem}.month-heatmap{margin-bottom:1.5rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-md);padding:1rem;background:var(--bg-secondary)}.month-heatmap-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:.5rem}.month-heatmap-day-header{font-family:var(--font-heading);font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase}.month-heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.month-heatmap-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius-xs);cursor:pointer;transition:transform .1s ease;border:var(--border-width-sm) solid transparent;position:relative;min-height:40px}.month-heatmap-cell:not(.empty):hover{transform:scale(1.1);border-color:var(--border-color);z-index:1}.month-heatmap-cell.empty{cursor:default;background:0 0}.month-heatmap-cell.intensity-0{background:var(--bg-primary)}.month-heatmap-cell.intensity-1{background:color-mix(in srgb,var(--accent-green) 20%,var(--bg-primary))}.month-heatmap-cell.intensity-2{background:color-mix(in srgb,var(--accent-green) 40%,var(--bg-primary))}.month-heatmap-cell.intensity-3{background:color-mix(in srgb,var(--accent-green) 60%,var(--bg-primary))}.month-heatmap-cell.vacation{background:var(--bg-tertiary);opacity:.6}.month-heatmap-cell.today{border-color:var(--accent-primary);border-width:2px}.month-heatmap-cell.past.intensity-0{background:var(--bg-tertiary)}.month-heatmap-day-number{font-family:var(--font-heading);font-size:.8rem;font-weight:600;color:var(--text-primary)}.month-heatmap-dots{display:flex;gap:2px;margin-top:2px}.month-dot{font-size:.6rem;font-weight:700;border-radius:var(--radius-xs);padding:0 3px;line-height:1.3}.month-dot.completed{color:var(--accent-green)}.month-dot.event{color:var(--accent-purple)}.monthly-review-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.review-card.month-stats-card{grid-column:span 1}.review-card.month-goals-card{margin-bottom:1rem}.review-card.month-patterns-card,.review-card.month-pulse-card{grid-column:span 1}.review-card.month-reflection-card{grid-column:1/-1}.review-card-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin-bottom:.75rem;color:var(--text-primary)}.month-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.month-stat-item{display:flex;flex-direction:column;align-items:center;padding:.5rem;border-radius:var(--radius-xs);background:var(--bg-primary);border:var(--border-width-sm) solid var(--border-color)}.month-stat-value{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--text-primary)}.month-stat-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;font-weight:600}.month-stats-highlights{display:flex;gap:1rem;margin-top:.5rem;justify-content:center}.stat-highlight{font-size:.8rem;color:var(--text-secondary)}.month-pulse-list{display:flex;flex-direction:column;gap:.5rem}.month-pulse-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--radius-xs);background:var(--bg-primary);border:var(--border-width-sm) solid var(--border-color)}.pulse-name{font-weight:600;flex:1;font-size:.875rem}.pulse-stats{font-size:.75rem;color:var(--text-secondary)}.pulse-arrow{font-size:1rem;font-weight:700}.month-pulse-item.positive .pulse-arrow{color:var(--accent-green)}.month-pulse-item.negative .pulse-arrow{color:var(--accent-red)}.month-pulse-item.neutral .pulse-arrow{color:var(--text-secondary)}.month-goal-body{display:flex;align-items:center;gap:.5rem;flex:1}.month-goal-item.done{opacity:.7}.month-goal-item.done .month-goal-text{text-decoration:line-through}.month-goal-item.abandoned{opacity:.5}.month-goal-item.abandoned .month-goal-text{text-decoration:line-through}.month-goal-status-btn{font-size:1rem;padding:0;color:var(--text-secondary);width:24px;text-align:center}.month-goal-item.done .month-goal-status-btn{color:var(--accent-green)}.month-goal-item.abandoned .month-goal-status-btn{color:var(--accent-red)}.month-goal-text{flex:1;font-size:.875rem}.month-goal-delete-btn{color:var(--text-tertiary);padding:0 4px;font-size:.75rem;opacity:0;transition:opacity .15s}.month-goal-item:hover .month-goal-delete-btn{opacity:1}.month-goal-placeholder{color:var(--text-tertiary);font-size:.875rem}.month-reflection-fields{display:flex;flex-direction:column;gap:.5rem}.month-reflection-label{font-size:.875rem;font-weight:600;color:var(--text-secondary)}.month-reflection-textarea{width:100%;padding:.5rem;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-xs);background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);font-size:.875rem;resize:vertical}.month-reflection-textarea:focus{outline:2px solid var(--accent-primary);outline-offset:-1px}.month-patterns-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.month-pattern-item{font-size:.875rem;color:var(--text-secondary);padding:.5rem;background:var(--bg-primary);border-radius:var(--radius-xs);border:var(--border-width-sm) solid var(--border-color)}.ui-mode-mobile .monthly-review-cards{grid-template-columns:1fr}.ui-mode-mobile .review-card.month-goals-card,.ui-mode-mobile .review-card.month-patterns-card,.ui-mode-mobile .review-card.month-pulse-card,.ui-mode-mobile .review-card.month-stats-card{grid-column:span 1}.ui-mode-mobile .month-heatmap-cell{min-height:32px}.ui-mode-mobile .month-heatmap-day-number{font-size:.7rem}.ui-mode-mobile .month-heatmap-dots{display:none}.import-wizard{display:flex;flex-direction:column;gap:1.5rem}.import-step{padding:1rem;background:var(--bg-secondary);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md)}.import-step h3{margin:0 0 1rem 0;font-size:var(--font-size-md);font-weight:600}.plugin-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}.plugin-option{display:flex;flex-direction:column;align-items:flex-start;padding:.75rem 1rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:border-color var(--transition-fast),background var(--transition-fast)}.plugin-option:hover{border-color:var(--accent-primary);background:var(--bg-hover)}.plugin-option.selected{border-color:var(--accent-primary);background:color-mix(in srgb,var(--accent-primary) 10%,var(--bg-card));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-primary) 30%,transparent)}.plugin-option .plugin-name{font-weight:600;margin-bottom:.25rem}.plugin-option .plugin-meta{display:flex;gap:.5rem;font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:.25rem}.plugin-option .plugin-extensions{color:var(--accent-cyan)}.plugin-option .plugin-types{color:var(--text-secondary)}.plugin-option .plugin-description{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.4}.file-selector{display:flex;align-items:center;gap:1rem}.selected-file-name{color:var(--text-secondary);font-family:monospace;font-size:var(--font-size-sm)}.import-preview-container{min-height:100px}.import-preview-table-wrapper{max-height:300px;overflow:auto;border:1px solid var(--border-color);border-radius:var(--radius-sm)}.import-preview-table{font-size:var(--font-size-sm);margin:0}.import-preview-table th{position:sticky;top:0;background:var(--bg-secondary);z-index:1}.import-preview-table td{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.import-summary{margin:0 0 .75rem 0;color:var(--text-primary)}.import-more{margin:.5rem 0 0 0;color:var(--text-muted);font-style:italic;font-size:var(--font-size-sm)}.import-empty,.import-error{padding:2rem;text-align:center;color:var(--text-muted)}.import-error{color:var(--accent-red)}.import-warnings{margin-top:1rem;padding:.75rem;background:color-mix(in srgb,var(--accent-yellow) 10%,var(--bg-card));border:1px solid var(--accent-yellow);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.import-warnings ul{margin:.5rem 0 0 1.25rem;padding:0}.import-warnings li{margin-bottom:.25rem}.import-external-types{display:flex;gap:1rem;margin-bottom:1.5rem}.import-type-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 1rem;background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:border-color .15s,background .15s}.import-type-card:hover{border-color:var(--accent-primary);background:var(--bg-secondary)}.import-type-icon{font-size:2rem}.import-type-label{font-weight:600;color:var(--text-primary)}.import-type-desc{font-size:var(--font-size-sm);color:var(--text-muted)}.plugin-list{display:flex;flex-direction:column;gap:.75rem}.plugin-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md)}.plugin-item .plugin-info{flex:1}.plugin-item .plugin-name{font-weight:600}.plugin-item .plugin-version{color:var(--text-muted);font-size:var(--font-size-sm);margin-left:.5rem}.plugin-item .plugin-description{margin:.25rem 0;color:var(--text-secondary);font-size:var(--font-size-sm)}.plugin-item .plugin-extensions{font-size:var(--font-size-xs);color:var(--text-muted)}.plugin-item .plugin-actions{margin-left:1rem}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:var(--radius-xl);transition:background-color var(--transition-fast),border-color var(--transition-fast)}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:var(--text-muted);border-radius:var(--radius-full);transition:transform var(--transition-fast),background-color var(--transition-fast)}.toggle-switch input:checked+.toggle-slider{background-color:var(--accent-primary);border-color:var(--accent-primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px);background-color:var(--bg-card)}.toggle-switch input:focus+.toggle-slider{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-primary) 30%,transparent)}.milestones-section{margin-bottom:1.5rem}.milestones-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border-color)}.milestones-header h3{margin:0;font-size:1rem;font-family:var(--font-heading);font-weight:700}.milestone-card{background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);padding:1rem;margin-bottom:.75rem;transition:background-color .1s;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.milestone-card:hover{background:var(--bg-secondary)}.milestone-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.milestone-card-header h4{margin:0;font-size:.95rem;font-family:var(--font-heading);font-weight:700}.milestone-card-header .milestone-status{font-size:.7rem;font-weight:700;text-transform:uppercase;padding:.15rem .4rem;border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-muted)}.milestone-card-header .milestone-status.completed{background:color-mix(in srgb,var(--accent-green) 15%,var(--bg-secondary));color:var(--accent-green)}.milestone-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem}.milestone-progress{height:6px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden;border:var(--border-width-sm) solid var(--border-color)}.milestone-progress-fill{height:100%;background:var(--accent-green);border-radius:var(--radius-full);transition:width var(--transition-fast)}.milestone-actions{display:flex;gap:.5rem;margin-top:.5rem}.milestone-actions button{font-size:.75rem;padding:.2rem .5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);transition:background var(--transition-fast)}.milestone-actions button:hover{background:var(--bg-hover)}.milestone-actions button.danger:hover{background:color-mix(in srgb,var(--accent-red) 15%,var(--bg-secondary));color:var(--accent-red)}button.milestone-reorder-btn.btn{font-size:.65rem;padding:.15rem .35rem;line-height:1;min-width:1.5rem;text-align:center}.milestones-completed-section{margin-top:.75rem}.milestones-completed-toggle{font-size:.8rem;color:var(--text-secondary);padding:.25rem 0}.milestone-card-summary{padding:.5rem .75rem;opacity:.7}.milestone-card-summary .milestone-info{display:flex;align-items:center;gap:.5rem}.milestone-complete-badge{font-size:.7rem;font-weight:700;padding:.1rem .4rem;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent-green) 15%,var(--bg-secondary));color:var(--accent-green)}.mobile-tab-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:1100;background:var(--bg-card);border-top:var(--border-width) solid var(--border-color);padding-bottom:env(safe-area-inset-bottom,0);height:calc(52px + env(safe-area-inset-bottom,0px))}.mobile-tab{flex:1;display:flex;align-items:center;justify-content:center;height:52px;background:0 0;border:none;color:var(--text-muted);font-size:.7rem;font-weight:700;font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s ease}.mobile-tab.active{color:var(--accent-blue)}.mobile-tab:active{background:var(--bg-secondary)}.mobile-tab-create{font-size:1.4rem;font-weight:400;color:var(--accent-green);letter-spacing:0;text-transform:none}.mobile-tab-slide-menu{position:fixed;z-index:1102;min-width:140px;background:var(--bg-card);border:var(--border-width) solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-brutal-md);padding:.25rem;display:flex;flex-direction:column;opacity:0;transform:scale(.92);transform-origin:50% 100%;transition:opacity 120ms ease-out,transform 120ms ease-out}.mobile-tab-slide-menu.is-open{opacity:1;transform:scale(1)}.mobile-tab-slide-item{padding:.7rem .9rem;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary);border-radius:var(--radius-sm);transition:background 80ms ease,transform 80ms ease}.mobile-tab-slide-item.is-highlighted{background:var(--accent-blue);color:var(--text-on-accent);transform:scale(1.03)}.action-sheet{position:fixed;inset:0;z-index:10001;display:flex;flex-direction:column;justify-content:flex-end}.action-sheet.hidden{display:none}.action-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}.action-sheet-container{position:relative;background:var(--bg-card);border-top:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom,0px));max-height:60vh;overflow-y:auto;animation:sheetSlideUp .25s ease-out}.action-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--text-muted);margin:0 auto .75rem;opacity:.4}.action-sheet-content button{display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem .5rem;background:0 0;border:none;border-bottom:1px solid var(--bg-secondary);font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);text-align:left;cursor:pointer}.action-sheet-content button:last-child{border-bottom:none}.action-sheet-content button:active{background:var(--bg-secondary)}.action-sheet-content button.danger{color:var(--accent-red)}.action-sheet-cancel{display:block;width:100%;padding:.875rem;margin-top:.5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:700;color:var(--text-primary);text-align:center;cursor:pointer}.action-sheet-cancel:active{background:var(--bg-tertiary)}.modal-drag-handle{display:none;width:36px;height:4px;border-radius:2px;background:var(--text-muted);margin:.5rem auto 0;opacity:.4}.mobile-sort-bar{display:none;gap:.5rem;padding:.5rem 0;align-items:center}.mobile-sort-bar select{flex:1;font-size:var(--font-size-sm)}.mobile-filter-toggle{display:none}.swipe-actions-container{position:relative;overflow:hidden}.swipe-actions-bg{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 1rem;font-weight:700;font-size:var(--font-size-sm);color:var(--text-on-accent)}.swipe-actions-bg.swipe-left{right:0;background:var(--accent-green)}.swipe-actions-bg.swipe-right{left:0;background:var(--accent-red)}.swipe-content{position:relative;background:var(--bg-card);transition:transform .15s ease}.pull-to-refresh-indicator{display:none;text-align:center;padding:.75rem;font-size:var(--font-size-sm);color:var(--text-muted);font-weight:600}.pull-to-refresh-indicator.visible{display:block}.event-date-group-header{display:none}.day-plan-sidebar-toggle{display:none}@keyframes sheetSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheetSlideDown{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes dialFadeIn{from{opacity:0}to{opacity:1}}.ui-mode-mobile body,html.ui-mode-mobile{overflow-x:hidden;max-width:100vw;touch-action:pan-y;overscroll-behavior-x:none}.ui-mode-mobile body{padding-top:env(safe-area-inset-top,0);padding-bottom:calc(52px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}.ui-mode-mobile .mobile-tab-bar,.ui-mode-mobile .timer-widget{padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}.ui-mode-mobile .mobile-tab-bar{display:flex}.ui-mode-mobile .tab-navigation{display:none!important}.ui-mode-mobile .app-header{display:none}.ui-mode-mobile .pill-nav{display:none}.ui-mode-mobile #contacts-view .page-header>.row-flex,.ui-mode-mobile #emails-view>div.row-flex.mb-2,.ui-mode-mobile #tasks-view .mobile-sort-bar,.ui-mode-mobile #tasks-view .page-header>.row-flex{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,1fr);gap:var(--space-2);align-items:center}.ui-mode-mobile #tasks-view .page-header>.row-flex{grid-template-columns:1fr}.ui-mode-mobile .mobile-hide{display:none!important}.ui-mode-mobile #day-review-status-badge,.ui-mode-mobile #month-review-status-badge,.ui-mode-mobile #week-review-status-badge{display:none!important}.ui-mode-mobile #day-plan-view .timeline-hint{display:none}.ui-mode-mobile #day-plan-view .timeline-slot-area{cursor:default}.ui-mode-mobile #day-plan-view .timeline-slot-area:hover{background:0 0}.ui-mode-mobile #day-plan-view .day-plan-nav{display:flex;flex-wrap:wrap;column-gap:var(--space-2);row-gap:var(--space-3);align-items:center}.ui-mode-mobile #day-plan-view .day-plan-nav .btn{flex:0 0 auto;border-radius:var(--radius-sm);border-right-width:var(--border-width)}.ui-mode-mobile #day-plan-view .day-plan-nav .day-plan-date-picker{flex:1 1 120px;min-width:0}.ui-mode-mobile #day-plan-view .day-plan-date-display{display:none}.ui-mode-mobile #contacts-search,.ui-mode-mobile #email-search{grid-column:1/-1;width:100%;min-width:0}.ui-mode-mobile #email-count{display:none}.ui-mode-mobile #contacts-view .page-header>.row-flex .btn,.ui-mode-mobile #tasks-view .page-header>.row-flex .btn{border-radius:var(--radius-sm);border-right-width:var(--border-width)}.ui-mode-mobile #tasks-view .page-header .view-toggle{display:flex;width:100%}.ui-mode-mobile #tasks-view .page-header .view-toggle .view-toggle-btn{flex:1 1 0}.ui-mode-mobile .tab-group>.subview>.page-header{position:static}.ui-mode-mobile .main-content{padding:.75rem}.ui-mode-mobile .page-header{flex-wrap:wrap;gap:.5rem}.ui-mode-mobile .page-header .btn-primary{display:none}.ui-mode-mobile .page-title{display:none}.ui-mode-mobile #contacts-view .page-header>div,.ui-mode-mobile #emails-view .page-header>div,.ui-mode-mobile .page-header>div{gap:0!important;flex-wrap:wrap}.ui-mode-mobile #contacts-view .page-header>div .btn,.ui-mode-mobile #emails-view .page-header>div .btn,.ui-mode-mobile .bulk-actions-bar .btn,.ui-mode-mobile .page-header>div .btn{flex:1 1 0;min-width:0;padding:.4rem .5rem;font-size:.75rem;border-radius:0;border-right-width:0;white-space:nowrap}.ui-mode-mobile #contacts-view .page-header>div .btn:first-child,.ui-mode-mobile #emails-view .page-header>div .btn:first-child,.ui-mode-mobile .bulk-actions-bar .btn:first-of-type,.ui-mode-mobile .page-header>div .btn:first-child{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}.ui-mode-mobile #contacts-view .page-header>div .btn:has(+ .btn-primary),.ui-mode-mobile #contacts-view .page-header>div .btn:last-child,.ui-mode-mobile #emails-view .page-header>div .btn:has(+ .btn-primary),.ui-mode-mobile #emails-view .page-header>div .btn:last-child,.ui-mode-mobile .page-header>div .btn:has(+ .btn-primary),.ui-mode-mobile .page-header>div .btn:last-child{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);border-right-width:var(--border-width)}.ui-mode-mobile .bulk-actions-bar{gap:0}.ui-mode-mobile .bulk-actions-bar .bulk-count{margin-right:.5rem}.ui-mode-mobile .bulk-actions-bar .btn:not(.bulk-select-all)+.bulk-select-all{border-right-width:var(--border-width);border-radius:var(--radius-sm)}.ui-mode-mobile .bulk-actions-bar .btn:not(.bulk-select-all):nth-last-of-type(2){border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);border-right-width:var(--border-width)}.ui-mode-mobile .bulk-select-all{margin-left:auto}.ui-mode-mobile #emails-view .form-select[id^=email-]{min-width:0!important;flex:1}.ui-mode-mobile .form-input,.ui-mode-mobile .form-select,.ui-mode-mobile .form-textarea{padding:.45rem .65rem}.ui-mode-mobile .form-textarea{min-height:72px}.ui-mode-mobile .form-group{margin-bottom:.75rem}.ui-mode-mobile .form-label{margin-bottom:.25rem}.ui-mode-mobile .form-actions{gap:.5rem;margin-top:1rem}.ui-mode-mobile .quick-add-input{padding:.55rem .75rem}.ui-mode-mobile .quick-add{gap:.5rem;margin-bottom:1rem}.ui-mode-mobile .bulk-modal-option-btn,.ui-mode-mobile .snooze-option{padding:.55rem .75rem}.ui-mode-mobile .snooze-options{gap:.35rem}.ui-mode-mobile .modal-header{padding:.6rem .9rem}.ui-mode-mobile .modal-header h2,.ui-mode-mobile .modal-title{font-size:1.05rem}.ui-mode-mobile .modal-content{padding:.9rem}.ui-mode-mobile .modal-content form>.form-actions:last-child,.ui-mode-mobile .modal-content>.form-actions:last-child{margin-top:.9rem;padding-top:.5rem}.ui-mode-mobile .modal-overlay{align-items:flex-end;bottom:calc(52px + env(safe-area-inset-bottom,0px))}.ui-mode-mobile .modal-container{width:100%!important;max-width:100%!important;max-height:calc(100vh - 52px - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px));border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin:0;border-bottom:none;padding-bottom:0}.ui-mode-mobile .modal-container.modal-large{max-width:100%!important;width:100%!important;max-height:calc(100vh - 52px - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px));border-radius:var(--radius-lg) var(--radius-lg) 0 0}.ui-mode-mobile .modal-drag-handle{display:block}.ui-mode-mobile .modal-header{padding:.75rem 1rem}.ui-mode-mobile .modal-content{padding:1rem}@keyframes modalSlideInMobile{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes modalSlideOutMobile{from{transform:translateY(0)}to{transform:translateY(100%)}}.ui-mode-mobile .modal-container{animation-name:modalSlideInMobile}.ui-mode-mobile .modal-overlay.closing .modal-container{animation-name:modalSlideOutMobile}.ui-mode-mobile .toast,.ui-mode-mobile .toast-undo{bottom:calc(env(safe-area-inset-bottom,0px) + 4.5rem)!important;left:1rem!important;right:1rem!important;max-width:none!important}.ui-mode-mobile .task-table{border:none;box-shadow:none;background:0 0}.ui-mode-mobile .task-header-row{display:none!important}.ui-mode-mobile .task-row{display:flex!important;flex-direction:column;gap:.25rem;padding:.75rem 1rem;margin-bottom:.5rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-md);border-left:4px solid var(--text-muted)}.ui-mode-mobile .task-row.task-pending{border-left-color:var(--text-muted)}.ui-mode-mobile .task-row .task-cell.priority-h~.task-cell:first-child,.ui-mode-mobile .task-row:has(.priority-h){border-left-color:var(--accent-red)}.ui-mode-mobile .task-row:has(.priority-m){border-left-color:var(--accent-yellow)}.ui-mode-mobile .task-row:has(.priority-l){border-left-color:var(--text-muted)}.ui-mode-mobile .task-row .task-cell{display:flex!important;overflow:visible;padding:0}.ui-mode-mobile .task-cell.task-description{font-weight:600;font-size:var(--font-size-base)}.ui-mode-mobile .task-cell.task-due,.ui-mode-mobile .task-cell.task-project{font-size:var(--font-size-sm);color:var(--text-secondary)}.ui-mode-mobile .task-row .task-cell.task-project::before{content:none}.ui-mode-mobile .task-cell.task-progress,.ui-mode-mobile .task-cell.task-recurrence,.ui-mode-mobile .task-row .task-cell:nth-child(3){display:none!important}.ui-mode-mobile .task-cell.task-project{order:2}.ui-mode-mobile .task-cell.task-due{order:3}.ui-mode-mobile .task-cell.task-description{order:1}.ui-mode-mobile .task-cell.task-actions-cell{order:4;justify-content:flex-end}.ui-mode-mobile .task-cell.task-progress:has(.progress-bar-container){display:flex!important;order:5}.ui-mode-mobile .task-actions-cell .bulk-checkbox{display:none}.ui-mode-mobile .kebab-btn{opacity:1}.ui-mode-mobile .mobile-sort-bar{display:flex}.ui-mode-mobile .mobile-filter-toggle{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem .75rem;background:var(--bg-card);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600;cursor:pointer}.ui-mode-mobile .filter-bar{display:none!important}.ui-mode-mobile .filter-bar.mobile-visible{display:flex!important;flex-direction:column;position:fixed;bottom:calc(52px + env(safe-area-inset-bottom,0px));left:0;right:0;background:var(--bg-card);border-top:var(--border-width) solid var(--border-color);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:1rem;z-index:1050;box-shadow:0 -4px 12px rgba(0,0,0,.1)}.ui-mode-mobile .event-header-row{display:none!important}.ui-mode-mobile .event-row-virtual{display:flex!important;flex-direction:column;gap:.125rem;padding:.75rem 1rem;border-bottom:1px solid var(--bg-secondary)}.ui-mode-mobile .event-cell-date{font-weight:700;font-size:var(--font-size-sm);color:var(--text-secondary)}.ui-mode-mobile .event-cell-time{font-size:var(--font-size-sm);color:var(--text-muted)}.ui-mode-mobile .event-cell-title{font-weight:600;font-size:var(--font-size-base)}.ui-mode-mobile .event-cell-location{font-size:var(--font-size-sm);color:var(--text-secondary)}.ui-mode-mobile .event-date-group-header{display:flex;position:sticky;top:0;z-index:5;padding:.5rem 1rem;background:var(--bg-secondary);font-weight:700;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary);border-bottom:var(--border-width-sm) solid var(--border-color)}.ui-mode-mobile .email-item{padding:.625rem .75rem}.ui-mode-mobile .email-from{font-size:var(--font-size-sm)}.ui-mode-mobile .email-subject{font-size:var(--font-size-base)}.ui-mode-mobile .email-preview{display:none}.ui-mode-mobile .email-date{font-size:var(--font-size-xs)}.ui-mode-mobile .email-item .bulk-checkbox{display:none}.ui-mode-mobile .day-plan-content{flex-direction:column}.ui-mode-mobile .day-plan-sidebar{width:100%;max-height:none;border-top:var(--border-width-sm) solid var(--border-color);order:2}.ui-mode-mobile .day-plan-sidebar.collapsed .sidebar-task-list{display:none}.ui-mode-mobile .day-plan-sidebar-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.625rem .75rem;background:var(--bg-secondary);border:none;border-bottom:1px solid var(--border-color);font-size:var(--font-size-sm);font-weight:700;cursor:pointer;color:var(--text-primary)}.ui-mode-mobile .day-plan-main{order:1}.ui-mode-mobile .day-plan-nav{flex-wrap:wrap;gap:.25rem}.ui-mode-mobile .weekly-review-content{padding:0}.ui-mode-mobile .monthly-review-content{padding:0}.ui-mode-mobile .month-reflection-textarea,.ui-mode-mobile .prompt-input{resize:none;overflow:hidden}.ui-mode-mobile .monthly-review-nav{flex-wrap:wrap;gap:.25rem}.ui-mode-mobile .monthly-review-month-display{font-size:1rem}.ui-mode-mobile .day-summary-sheet{padding:.5rem 0}.ui-mode-mobile .day-summary-date{font-size:1rem;font-weight:700;margin-bottom:.75rem;color:var(--text-primary)}.ui-mode-mobile .day-summary-stats{display:flex;gap:.5rem;margin-bottom:1rem}.ui-mode-mobile .day-summary-chip{padding:.25rem .75rem;background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary)}.ui-mode-mobile .day-summary-list{list-style:none;padding:0;margin:0 0 1rem 0}.ui-mode-mobile .day-summary-item{padding:.5rem 0;border-bottom:1px solid var(--bg-secondary);font-size:var(--font-size-sm);color:var(--text-primary)}.ui-mode-mobile .day-summary-time{font-weight:600;color:var(--text-secondary);margin-right:.5rem}.ui-mode-mobile .day-summary-more{color:var(--text-muted);font-style:italic}.ui-mode-mobile .day-summary-empty{color:var(--text-muted);font-size:var(--font-size-sm);margin:.5rem 0 1rem}.ui-mode-mobile .day-summary-go-btn{width:100%;margin-top:.5rem}.ui-mode-mobile .bulk-actions-bar{position:fixed;bottom:calc(52px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:1050;border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -4px 12px rgba(0,0,0,.15)}.ui-mode-mobile .pagination-controls{padding:.5rem}.ui-mode-mobile .pagination-controls .btn{padding:.5rem .75rem;font-size:var(--font-size-sm)}@media (hover:none){.task-row:hover{background-color:transparent}.task-row-clickable:hover{background:0 0}.event-row-virtual:hover{background-color:transparent}.email-item:hover{background-color:transparent}.card:hover{background-color:var(--bg-card);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.btn:hover{background:var(--bg-card)}.btn-primary:hover{background-color:var(--accent-blue)}.btn-danger:hover{background-color:var(--accent-red)}.card:hover{background-color:var(--bg-card);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.kanban-card:hover{background:var(--bg-card);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.saved-view-item:hover{background:var(--bg-card);color:var(--text-primary);transform:none;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.context-menu-item:hover{background:0 0;color:var(--text-primary)}.modal-close:hover{background:var(--bg-card);color:var(--text-primary)}.month-heatmap-cell:hover{background:0 0;transform:none}.email-item .kebab-btn,.event-row-virtual .kebab-btn,.task-row .kebab-btn{opacity:1}.shortcut-hint-btn{display:none}.time-block-quick-options{grid-template-columns:1fr}.duration-preset,.time-block-quick-btn{min-height:44px;padding:.75rem;font-size:1rem}}body.is-touch .email-item .kebab-btn,body.is-touch .event-row-virtual .kebab-btn,body.is-touch .task-row .kebab-btn{opacity:1}body.is-touch .shortcut-hint-btn{display:none}.view-toggle{display:flex;gap:0;margin-left:auto}.view-toggle-btn{padding:.35rem .75rem;border:var(--border-width-sm) solid var(--border-color);background:var(--bg-secondary);font-family:var(--font-body);font-size:var(--font-size-md);cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast)}.view-toggle-btn.active{background:var(--bg-card);font-weight:600}.view-toggle-btn:first-child{border-radius:var(--radius-xs) 0 0 var(--radius-xs)}.view-toggle-btn:last-child{border-radius:0 var(--radius-xs) var(--radius-xs) 0;border-left:none}.kanban-board{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:.5rem 0;min-height:400px}.kanban-column{background:var(--bg-card);border:var(--border-width) solid var(--border-color);display:flex;flex-direction:column;min-height:300px;max-height:calc(100vh - 200px)}.kanban-column-header{padding:.75rem 1rem;border-bottom:2px solid var(--border-color);font-family:var(--font-heading);font-weight:700;display:flex;justify-content:space-between;align-items:center}.kanban-column-count{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--text-secondary)}.kanban-column-body{flex:1;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.5rem}.kanban-column.drag-over{background-color:var(--bg-tertiary)}.kanban-card{padding:.75rem;border-width:var(--border-width-sm);border-radius:0;cursor:grab;border-left:4px solid transparent}.kanban-card.dragging{opacity:.5;cursor:grabbing}.kanban-card.priority-high{border-left-color:var(--accent-red)}.kanban-card.priority-medium{border-left-color:var(--accent-yellow)}.kanban-card.priority-low{border-left-color:var(--accent-green)}.kanban-card-title{font-weight:600;margin-bottom:.25rem}.kanban-card-meta{font-size:var(--font-size-sm);color:var(--text-secondary);display:flex;gap:.5rem;flex-wrap:wrap}.kanban-card-due.overdue{color:var(--accent-red);font-weight:600}.progress-bar-mini{height:3px;background:var(--bg-tertiary);border-radius:2px;margin-top:.5rem}.progress-bar-mini .progress-fill{height:100%;background:var(--accent-green);border-radius:2px}.ui-mode-mobile .kanban-board{grid-template-columns:1fr}.ui-mode-mobile .kanban-column{max-height:none}.timer-widget{position:fixed;bottom:0;left:0;right:0;z-index:900;background:var(--bg-primary);border-top:var(--border-width) solid var(--border-color);box-shadow:0 -2px 8px rgba(0,0,0,.1);padding:.5rem 1rem;transition:transform .2s ease}.timer-widget.hidden{transform:translateY(100%);pointer-events:none}.timer-widget-inner{display:flex;align-items:center;gap:1rem;max-width:800px;margin:0 auto}.timer-task-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timer-elapsed{font-family:var(--font-mono, monospace);font-size:1.125rem;font-weight:700;color:var(--accent-color);min-width:5rem;text-align:center}.timer-actions{display:flex;gap:.5rem}.focus-overlay{position:fixed;inset:0;z-index:1000;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.focus-overlay.hidden{opacity:0;pointer-events:none}.focus-overlay-content{text-align:center;max-width:400px;width:100%;padding:2rem}.focus-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}.focus-label{font-family:var(--font-heading);font-size:1.25rem;font-weight:700}.focus-presets{display:flex;gap:.5rem}.focus-preset-btn.active{background:var(--accent-color);color:var(--bg-primary);border-color:var(--accent-color)}.focus-countdown{font-family:var(--font-mono, monospace);font-size:4rem;font-weight:700;line-height:1;margin-bottom:1.5rem;color:var(--text-primary)}.focus-progress-bar{height:6px;background:var(--bg-tertiary);border-radius:3px;margin-bottom:1.5rem;overflow:hidden}.focus-progress-fill{height:100%;background:var(--accent-color);border-radius:3px;transition:width 1s linear}.focus-task-name{color:var(--text-secondary);margin-bottom:2rem;font-size:.9rem}.focus-actions{display:flex;gap:1rem;justify-content:center}.time-summary-section{margin-bottom:1rem}.time-summary-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem;background:0 0;border:none;font-family:var(--font-heading);font-size:.875rem;font-weight:700;color:var(--text-primary);cursor:pointer;text-align:left}.time-summary-toggle:hover{color:var(--accent-color)}.time-summary-toggle-icon{font-size:.625rem;transition:transform .15s ease}.time-summary-body{padding:.5rem;overflow:hidden;transition:max-height .2s ease;max-height:500px}.time-summary-body.collapsed{max-height:0;padding:0 .5rem}.time-summary-today{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border-color);margin-bottom:.5rem}.time-summary-today-label{font-weight:600;font-size:.875rem}.time-summary-today-value{font-family:var(--font-mono, monospace);font-weight:700;font-size:1rem;color:var(--accent-color)}.time-summary-week-header{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:.5rem}.time-summary-project{margin-bottom:.5rem}.time-summary-project-info{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;margin-bottom:.25rem}.time-summary-project-name{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.time-summary-project-time{font-family:var(--font-mono, monospace);font-weight:600;font-size:.75rem;color:var(--text-secondary);margin-left:.5rem;flex-shrink:0}.time-summary-bar{height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.time-summary-bar-fill{height:100%;background:var(--accent-color);border-radius:2px}.unscheduled-task-actions{display:flex;gap:.25rem;margin-top:.375rem}.unscheduled-task-actions .btn{font-size:.7rem;padding:.125rem .375rem;min-height:auto;line-height:1.4}.task-time-badge{display:inline-block;font-family:var(--font-mono, monospace);font-size:.7rem;font-weight:600;color:var(--text-secondary);background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);padding:.05rem .35rem;margin-left:.375rem;vertical-align:middle;white-space:nowrap}.task-time-badge.over-estimate{color:var(--accent-red);border-color:var(--accent-red)}.task-started-icon{display:inline-block;width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--accent-green);margin-right:.375rem;vertical-align:middle;cursor:pointer;opacity:.8;flex-shrink:0}.task-started-icon:hover{opacity:1}.task-timer-active{display:inline-block;width:8px;height:8px;background:var(--accent-red);border-radius:var(--radius-full);margin-left:.375rem;vertical-align:middle;animation:timer-pulse 1.5s ease-in-out infinite}@keyframes timer-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.ui-mode-mobile .timer-widget{bottom:calc(52px + env(safe-area-inset-bottom,0px))}.ui-mode-mobile .focus-countdown{font-size:3rem}.timer-active-banner{display:flex;align-items:center;gap:1rem;padding:.875rem 1rem;background:var(--bg-secondary);border:var(--border-width) solid var(--accent-color);border-radius:var(--radius-md);margin-bottom:1.5rem}.timer-active-info{flex:1;min-width:0}.timer-active-label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-color);margin-bottom:.125rem}.timer-active-task{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timer-active-elapsed{font-family:var(--font-mono, monospace);font-size:1.25rem;font-weight:700;color:var(--accent-color);min-width:5rem;text-align:center}.timer-active-actions{display:flex;gap:.5rem}.timer-focus-split{display:flex;align-items:center;gap:.375rem;padding:.5rem 0;margin-bottom:.5rem}.timer-focus-split-label{font-size:.8125rem;color:var(--text-secondary);font-weight:600;margin-right:.25rem}.timer-split-input{width:3.5rem;padding:.25rem .375rem;font-size:.875rem;font-family:var(--font-mono, monospace);text-align:center;border:var(--border-width) solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary)}.timer-focus-split-sep{font-size:.8125rem;color:var(--text-secondary)}.timer-task-list{display:flex;flex-direction:column;gap:0}.timer-task-item{display:flex;align-items:center;gap:1rem;padding:.75rem .5rem;border-bottom:1px solid var(--border-color)}.timer-task-item:last-child{border-bottom:none}.timer-task-info{flex:1;min-width:0}.timer-task-desc{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timer-task-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.25rem;font-size:.8125rem;color:var(--text-secondary)}.timer-task-project{font-weight:600}.timer-task-priority{font-weight:600}.timer-task-priority.priority-h,.timer-task-priority.priority-high{color:var(--accent-red)}.timer-task-priority.priority-m,.timer-task-priority.priority-medium{color:var(--accent-yellow,var(--accent-color))}.timer-task-estimate,.timer-task-tracked{font-family:var(--font-mono, monospace);font-size:.75rem}.timer-task-actions{display:flex;gap:.375rem;flex-shrink:0}.ui-mode-mobile .timer-active-banner{flex-wrap:wrap}.ui-mode-mobile .timer-active-elapsed{font-size:1rem}.ui-mode-mobile .timer-task-item{flex-wrap:wrap}.ui-mode-mobile .timer-task-actions{width:100%;justify-content:flex-end}.task-overview-section{margin-bottom:1.5rem;padding:1rem;background:var(--bg-card);border:var(--border-width) solid var(--border-color);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.task-overview-section-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.task-overview-count{font-weight:400;font-size:.85rem;color:var(--text-secondary)}.task-overview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem}.task-overview-stat{text-align:center;padding:.5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color)}.task-overview-stat-value{font-family:var(--font-heading);font-size:1.25rem;font-weight:700}.task-overview-stat-label{font-size:.75rem;color:var(--text-secondary);margin-top:.25rem}.task-overview-heatmap-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.75rem;font-family:var(--font-heading);font-weight:700}.task-overview-meta{display:flex;flex-direction:column;gap:.5rem}.task-overview-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.25rem}.task-overview-details{display:flex;flex-direction:column;gap:.25rem;color:var(--text-secondary);font-size:.9rem}.task-overview-subtask-list{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}.task-overview-subtask{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}.completed-text{text-decoration:line-through;color:var(--text-secondary)}.task-overview-add-form{display:flex;gap:.5rem;margin-top:.5rem}.task-overview-add-form .form-input{flex:1}.task-overview-sessions{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;color:var(--text-secondary)}.task-overview-session{padding:.25rem 0;border-bottom:var(--border-width-sm) solid var(--border-color)}.task-overview-annotations{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}.task-overview-annotation{padding:.5rem;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color)}.task-overview-annotation-date{font-size:.75rem;color:var(--text-secondary);margin-bottom:.25rem}.task-overview-completion-list{margin-top:.75rem;font-size:.9rem;color:var(--text-secondary)}.task-overview-completion-item{padding:.25rem 0;border-bottom:var(--border-width-sm) solid var(--border-color)}.progress-bar{height:6px;background:var(--bg-secondary);border:var(--border-width-sm) solid var(--border-color);margin-bottom:.75rem;overflow:hidden}.progress-fill{height:100%;background:var(--accent-green);transition:width .3s ease}.progress-bar.over-estimate .progress-fill{background:var(--accent-red)}.ui-mode-mobile .task-overview-stats{grid-template-columns:repeat(2,1fr)}.toggle-nudge-dot{display:inline-block;width:7px;height:7px;background:var(--accent-red);border-radius:var(--radius-full);margin-left:.35rem;vertical-align:middle;animation:pulse-badge 2s infinite}.view-toggle-btn{position:relative}.finish-review-bar{display:flex;justify-content:flex-end;padding:1.5rem 0 1rem;margin-top:1.5rem;border-top:1px dashed var(--border-color)}.finish-review-btn{position:relative;font-size:var(--font-size-lg);padding:.65rem 1.5rem}.finish-review-modal-content{display:flex;flex-direction:column;gap:1.25rem}.past-review-banner{padding:.75rem 1rem;border:var(--border-width-sm) dashed var(--border-color);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-secondary);font-size:.9rem}.day-accomplished-inline{margin-top:1.5rem}.day-accomplished-inline:empty{display:none}.day-accomplished-stats{font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem}.events-calendar-container{padding:0}.calendar-nav{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.calendar-nav-label{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;margin-left:.5rem}.cal-month-grid{border:var(--border-width) solid var(--border-color);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.cal-month-cells,.cal-month-header{display:grid;grid-template-columns:repeat(7,1fr)}.cal-month-day-header{font-family:var(--font-heading);font-size:.75rem;font-weight:600;text-align:center;padding:.5rem;text-transform:uppercase;background:var(--bg-secondary);border-bottom:var(--border-width-sm) solid var(--border-color)}.cal-month-cell{min-height:90px;border:var(--border-width-sm) solid var(--border-color);padding:.25rem;cursor:pointer;transition:background var(--transition-fast)}.cal-month-cell:hover{background:var(--bg-secondary)}.cal-month-cell.other-month{opacity:.4}.cal-month-cell.today{border-color:var(--accent-primary);border-width:2px}.cal-month-cell-header{margin-bottom:.15rem}.cal-day-number{font-family:var(--font-heading);font-size:.8rem;font-weight:600}.cal-event-chip{font-size:.7rem;padding:1px 4px;margin-top:2px;border-radius:var(--radius-xs);background:var(--accent-blue);color:var(--text-on-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.cal-event-chip:hover{opacity:.85}.cal-event-chip.block-focus{background:var(--accent-red)}.cal-event-chip.block-personal{background:var(--accent-yellow);color:var(--text-primary)}.cal-event-chip.block-free_time{background:var(--accent-green);color:var(--text-primary)}.cal-event-more{font-size:.65rem;color:var(--text-secondary);padding:1px 4px}.month-day-detail{margin-top:1rem;border:var(--border-width) solid var(--border-color);padding:1rem;background:var(--bg-card);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.cal-day-detail-event{display:flex;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--border-color);cursor:pointer}.cal-day-detail-event:hover{background:var(--bg-secondary)}.cal-detail-time{font-weight:600;white-space:nowrap;min-width:100px}.cal-detail-location{color:var(--text-secondary);font-size:.85rem}.cal-week-grid{border:var(--border-width) solid var(--border-color);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--border-color)}.cal-week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:var(--border-width-sm) solid var(--border-color);background:var(--bg-secondary)}.cal-week-day-header{text-align:center;padding:.5rem;font-family:var(--font-heading)}.cal-week-day-header.today{background:color-mix(in srgb,var(--accent-primary) 15%,transparent)}.cal-week-day-name{font-size:.75rem;text-transform:uppercase;font-weight:600}.cal-week-day-num{font-size:1rem;font-weight:700;display:block}.cal-week-allday-row{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:var(--border-width-sm) solid var(--border-color);min-height:28px}.cal-allday-label{font-size:.7rem;color:var(--text-secondary);display:flex;align-items:center;justify-content:center}.cal-week-allday-cell{padding:2px;border-left:1px solid var(--border-color)}.cal-week-body{display:grid;grid-template-columns:60px repeat(7,1fr);position:relative;overflow-y:auto;max-height:70vh}.cal-week-time-gutter{position:relative}.cal-week-hour-label{position:absolute;right:.5rem;font-size:.7rem;color:var(--text-secondary);transform:translateY(-.5em)}.cal-week-day-col{position:relative;border-left:1px solid var(--border-color)}.cal-week-day-col.today{background:color-mix(in srgb,var(--accent-primary) 5%,transparent)}.cal-week-hour-line{position:absolute;left:0;right:0;border-top:1px dashed color-mix(in srgb,var(--border-color) 50%,transparent)}.cal-week-event{position:absolute;left:2px;right:2px;border:var(--border-width-sm) solid var(--border-color);border-radius:var(--radius-sm);padding:2px 4px;background:var(--accent-blue);color:var(--text-on-accent);overflow:hidden;cursor:pointer;z-index:10;font-size:.7rem}.cal-week-event:hover{opacity:.85}.cal-week-event-title{font-weight:600}.cal-week-event-time{font-size:.65rem;opacity:.85}.cal-week-event.block-focus{background:var(--accent-red)}.cal-week-event.block-personal{background:var(--accent-yellow);color:var(--text-primary)}.cal-week-event.block-free_time{background:var(--accent-green);color:var(--text-primary)}html.ui-mode-mobile{--timeline-slot-h:22px}.ui-mode-mobile .cal-month-cell{min-height:64px;padding:4px}.ui-mode-mobile .cal-day-number{font-size:.95rem;font-weight:600}.ui-mode-mobile .cal-event-chip{font-size:.65rem}.ui-mode-mobile .cal-week-body{max-height:60vh}.ui-mode-mobile .cal-mobile-day{display:flex;flex-direction:column;height:70vh;user-select:none}.ui-mode-mobile .cal-mobile-day-header{padding:.75rem;font-weight:600;text-align:center;border-bottom:1px solid var(--border-color)}.ui-mode-mobile .cal-mobile-day-header.today{color:var(--accent-primary)}.ui-mode-mobile .cal-mobile-allday{padding:.5rem;display:flex;flex-direction:column;gap:.25rem;border-bottom:1px solid var(--border-color)}.ui-mode-mobile .cal-mobile-day-body{position:relative;flex:1;overflow-y:auto;display:grid;grid-template-columns:48px 1fr}.ui-mode-mobile .cal-mobile-day-col{position:relative;border-left:1px solid var(--border-color)}.ui-mode-mobile .settings-page-layout{flex-direction:column}.ui-mode-mobile .settings-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-color);padding:.75rem;flex-direction:row;flex-wrap:wrap;align-items:center}.ui-mode-mobile .settings-back{margin-bottom:0;margin-right:.5rem;padding:.5rem}.ui-mode-mobile .settings-nav-items{flex-direction:row;flex-wrap:wrap;gap:.25rem}.ui-mode-mobile .settings-nav-item{padding:.5rem .75rem;border-left:none;border-radius:var(--radius-sm)}.ui-mode-mobile .settings-nav-item.active{border-left-color:transparent}.ui-mode-mobile .settings-content{padding:1rem}body.compose-window{height:100vh;display:flex;flex-direction:column;overflow:hidden}body.compose-window .compose-toolbar{display:flex;gap:.5rem;padding:.75rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}body.compose-window .toolbar-spacer{flex:1}body.compose-window .compose-form{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-card)}body.compose-window .status-bar{padding:.5rem 1rem;background:var(--bg-secondary);border-top:1px solid var(--border-color);font-size:.8125rem;color:var(--text-secondary)}body.compose-window .status-bar.error{color:var(--accent-red)}body.compose-window .status-bar.success{color:var(--accent-green)}body.compose-window .compose-loading{opacity:.6;pointer-events:none}
1 < \ No newline at end of file
M src-tauri/frontend/index.html +74 -39
@@ -14,7 +14,49 @@
14 14 <link rel="icon" type="image/svg+xml" href="favicon.svg">
15 15 <link rel="icon" type="image/png" sizes="32x32" href="../icons/32x32.png">
16 16 <link rel="apple-touch-icon" href="../icons/128x128.png">
17 - <link rel="stylesheet" href="css/styles.css">
17 +
18 + <!-- UI mode detection. Runs BEFORE the stylesheet so the class is on
19 + <html> when CSS evaluates (no flash). Precedence:
20 + 1. ?ui=mobile|desktop URL param (dev/testing, bug repros)
21 + 2. localStorage.goingson.uiMode (dev Settings toggle)
22 + 3. navigator.userAgentData.mobile (UA Client Hints, modern)
23 + 4. UA regex with iPad-as-Mac fallback (Safari iOS/iPadOS, legacy)
24 + Works in both browser dev and Tauri-mobile webviews: WKWebView (iOS)
25 + and Android WebView both expose iOS/Android in the UA string. iPad
26 + on Safari 13+ reports as Mac by default; the maxTouchPoints branch
27 + catches that. Production lockdown of overrides is deferred to
28 + phase 5 of ui_mode_separation_plan.md. -->
29 + <script>
30 + (function () {
31 + var mode;
32 + try {
33 + var p = new URLSearchParams(location.search).get('ui');
34 + if (p === 'mobile' || p === 'desktop') mode = p;
35 + } catch (e) {}
36 + if (!mode) {
37 + try {
38 + var ls = localStorage.getItem('goingson.uiMode');
39 + if (ls === 'mobile' || ls === 'desktop') mode = ls;
40 + } catch (e) {}
41 + }
42 + if (!mode) {
43 + var uad = navigator.userAgentData;
44 + if (uad && typeof uad.mobile === 'boolean') {
45 + mode = uad.mobile ? 'mobile' : 'desktop';
46 + }
47 + }
48 + if (!mode) {
49 + var ua = navigator.userAgent;
50 + var isMobileUA = /iPhone OS|iPad|Android/.test(ua);
51 + var isIPadAsMac = /Mac/.test(navigator.platform || '') && navigator.maxTouchPoints > 1;
52 + mode = (isMobileUA || isIPadAsMac) ? 'mobile' : 'desktop';
53 + }
54 + document.documentElement.classList.add('ui-mode-' + mode);
55 + window.__GO_UI_MODE__ = mode;
56 + })();
57 + </script>
58 +
59 + <link rel="stylesheet" href="css/styles.min.css">
18 60 </head>
19 61 <body>
20 62 <a href="#main-content" class="skip-link">Skip to main content</a>
@@ -36,13 +78,12 @@
36 78 </a>
37 79 </nav>
38 80 <div class="header-actions">
39 - <button class="sync-indicator" id="sync-indicator" onclick="GoingsOn.settings.openCloudSync()" title="Cloud Sync" aria-label="Cloud sync status" style="display:none;">
81 + <button class="sync-indicator row-flex row-flex-2 hidden" id="sync-indicator" onclick="GoingsOn.settings.openCloudSync()" title="Cloud Sync" aria-label="Cloud sync status">
40 82 <span class="sync-dot" id="sync-dot"></span>
41 83 <span class="sync-label" id="sync-label"></span>
42 84 </button>
43 - <button class="settings-btn" onclick="GoingsOn.search.open()" title="Search (Cmd+K)" aria-label="Search">Search <kbd class="kbd-hint">&#8984;K</kbd></button>
44 - <button class="settings-btn" onclick="GoingsOn.settings.open()" title="Settings" aria-label="Open settings">Settings</button>
45 - <button class="settings-btn shortcut-hint-btn" onclick="GoingsOn.keyboard.showShortcuts()" title="Keyboard shortcuts (?)" aria-label="Show keyboard shortcuts">?</button>
85 + <button class="btn" onclick="GoingsOn.settings.open()" title="Settings" aria-label="Open settings">Settings</button>
86 + <button class="btn shortcut-hint-btn" onclick="GoingsOn.keyboard.showShortcuts()" title="Keyboard shortcuts (?)" aria-label="Show keyboard shortcuts">?</button>
46 87 </div>
47 88 </header>
48 89
@@ -59,12 +100,12 @@
59 100 <div id="tasks-view" class="subview">
60 101 <div class="page-header">
61 102 <h2 class="page-title">Tasks</h2>
62 - <div style="display: flex; align-items: center; gap: 1rem;">
103 + <div class="row-flex row-flex-4">
63 104 <div class="view-toggle" id="task-view-toggle">
64 105 <button class="view-toggle-btn active" data-mode="list" onclick="GoingsOn.tasks.setViewMode('list')">List</button>
65 106 <button class="view-toggle-btn" data-mode="board" onclick="GoingsOn.tasks.setViewMode('board')">Board</button>
66 107 </div>
67 - <button class="btn btn-secondary" onclick="GoingsOn.keyboard.openQuickAddModal()" title="Quick add (q)">Quick Add</button>
108 + <button class="btn btn-secondary mobile-hide" onclick="GoingsOn.keyboard.openQuickAddModal()" title="Quick add (q)">Quick Add</button>
68 109 <button class="btn btn-primary" onclick="GoingsOn.tasks.openNew()" title="New task (n)">+ New Task <kbd class="kbd-hint">n</kbd></button>
69 110 </div>
70 111 </div>
@@ -74,7 +115,7 @@
74 115 <button class="btn btn-sm" onclick="GoingsOn.bulk.setProjectTasks()">Set Project</button>
75 116 <button class="btn btn-sm" onclick="GoingsOn.bulk.setPriorityTasks()">Set Priority</button>
76 117 <button class="btn btn-sm" onclick="GoingsOn.bulk.snoozeTasks()">Snooze</button>
77 - <button class="btn btn-sm" onclick="GoingsOn.bulk.deleteTasks()">Delete</button>
118 + <button class="btn btn-sm btn-danger" onclick="GoingsOn.bulk.deleteTasks()">Delete</button>
78 119 <button class="btn btn-sm bulk-select-all" onclick="GoingsOn.bulk.selectAllTasks()">Select All</button>
79 120 </div>
80 121 <div class="mobile-sort-bar" id="task-mobile-sort">
@@ -103,7 +144,7 @@
103 144 <option value="M">Medium</option>
104 145 <option value="L">Low</option>
105 146 </select>
106 - <select id="filter-milestone" class="filter-select" onchange="GoingsOn.tasks.applyFilters()" style="display:none">
147 + <select id="filter-milestone" class="filter-select hidden" onchange="GoingsOn.tasks.applyFilters()">
107 148 <option value="">All Milestones</option>
108 149 </select>
109 150 <label class="filter-checkbox" title="Include tasks hidden until a later date">
@@ -150,7 +191,7 @@
150 191 <!-- Rendered by tasks-kanban.js -->
151 192 </div>
152 193 <!-- Pagination -->
153 - <div id="task-pagination" class="pagination-controls" role="navigation" aria-label="Task list pagination" style="display: none;">
194 + <div id="task-pagination" class="pagination-controls hidden" role="navigation" aria-label="Task list pagination">
154 195 <button class="btn btn-sm" id="task-prev-page" onclick="GoingsOn.tasks.goToPage('prev')" disabled aria-label="Previous page">&larr; Previous</button>
155 196 <span id="task-page-info" class="pagination-info">Page 1 of 1</span>
156 197 <button class="btn btn-sm" id="task-next-page" onclick="GoingsOn.tasks.goToPage('next')" disabled aria-label="Next page">Next &rarr;</button>
@@ -175,7 +216,7 @@
175 216 <!-- Project Dashboard Sub-View -->
176 217 <div id="project-dashboard-view" class="subview hidden">
177 218 <div class="page-header">
178 - <div style="display: flex; align-items: center; gap: 1rem;">
219 + <div class="row-flex row-flex-4">
179 220 <button class="btn btn-secondary" onclick="GoingsOn.projects.closeDashboard()">&larr; Back</button>
180 221 <h2 class="page-title" id="project-dashboard-title">Project</h2>
181 222 </div>
@@ -225,7 +266,7 @@
225 266 <!-- Task Overview Sub-View -->
226 267 <div id="task-overview-view" class="subview hidden">
227 268 <div class="page-header">
228 - <div style="display: flex; align-items: center; gap: 1rem;">
269 + <div class="row-flex row-flex-4">
229 270 <button class="btn btn-secondary" onclick="GoingsOn.taskOverview.close()">← Back</button>
230 271 <h2 class="page-title" id="task-overview-title">Task Overview</h2>
231 272 </div>
@@ -354,11 +395,11 @@
354 395 <div id="events-bulk-bar" class="bulk-actions-bar hidden">
355 396 <span class="bulk-count">0 selected</span>
356 397 <button class="btn btn-sm" onclick="GoingsOn.events.selectAllEvents()">Select All</button>
357 - <button class="btn btn-sm" onclick="GoingsOn.events.bulkDelete()">Delete</button>
398 + <button class="btn btn-sm btn-danger" onclick="GoingsOn.events.bulkDelete()">Delete</button>
358 399 <button class="btn btn-sm" onclick="GoingsOn.events.clearEventSelection()">Cancel</button>
359 400 </div>
360 401 <div class="events-list" id="events-list">
361 - <details class="past-events-section" id="recurring-events-section" open style="display: none;">
402 + <details class="past-events-section hidden" id="recurring-events-section" open>
362 403 <summary class="past-events-toggle">
363 404 <span class="past-events-label">Recurring</span>
364 405 <span class="past-events-count" id="recurring-events-count">0</span>
@@ -374,7 +415,7 @@
374 415 <div class="event-list-container" id="recurring-event-list-container"></div>
375 416 </div>
376 417 </details>
377 - <h3 class="events-section-heading" id="future-events-heading" style="display: none;">Upcoming</h3>
418 + <h3 class="events-section-heading hidden" id="future-events-heading">Upcoming</h3>
378 419 <div class="event-table-virtual" id="event-table" role="grid" aria-label="Upcoming events">
379 420 <div class="event-header-row" role="row">
380 421 <div class="event-cell" role="columnheader">Date</div>
@@ -391,7 +432,7 @@
391 432 </div>
392 433 </div>
393 434 </div>
394 - <details class="past-events-section" id="past-events-section" style="display: none;">
435 + <details class="past-events-section hidden" id="past-events-section">
395 436 <summary class="past-events-toggle">
396 437 <span class="past-events-label">Past Events</span>
397 438 <span class="past-events-count" id="past-events-count">0</span>
@@ -422,19 +463,17 @@
422 463 <div id="emails-view" class="subview" role="tabpanel" aria-labelledby="emails-tab">
423 464 <div class="page-header">
424 465 <h2 class="page-title">Emails</h2>
425 - <div style="display: flex; gap: 0.5rem;">
426 - <button class="btn btn-secondary" onclick="GoingsOn.emails.openDrafts()">Drafts</button>
427 - <button class="btn btn-secondary" onclick="GoingsOn.emails.openAccountsModal()">Accounts</button>
428 - <button class="btn btn-secondary" onclick="GoingsOn.emails.markAllRead()">Mark All Read</button>
466 + <div class="row row-flex-2">
467 + <button class="btn btn-secondary mobile-hide" onclick="GoingsOn.emails.openDrafts()">Drafts</button>
429 468 <button class="btn btn-primary" onclick="GoingsOn.emails.openCompose()" title="Compose email (n)">+ Compose</button>
430 469 </div>
431 470 </div>
432 - <div style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center;">
433 - <input type="text" class="form-input" id="email-search" placeholder="Search emails..." oninput="GoingsOn.emails.search(this.value)" style="flex: 1;">
434 - <select class="form-select" id="email-folder-filter" onchange="GoingsOn.emails.filterByFolder(this.value)" style="width: auto; min-width: 120px;">
471 + <div class="email-filter-row mb-2">
472 + <input type="text" class="form-input" id="email-search" placeholder="Search emails..." oninput="GoingsOn.emails.search(this.value)">
473 + <select class="form-select" id="email-folder-filter" onchange="GoingsOn.emails.filterByFolder(this.value)">
435 474 <option value="">All folders</option>
436 475 </select>
437 - <select class="form-select" id="email-label-filter" onchange="GoingsOn.emails.filterByLabel(this.value)" style="width: auto; min-width: 120px;">
476 + <select class="form-select" id="email-label-filter" onchange="GoingsOn.emails.filterByLabel(this.value)">
438 477 <option value="">All labels</option>
439 478 </select>
440 479 <span id="email-count" class="filter-count" aria-live="polite"></span>
@@ -444,10 +483,10 @@
444 483 <button class="btn btn-sm" onclick="GoingsOn.bulk.markEmailsRead()">Mark Read</button>
445 484 <button class="btn btn-sm" onclick="GoingsOn.bulk.archiveEmails()">Archive</button>
446 485 <button class="btn btn-sm" onclick="GoingsOn.bulk.snoozeEmails()">Snooze</button>
447 - <button class="btn btn-sm" onclick="GoingsOn.bulk.deleteEmails()">Delete</button>
486 + <button class="btn btn-sm btn-danger" onclick="GoingsOn.bulk.deleteEmails()">Delete</button>
448 487 <button class="btn btn-sm bulk-select-all" onclick="GoingsOn.bulk.selectAllEmails()">Select All</button>
449 488 </div>
450 - <div class="email-list" id="email-list-wrapper" role="list">
489 + <div class="card card--shell email-list" id="email-list-wrapper" role="list">
451 490 <div class="email-list-container" id="email-list" aria-live="polite">
452 491 <div class="skeleton-shimmer" aria-label="Loading emails">
453 492 <div class="skeleton-row"><div class="skeleton-avatar"></div><div class="skeleton-lines"><div class="skeleton-line long"></div><div class="skeleton-line medium"></div></div></div>
@@ -458,7 +497,7 @@
458 497 </div>
459 498 </div>
460 499 <!-- Pagination -->
461 - <div id="email-pagination" class="pagination-controls" role="navigation" aria-label="Email list pagination" style="display: none;">
500 + <div id="email-pagination" class="pagination-controls hidden" role="navigation" aria-label="Email list pagination">
462 501 <button class="btn btn-sm" id="email-prev-page" onclick="GoingsOn.emails.goToPage('prev')" disabled aria-label="Previous page">&larr; Previous</button>
463 502 <span id="email-page-info" class="pagination-info">Page 1 of 1</span>
464 503 <button class="btn btn-sm" id="email-next-page" onclick="GoingsOn.emails.goToPage('next')" disabled aria-label="Next page">Next &rarr;</button>
@@ -469,8 +508,8 @@
469 508 <div id="contacts-view" class="subview hidden" role="tabpanel" aria-labelledby="contacts-tab">
470 509 <div class="page-header">
471 510 <h2 class="page-title">Contacts</h2>
472 - <div style="display: flex; gap: 0.5rem; align-items: center;">
473 - <input type="text" class="form-input" id="contacts-search" placeholder="Search contacts..." oninput="GoingsOn.contacts.filterBySearch(this.value)" style="width: 200px;">
511 + <div class="contacts-filter-row">
512 + <input type="text" class="form-input" id="contacts-search" placeholder="Search contacts..." oninput="GoingsOn.contacts.filterBySearch(this.value)">
474 513 <select class="filter-select" id="contacts-tag-filter" onchange="GoingsOn.contacts.filterByTag(this.value)">
475 514 <option value="">All Tags</option>
476 515 </select>
@@ -481,7 +520,7 @@
481 520 <span class="bulk-count">0 selected</span>
482 521 <button class="btn btn-sm" onclick="GoingsOn.contacts.selectAll()">Select All</button>
483 522 <button class="btn btn-sm" onclick="GoingsOn.contacts.bulkTag()">Tag</button>
484 - <button class="btn btn-sm" onclick="GoingsOn.contacts.bulkDelete()">Delete</button>
523 + <button class="btn btn-sm btn-danger" onclick="GoingsOn.contacts.bulkDelete()">Delete</button>
485 524 <button class="btn btn-sm" onclick="GoingsOn.contacts.clearSelection()">Cancel</button>
486 525 </div>
487 526 <div class="cards-grid" id="contacts-grid">
@@ -495,7 +534,7 @@
495 534 <!-- Contact Dashboard Sub-View -->
496 535 <div id="contact-dashboard-view" class="subview hidden">
497 536 <div class="page-header">
498 - <div style="display: flex; align-items: center; gap: 1rem;">
537 + <div class="row-flex row-flex-4">
499 538 <button class="btn btn-secondary" onclick="GoingsOn.contactDashboard.close()">&larr; Back</button>
500 539 <h2 class="page-title" id="contact-dashboard-title">Contact</h2>
501 540 </div>
@@ -521,11 +560,12 @@
521 560 <div id="settings-view" class="view settings-overlay-card">
522 561 <div class="settings-page-layout">
523 562 <nav class="settings-sidebar">
524 - <button class="settings-back-btn" onclick="GoingsOn.settings.goBack()" aria-label="Close settings">&larr; Close</button>
525 - <h2 class="visually-hidden" id="settings-overlay-title">Settings</h2>
563 + <button class="btn-link mb-1 settings-back" onclick="GoingsOn.settings.goBack()" aria-label="Close settings">&larr; Close</button>
564 + <h2 class="sr-only" id="settings-overlay-title">Settings</h2>
526 565 <div class="settings-nav-items">
527 566 <button class="settings-nav-item active" data-section="appearance" onclick="GoingsOn.settings.showSection('appearance')">Appearance</button>
528 567 <button class="settings-nav-item" data-section="notifications" onclick="GoingsOn.settings.showSection('notifications')">Notifications</button>
568 + <button class="settings-nav-item" data-section="email" onclick="GoingsOn.settings.showSection('email')">Email Accounts</button>
529 569 <button class="settings-nav-item" data-section="planning" onclick="GoingsOn.settings.showSection('planning')">Planning &amp; Review</button>
530 570 <button class="settings-nav-item" data-section="plugins" onclick="GoingsOn.settings.showSection('plugins')">Plugins</button>
531 571 <button class="settings-nav-item" data-section="sync" onclick="GoingsOn.settings.showSection('sync')">Cloud Sync</button>
@@ -584,13 +624,7 @@
584 624 <span class="mobile-tab-label">Messages</span>
585 625 </button>
586 626 <button class="mobile-tab mobile-tab-create" id="mobile-create-btn" aria-label="Create new item">+</button>
587 - <button class="mobile-tab mobile-tab-more" id="mobile-more-btn" aria-label="More options" aria-haspopup="menu" aria-expanded="false" aria-controls="mobile-more-popover">
588 - <span class="mobile-tab-label">More</span>
589 - </button>
590 627 </nav>
591 - <div id="mobile-more-popover" class="mobile-more-popover" role="menu" aria-hidden="true" aria-label="More options">
592 - <button role="menuitem" onclick="GoingsOn.settings.open(); GoingsOn.navigation.closeMorePopover();">Settings</button>
593 - </div>
594 628
595 629 <!-- Action Bottom Sheet (mobile context menus) -->
596 630 <div id="action-sheet" class="action-sheet hidden" role="dialog" aria-modal="true" aria-label="Actions">
@@ -605,6 +639,7 @@
605 639
606 640 <!-- Namespace (must load first) -->
607 641 <script src="js/goingson.js"></script>
642 + <script src="js/viewport.js"></script>
608 643
609 644 <!-- Core Layer -->
610 645 <script src="js/api.js"></script>
M src-tauri/frontend/js/app.js +14 -6
@@ -17,7 +17,7 @@ document.addEventListener('DOMContentLoaded', async () => {
17 17 console.error('API not available');
18 18 const errorTarget = document.getElementById('projects-grid') || document.getElementById('task-list-container');
19 19 if (errorTarget) errorTarget.innerHTML =
20 - '<div class="loading loading--error">Error: API not loaded. Check console.</div>';
20 + '<div class="loading loading--error">GoingsOn failed to start. Please relaunch the app. If this persists, contact info@makenot.work.</div>';
21 21 return;
22 22 }
23 23
@@ -168,7 +168,7 @@ if (window.__TAURI__) {
168 168 const dot = document.getElementById('sync-dot');
169 169 const indicator = document.getElementById('sync-indicator');
170 170 if (!dot || !indicator) return;
171 - indicator.style.display = '';
171 + indicator.classList.remove('hidden');
172 172 dot.className = 'sync-dot';
173 173 if (event.payload === 'syncing') {
174 174 dot.classList.add('syncing');
@@ -250,8 +250,16 @@ async function openAboutModal() {
250 250 const content = `
251 251 <div class="about-panel">
252 252 <h2 class="about-title">GoingsOn</h2>
253 - <p class="about-tagline">Personal productivity & project management</p>
253 + <p class="about-tagline">Tasks, email, calendar, contacts.</p>
254 254 <p class="about-version">Version ${appVersion}</p>
255 + <dl class="about-info-list">
256 + <dt>Publisher</dt><dd>Make Creative, LLC</dd>
257 + <dt>License</dt><dd>PolyForm Noncommercial 1.0.0</dd>
258 + <dt>Contact</dt><dd><a href="mailto:info@makenot.work">info@makenot.work</a></dd>
259 + <dt>Source</dt><dd><a href="https://makenot.work" target="_blank" rel="noopener">makenot.work</a></dd>
260 + <dt>Privacy</dt><dd><a href="https://makenot.work/policy" target="_blank" rel="noopener">makenot.work/policy</a></dd>
261 + </dl>
262 + <p class="about-copyright">&copy; 2026 Make Creative, LLC</p>
255 263 </div>
256 264 <div class="form-actions">
257 265 <button type="button" class="btn btn-secondary" onclick="GoingsOn.ui.closeModal()">Close</button>
@@ -281,9 +289,9 @@ function showWelcome() {
281 289 <div class="welcome-section">
282 290 <h3 class="welcome-subhead">Get Started</h3>
283 291 <div class="welcome-step-stack">
284 - <button class="btn btn-secondary welcome-step-btn" onclick="localStorage.setItem('go-welcomed', '1'); GoingsOn.ui.closeModal(); GoingsOn.keyboard.openQuickAdd();">${step1}</button>
285 - <button class="btn btn-secondary welcome-step-btn" onclick="localStorage.setItem('go-welcomed', '1'); GoingsOn.ui.closeModal(); GoingsOn.navigation.switchView('day-plan');">${step2}</button>
286 - <button class="btn btn-secondary welcome-step-btn" onclick="localStorage.setItem('go-welcomed', '1'); GoingsOn.ui.closeModal(); GoingsOn.emails.openAccountsModal();"><strong>3.</strong> Add an email account</button>
292 + <button class="btn btn-secondary text-left" onclick="localStorage.setItem('go-welcomed', '1'); GoingsOn.ui.closeModal(); GoingsOn.keyboard.openQuickAdd();">${step1}</button>
293 + <button class="btn btn-secondary text-left" onclick="localStorage.setItem('go-welcomed', '1'); GoingsOn.ui.closeModal(); GoingsOn.navigation.switchView('day-plan');">${step2}</button>
294 + <button class="btn btn-secondary text-left" onclick="localStorage.setItem('go-welcomed', '1'); GoingsOn.ui.closeModal(); GoingsOn.emails.openAccountsModal();"><strong>3.</strong> Add an email account</button>
287 295 </div>
288 296 </div>
289 297 <div class="welcome-section">
M src-tauri/frontend/js/attachments.js +1 -1
@@ -70,7 +70,7 @@
70 70 ` : `
71 71 <span class="attachment-sync-warning">Sync needed</span>
72 72 `}
73 - <button class="btn btn-sm btn-secondary attachment-delete-btn"
73 + <button class="btn btn-sm btn-secondary text-accent-red"
74 74 onclick="GoingsOn.attachments.remove('${escAttr(a.id)}', '${tid}', '${pid}')" title="Delete">×</button>
75 75 </div>
76 76 </div>
M src-tauri/frontend/js/bulk-actions.js +2 -2
@@ -197,9 +197,9 @@
197 197
198 198 const projects = GoingsOn.projects?.getCache?.() || [];
199 199 let optionsHtml = `<p class="bulk-modal-prompt bulk-modal-prompt--wide">Set project for ${selectedTaskIds.size} tasks:</p>`;
200 - optionsHtml += `<button class="btn btn-sm btn-ghost bulk-modal-option-btn" onclick="GoingsOn.bulk._applyProject(null)">No Project</button>`;
200 + optionsHtml += `<button class="btn btn-sm text-left w-full bulk-modal-option-btn" onclick="GoingsOn.bulk._applyProject(null)">No Project</button>`;
201 201 for (const p of projects) {
202 - optionsHtml += `<button class="btn btn-sm btn-ghost bulk-modal-option-btn" onclick="GoingsOn.bulk._applyProject('${GoingsOn.utils.escapeAttr(p.id)}')">${GoingsOn.utils.escapeHtml(p.name)}</button>`;
202 + optionsHtml += `<button class="btn btn-sm text-left w-full bulk-modal-option-btn" onclick="GoingsOn.bulk._applyProject('${GoingsOn.utils.escapeAttr(p.id)}')">${GoingsOn.utils.escapeHtml(p.name)}</button>`;
203 203 }
204 204 GoingsOn.ui.openModal('Set Project', `<div class="bulk-modal-scroll">${optionsHtml}</div>`);
205 205 }
M src-tauri/frontend/js/components-modal.js +1 -1
@@ -180,7 +180,7 @@ function showUndoToast(message, { onConfirm, onUndo, timeout = 15000 }) {
180 180
181 181 toast.innerHTML = `
182 182 <span class="undo-message">${esc(message)}</span>
183 - <button class="undo-btn" onclick="GoingsOn.ui.executeUndo('${undoId}')">Undo</button>
183 + <button class="btn btn-sm btn-primary" onclick="GoingsOn.ui.executeUndo('${undoId}')">Undo</button>
184 184 <span class="undo-countdown"></span>
185 185 `;
186 186
M src-tauri/frontend/js/components.js +5 -2
@@ -51,7 +51,8 @@ function renderEmptyState(message, buttonLabel, onClickFn) {
51 51 * @param {string} [field.placeholder]
52 52 * @param {boolean} [field.required]
53 53 * @param {Array<{value, label, selected?}>} [field.options] - For select
54 - * @param {string} [field.hint] - Help text under input
54 + * @param {string} [field.hint] - Help text under input (HTML-escaped)
55 + * @param {string} [field.hintExtraHtml] - Raw HTML appended after hint (NOT escaped — caller must sanitize)
55 56 * @param {string} [field.error] - Error text (renders has-error variant)
56 57 * @param {boolean} [field.preview] - Whether to render a preview slot under the input
57 58 * @returns {string} - HTML string for the field group
@@ -96,7 +97,9 @@ function renderFormField(field) {
96 97 inputHtml = `<input type="${kind}" class="form-input" id="${inputId}" name="${field.name}" ${required} ${placeholder} value="${escAttr(value)}" ${extraAttrs}>`;
97 98 }
98 99
99 - const hintHtml = field.hint ? `<div class="form-hint">${esc(field.hint)}</div>` : '';
100 + const hintText = field.hint ? `<div class="form-hint">${esc(field.hint)}</div>` : '';
101 + const hintExtra = field.hintExtraHtml || '';
102 + const hintHtml = hintText + hintExtra;
100 103 const previewHtml = field.preview ? `<div id="${inputId}-preview" class="form-hint form-hint--preview"></div>` : '';
101 104 const errorHtml = field.error ? `<div class="form-error visible">${esc(field.error)}</div>` : '';
102 105 const errorClass = field.error ? ' has-error' : '';
M src-tauri/frontend/js/compose-form.js +16 -16
@@ -177,46 +177,46 @@
177 177 }).join('');
178 178 }
179 179
180 - const ccRowStyle = showCcBcc ? '' : ' style="display: none;"';
180 + const ccRowHidden = showCcBcc ? '' : ' hidden';
181 181 const toggleLabel = showCcBcc ? 'Hide CC/BCC' : 'Show CC/BCC';
182 182 const bodyRowsAttr = bodyRows ? ` rows="${bodyRows}"` : '';
183 183
184 184 const attachmentsBlock = showAttachments
185 - ? '<div class="compose-attachments" id="attachments-bar" style="display: none;"></div>'
185 + ? '<div class="compose-attachments hidden" id="attachments-bar"></div>'
186 186 : '';
187 187
188 188 return `
189 189 <div class="header-row">
190 190 <label class="header-label" for="from-account">From:</label>
191 - <select class="header-select" id="from-account" name="from-account" required>
191 + <select class="form-select form-select--ghost flex-1" id="from-account" name="from-account" required>
192 192 ${accountOptionsHtml}
193 193 </select>
194 194 </div>
195 195 <div class="header-row">
196 196 <label class="header-label" for="to-address">To:</label>
197 197 <div class="autocomplete-wrapper">
198 - <input type="text" class="header-input" id="to-address" name="to-address" placeholder="recipient@example.com (comma-separated)" required autocomplete="off" value="${escAttr(prefill.to || '')}">
198 + <input type="text" class="form-input form-input--ghost flex-1" id="to-address" name="to-address" placeholder="recipient@example.com (comma-separated)" required autocomplete="off" value="${escAttr(prefill.to || '')}">
199 199 </div>
200 200 </div>
201 - <div class="header-row" id="cc-row"${ccRowStyle}>
201 + <div class="header-row${ccRowHidden}" id="cc-row">
202 202 <label class="header-label" for="cc-address">CC:</label>
203 203 <div class="autocomplete-wrapper">
204 - <input type="text" class="header-input" id="cc-address" name="cc-address" placeholder="cc@example.com (comma-separated)" autocomplete="off" value="${escAttr(prefill.cc || '')}">
204 + <input type="text" class="form-input form-input--ghost flex-1" id="cc-address" name="cc-address" placeholder="cc@example.com (comma-separated)" autocomplete="off" value="${escAttr(prefill.cc || '')}">
205 205 </div>
206 206 </div>
207 - <div class="header-row" id="bcc-row"${ccRowStyle}>
207 + <div class="header-row${ccRowHidden}" id="bcc-row">
208 208 <label class="header-label" for="bcc-address">BCC:</label>
209 209 <div class="autocomplete-wrapper">
210 - <input type="text" class="header-input" id="bcc-address" name="bcc-address" placeholder="bcc@example.com (comma-separated)" autocomplete="off" value="${escAttr(prefill.bcc || '')}">
210 + <input type="text" class="form-input form-input--ghost flex-1" id="bcc-address" name="bcc-address" placeholder="bcc@example.com (comma-separated)" autocomplete="off" value="${escAttr(prefill.bcc || '')}">
211 211 </div>
212 212 </div>
213 213 <div class="header-row header-row--tight">
214 214 <span class="header-label"></span>
215 - <button type="button" id="toggle-cc" class="toggle-cc-btn">${toggleLabel}</button>
215 + <button type="button" id="toggle-cc" class="btn-link">${toggleLabel}</button>
216 216 </div>
217 217 <div class="header-row">
218 218 <label class="header-label" for="subject">Subject:</label>
219 - <input type="text" class="header-input" id="subject" name="subject" placeholder="Subject" value="${escAttr(prefill.subject || '')}">
219 + <input type="text" class="form-input form-input--ghost flex-1" id="subject" name="subject" placeholder="Subject" value="${escAttr(prefill.subject || '')}">
220 220 </div>
221 221 <div class="body-container">
222 222 <textarea class="body-textarea" id="body" name="body"${bodyRowsAttr} placeholder="Write your message...">${escHtml(prefill.body || '')}</textarea>
@@ -382,9 +382,9 @@
382 382 // ---------- CC/BCC toggle ----------
383 383 function toggleCcBcc() {
384 384 if (!ccRow || !bccRow || !toggleBtn) return;
385 - const visible = ccRow.style.display !== 'none';
386 - ccRow.style.display = visible ? 'none' : 'flex';
387 - bccRow.style.display = visible ? 'none' : 'flex';
385 + const visible = !ccRow.classList.contains('hidden');
386 + ccRow.classList.toggle('hidden', visible);
387 + bccRow.classList.toggle('hidden', visible);
388 388 toggleBtn.textContent = visible ? 'Show CC/BCC' : 'Hide CC/BCC';
389 389 }
390 390 if (toggleBtn) toggleBtn.addEventListener('click', toggleCcBcc);
@@ -408,12 +408,12 @@
408 408 function renderAttachments() {
409 409 if (!attachmentsBar) return;
410 410 if (attachedFiles.length === 0) {
411 - attachmentsBar.style.display = 'none';
411 + attachmentsBar.classList.add('hidden');
412 412 attachmentsBar.innerHTML = '';
413 413 return;
414 414 }
415 415 const items = attachedFiles.map((f, i) => `
416 - <div class="compose-attachment-item">
416 + <div class="compose-attachment-item row-flex row-flex-2">
417 417 <span class="compose-attachment-name" title="${escAttrLocal(f.path)}">${escHtmlLocal(f.name)}</span>
418 418 <span class="compose-attachment-size">${formatBytes(f.size || 0)}</span>
419 419 <button type="button" class="compose-attachment-remove" data-compose-remove-attachment="${i}" title="Remove">&times;</button>
@@ -429,7 +429,7 @@
429 429 ? '<span class="compose-attachment-warn">— large attachment; your mail server may reject this.</span>'
430 430 : '';
431 431 const totalLine = `<div class="${cls}"><span>Total: ${formatBytes(cap.totalBytes)} / ${formatBytes(ATTACHMENT_HARD_CAP_BYTES)}</span>${warn}</div>`;
432 - attachmentsBar.style.display = 'block';
432 + attachmentsBar.classList.remove('hidden');
433 433 attachmentsBar.innerHTML = items + totalLine;
434 434 }
435 435
M src-tauri/frontend/js/contact-dashboard.js +5 -5
@@ -56,7 +56,7 @@
56 56 } else {
57 57 actionsEl.innerHTML = `
58 58 <button class="btn btn-secondary" onclick="GoingsOn.contacts.openEdit('${escAttr(contact.id)}')">Edit</button>
59 - <button class="btn btn-secondary btn-danger-text" onclick="GoingsOn.contacts.delete('${escAttr(contact.id)}')">Delete</button>
59 + <button class="btn btn-secondary text-accent-red" onclick="GoingsOn.contacts.delete('${escAttr(contact.id)}')">Delete</button>
60 60 `;
61 61 }
62 62
@@ -69,7 +69,7 @@
69 69
70 70 let headerHtml = `
71 71 <div class="contact-header-card">
72 - <div class="contact-avatar-large">${esc(initials)}</div>
72 + <div class="avatar avatar--lg">${esc(initials)}</div>
73 73 <div class="contact-header-info">
74 74 <h3 style="margin: 0;">${esc(name)}</h3>
75 75 ${companyTitle ? `<div style="margin-top: 0.25rem;">${companyTitle}</div>` : ''}
@@ -91,7 +91,7 @@
91 91 infoItems.push(`<span class="text-secondary">${esc(s.platform)}:</span> ${esc(s.handle)}`);
92 92 }
93 93 if (infoItems.length > 0) {
94 - infoHtml = `<div class="contact-info-section">${infoItems.map(i => `<div class="contact-info-item">${i}</div>`).join('')}</div>`;
94 + infoHtml = `<div class="card card--muted contact-info-section">${infoItems.map(i => `<div class="contact-info-item">${i}</div>`).join('')}</div>`;
95 95 }
96 96
97 97 // Activity timeline — merge all entities, sort by date desc
@@ -144,7 +144,7 @@
144 144 else if (item.type === 'email') onclick = `GoingsOn.emails.open('${escAttr(item.id)}')`;
145 145
146 146 return `
147 - <div class="contact-timeline-item" onclick="${onclick}" role="button" tabindex="0">
147 + <div class="contact-timeline-item row-flex row-flex-3" onclick="${onclick}" role="button" tabindex="0">
148 148 <span class="contact-timeline-icon">${icon}</span>
149 149 <span class="contact-timeline-title">${esc(item.title)}</span>
150 150 ${badge}
@@ -222,7 +222,7 @@
222 222 else if (item.type === 'email') onclick = `GoingsOn.emails.open('${escAttr(item.id)}')`;
223 223
224 224 return `
225 - <div class="contact-timeline-item" onclick="${onclick}" role="button" tabindex="0">
225 + <div class="contact-timeline-item row-flex row-flex-3" onclick="${onclick}" role="button" tabindex="0">
226 226 <span class="contact-timeline-icon">${icon}</span>
227 227 <span class="contact-timeline-title">${esc(item.title)}</span>
228 228 ${badge}
M src-tauri/frontend/js/contacts-render.js +3 -3
@@ -43,7 +43,7 @@
43 43 <input type="checkbox" class="bulk-checkbox contact-select-cb" data-id="${escAttr(c.id)}"
44 44 onclick="event.stopPropagation(); GoingsOn.contacts.toggleSelection('${escAttr(c.id)}', event)"
45 45 aria-label="Select ${esc(c.displayName)}">
46 - <div class="contact-avatar">${esc(initials)}</div>
46 + <div class="avatar">${esc(initials)}</div>
47 47 <div class="contact-card-body">
48 48 <h3 class="card-title">${esc(c.displayName)}</h3>
49 49 ${nickname}
@@ -114,14 +114,14 @@
114 114 const content = `
115 115 <div class="contact-detail">
116 116 <div class="contact-detail-header">
117 - <div class="contact-avatar contact-avatar-lg">${esc(initials)}</div>
117 + <div class="avatar avatar--lg">${esc(initials)}</div>
118 118 <div>
119 119 <h3 class="contact-detail-name">${esc(contact.displayName)}</h3>
120 120 ${contact.company ? `<div class="text-secondary">${esc(contact.company)}${contact.title ? ` - ${esc(contact.title)}` : ''}</div>` : ''}
121 121 </div>
122 122 </div>
123 123
124 - ${info ? `<div class="contact-info-section">${info}</div>` : ''}
124 + ${info ? `<div class="card card--muted contact-info-section">${info}</div>` : ''}
125 125 ${tagPills ? `<div class="contact-detail-tags">${tagPills}</div>` : ''}
126 126 ${contact.notes ? `<div class="contact-notes"><strong>Notes:</strong><p>${esc(contact.notes)}</p></div>` : ''}
127 127
M src-tauri/frontend/js/day-planning-paint.js +9 -7
@@ -36,6 +36,8 @@
36 36 function onPaintStart(event, slotIndex, slotTime) {
37 37 if (event.button !== 0) return;
38 38 if (event.target.closest('.timeline-item')) return;
39 + // Mobile UI doesn't expose drag-paint — tap-to-add is the touch path.
40 + if (GoingsOn.viewport?.isMobile()) return;
39 41
40 42 event.preventDefault();
41 43
@@ -124,7 +126,7 @@
124 126 </select>
125 127 </div>
126 128
127 - <div id="paint-task-fields" style="display: none;">
129 + <div id="paint-task-fields" class="hidden">
128 130 <div class="form-group">
129 131 <label class="form-label">Task</label>
130 132 <select class="form-select" name="linked_task_id">
@@ -134,7 +136,7 @@
134 136 </div>
135 137 </div>
136 138
137 - <div id="paint-block-fields" style="display: none;">
139 + <div id="paint-block-fields" class="hidden">
138 140 <div class="form-group">
139 141 <label class="form-label">Block Type</label>
140 142 <select class="form-select" name="block_type">
@@ -209,13 +211,13 @@
209 211 const descGroup = document.getElementById('paint-description-group');
210 212 const locationGroup = document.getElementById('paint-location-group');
211 213
212 - taskFields.style.display = mode === 'task' ? 'block' : 'none';
213 - blockFields.style.display = mode === 'block' ? 'block' : 'none';
214 - eventFields.style.display = mode === 'task' ? 'none' : 'block';
214 + taskFields.classList.toggle('hidden', mode !== 'task');
215 + blockFields.classList.toggle('hidden', mode !== 'block');
216 + eventFields.classList.toggle('hidden', mode === 'task');
215 217
216 218 // Hide description and location for blocks
217 - if (descGroup) descGroup.style.display = mode === 'block' ? 'none' : 'block';
218 - if (locationGroup) locationGroup.style.display = mode === 'block' ? 'none' : 'block';
219 + if (descGroup) descGroup.classList.toggle('hidden', mode === 'block');
220 + if (locationGroup) locationGroup.classList.toggle('hidden', mode === 'block');
219 221 }
220 222
221 223 /**
M src-tauri/frontend/js/day-planning-schedule.js +1 -1
@@ -32,7 +32,7 @@
32 32 }
33 33
34 34 const timeSlotsHtml = timeSlots.slice(0, 12).map(slot => `
35 - <button class="time-block-quick-btn" onclick="GoingsOn.dayPlan.selectTimeSlot(this, '${slot.time.toISOString()}')">
35 + <button class="btn btn-sm btn-secondary time-block-quick-btn" onclick="GoingsOn.dayPlan.selectTimeSlot(this, '${slot.time.toISOString()}')">
36 36 ${slot.label}
37 37 </button>
38 38 `).join('');
M src-tauri/frontend/js/day-planning.js +1 -1
@@ -130,7 +130,7 @@
130 130 unscheduledTasksScroller.destroy();
131 131 unscheduledTasksScroller = null;
132 132 }
133 - container.innerHTML = '<div class="empty-unscheduled">\u2728 Nothing unscheduled \u2014 enjoy your day</div>';
133 + container.innerHTML = '<div class="empty-unscheduled">Nothing unscheduled &mdash; enjoy your day.</div>';
134 134 return;
135 135 }
136 136
M src-tauri/frontend/js/email-accounts.js +80 -32
@@ -113,7 +113,7 @@
113 113 ${ff({ kind: 'select', name: 'sync_interval_minutes', id: `${idPrefix}-sync-interval`, label: 'Auto-sync Interval', options: syncIntervalOpts, hint: 'Automatically check for new emails at this interval.' })}
114 114 </div>
115 115 <div class="form-actions">
116 - <button type="button" class="btn btn-secondary" onclick="GoingsOn.emails.openAccountsModal()">Cancel</button>
116 + <button type="button" class="btn btn-secondary" onclick="GoingsOn.emails.refreshAccountsView()">Cancel</button>
117 117 <button type="submit" class="btn btn-primary">${esc(submitLabel)}</button>
118 118 </div>
119 119 </form>
@@ -248,24 +248,22 @@
248 248 return providers[authType] || null;
249 249 }
250 250
251 - async function openAccountsModal() {
252 - await loadAccounts();
253 - const accounts = GoingsOn.state.emailAccounts;
254 -
255 - const accountsList = accounts.length === 0
256 - ? '<p class="empty-state empty-state--compact text-secondary">No email accounts configured</p>'
257 - : accounts.map(a => {
258 - const isOAuth = a.auth_type && a.auth_type !== 'Password';
259 - const providerName = getAuthTypeDisplay(a.auth_type);
260 - const oauthBadge = providerName
261 - ? `<span class="account-row-provider-badge">${providerName}</span>`
262 - : '';
263 -
264 - const editBtn = isOAuth
265 - ? `<button class="btn btn-sm btn-secondary" onclick="GoingsOn.emails.reconnectOAuth('${escAttr(a.id)}')">Reconnect</button>`
266 - : `<button class="btn btn-sm btn-secondary" onclick="GoingsOn.emails.editAccount('${escAttr(a.id)}')">Edit</button>`;
267 -
268 - return `
251 + function buildAccountsListHtml(accounts) {
252 + if (accounts.length === 0) {
253 + return '<p class="empty-state empty-state--compact text-secondary">No email accounts configured</p>';
254 + }
255 + return accounts.map(a => {
256 + const isOAuth = a.auth_type && a.auth_type !== 'Password';
257 + const providerName = getAuthTypeDisplay(a.auth_type);
258 + const oauthBadge = providerName
259 + ? `<span class="account-row-provider-badge">${providerName}</span>`
260 + : '';
261 +
262 + const editBtn = isOAuth
263 + ? `<button class="btn btn-sm btn-secondary" onclick="GoingsOn.emails.reconnectOAuth('${escAttr(a.id)}')">Reconnect</button>`
264 + : `<button class="btn btn-sm btn-secondary" onclick="GoingsOn.emails.editAccount('${escAttr(a.id)}')">Edit</button>`;
265 +
266 + return `
269 267 <div class="account-row">
270 268 <div class="account-row-actions">
271 269 <div class="account-row-info">
@@ -274,7 +272,7 @@
274 272 <div class="account-row-sync">Last sync: ${a.lastSyncFormatted}</div>
275 273 </div>
276 274 ${editBtn}
277 - <button class="btn btn-sm account-delete-btn" onclick="GoingsOn.emails.deleteAccount('${escAttr(a.id)}')" aria-label="Delete account">&times;</button>
275 + <button class="btn btn-sm btn-danger" onclick="GoingsOn.emails.deleteAccount('${escAttr(a.id)}')" aria-label="Delete account">&times;</button>
278 276 </div>
279 277 <div class="account-row-quick">
280 278 <button class="btn btn-sm btn-secondary" onclick="GoingsOn.emails.testAccount('${escAttr(a.id)}')">Test</button>
@@ -282,7 +280,13 @@
282 280 <button class="btn btn-sm btn-secondary" onclick="GoingsOn.emails.syncAccount('${escAttr(a.id)}', true)">Full Sync</button>
283 281 </div>
284 282 </div>
285 - `}).join('');
283 + `;
284 + }).join('');
285 + }
286 +
287 + async function openAccountsModal() {
288 + await loadAccounts();
289 + const accountsList = buildAccountsListHtml(GoingsOn.state.emailAccounts);
286 290
287 291 const content = `
288 292 <div class="account-list">
@@ -297,6 +301,48 @@
297 301 GoingsOn.ui.openModal('Email Accounts', content);
298 302 }
299 303
304 + /**
305 + * Render the email-accounts management UI inline inside the settings
306 + * overlay's content panel.
307 + */
308 + async function renderAccountsSection(container) {
309 + await loadAccounts();
310 + const accountsList = buildAccountsListHtml(GoingsOn.state.emailAccounts);
311 + container.innerHTML = `
312 + <div class="settings-section">
313 + <h3 class="settings-heading">Email Accounts</h3>
314 + <p class="settings-desc">Connect IMAP/SMTP or OAuth accounts to send and receive email from GoingsOn.</p>
315 + <div class="account-list">
316 + ${accountsList}
317 + </div>
318 + <div class="form-actions">
319 + <button type="button" class="btn btn-primary" onclick="GoingsOn.emails.openAddAccountModal()">+ Add Account</button>
320 + </div>
321 + </div>
322 + `;
323 + }
324 +
325 + /**
326 + * Refresh whichever accounts UI is currently visible. Internal callbacks
327 + * (after add/edit/delete/OAuth) use this so the settings section refreshes
328 + * inline when settings is the active context, but the modal flow continues
329 + * to reopen the modal when invoked from the empty-state button.
330 + */
331 + function refreshAccountsView() {
332 + const overlay = document.getElementById('settings-overlay');
333 + const settingsOpen = overlay && !overlay.classList.contains('hidden');
334 + const emailSectionActive = document.querySelector('.settings-nav-item.active')?.dataset.section === 'email';
335 + if (settingsOpen && emailSectionActive) {
336 + const container = document.getElementById('settings-content');
337 + if (container) {
338 + renderAccountsSection(container);
339 + GoingsOn.ui.closeModal();
340 + return;
341 + }
342 + }
343 + openAccountsModal();
344 + }
345 +
300 346 async function openAddAccountModal() {
301 347 // First, check what OAuth providers are available
302 348 let oauthProviders = [];
@@ -365,7 +411,7 @@
365 411 successMessage: 'Email account added!',
366 412 errorMessage: 'Failed to add email account',
367 413 closeModal: false,
368 - onSuccess: () => openAccountsModal(),
414 + onSuccess: () => refreshAccountsView(),
369 415 });
370 416 }
371 417
@@ -425,7 +471,7 @@
425 471 onSuccess: async () => {
426 472 await GoingsOn.api.emailAccounts.updateSignature(id, signature);
427 473 await GoingsOn.api.emailAccounts.updateNotify(id, notifyNewEmails);
428 - openAccountsModal();
474 + refreshAccountsView();
429 475 },
430 476 });
431 477 }
@@ -441,7 +487,7 @@
441 487 successMessage: 'Email account deleted!',
442 488 errorMessage: 'Failed to delete email account',
443 489 closeModal: false,
444 - onSuccess: () => openAccountsModal(),
490 + onSuccess: () => refreshAccountsView(),
445 491 });
446 492 }
447 493
@@ -482,7 +528,7 @@
482 528 ${foldersHtml}
483 529 </div>
484 530 <div class="form-actions">
485 - <button type="button" class="btn btn-secondary" onclick="GoingsOn.emails.openAccountsModal()">Back</button>
531 + <button type="button" class="btn btn-secondary" onclick="GoingsOn.emails.refreshAccountsView()">Back</button>
486 532 </div>
487 533 `;
488 534 GoingsOn.ui.openModal('Connection Test Results', content);
@@ -520,7 +566,7 @@
520 566 ` : ''}
521 567 </div>
522 568 <div class="form-actions">
523 - <button type="button" class="btn btn-secondary" onclick="GoingsOn.emails.openAccountsModal()">Back</button>
569 + <button type="button" class="btn btn-secondary" onclick="GoingsOn.emails.refreshAccountsView()">Back</button>
524 570 </div>
525 571 `;
526 572 GoingsOn.ui.openModal('Sync Results', content);
@@ -596,7 +642,7 @@
596 642
597 643 function cancelOAuth() {
598 644 pendingOAuthState = null;
599 - openAccountsModal();
645 + refreshAccountsView();
600 646 }
601 647
602 648 async function listenForOAuthCallback(port) {
@@ -611,7 +657,7 @@
611 657 if (attempts > maxAttempts) {
612 658 GoingsOn.ui.showToast('OAuth timeout - please try again', 'error');
613 659 pendingOAuthState = null;
614 - openAccountsModal();
660 + refreshAccountsView();
615 661 return;
616 662 }
617 663
@@ -633,7 +679,7 @@
633 679 } else if (data.error) {
634 680 GoingsOn.ui.showToast('OAuth error: ' + data.error, 'error');
635 681 pendingOAuthState = null;
636 - openAccountsModal();
682 + refreshAccountsView();
637 683 return;
638 684 }
639 685 }
@@ -658,7 +704,7 @@
658 704 if (state !== pendingOAuthState.state) {
659 705 GoingsOn.ui.showToast('OAuth state mismatch - possible security issue', 'error');
660 706 pendingOAuthState = null;
661 - openAccountsModal();
707 + refreshAccountsView();
662 708 return;
663 709 }
664 710
@@ -672,7 +718,7 @@
672 718
673 719 pendingOAuthState = null;
674 720 GoingsOn.ui.showToast(`Connected ${result.providerName} account: ${result.emailAddress}. Syncing...`, 'success');
675 - openAccountsModal();
721 + refreshAccountsView();
676 722
677 723 // Auto-sync the newly connected account
678 724 if (result.accountId) {
@@ -681,7 +727,7 @@
681 727 } catch (err) {
682 728 pendingOAuthState = null;
683 729 GoingsOn.ui.showToast(GoingsOn.utils.getErrorMessage(err, 'Failed to complete OAuth'), 'error');
684 - openAccountsModal();
730 + refreshAccountsView();
685 731 }
686 732 }
687 733
@@ -726,6 +772,8 @@
726 772 Object.assign(GoingsOn.emails, {
727 773 loadAccounts,
728 774 openAccountsModal,
775 + renderAccountsSection,
776 + refreshAccountsView,
729 777 openAddAccountModal,
730 778 createAccount,
731 779 editAccount,
M src-tauri/frontend/js/emails.js +12 -12
@@ -72,7 +72,7 @@
72 72 : GoingsOn.ui.renderEmptyState('Set up an email account to get started', 'Add Account', 'GoingsOn.emails.openAccountsModal()');
73 73 // Hide pagination
74 74 const paginationEl = document.getElementById('email-pagination');
75 - if (paginationEl) paginationEl.style.display = 'none';
75 + if (paginationEl) paginationEl.classList.add('hidden');
76 76 // Destroy scroller
77 77 if (emailScroller) {
78 78 emailScroller.destroy();
@@ -86,7 +86,7 @@
86 86
87 87 // Hide pagination - virtual scrolling replaces it
88 88 const paginationEl = document.getElementById('email-pagination');
89 - if (paginationEl) paginationEl.style.display = 'none';
89 + if (paginationEl) paginationEl.classList.add('hidden');
90 90
91 91 // Initialize or refresh virtual scroller
92 92 if (!emailScroller) {
@@ -125,7 +125,7 @@
125 125 ? `<span class="thread-badge" title="${thread.threadCount} messages in thread">${thread.threadCount}</span>`
126 126 : '';
127 127 const labelBadges = (e.labels || []).map(l =>
128 - `<span class="email-label-badge">${esc(l)}</span>`
128 + `<span class="badge badge--xs badge--filled" data-color="blue">${esc(l)}</span>`
129 129 ).join('');
130 130
131 131 return `
@@ -151,7 +151,7 @@
151 151 <div class="email-subject">${esc(e.subject)}${labelBadges ? ' ' + labelBadges : ''}</div>
152 152 <div class="email-preview">${esc(e.body.substring(0, 100))}...</div>
153 153 </div>
154 - <button class="kebab-btn" onclick="event.stopPropagation(); GoingsOn.contextMenus.showEmail(event, '${escAttr(e.id)}')" title="Actions" aria-label="Email actions">&#x22EE;</button>
154 + <button class="btn-icon kebab-btn" onclick="event.stopPropagation(); GoingsOn.contextMenus.showEmail(event, '${escAttr(e.id)}')" title="Actions" aria-label="Email actions">&#x22EE;</button>
155 155 </div>
156 156 `;
157 157 }
@@ -228,7 +228,7 @@
228 228 <div class="form-actions" style="margin-top: 0.75rem;">
229 229 <button type="button" class="btn btn-secondary" id="compose-modal-attach">Attach File</button>
230 230 <button type="button" class="btn btn-secondary" id="compose-modal-save-draft">Save Draft</button>
231 - <div style="flex: 1;"></div>
231 + <div class="flex-1"></div>
232 232 <button type="button" class="btn btn-secondary" id="compose-modal-cancel">Cancel</button>
233 233 <button type="submit" class="btn btn-primary" id="compose-modal-send">Send</button>
234 234 </div>
@@ -373,8 +373,8 @@
373 373 .split(/\s+/).map(w => w[0]).join('').substring(0, 2).toUpperCase();
374 374 const company = senderContact.company ? esc(senderContact.company) : '';
375 375 contactCardHtml = `
376 - <div class="email-sender-contact">
377 - <div class="contact-avatar-sm">${initials}</div>
376 + <div class="email-sender-contact row-flex row-flex-2">
377 + <div class="avatar avatar--sm">${initials}</div>
378 378 <div class="email-sender-info">
379 379 <span class="email-sender-name">${esc(senderContact.displayName || senderContact.display_name)}</span>
380 380 ${company ? `<span class="email-sender-company">${company}</span>` : ''}
@@ -384,8 +384,8 @@
384 384 `;
385 385 } else if (parsed.email) {
386 386 contactCardHtml = `
387 - <div class="email-sender-contact">
388 - <div class="contact-avatar-sm contact-avatar-unknown">?</div>
387 + <div class="email-sender-contact row-flex row-flex-2">
388 + <div class="avatar avatar--sm avatar--unknown">?</div>
389 389 <div class="email-sender-info">
390 390 <span class="email-sender-name">${esc(parsed.name || parsed.email)}</span>
391 391 </div>
@@ -452,7 +452,7 @@
452 452 From: ${esc(email.from)}
453 453 ${email.isArchived ? ' · <em>Archived</em>' : ''}
454 454 ${email.sourceFolder ? ` · ${esc(email.sourceFolder)}` : ''}
455 - ${(email.labels || []).length > 0 ? ' · ' + email.labels.map(l => `<span class="email-label-badge">${esc(l)}</span>`).join(' ') : ''}
455 + ${(email.labels || []).length > 0 ? ' · ' + email.labels.map(l => `<span class="badge badge--xs badge--filled" data-color="blue">${esc(l)}</span>`).join(' ') : ''}
456 456 ${isSnoozed ? ` · <span class="email-snoozed-tag"><em>Snoozed until ${esc(latestEmail.snoozedUntilFormatted || '')}</em></span>` : ''}
457 457 </div>
458 458 ${contactCardHtml}
@@ -465,7 +465,7 @@
465 465 <button class="btn btn-primary" onclick="GoingsOn.emails.reply('${escAttr(latestEmail.id)}')">Reply</button>
466 466 <button class="btn btn-secondary" onclick="GoingsOn.emails.replyAll('${escAttr(latestEmail.id)}')">Reply All</button>
467 467 <button class="btn btn-secondary" onclick="GoingsOn.emails.forward('${escAttr(latestEmail.id)}')">Forward</button>
468 - <button class="btn btn-secondary btn-danger-text" onclick="GoingsOn.emails.delete('${escAttr(latestEmail.id)}')">Delete</button>
468 + <button class="btn btn-secondary text-accent-red" onclick="GoingsOn.emails.delete('${escAttr(latestEmail.id)}')">Delete</button>
469 469 ${archiveBtn}
470 470 ${snoozeBtn}
471 471 <button class="btn btn-secondary" onclick="GoingsOn.emails.createTaskFromEmail('${escAttr(latestEmail.id)}')">Create Task</button>
@@ -488,7 +488,7 @@
488 488 </button>
489 489 </div>
490 490 </div>
491 - <div style="flex: 1"></div>
491 + <div class="flex-1"></div>
492 492 <button class="btn btn-secondary" onclick="GoingsOn.emails.openInBrowser('${escAttr(latestEmail.id)}')" title="Open in browser">Open in Browser</button>
493 493 </div>
494 494 </div>
M src-tauri/frontend/js/events-calendar.js +4 -1
M src-tauri/frontend/js/events.js +14 -13
M src-tauri/frontend/js/export.js +1 -1
M src-tauri/frontend/js/import.js +5 -5
M src-tauri/frontend/js/monthly-review-render.js +7 -7
M src-tauri/frontend/js/navigation.js +179 -72
M src-tauri/frontend/js/plan-review-toggle.js +1 -1
M src-tauri/frontend/js/projects-render.js +5 -5
M src-tauri/frontend/js/projects.js +1 -1
M src-tauri/frontend/js/settings-sync.js +12 -10
M src-tauri/frontend/js/settings.js +12 -8
M src-tauri/frontend/js/state.js +1
M src-tauri/frontend/js/task-board.js +1 -1
M src-tauri/frontend/js/task-forms.js +2 -1
M src-tauri/frontend/js/task-overview.js +9 -6
M src-tauri/frontend/js/tasks-filter.js +5 -5
M src-tauri/frontend/js/tasks-kanban.js +1 -1
M src-tauri/frontend/js/tasks-render.js +5 -5
M src-tauri/frontend/js/tasks.js +5 -6
A src-tauri/frontend/js/viewport.js +44
M src-tauri/frontend/js/weekly-review-render.js +8 -8
A todo.md +336