/* ============================================================================
   GoingsOn — Neobrute Theme

   Build new UI by COMPOSING the existing vocabulary, in this order of preference:

     1. Use a UTILITY class for one-off adjustments       (.mb-1, .mb-2, .flex-1,
                                                           .text-sm-secondary, .hidden)
     2. Use a LAYOUT PRIMITIVE to position content        (.row-flex + .row-flex-{2,3,4},
                                                           .row, .stack-{2,3,4})
     3. Use a COMPONENT PRIMITIVE for a UI element        (.card, .btn, .form-input,
                                                           .form-select, .modal, .badge,
                                                           .tag, .toggle-switch)
     4. Extend a primitive with a modifier                (.btn-primary, .btn-sm,
                                                           .form-select--compact,
                                                           .subtask-item--linked)
     5. ONLY THEN consider a new class                    — and add it to the right
                                                            BAND below

   A new class is a smell, not a goal. Before writing one:
     • grep this file for the visual shape you want; almost everything is here
     • check whether an existing primitive + modifier composes to your shape
     • page-scoped rules under a feature class (`.day-plan .foo`) are a last
       resort, not a first move

   WHEN UTILITY-STACKING IS WRONG: A row of mixed-intent elements (one fills,
   others size to content) belongs in a NAMED LAYOUT with an explicit
   `grid-template-columns`, not in `.row-flex` + utilities. The utility form
   encodes intent in browser flex-shrink math rather than in CSS that reads
   as intent — especially fragile when the row contains a native `<select>`,
   whose intrinsic-min-content sizing fights `flex: 1`. Smell test: if you
   find yourself reaching for `.form-select--compact`, `style="width: auto;"`,
   or `min-width: 0 !important` to make a row lay out right, the layout
   itself wants a name. See `.email-filter-row`, `.contacts-filter-row`, and
   `.work-hours-row` (all 2026-05-24) for the canonical form.

   ----------------------------------------------------------------------------
   FILE STRUCTURE — search by BAND name (uppercase anchors) to navigate.
   Per-section titles use `===  N. Title  ===` headers; numbered for stability,
   not because order matters. Bands group related sections; cascade order is
   load-bearing only inside the RESPONSIVE LAYERS and PRINT LAYERS bands.

     BAND: FOUNDATIONS
       1.  Font Face
       2.  CSS Reset & Base
       3.  Design System Variables (Neobrute)            — tokens (:root)
       4.  Utility Classes                               — shadow/hover/border,
                                                           layout, form sizing,
                                                           settings, subtask

     BAND: APP SHELL & CHROME
       5.  Body & App Shell
       6.  Header
       7.  Tab Navigation
       8.  Main Content & Page Header

     BAND: COMPONENT PRIMITIVES & WIDGETS
       9.  Buttons                                       — .btn + variants/sizes
       10. Quick Add Input
       11. Cards
       12. Tags & Badges
       13. Data Table
       14. Task Table & Rows
       15. Due Date Badges
       16. Events
       17. Email List
       18. Toast Notifications
       19. Modals
       20. Form Elements                                 — .form-input,
                                                           .form-select, +
                                                           JS-rendered layout
                                                           utilities tail
       21. Footer
       22. Empty & Error States
       23. Filter Bar

     BAND: RESPONSIVE LAYER 1                            (see RESPONSIVE STRATEGY)
       24. Responsive - Large Screens & Tablet
       25. Responsive - Mobile (768px, base pass)

     BAND: A11Y, PAGINATION, FOCUS
       26. Screen Reader & Accessibility
       27. Pagination
       28. Focus & Keyboard Accessibility

     BAND: EMAIL READER
       29. Source Email Link
       30. Email Reader Mode

     BAND: OVERLAYS
       31. Dropdown Menus
       32. Context Menus
       33. Scrollbar Styling
       34. Desktop App Styles (Loading, Skeleton, Spinner)

     BAND: FEATURE SCREENS (A)
       35. Project Dashboard         41. Settings
       36. Task Badges               42. Snooze Options
       37. Progress Bar              43. Bulk Selection
       38. Day Plan View             44. Time Blocking
       39. Timeline                  45. App Layout
       40. Unscheduled Tasks         46. Saved Views Sidebar
                                     47. Contacts

     BAND: PRINT LAYER 1                                 (see PRINT STRATEGY)
       48. Print Styles (global)

     BAND: WEEKLY REVIEW                                 (V1 + V2 coexist)
       49. Weekly Review (V1, still live)
       50. Weekly Review V2 - Grid Layout
       51. Weekly Review Transitions & Keyboard Navigation

     BAND: PRINT LAYER 2
       52. Weekly Review Print Styles

     BAND: FEATURE SCREENS (B)
       52b. Monthly Review           55. Toggle Switch
       53.  Import Wizard            56. Project Milestones
       54.  Plugin Manager           (57 intentionally unused)

     BAND: MOBILE LAYER                                  (see RESPONSIVE STRATEGY)
       58. Mobile Navigation (Nav Dot, Dial, Bottom Sheets)
       59. Mobile Responsive (768px overrides, late pass)
       60. Touch Device Hover Disable

     BAND: FEATURE SCREENS (C)
       61. Kanban Board              66. Timer Subview (Time tab pill)
       62. Timer Widget              67. Task Overview
       63. Focus Timer (Pomodoro)    68. Plan/Review Toggle Nudge Dot
       64. Time Summary Panel        69. Finish & Review
       65. Task Time Tracking UI     70. Calendar Views

     BAND: SCOPED STYLESHEETS
       Compose window (compose.html standalone Tauri window)

   ----------------------------------------------------------------------------
   EXISTING VOCABULARY — grep before inventing a new class.

     UTILITIES
       Layout    .flex-1, .row, .row-flex + .row-flex-{2,3,4},
                 .stack-{2,3,4}, .mb-{1,2}
       Text      .text-sm-secondary, .text-xs-secondary, .text-center,
                 .text-left, .text-muted, .text-accent-red
       Sizing    .flex-1, .w-full
       State     .hidden, .is-selected, .is-active

     LAYOUT PRIMITIVES
       .row-flex (display:flex; align-items:center) + gap modifier .row-flex-N
       .row (display:flex, no align) + gap modifier .row-flex-N
       .stack (vertical) + gap modifier

     COMPONENT PRIMITIVES
       .btn + .btn-primary / -secondary / -danger / -sm
       .card + .card--list-item / --shell / --muted      (compact / container / info-panel)
       .form-input + .form-input--ghost
       .form-select + .form-select--compact / --ghost
       .modal + .modal-overlay
       .badge + variants ([data-color], --xs / --sm / --filled)
       .tag + variants ([data-color])
       .toggle-switch
       .avatar + .avatar--sm / --lg / --unknown
       .toast + variants
       .pagination-controls
       .filter-bar / .filter-select
       .dropdown-menu / .context-menu
       .empty-state

     CONTROL MODIFIERS
       Sizes:    .btn-sm
       Intents:  .btn-primary / -secondary / -danger
       Shapes:   .form-select--compact / --ghost, .form-input--ghost

   ----------------------------------------------------------------------------
   UI MODE STRATEGY                                      (do not casually merge)

     UI mode is set ONCE at boot by index.html's inline script and exposed
     as `<html class="ui-mode-desktop">` or `<html class="ui-mode-mobile">`.
     Viewport width does NOT switch UI mode — desktop binaries stay desktop
     even when the window is narrowed.

     §25 Mobile (base pass)   — early `.ui-mode-mobile` rules; applies before
                                feature CSS so feature rules can override.
     §59 Mobile (late pass)   — late `.ui-mode-mobile` rules; runs AFTER
                                feature CSS so it wins conflicts. Add new
                                mobile overrides here unless you need them
                                early.
     §60 Touch hover disable  — `@media (hover: none)`. INPUT-CAPABILITY axis,
                                not UI mode. Reserved for hover suppression
                                only. Never put visibility or layout rules
                                here — they belong under `.ui-mode-mobile`.

     Intra-mode responsive: `@media (max-width: ...)` queries are allowed
     INSIDE a UI mode (e.g. `.ui-mode-desktop` rules at narrow desktop
     widths). Do not use a media query to switch BETWEEN UI modes.

   PRINT STRATEGY
     §48 Global print rules   — early.
     §52 Weekly Review print  — placed after §49/§50 so V2 grid resets win.

   ----------------------------------------------------------------------------
   WEEKLY REVIEW V1 + V2 COEXISTENCE

     §49 (V1: .weekly-review-content, .weekly-review-header, ...) and
     §50 (V2: .review-grid, .review-card, ...) are BOTH live. weekly-review.js
     and mobile.js still render V1 classes; the V2 grid is used by newer
     review surfaces. Do not delete §49 until those JS render paths migrate.

   ============================================================================ */

/* ===================================================================
   1. Font Face
   =================================================================== */
@font-face {
    font-family: 'Reglo';
    src: url('../fonts/Reglo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===================================================================
   2. CSS Reset & Base
   =================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===================================================================
   3. Design System Variables (Neobrute)
   =================================================================== */
:root {
    /* Day-plan timeline slot height (1 slot = 15 min). Mobile bumps this for fat-finger touch.
       JS reads it via getComputedStyle so the height: in .timeline-slot stays in sync with
       positioning math in day-planning-render.js / day-planning.js. */
    --timeline-slot-h: 12px;

    /* === NEOBRUTE DESIGN SYSTEM === */
    /* Clean neobrutalism: bold borders, flat by default, offset shadows on actions + floats */

    /* Neo-brutalist color palette */
    /* Themeable: mapped by js/themes.js. Defaults below are the "neobrute" theme. */
    --bg-primary: #E0E4FA;            /* themeable: background.primary */
    --bg-secondary: #CDD3F0;          /* themeable: background.secondary */
    --bg-tertiary: #BAC2E6;           /* themeable: background.tertiary */
    --bg-card: #FFFFFF;               /* themeable: background.surface */

    --text-primary: #000000;          /* themeable: foreground.primary */
    --text-secondary: #2D2D2D;        /* themeable: foreground.secondary */
    --text-muted: #6B6B6B;            /* themeable: foreground.muted (WCAG AA 5.7:1 on white) */

    --accent-yellow: #F7D154;         /* themeable: accent.yellow */
    --accent-green: #5CB85C;          /* themeable: accent.green */
    --accent-blue: #6196FF;           /* themeable: accent.blue */
    --accent-purple: #7B68EE;         /* themeable: accent.purple */
    --accent-red: #DC3545;            /* themeable: accent.red */
    --accent-cyan: #17A2B8;           /* themeable: accent.cyan */

    --border-color: #000000;          /* themeable: border.default */
    --border-width: 2px;              /* theme-invariant */
    --border-width-sm: 2px;           /* theme-invariant */

    /* Derived aliases — automatically follow their upstream tokens, so themes don't need to override them. */
    --accent-color: var(--accent-blue);      /* derived from --accent-blue */
    --accent-primary: var(--accent-blue);    /* derived from --accent-blue */
    --bg-hover: var(--bg-tertiary);          /* derived from --bg-tertiary */
    --border-light: var(--bg-tertiary);      /* derived from --bg-tertiary */
    --text-on-accent: var(--bg-card);        /* derived: relies on accents being saturated mid-tones; review on theme switch */

    /* Shadow offset scale (used by 3D action elements only) */
    --shadow-offset-xs: 1px;
    --shadow-offset-md: 3px;
    --shadow-offset: 4px;
    --shadow-offset-lg: 6px;
    --shadow-offset-xl: 8px;

    /* Neobrutalist shadows — actions + floats only */
    --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);

    /* Border radius scale */
    --radius-xs: 3px;   /* Scrollbars, tiny elements */
    --radius-sm: 5px;   /* Buttons, inputs, small cards */
    --radius-md: 5px;   /* Cards, buttons — uniform */
    --radius-lg: 10px;  /* Modals, large panels */
    --radius-xl: 20px;  /* Pills, capsules */
    --radius-full: 50%; /* Circles */

    /* Layout widths */
    --width-container: 1400px;
    --width-modal: 560px;
    --width-sidebar: 280px;

    /* Spacing scale */
    --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);

    /* Semantic font aliases */
    --font-heading: var(--font-sans);
    --font-body: var(--font-sans);

    /* Typography scale */
    --font-size-xxs: 0.65rem;  /* Tiny badges, indicators */
    --font-size-xs: 0.7rem;    /* Small badges, counts */
    --font-size-sm: 0.75rem;   /* Meta text, timestamps */
    --font-size-md: 0.8rem;    /* Table headers, compact UI */
    --font-size-base: 0.875rem;/* Body text default */
    --font-size-lg: 1rem;      /* Emphasized body text */
    --font-size-xl: 1.1rem;    /* Subheadings */
    --font-size-2xl: 1.25rem;  /* Section titles */
    --font-size-3xl: 1.5rem;   /* Page titles */
    --font-size-4xl: 1.75rem;  /* Main headings */

    /* Line height scale */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Transition timing */
    --transition-fast: 0.1s;
    --transition-normal: 0.15s;
    --transition-slow: 0.3s;

    /* Modal overlay — derived: mixes --text-primary into transparent. On a dark theme this
       produces a *light* scrim, which is wrong; dark themes should override with their own
       --overlay-color or this should be reworked to use a dedicated --scrim token. */
    --overlay-color: color-mix(in srgb, var(--text-primary) 60%, transparent);

}

html {
    font-size: 16px;
}

/* ===================================================================
   4. Utility Classes (Shadow, Hover, Border)
   =================================================================== */
/* === LAYOUT UTILITIES === */
/* Compose: .row-flex + .row-flex-{2,3,4} for align-items:center rows.
   .row for raw flex with no align. .flex-1 to grow a child. */
.flex-1 { flex: 1; }
.row { display: flex; }
.text-sm-secondary { font-size: 0.875rem; color: var(--text-secondary); }
.text-xs-secondary { font-size: 0.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 SIZING UTILITIES === */
.form-select--compact { width: auto; min-width: 120px; }

/* === SETTINGS UTILITIES === */
.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: 0.875rem; color: var(--text-secondary); margin-bottom: 1rem; }

/* === SUBTASK UTILITIES === */
/* .subtask-item is the base row; --linked is a modifier for subtasks that
   reference another task (raised bg + accent border). Use both classes
   together: <div class="subtask-item subtask-item--linked">. */
.subtask-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-bottom: 0.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: 0.5; }
.subtask-text-done { text-decoration: line-through; opacity: 0.6; }

/* ===================================================================
   5. Body & App Shell
   =================================================================== */
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;
}

/* ===================================================================
   6. Header (desktop UI only)
   The top app header is part of desktop layout. Mobile UI hides it
   wholesale; rules below are scoped so they cannot leak in.
   =================================================================== */
.ui-mode-desktop .app-header {
    background: var(--bg-card);
    border-bottom: var(--border-width) solid var(--border-color);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ui-mode-desktop .header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ui-mode-desktop .header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ui-mode-desktop .app-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.ui-mode-desktop .app-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1;
}

.mobile-view-title {
    display: none;
}

/* ===================================================================
   7. Tab Navigation (desktop UI only)
   The top tab strip is desktop-only; mobile UI uses the bottom tab bar.
   =================================================================== */
.ui-mode-desktop .tab-navigation {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.ui-mode-desktop .tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.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 0.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);
    box-shadow: var(--shadow-brutal-xs);
}

.ui-mode-desktop .tab-icon {
    font-size: 1.1rem;
}

.ui-mode-desktop .tab-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.ui-mode-desktop .tab.tab-right {
    margin-left: auto;
}

/* --- Tab Groups & Sub-Views (shared) --- */
.tab-group .subview.hidden {
    display: none;
}

/* --- Pill Sub-Navigation (desktop UI only — mobile uses slide menu) --- */
.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);
    box-shadow: var(--shadow-brutal-xs);
}

/* ===================================================================
   8. Main Content & Page Header
   =================================================================== */
.main-content {
    flex: 1;
    max-width: var(--width-container);
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 2rem;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.page-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* --- Merged pill + page-header toolbar --- */
/* Tab groups use pills as view labels; page-header buttons float right on the same row */
.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;
}

/* Special subviews that need their page-header in normal flow */
#project-dashboard-view > .page-header,
#day-plan-view > .page-header {
    position: static;
    margin-bottom: 1rem;
}

#project-dashboard-view .page-title {
    display: block;
}

/* ===================================================================
   9. Buttons
   =================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
    text-decoration: none;
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-brutal-xs);
}

.btn:hover {
    background: var(--bg-secondary);
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-offset-md) var(--shadow-offset-md) 0 var(--border-color);
}

.btn:active {
    background: var(--bg-tertiary);
    transform: translate(1px, 1px);
    box-shadow: none;
}

.btn:disabled {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.btn:disabled:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
}

.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%, black);
}

.btn-primary:active {
    background-color: color-mix(in srgb, var(--accent-blue) 70%, black);
}

.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%, black);
}

.btn-danger:active {
    background-color: color-mix(in srgb, var(--accent-red) 70%, black);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

/* ===================================================================
   10. (vacated — Quick Add Input was deleted 2026-05-24; the modal at
        keyboard.js:openQuickAddModal uses .form-input, not a bespoke
        primitive. Section number kept for stable navigation.)
   =================================================================== */

/* ===================================================================
   11. Cards
   =================================================================== */
.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 0.15s ease, box-shadow 0.15s ease, background-color 0.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);
}

/* Compact card for use in dense vertical lists (e.g. Project Dashboard).
   Tighter padding, square corners, adds list spacing. */
.card--list-item {
    padding: 0.75rem;
    border-radius: 0;
    margin-bottom: 0.5rem;
}

/* Container shell — keeps card chrome (border/radius/shadow) but strips
   padding/cursor/hover and arranges children as a flex column. For list
   wrappers like .email-list. */
.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);
}

/* Muted info card — bg-secondary, no border/shadow/cursor/hover. For
   small read-only info panels (contact info, summary stats). */
.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;
}

/* Static card — keeps full card chrome (border/shadow/bg) but strips
   cursor and hover animation. For read-only display cards (review
   surfaces, monthly summary panels). */
.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: 0.75rem;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.card-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.markdown-content {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.markdown-content p { margin: 0 0 0.5em 0; }
.markdown-content p:last-child { margin-bottom: 0; }
.markdown-content ul, .markdown-content ol { margin: 0 0 0.5em 1.5em; padding: 0; }
.markdown-content code { background: var(--bg-tertiary); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; }
.markdown-content pre { background: var(--bg-tertiary); padding: 0.5em; border-radius: 4px; overflow-x: auto; margin: 0 0 0.5em 0; }
.markdown-content pre code { background: none; padding: 0; }
.markdown-content a { color: var(--accent-color); }
.markdown-content blockquote { border-left: 3px solid var(--border-color); margin: 0 0 0.5em 0; padding-left: 0.75em; color: var(--text-secondary); }
.markdown-content h1, .markdown-content h2, .markdown-content h3 { margin: 0.5em 0 0.25em 0; font-size: 1em; font-weight: 600; color: var(--text-primary); }
.markdown-content table { border-collapse: collapse; margin: 0.5em 0; }
.markdown-content th, .markdown-content td { border: 1px solid var(--border-color); padding: 0.25em 0.5em; }
.markdown-content img { max-width: 100%; }

.card-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===================================================================
   12. Tags & Badges
   =================================================================== */

.tag, .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border: var(--border-width-sm) solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Color variants using data attributes */
.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);
}

/* Size modifiers */
.badge--xs { padding: 0.1rem 0.5rem; font-size: 0.75rem; }
.badge--sm { padding: 0.15rem 0.55rem; font-size: 0.78rem; }

/* Filled intent — solid accent fill, no border. Pairs with data-color. */
.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); }

/* Global keyboard-hint badge — small bordered mono pill used inline next
   to labels ("Search ⌘K"). Relocated from §41 Settings 2026-05-24. */
.kbd-hint {
    display: inline-block;
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    margin-left: 0.35rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: 0.6;
    vertical-align: middle;
    line-height: 1;
}

/* Project status tag colors */
.tag.status-active {
    background-color: color-mix(in srgb, var(--accent-green) 20%, var(--bg-card));
    border-color: var(--accent-green);
}
.tag.status-onhold, .tag.status-on_hold {
    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);
}

/* ===================================================================
   13. Data Table
   =================================================================== */
.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 th,
.data-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
}

.data-table th {
    background-color: var(--bg-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

.data-table tbody tr {
    transition: background-color 0.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.selected,
.data-table tbody tr.keyboard-selected {
    background-color: color-mix(in srgb, var(--accent-blue) 25%, var(--bg-card));
}

/* ===================================================================
   14. Task Table & Rows
   =================================================================== */
.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 Grid Column Widths */
.task-header-row,
.task-row {
    display: grid;
    grid-template-columns: 1fr 140px 60px 110px 90px 100px 90px;
    align-items: center;
    gap: 0.75rem;
}

/* Task Header Row */
.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: 0.75rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

/* Task List Container - Virtual Scrolling */
.task-list-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

/* Task Row */
.task-row {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease, opacity 0.25s ease, transform 0.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.selected,
.task-row.keyboard-selected {
    background-color: color-mix(in srgb, var(--accent-blue) 25%, var(--bg-card));
}

/* Task Cell Base */
.task-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Allow grid items to shrink below content size */
}

/* Task Actions Header */
.task-actions-header {
    text-align: right;
}

/* Event Table - extends .data-table */
.event-table tbody tr {
    cursor: pointer;
}

.task-description {
    font-weight: 600;
    /* Allow description to wrap and show badges on same line */
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.task-description-text {
    /* Description text can truncate if very long */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.task-project {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Priority badges - centered in column */
.priority-high,
.priority-medium,
.priority-low {
    display: inline-block;
    padding: 0.25rem 0.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 column headers */
.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable:hover {
    background: var(--bg-hover);
}

.sort-arrow {
    display: inline-block;
    width: 0.8em;
    margin-left: 0.25rem;
    opacity: 0.3;
}

.sort-arrow::after {
    content: '\2195'; /* Up-down arrow */
}

.sortable.sort-asc .sort-arrow::after {
    content: '\2191'; /* Up arrow */
}

.sortable.sort-desc .sort-arrow::after {
    content: '\2193'; /* Down arrow */
}

.sortable.sort-asc .sort-arrow,
.sortable.sort-desc .sort-arrow {
    opacity: 1;
}

/* Overdue task highlighting */
.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: 0.25rem;
    flex-wrap: wrap;
}

.task-tag {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
}

.recurrence-icon {
    color: var(--accent-purple);
    font-size: 0.85rem;
    font-weight: 700;
}

.annotation-badge {
    background-color: var(--accent-yellow);
    color: var(--text-primary);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-xs);
    font-size: 0.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: 0.125rem 0.5rem;
    border-radius: var(--radius-xs);
    font-size: 0.7rem;
    font-weight: 700;
    border: var(--border-width-sm) solid var(--border-color);
    margin-left: 0.25rem;
}

.task-pending { }
.task-started {
    border-left: 4px solid var(--accent-green);
}
.task-completed {
    opacity: 0.5;
    text-decoration: line-through;
}
.task-deleted { display: none; }

/* ===================================================================
   15. Due Date Badges
   =================================================================== */
.due-overdue {
    color: var(--accent-red);
    font-weight: 700;
    background: #fde8ea; /* Fallback for browsers without color-mix() */
    background: color-mix(in srgb, var(--accent-red) 15%, var(--bg-card));
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs);
}
.due-today {
    color: var(--accent-yellow);
    font-weight: 700;
    background: #fef8e6; /* Fallback for browsers without color-mix() */
    background: color-mix(in srgb, var(--accent-yellow) 15%, var(--bg-card));
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs);
}
.due-soon { color: var(--text-secondary); }
.due-future { color: var(--text-muted); }

/* ===================================================================
   16. Events
   =================================================================== */
.events-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 1rem;
}

/* Event Table - CSS Grid based for virtual scrolling */
.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 Grid Column Widths */
.event-header-row,
.event-row-virtual {
    display: grid;
    grid-template-columns: 100px 80px 1fr 150px 40px;
    align-items: center;
    gap: 0.5rem;
}

/* Event Header Row */
.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: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

/* Event List Container - Virtual Scrolling */
.event-list-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

/* Event Row */
.event-row-virtual {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.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: 0.7;
}

/* Event Cell Base */
.event-cell {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Event Table row styles - base in .data-table */
.event-row {
    cursor: pointer;
}

.event-cell-date {
    white-space: nowrap;
}

.event-cell-date .event-date-num {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-right: 0.5rem;
}

.event-date-badge {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: var(--accent-green);
    color: var(--text-on-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    margin-right: 0.5rem;
}


.event-cell-time {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.event-cell-title {
    font-weight: 600;
}

.event-cell-location {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Event proximity-based badge colors */
.event-date-badge.event-proximity-today {
    background: var(--accent-green);
}
.event-date-badge.event-proximity-tomorrow {
    background: var(--accent-yellow);
    color: var(--text-primary); /* Yellow needs dark text */
}
.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);
}

/* Past events - muted appearance */
.event-row.event-past {
    opacity: 0.7;
}

.no-upcoming-events {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Past Events Collapsible Section */
.past-events-section {
    margin-top: 0.5rem;
}

.past-events-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.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 0.15s ease, color 0.15s ease;
    list-style: none;
}

.past-events-toggle::-webkit-details-marker {
    display: none;
}

.past-events-toggle::before {
    content: '▶';
    font-size: 0.7rem;
    transition: transform 0.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: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.past-events-section .event-table-past {
    margin-top: 0.75rem;
    opacity: 0.85;
}

/* Past events container has fixed max height */
.past-events-section .event-list-container {
    max-height: 300px;
}

/* Recurring section reuses past-events-section styling but stays expanded by default
   and isn't dimmed. */
#recurring-events-section .event-table-virtual {
    opacity: 1;
    margin-top: 0.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);
}

/* Plain heading above the Upcoming list */
.events-section-heading {
    margin: 1rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Legacy event styles kept for compatibility */
.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 0.15s ease;
    cursor: pointer;
}

.event-item:hover {
    background-color: var(--bg-secondary);
}

.event-date {
    flex-shrink: 0;
    width: 80px;
    text-align: center;
    padding: 0.75rem;
    background-color: var(--accent-green);
    border-radius: var(--radius-sm);
    color: var(--text-on-accent);
}

.event-date-day {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.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: 0.25rem;
}

.event-details {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    gap: 1rem;
}

.event-time, .event-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.event-project {
    margin-top: 0.5rem;
}

/* ===================================================================
   17. Email List
   =================================================================== */
/* Base chrome from .card.card--shell; only the flex sizing for the
   list panel remains here. */
.email-list {
    flex: 1;
    min-height: 0;
}

/* Email List Container for Virtual Scrolling */
.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 0.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: 0.25rem;
}

.email-content {
    flex: 1;
    min-width: 0;
}

.email-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    align-items: center;
    gap: 0.5rem;
}

/* Standalone — does not compose .badge. Smaller font, no border, centered
   min-width for thread counts. Audited 2026-05-21: composing .badge here
   would require overriding every declaration; net-zero dedup. */
.thread-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-md);
    min-width: 1.25rem;
    text-align: center;
}

.email-from {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.email-date {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    font-weight: 600;
}

.email-subject {
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-preview {
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================================================================
   18. Toast Notifications
   =================================================================== */
@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 0.3s ease;
}

.toast.toast-leaving {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.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: none;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    color: inherit;
    cursor: pointer;
    padding: 0.15rem 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: inherit;
}

/* Undo Toast */
.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;
}

/* ===================================================================
   19. Modals
   =================================================================== */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.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(0.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 0.15s ease-out;
}

.modal-overlay.hidden {
    display: none;
}

.modal-overlay.closing {
    animation: modalFadeOut 0.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%;
    /* dvh follows the visible viewport when mobile chrome / keyboard
       expand-collapse; subtract safe-area so the modal can't extend behind
       the iOS home indicator or notch even when the mobile branch below
       doesn't apply (e.g. iPad landscape > 768px). */
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem);
    overflow: auto;
    animation: modalSlideIn 0.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 0.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 0.15s ease;
}

.modal-close:hover {
    background: var(--accent-blue);
    color: var(--text-on-accent);
}

.modal-content {
    padding: 1.5rem;
}

/* Pin a form's action row to the bottom of the modal's scroll area so
   primary/cancel buttons stay visible even on short viewports. Without
   this, on small windows or iOS with the keyboard up the button row sits
   below the fold and looks cut off — there's no visible scrollbar on
   macOS by default so users don't realize they can scroll to it. */
.modal-content > .form-actions:last-child,
.modal-content form > .form-actions:last-child {
    position: sticky;
    bottom: 0;
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    background: var(--bg-card);
    border-top: var(--border-width-sm) solid var(--border-color);
    z-index: 1;
}

/* ===================================================================
   20. Form Elements
   =================================================================== */
.form-group {
    margin-bottom: 1.25rem;
}

.form-more-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
    padding: 0.25rem 0;
    margin-bottom: 0.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: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.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: 0.85rem;
    padding: 0.25rem 0.5rem;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.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: none;
    background-color: var(--bg-card);
    box-shadow: 0 0 0 2px var(--accent-blue);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Ghost variants — borderless / transparent inputs used in toolbar
   contexts (compose header rows). Strips chrome and reduces padding. */
.form-input--ghost {
    background: transparent;
    border: none;
    padding: 0.5rem;
    font-size: 0.875rem;
}
.form-input--ghost:focus { background: transparent; box-shadow: none; }
.form-select--ghost {
    background: var(--bg-primary);
    padding: 0.5rem;
    font-size: 0.875rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Form Validation */
.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: 0.8rem;
    font-weight: 600;
    margin-top: 0.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);
}

/* ===================================================================
   Layout utility classes (used by JS-rendered markup)
   =================================================================== */
.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, 0.75rem); }

.section-divider {
    border-top: var(--border-width-sm) solid var(--border-color);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
}

/* Sync dashboard primitives */
.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, 0.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;
}

/* Backup / data settings primitives */
.settings-subheading {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-md, 0.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);
}
/* Preference row — label/description on the left, control (toggle, button) on the right. */
.settings-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0;
}
.settings-toggle-row > div { flex: 1; }
.settings-toggle-row .settings-desc { margin-bottom: 0; }
.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 account list / detail primitives */
.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, 0.7rem);
    padding: 0.125rem 0.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);
}
/* Marker class kept for .ui-mode-mobile padding override only. Base styling: .btn.btn-sm + .w-full.text-left. */
.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, 0.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 (top-level "go to" prompt) */
.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 0.15s ease;
}
.pending-key-hint-label { opacity: 0.7; }
.pending-key-hint kbd {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 0.125rem 0.4rem;
    font-family: inherit;
    font-size: var(--font-size-sm);
}

/* Keyboard shortcuts overlay */
.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: 0.25rem 0.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: 0.7rem;
    padding: 0.1rem 0.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%;
}

/* Generic helpers used by JS-rendered markup */
.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;
}
.empty-state-content {
    /* empty-state already has padding/center; this is a placeholder if more nesting needed */
}

.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 detail / list primitives */
.email-attachment-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.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; }

/* Compose form fields — shared between the desktop compose.html window
   and the in-app modal (Phase 7 Tier 6 #3 stage 3). The composeForm.buildFieldsHtml
   helper emits markup using these classes; both surfaces render the same
   HTML so spacing/typography stays unified. Window-only chrome
   (.compose-toolbar, .status-bar, .save-contact-bar, .reply-indicator)
   still lives in compose.html since it has no modal analogue yet.

   NOTE on naming: .header-row / .header-label refer to the compose
   form's "header fields" (To, Cc, Subject), NOT the app header. Don't
   rename without grepping composeForm.buildFieldsHtml. The input/select
   inside each row use .form-input--ghost / .form-select--ghost. */
.header-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
}
.header-row--tight {
    padding: 0.25rem 1rem;
}
.header-label {
    width: 80px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    flex-shrink: 0;
}
.autocomplete-wrapper {
    position: relative;
    flex: 1;
    background: transparent;
    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: 0.9375rem;
    font-family: inherit;
    padding: 1rem;
    resize: vertical;
    outline: none;
    line-height: 1.6;
}
.body-textarea::placeholder { color: var(--text-muted); }
/* Reply indicator — shared between compose.html's toolbar (where it
   benefits from align-self:center inside a flex row) and the in-app
   compose modal (where it's just an inline label above the form). */
.reply-indicator {
    display: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    align-self: center;
}

/* Attachment list — rendered into #attachments-bar by composeForm. */
.compose-attachments {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 0.8125rem;
}
/* Compose with `row-flex row-flex-2` for the row. */
.compose-attachment-item {
    padding: 0.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: none;
    border: none;
    color: var(--accent-red);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 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 section (Settings → About) */
.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-bar result count (Phase 7 Tier 2 #9) */
.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;
}

/* Hide the List / Board toggle in mobile UI. Kanban drag-drop has no touch
   fallback (Phase 6 #1) — showing the toggle would expose a broken feature.
   Keyed off UI mode rather than `hover: none` so a desktop touch laptop
   with a working mouse still gets the toggle. Re-enable when touch-drag lands. */
.ui-mode-mobile #task-view-toggle { display: none; }

/* Phase 7 Tier 3 #11 — swipe peek-labels.
   Injected into a row on touch start, removed on touch end. Show the action
   that will fire when the user releases past threshold. */
.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 0.1s linear;
    z-index: 0;
}
/* Right-swipe reveals what was hidden to the LEFT of the row */
.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 {
    /* Stronger visual cue at the action threshold */
    box-shadow: inset 0 0 0 2px var(--text-on-accent);
}
/* Ensure rows with peek labels behave as containing block + clip content */
.task-row,
.email-item,
.event-row-virtual {
    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 + Welcome modals */
.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, 0.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;
}

/* "What's New" after-update dialog */
.whats-new-panel { line-height: var(--line-height-relaxed); }
.whats-new-group {
    font-size: var(--font-size-md, 0.9rem);
    margin: var(--space-3) 0 var(--space-1);
}
.whats-new-group:first-child { margin-top: 0; }
.whats-new-list {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding-left: var(--space-4);
    margin: 0;
}
.whats-new-text {
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.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);
}

/* ===================================================================
   21. Footer
   =================================================================== */
.app-footer {
    background-color: var(--bg-card);
    border-top: var(--border-width) solid var(--border-color);
    padding: 0.75rem 1.5rem;
}

.footer-content {
    max-width: var(--width-container);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Desktop UI only — keyboard hints aren't meaningful in mobile UI. */
.ui-mode-desktop .keyboard-hints {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

kbd {
    display: inline-block;
    padding: 0.2rem 0.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: 0.75rem;
    font-weight: 700;
}

.welcome-hint {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
}

.version {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* ===================================================================
   22. Empty & Error States
   =================================================================== */
.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 {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3);
    color: var(--text-muted);
}

.empty-state-icon svg {
    width: 2.75rem;
    height: 2.75rem;
}

.empty-state--compact .empty-state-icon svg,
.empty-state--dashboard .empty-state-icon svg {
    width: 2rem;
    height: 2rem;
}

.empty-state-text {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* In compact/dashboard columns the empty copy is a quiet placeholder, not a headline. */
.empty-state--compact .empty-state-text,
.empty-state--dashboard .empty-state-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.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 states */
.view {
    display: block;
}

.view.hidden {
    display: none;
}

/* ===================================================================
   23. Filter Bar
   =================================================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.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: 0.5rem;
}

.filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-select {
    padding: 0.5rem 0.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: 0.875rem;
    font-weight: 600;
}

.filter-select:focus {
    outline: none;
    background-color: var(--accent-blue);
    color: var(--text-on-accent);
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.btn-link {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.5rem;
}

.btn-link:hover {
    box-shadow: none;
    transform: none;
    color: var(--text-primary);
}

/* ===================================================================
   24. Responsive - Large Screens & Tablet
   =================================================================== */

/* Wide desktop — intra-desktop responsive (only desktop UI gets these). */
@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;
    }
}

/* Tablet — intra-desktop responsive (desktop UI on narrow desktops/iPads).
   Scoped to .ui-mode-desktop so it never affects mobile UI. */
@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: 0.5rem;
    }
}

/* ===================================================================
   25. Responsive - Mobile (768px)
   =================================================================== */
.ui-mode-mobile .tab-navigation {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ui-mode-mobile .tab {
    flex: 1 1 auto;
    min-width: calc(33% - 0.5rem);
    justify-content: center;
    padding: 0.625rem 0.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: 0.85rem;
}

/* Hide recurrence, progress, and actions columns on mobile */
.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: 0.5rem;
}


/* ===================================================================
   26. Screen Reader & Accessibility
   =================================================================== */
.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;
}

/* ===================================================================
   27. Pagination
   =================================================================== */
.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: 0.9rem;
}

.pagination-controls .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===================================================================
   28. Focus & Keyboard Accessibility
   =================================================================== */
.tab:focus-visible,
.btn:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.card:focus-visible,
.email-item:focus-visible,
.task-row:focus-visible,
.event-row-virtual:focus-visible,
.saved-view-item:focus-visible,
.filter-select:focus-visible,
.modal-close:focus-visible,
.snooze-option:focus-visible,
.unscheduled-task:focus-visible,
.timeline-item:focus-visible,
.card:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Ensure clickable table rows can receive focus */
.task-row-clickable,
.event-row {
    cursor: pointer;
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--accent-blue);
    color: var(--text-on-accent);
    padding: 0.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;
}

/* ===================================================================
   29. Source Email Link
   =================================================================== */
.source-email-link {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent-blue);
}

/* ===================================================================
   30. Email Reader Mode
   =================================================================== */

/* Thread message container */
.thread-message {
    margin-bottom: 1rem;
    padding: 0.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: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.thread-message-from {
    font-weight: 700;
}

/* Reader mode body styling */
.email-reader-body {
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Links extracted from HTML emails - shown as [url] */
.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);
}

/* Bullet points from list items */
.email-reader-body {
    /* Ensure bullet points align nicely */
}

/* Horizontal rule separators */
.email-reader-body hr {
    border: none;
    border-top: 2px solid var(--border-color);
    margin: 1rem 0;
}

/* Quote blocks if detected */
.email-reader-quote {
    border-left: 3px solid var(--text-muted);
    padding-left: 1rem;
    margin: 0.5rem 0;
    color: var(--text-secondary);
    font-style: italic;
}

/* Collapsible quoted text */
.email-quote-toggle {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.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: 0.25rem 0 0.5rem;
    color: var(--text-secondary);
}

.email-quote-block.hidden {
    display: none;
}

/* Email address autocomplete. Shares bg/border/shadow with .dropdown-menu
   but uses a different positioning model (parent-relative, shown by default
   with max-height) — kept separate intentionally. */
.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: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--bg-secondary);
}

.autocomplete-name {
    font-weight: 500;
}

.autocomplete-email {
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

/* Email reader container for large modal */
.email-reader-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.email-reader-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* Email sender contact card. Compose with `row-flex row-flex-2` for the row. */
.email-sender-contact {
    margin-top: 0.5rem;
    padding: 0.4rem 0.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: 0.85rem;
}

.email-sender-company {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.email-reader-thread {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
    min-height: 0;
}

/* ===================================================================
   31. Dropdown Menus
   =================================================================== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.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: 0.5rem 1rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.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);
}

/* ===================================================================
   32. Context Menus
   =================================================================== */

.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: 0.25rem 0;
    display: none;
}

.context-menu.visible {
    display: block;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.1s;
}

.context-menu-item:hover,
.context-menu-item:focus {
    background: var(--accent-blue);
    color: var(--text-on-accent);
    outline: none;
}

.context-menu-item:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.context-menu-header {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem 0.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: 0.7rem;
    color: var(--text-secondary);
    font-weight: normal;
}

.context-menu-item-shortcut {
    font-size: 0.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: 0.25rem 0.5rem;
}

/* Keyboard hint in context menu */
.context-menu-hint {
    padding: 0.35rem 1rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
}

/* ===================================================================
   33. Scrollbar Styling
   =================================================================== */
::-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);
}

/* ===================================================================
   34. Desktop App Styles (Loading, Skeleton, Spinner)
   =================================================================== */

/* Loading state */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--text-secondary);
    font-family: var(--font-heading);
}

/* Skeleton shimmer loading placeholders */
.skeleton-shimmer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.skeleton-shimmer .skeleton-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.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: 0.4rem;
}

.skeleton-shimmer .skeleton-line {
    height: 0.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; }
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    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 0.8s linear infinite;
}

/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading .btn-text {
    visibility: hidden;
}

.btn-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    margin-left: -0.5em;
    margin-top: -0.5em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

.hidden { display: none !important; }

/* ===================================================================
   35. Project Dashboard
   =================================================================== */
.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: 0.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 list items compose .card + .card--list-item (see Cards section).
   .dashboard-item-title / -meta are page-scoped sub-element classes. */
.dashboard-item-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.dashboard-item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ===================================================================
   36. Task Badges
   =================================================================== */
.task-badges {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.task-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.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);
}

/* Clickable task rows */
.task-row-clickable {
    cursor: pointer;
    transition: background 0.1s;
}

.task-row-clickable:hover {
    background: var(--bg-secondary);
}

/* ===================================================================
   37. Progress Bar
   =================================================================== */
.task-progress {
    /* Width controlled by grid, not explicit value */
}

.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 0.3s ease;
}

.no-subtasks {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ===================================================================
   38. Day Plan View
   =================================================================== */
#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: 0.5rem;
}

.day-plan-date-picker {
    padding: 0.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: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ===================================================================
   39. Timeline
   =================================================================== */
.timeline-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.timeline-scroll-area {
    position: relative;
    padding: 0.5rem 1rem 3rem 0.5rem;
    min-height: min-content;
}

#timeline-slots {
    position: relative;
}

#timeline-items {
    position: absolute;
    top: 0.5rem;
    left: 0.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: 0.7rem;
    color: var(--text-secondary);
    padding-right: 0.5rem;
    text-align: right;
    font-weight: 500;
    transform: translateY(-0.5em);
}

.timeline-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    padding: 0.35rem 0.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: 0.25rem 0.5rem;
    overflow: hidden;
    cursor: grab;
    z-index: 10;
    transition: opacity 0.15s ease, box-shadow 0.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: 0.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: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-item-meta {
    font-size: 0.65rem;
    opacity: 0.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 Painting */
.timeline-paint-preview {
    position: absolute;
    left: 70px;
    right: 10px;
    background: var(--accent-blue);
    opacity: 0.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: 0.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;
}

/* ===================================================================
   40. Unscheduled Tasks
   =================================================================== */
.unscheduled-task {
    padding: 0.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 0.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: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unscheduled-task-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.empty-unscheduled {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 1rem;
}

/* ===================================================================
   41. Settings
   =================================================================== */
/* Marker class on the header `?` button. Extends .btn with mono font and
   a fixed min-width so the single-character glyph stays centered. Mobile
   touch passes hide it (see §59 + body.is-touch rule below). */
.shortcut-hint-btn {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    min-width: 2rem;
    padding: 0.5rem;
}

.settings-section h3 {
    font-size: 1rem;
    color: var(--text-primary);
}

.settings-section .form-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Settings Overlay (Phase 7 Tier 6 — settings as modeless drawer) -----
   The settings panel now floats above whichever view the user came from,
   so theme/notification/account changes can be previewed against the
   actual app rather than a stand-alone settings page. Card is centered
   and keeps the original sidebar+content layout intact. */
.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, 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, 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;
}
/* Duplicate of .sr-only (§26) deleted 2026-05-21; use .sr-only. */
.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 */
.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: 0.25rem;
}

.settings-nav-items {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.settings-nav-item {
    background: none;
    border: none;
    text-align: left;
    padding: 0.5rem 1.25rem;
    font-size: 0.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 Dashboard */
.contact-header-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}


/* Base chrome from .card.card--muted; only feature-specific spacing
   (gap, margin, tighter padding) remains here. */
.contact-info-section {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.contact-info-item {
    font-size: 0.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: 0.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: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.contact-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Compose with `row-flex row-flex-3` for the row. */
.contact-timeline-item {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
}

.contact-timeline-item:hover {
    background: var(--bg-hover);
}

.contact-timeline-icon {
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    font-size: 0.8rem;
}

.contact-timeline-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-timeline-date {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Address Highlight Mirror */
.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: 0.5; }

/* Sync Status Indicator */
/* Compose with `row-flex row-flex-2` for the row. */
.sync-indicator {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.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); border-radius: 0; transform: rotate(45deg); }
.sync-dot.error { background: var(--accent-red); border-radius: 0; }

/* Status label — always shown at desktop widths so color isn't the sole signal.
   Hidden on narrow widths to save space; hover still surfaces the title attr. */
.sync-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}
/* Sync label hides in mobile UI; desktop keeps it at any width. */
.ui-mode-mobile .sync-label { display: none; }
@keyframes sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ===================================================================
   42. Snooze Options
   =================================================================== */
.snooze-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.snooze-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: var(--border-width-sm) solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.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: 0.75rem;
    color: var(--text-secondary);
}

.snooze-option:hover .snooze-option-time {
    color: var(--text-on-accent);
}

.snooze-custom {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--border-color);
}

.snooze-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border: var(--border-width-sm) solid var(--border-color);
    background: var(--accent-yellow);
    color: var(--text-primary);
    font-weight: 700;
    margin-top: 0.25rem;
}

.contact-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border: var(--border-width-sm) solid var(--border-color);
    background: var(--accent-color);
    color: var(--bg-primary);
    font-weight: 700;
    margin-top: 0.25rem;
}

/* ===================================================================
   43. Bulk Selection
   =================================================================== */
.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: 0.5rem;
}

.task-actions-cell .bulk-checkbox {
    margin-right: 0.5rem;
}

/* Kebab menu button — extends .btn-icon with hover-reveal + bigger font. */
.kebab-btn {
    font-size: 1.1rem;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.task-row:hover .kebab-btn,
.task-row:focus-within .kebab-btn,
.email-item:hover .kebab-btn,
.email-item:focus-within .kebab-btn,
.event-row-virtual:hover .kebab-btn,
.event-row-virtual:focus-within .kebab-btn {
    opacity: 1;
}

.kebab-btn:hover {
    background: var(--bg-hover);
}

.task-recurrence {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.task-due {
    white-space: nowrap;
}

.bulk-actions-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.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: 0.75rem 0.5rem;
    display: flex;
    align-items: center;
}

.email-item-with-checkbox {
    display: flex;
    align-items: flex-start;
}

.email-item-with-checkbox .email-content {
    flex: 1;
}

/* ===================================================================
   44. Time Blocking
   =================================================================== */
.time-block-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.time-block-quick-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

/* Selected state for quick-pick time slots. Base styling comes from .btn.btn-sm.btn-secondary. */
.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: 0.5rem;
    flex-wrap: wrap;
}

.duration-preset {
    padding: 0.35rem 0.75rem;
    background: var(--bg-secondary);
    border: var(--border-width-sm) solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background-color 0.1s;
}

.duration-preset:hover {
    background: var(--bg-tertiary);
}

.duration-preset.selected {
    background: var(--accent-blue);
    color: var(--text-on-accent);
}

.conflict-warning {
    padding: 0.75rem;
    background: var(--accent-red);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-on-accent);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* ===================================================================
   45. App Layout
   =================================================================== */
.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Adjust main content to work with sidebar */
.app-body .main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    overflow-y: auto;
}

/* All views fill available space */
#tasks-view,
#events-view,
#projects-view,
#emails-view {
    padding-bottom: 2.5rem;
}

/* Task view fills available height */
#tasks-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#tasks-view .page-header,
#tasks-view .bulk-actions-bar,
#tasks-view .filter-bar {
    flex-shrink: 0;
}

/* Events view fills available height */
#events-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#events-view .page-header {
    flex-shrink: 0;
}

/* Emails view fills available height */
#emails-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Email filter row: search input flexes; selects + count are content-sized.
   Grid columns make the geometry explicit and immune to <select> intrinsic
   min-content shenanigans that flex layout exposes. */
.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: same shape as .email-filter-row (search fills,
   filter sizes to content, action button sizes to content). Tag filter
   uses .filter-select rather than .form-select, but the layout rule is
   identical. */
.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 in Settings: two small selects with a "to" label
   between. Same lens as .email-filter-row — selects size to their
   short content; the grid columns express the intent explicitly. */
.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 .page-header,
#emails-view .bulk-actions-bar {
    flex-shrink: 0;
}

/* ===================================================================
   46. Saved Views Sidebar (desktop UI only — hidden on mobile)
   =================================================================== */
.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: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.875rem;
    line-height: 1;
}

.btn-icon:hover {
    color: var(--text-primary);
}

.pinned-views-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.sidebar-empty {
    text-align: center;
    padding: 1.5rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.saved-view-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-card);
    border: var(--border-width-sm) solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.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: 0.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 0.1s;
}

.saved-view-item:hover .view-actions {
    opacity: 1;
}

/* Filter actions in filter bar */
.filter-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* ===================================================================
   47. Contacts
   =================================================================== */
/* Avatar primitive — circular badge with initials. Default 40px with
   border; size + unknown modifiers compose. */
.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: 0.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: 0.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: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.contact-company {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.contact-email {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.contact-detail .detail-row {
    margin-bottom: 0.5rem;
    font-size: 0.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: 0.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: 0.5rem;
}

.sub-collection-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.sub-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem;
}

.sub-item:last-child {
    border-bottom: none;
}

.sub-empty {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    padding: 0.25rem 0;
}

/* Edit form sub-collection summaries */
.edit-sub-collections {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-bottom: 0.5rem;
}

.edit-sub-section {
    margin-bottom: 0.75rem;
}

.edit-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.sub-item-compact {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.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 detail drawer (Phase 7 Tier 6) ---------------------------------
   Right-anchored slide-in overlay so users can scan the list and read
   one task's full detail without losing list scroll position. Falls back
   to a full-screen sheet on narrow viewports. */
.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, 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);
}
/* Mark the row whose task is currently open in the drawer. */
.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;
}


/* ===================================================================
   48. Print Styles (global + weekly review)
   ===================================================================
   All `@media print` rules live here. Weekly-review-specific print
   styles consolidated from former §52 on 2026-05-24. */
@media print {
    /* ----- Global chrome ----- */

    /* Hide navigation and interactive elements */
    .sidebar,
    .header,
    .tabs,
    .tab-nav,
    .filter-bar,
    .pagination,
    .btn,
    .modal-overlay,
    .toast,
    .context-menu,
    .keyboard-hints,
    .review-actions-grid,
    .focus-section .btn,
    .focus-slot .btn,
    .tab-badge,
    .tab-status-dot,
    .card-badge,
    .virtual-scroller-spacer {
        display: none !important;
    }

    /* Reset body + main content to full width */
    body {
        background: white;
        color: black;
    }

    .main-content,
    .weekly-review-content {
        margin: 0;
        padding: 0;
        max-width: 100%;
        width: 100%;
    }

    .view {
        padding: 0;
    }

    /* Ensure text is readable */
    a {
        color: black;
        text-decoration: underline;
    }

    /* ----- Tables ----- */

    .data-table,
    .task-table {
        border: 1px solid #333;
        box-shadow: none;
    }

    .data-table {
        page-break-inside: avoid;
    }

    .data-table th,
    .data-table td {
        border: 1px solid #ccc;
        padding: 0.5rem;
        display: table-cell !important;
    }

    .data-table tbody tr:hover,
    .task-row:hover {
        background: 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: 0.25rem 0.5rem;
    }

    .view-header {
        page-break-after: avoid;
    }

    /* ----- Weekly review ----- */

    /* Reset backgrounds for print */
    body,
    .weekly-review-content,
    .review-card,
    .focus-slot,
    .reflection-prompt,
    .project-health,
    .event-item {
        background: white !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Print-friendly card chrome */
    .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;
    }

    /* Two-column print layout */
    .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;
    }

    /* Print header */
    .weekly-review-header {
        border-bottom: 2px solid #333;
        padding-bottom: 1rem;
        margin-bottom: 1.5rem;
    }

    .week-dates {
        font-size: 1.5rem;
        font-weight: bold;
    }

    /* Timeline dots print in color */
    .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 colors */
    .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 for print */
    .focus-grid {
        display: flex !important;
        gap: 1rem;
    }

    .focus-slot {
        flex: 1;
    }

    /* Reflection prompts */
    .reflection-prompts {
        display: flex !important;
        gap: 1rem;
    }

    .reflection-prompt {
        flex: 1;
    }

    .prompt-input {
        border: 1px solid #ccc !important;
        min-height: 80px;
    }

    /* Page break hints */
    .focus-section {
        page-break-before: auto;
    }

    .reflection-section {
        page-break-before: always;
    }
}

/* ===================================================================
   49. Weekly Review — chrome around the V2 grid + tab indicators
   ===================================================================
   The V1 grid layout (stat cards, review sections, focus toggle, notes
   textarea, etc.) was removed 2026-05-24 after V2 took over rendering
   in `weekly-review-render.js`. What remains here is the outer chrome
   (header, status pill, focus background gradient) still composed by
   `weekly-review.js`, plus tab indicators (`.tab-badge`,
   `.tab-status-dot`) consumed by tab nav + events.js. */

.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: 0.25rem 0.75rem;
    border-radius: var(--radius-xs);
    font-size: 0.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 pill — used in the week timeline + finish-review timeline event list. */
.event-time {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 80px;
}

/* Focus section background — applied on top of the .card.card--static.review-card
   composition for the focus scope card in the V2 grid. */
.focus-section {
    background: linear-gradient(135deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent-yellow) 15%, var(--bg-card)) 100%);
}

/* Tab Badge (for nudge) */
.tab-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent-red);
    border-radius: var(--radius-full);
    margin-left: 0.5rem;
    vertical-align: middle;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.8);
    }
}

.tab-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    transition: background-color 0.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; }

/* ===================================================================
   50. Weekly Review V2 - Grid Layout
   =================================================================== */

/* Main Grid Layout */
.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Review Cards — marker class for review-specific scoping. Callsites compose
   `.card .card--static .review-card`; chrome inherits from .card. Only the
   padding bump (+0.25rem) and the review-scoped descendants live here. */
.review-card {
    padding: 1.5rem;
}

.review-card .card-header {
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: var(--border-width-sm) solid var(--bg-secondary);
}

.review-card .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-card .card-icon {
    font-size: 1.25rem;
}

.review-card .card-badge {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    font-weight: 600;
}

/* Week Timeline - spans full width */
.week-timeline {
    grid-column: 1 / -1;
}

.timeline-visual {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.timeline-day {
    flex: 1;
    text-align: center;
    padding: 0.75rem 0.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: 0.7;
}

.timeline-day.future {
    background: var(--bg-card);
}

.timeline-day .day-name {
    font-size: 0.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: 0.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: 0.5;
    width: 12px;
    height: 4px;
    border-radius: 2px;
}

/* Day Events (inline on timeline strip) */
.day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.5rem;
    text-align: left;
}

.day-event {
    font-size: 0.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: 0.55rem;
    font-weight: 600;
    color: var(--accent-purple);
    margin-right: 2px;
    min-width: auto;
}

.day-event-more {
    font-size: 0.55rem;
    color: var(--text-muted);
    padding: 1px 4px;
    font-style: italic;
}

/* Week's Events Card (below timeline) */
.week-timeline-events {
    grid-column: 1 / -1;
}

.timeline-events-day {
    margin-bottom: 0.75rem;
}

.timeline-events-day:last-child {
    margin-bottom: 0;
}

.timeline-events-day-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

/* Vacation Day Toggles */
.vacation-toggles-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border-color);
}

.vacation-toggles-section h3 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-family: var(--font-heading);
    font-weight: 700;
}

.vacation-toggles {
    display: flex;
    gap: 0.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: 0.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);
}

/* Vacation Timeline Day */
.timeline-day.vacation {
    opacity: 0.5;
}

.timeline-day.vacation .day-name {
    text-decoration: line-through;
}

/* Vacation Day Banner (Day Plan) */
.vacation-day-banner {
    text-align: center;
    padding: 0.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: 0.85rem;
    color: var(--accent-purple);
    margin-bottom: 0.75rem;
}

/* Stats Row */
.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: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Task Lists in Review Cards */
.task-list {
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.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: 0.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: 0.9rem;
}

.task-project {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-card);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
}

.task-due {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.task-due.overdue {
    color: var(--accent-red);
    font-weight: 600;
}

/* Focus Section - spans full width */
.focus-section.full-width {
    grid-column: 1 / -1;
}

/* Shared scope-slot frame — used by Week's Focus card and Month's Goals card.
   View-specific styling layers on top (e.g. `.focus-slot.primary`, `.scope-slot.done`). */
.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: 0.5rem;
    transition: background 0.15s, border-color 0.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: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

.scope-slot-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.scope-slot-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.scope-slot-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

/* Focus-specific overlay: primary-priority highlight */
.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%);
}

/* Legacy aliases — keep so existing JS selectors and styles still apply.
   New code should use the .scope-slot* classes. */
.focus-grid { /* alias of .scope-slots */ }
.focus-slot { /* alias of .scope-slot */ }
.focus-label { /* alias of .scope-slot-label */ }
.focus-task { /* alias of .scope-slot-title */ }
.focus-meta { /* alias of .scope-slot-meta */ }
.focus-empty { /* alias of .scope-slot-empty */ }

/* Projects Health */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.project-health {
    padding: 0.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: 0.85rem;
    margin-bottom: 0.25rem;
}

.project-stats {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Reflection Section */
.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: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.prompt-input,
.reflection-textarea {
    width: 100%;
    padding: 0.75rem;
    border: var(--border-width-sm) solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    background: var(--bg-card);
}

.prompt-input:focus,
.reflection-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Review Actions in Grid */
.review-actions-grid {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1rem;
}

/* Event items */
.event-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-purple);
}

.event-item .event-time {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-purple);
    min-width: 100px;
}

.event-item .event-title {
    flex: 1;
    font-size: 0.9rem;
}

/* Accomplishment celebration */
.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);
}

/* Scrollbar styling for task lists */
.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);
}

/* Weekly Review Grid in mobile UI — collapse to single column. */
.ui-mode-mobile .review-grid {
    grid-template-columns: 1fr;
}

.ui-mode-mobile .week-timeline,
.ui-mode-mobile .week-timeline-events,
.ui-mode-mobile .focus-section.full-width,
.ui-mode-mobile .reflection-section {
    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;
}

/* Weekly Review extras — mobile UI: stack stat cards and project grid. */
.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: 0.5rem;
}

.ui-mode-mobile .projects-grid {
    grid-template-columns: 1fr;
}

/* ===================================================================
   51. Weekly Review Transitions & Keyboard Navigation
   =================================================================== */

/* Smooth transitions for focus slots */
.focus-slot {
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.focus-slot.filled {
    animation: focusSlotFill 0.3s ease-out;
}

@keyframes focusSlotFill {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Keyboard focus states */
.focus-slot:focus-within,
.focus-slot:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.focus-slot[tabindex]:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Suggested task buttons transitions */
.focus-section .btn {
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.focus-section .btn:active {
    transform: scale(0.97);
}

/* §52 vacated 2026-05-24 — weekly-review print styles consolidated into §48. */


/* ===================================================================
   52b. Monthly Review
   =================================================================== */

.monthly-review-nav,
.weekly-review-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weekly-review-nav .week-dates {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-left: 0.5rem;
}

.monthly-review-month-display {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-left: 0.5rem;
}

.monthly-review-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

/* Heat Map Calendar */
.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: 0.5rem;
}

.month-heatmap-day-header {
    font-family: var(--font-heading);
    font-size: 0.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 0.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: transparent;
}

.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: 0.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: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.month-heatmap-dots {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.month-dot {
    font-size: 0.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); }

/* Cards Grid */
.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-pulse-card,
.review-card.month-patterns-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: 0.75rem;
    color: var(--text-primary);
}

/* Stats */
.month-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.month-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.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: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
}

.month-stats-highlights {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.stat-highlight {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Project Pulse */
.month-pulse-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.month-pulse-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.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: 0.875rem;
}

.pulse-stats {
    font-size: 0.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); }

/* Goals — scope-slot frame is shared with Focus; goal-specific bits below.
   .month-goals-list is now just a hook for legacy selectors; layout comes from .scope-slots. */
.month-goals-list { /* layout inherited from .scope-slots */ }

.month-goal-body {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.month-goal-item.done {
    opacity: 0.7;
}

.month-goal-item.done .month-goal-text {
    text-decoration: line-through;
}

.month-goal-item.abandoned {
    opacity: 0.5;
}

.month-goal-item.abandoned .month-goal-text {
    text-decoration: line-through;
}

/* Extends .btn-icon with bigger font, fixed width, and parent-driven color overrides. */
.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: 0.875rem;
}

/* Extends .btn-icon with hover-reveal opacity and tertiary color. */
.month-goal-delete-btn {
    color: var(--text-tertiary);
    padding: 0 4px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.month-goal-item:hover .month-goal-delete-btn {
    opacity: 1;
}

.month-goal-placeholder {
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

/* Reflection */
.month-reflection-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.month-reflection-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.month-reflection-textarea {
    width: 100%;
    padding: 0.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: 0.875rem;
    resize: vertical;
}

.month-reflection-textarea:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: -1px;
}

/* Patterns */
.month-patterns-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.month-pattern-item {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 0.5rem;
    background: var(--bg-primary);
    border-radius: var(--radius-xs);
    border: var(--border-width-sm) solid var(--border-color);
}

/* Monthly Review in mobile UI — collapse to single column, denser heatmap. */
.ui-mode-mobile .monthly-review-cards {
    grid-template-columns: 1fr;
}

.ui-mode-mobile .review-card.month-stats-card,
.ui-mode-mobile .review-card.month-goals-card,
.ui-mode-mobile .review-card.month-pulse-card,
.ui-mode-mobile .review-card.month-patterns-card {
    grid-column: span 1;
}

.ui-mode-mobile .month-heatmap-cell {
    min-height: 32px;
}

.ui-mode-mobile .month-heatmap-day-number {
    font-size: 0.7rem;
}

.ui-mode-mobile .month-heatmap-dots {
    display: none;
}

/* ===================================================================
   53. Import Wizard
   =================================================================== */
.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: 0.75rem;
}

.plugin-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.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: 0.25rem;
}

.plugin-option .plugin-meta {
    display: flex;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 0.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 0.75rem 0;
    color: var(--text-primary);
}

.import-more {
    margin: 0.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: 0.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: 0.5rem 0 0 1.25rem;
    padding: 0;
}

.import-warnings li {
    margin-bottom: 0.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: 0.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 0.15s, background 0.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);
}

/* ===================================================================
   54. Plugin Manager
   =================================================================== */
.plugin-list {
    display: flex;
    flex-direction: column;
    gap: 0.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: 0.5rem;
}

.plugin-item .plugin-description {
    margin: 0.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;
}

/* ===================================================================
   55. Toggle Switch
   =================================================================== */
.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);
}

/* ===================================================================
   56. Project Milestones
   =================================================================== */
.milestones-section {
    margin-bottom: 1.5rem;
}

.milestones-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.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: 0.75rem;
    transition: background-color 0.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: 0.5rem;
}

.milestone-card-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-family: var(--font-heading);
    font-weight: 700;
}

.milestone-card-header .milestone-status {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.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: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.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: 0.5rem;
    margin-top: 0.5rem;
}

.milestone-actions button {
    font-size: 0.75rem;
    padding: 0.2rem 0.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: 0.65rem;
    padding: 0.15rem 0.35rem;
    line-height: 1;
    min-width: 1.5rem;
    text-align: center;
}

.milestones-completed-section {
    margin-top: 0.75rem;
}

.milestones-completed-toggle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.25rem 0;
}

.milestone-card-summary {
    padding: 0.5rem 0.75rem;
    opacity: 0.7;
}

.milestone-card-summary .milestone-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.milestone-complete-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-green) 15%, var(--bg-secondary));
    color: var(--accent-green);
}

/* ===================================================================
   58. Mobile Navigation (Nav Dot, Dial, Bottom Sheets)
   =================================================================== */

/* --- Mobile Tab Bar (hidden on desktop, shown <=768px) --- */
.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, 0px);
    height: calc(52px + env(safe-area-inset-bottom, 0px));
}

.mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.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;
}

/* --- Tab Long-press Slide Menu ---
   Anchored above a mobile tab. JS sets left/bottom inline. Origin is
   bottom-center so the scale-in reads as "growing up out of the tab". */
.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: 0.25rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.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: 0.7rem 0.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: 0.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 Bottom Sheet --- */
.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, 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: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    max-height: 60vh;
    overflow-y: auto;
    animation: sheetSlideUp 0.25s ease-out;
}

.action-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-muted);
    margin: 0 auto 0.75rem;
    opacity: 0.4;
}

.action-sheet-content button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 0.5rem;
    background: none;
    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: 0.875rem;
    margin-top: 0.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 (mobile swipe-to-dismiss) --- */
.modal-drag-handle {
    display: none;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-muted);
    margin: 0.5rem auto 0;
    opacity: 0.4;
}

/* --- Mobile Sort Dropdown (replaces clickable column headers) --- */
.mobile-sort-bar {
    display: none;
    gap: 0.5rem;
    padding: 0.5rem 0;
    align-items: center;
}

.mobile-sort-bar select {
    flex: 1;
    font-size: var(--font-size-sm);
}

/* --- Mobile Filter Toggle --- */
.mobile-filter-toggle {
    display: none;
}

/* --- Swipe Action Layer --- */
.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 0.15s ease;
}

/* --- Pull to Refresh --- */
.pull-to-refresh-indicator {
    display: none;
    text-align: center;
    padding: 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 600;
}

.pull-to-refresh-indicator.visible {
    display: block;
}

/* --- Event Date Group Headers (mobile) --- */
.event-date-group-header {
    display: none;
}

/* --- Day Plan Collapsible Sidebar (mobile) --- */
.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; }
}

/* ===================================================================
   59. Mobile Responsive (768px overrides)
   =================================================================== */

/* --- Safe area padding + room for mobile tab bar --- */
html.ui-mode-mobile, .ui-mode-mobile body {
    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, 0px);
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
/* Fixed-position UI must extend edge-to-edge under the notch in landscape */
.ui-mode-mobile .mobile-tab-bar,
.ui-mode-mobile .timer-widget {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.ui-mode-mobile .mobile-tab-bar {
    display: flex;
}

/* --- Hide desktop tab navigation --- */
.ui-mode-mobile .tab-navigation {
    display: none !important;
}

.ui-mode-mobile .app-header {
    display: none;
}

/* Pill nav is replaced on mobile by the bottom tab bar's long-press
   slide menu — hide the in-page sub-tab strip. */
.ui-mode-mobile .pill-nav {
    display: none;
}

/* === Mobile toolbar grids ===
   Toolbar rows become equal-column grids on mobile so children share
   the row predictably (no orphans, no ragged wrapping). Search inputs
   always span the full grid row. */
.ui-mode-mobile #emails-view > div.row-flex.mb-2,
.ui-mode-mobile #tasks-view .page-header > .row-flex,
.ui-mode-mobile #tasks-view .mobile-sort-bar,
.ui-mode-mobile #contacts-view .page-header > .row-flex {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    align-items: center;
}

/* Tasks page-header: Quick Add + New Task are hidden on mobile (see
   .mobile-hide / .btn-primary rules), so only the view-toggle remains
   and takes the full row. */
.ui-mode-mobile #tasks-view .page-header > .row-flex {
    grid-template-columns: 1fr;
}

/* Mobile-hide utility: marker class on controls that don't belong in
   the mobile layout (Drafts, Quick Add). Surfaced elsewhere instead
   (slide menu, bottom bar). */
.ui-mode-mobile .mobile-hide {
    display: none !important;
}

/* Status badges in the day/week/month page-headers are informational
   and visible inside their respective review subviews anyway. */
.ui-mode-mobile #day-review-status-badge,
.ui-mode-mobile #week-review-status-badge,
.ui-mode-mobile #month-review-status-badge {
    display: none !important;
}

/* Day-plan timeline: drag-paint and its hint don't apply on mobile —
   tap-to-add is the touch path. Suppress the hover affordance and
   grab cursor too. */
.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: transparent;
}

/* Day-plan nav: keep ← Today → + date input on one row when there's
   width; wrap the date input below only if the row would overflow.
   The inline date-display span is redundant with the date input. */
.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;
}
/* Restore per-button borders/radii — the desktop segmented-strip rule
   (no right border, square corners) doesn't apply here on mobile. */
.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;
}

/* Search inputs always span the full grid row. */
.ui-mode-mobile #email-search,
.ui-mode-mobile #contacts-search {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

/* The email-count span ("48 threads") is inside the grid row — hide
   on mobile; will get a tidier home in layer-2 trims. */
.ui-mode-mobile #email-count {
    display: none;
}

/* Inside the new grid cells, undo the segmented-button styling (no
   right border, square corners) inherited from the desktop page-header
   rule — grid already gives equal sizing. */
.ui-mode-mobile #tasks-view .page-header > .row-flex .btn,
.ui-mode-mobile #contacts-view .page-header > .row-flex .btn {
    border-radius: var(--radius-sm);
    border-right-width: var(--border-width);
}

/* View-toggle inside the tasks grid should fill its cell. */
.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;
}

/* Undo absolute positioning on mobile — page-header buttons are hidden anyway */
.ui-mode-mobile .tab-group > .subview > .page-header {
    position: static;
}

/* --- Main content adjustments --- */
.ui-mode-mobile .main-content {
    padding: 0.75rem;
}

.ui-mode-mobile .page-header {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ui-mode-mobile .page-header .btn-primary {
    display: none;
}

.ui-mode-mobile .page-title {
    display: none;
}

/* Compact toolbar buttons: collapse into a single segmented block so the
   button text has more room without crowding the row. Stretch each segment
   to share row width so the block reads as one unified control. */
.ui-mode-mobile .page-header > div,
.ui-mode-mobile #emails-view .page-header > div,
.ui-mode-mobile #contacts-view .page-header > div {
    gap: 0 !important;
    flex-wrap: wrap;
}
.ui-mode-mobile .page-header > div .btn,
.ui-mode-mobile #emails-view .page-header > div .btn,
.ui-mode-mobile #contacts-view .page-header > div .btn,
.ui-mode-mobile .bulk-actions-bar .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0;
    border-right-width: 0;
    white-space: nowrap;
}
.ui-mode-mobile .page-header > div .btn:first-child,
.ui-mode-mobile #emails-view .page-header > div .btn:first-child,
.ui-mode-mobile #contacts-view .page-header > div .btn:first-child,
.ui-mode-mobile .bulk-actions-bar .btn:first-of-type {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}
/* Right-cap the visually-last button. `.btn-primary` (Compose) is hidden
   on mobile via display:none but stays in the DOM, so `:last-child` would
   pick the hidden one. Cover both: actual last child, or the button
   immediately before a hidden primary. */
.ui-mode-mobile .page-header > div .btn:last-child,
.ui-mode-mobile .page-header > div .btn:has(+ .btn-primary),
.ui-mode-mobile #emails-view .page-header > div .btn:last-child,
.ui-mode-mobile #emails-view .page-header > div .btn:has(+ .btn-primary),
.ui-mode-mobile #contacts-view .page-header > div .btn:last-child,
.ui-mode-mobile #contacts-view .page-header > div .btn:has(+ .btn-primary) {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    border-right-width: var(--border-width);
}
/* Bulk-actions: 4 contiguous buttons form a block; bulk-select-all is
   pushed right by margin-left:auto so it stays standalone. */
.ui-mode-mobile .bulk-actions-bar {
    gap: 0;
}
.ui-mode-mobile .bulk-actions-bar .bulk-count {
    margin-right: 0.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;
}

/* Email filter row: let selects shrink and wrap instead of forcing 120px. */
.ui-mode-mobile #emails-view .form-select[id^="email-"] {
    min-width: 0 !important;
    flex: 1;
}

/* Compact form controls. Keep font-size at 1rem (16px) — iOS Safari/WKWebView
   auto-zooms when a focused input is below 16px. Only shave padding. */
.ui-mode-mobile .form-input,
.ui-mode-mobile .form-select,
.ui-mode-mobile .form-textarea {
    padding: 0.45rem 0.65rem;
}
.ui-mode-mobile .form-textarea {
    min-height: 72px;
}
.ui-mode-mobile .form-group {
    margin-bottom: 0.75rem;
}
.ui-mode-mobile .form-label {
    margin-bottom: 0.25rem;
}
.ui-mode-mobile .form-actions {
    gap: 0.5rem;
    margin-top: 1rem;
}
.ui-mode-mobile .quick-add-input {
    padding: 0.55rem 0.75rem;
}
.ui-mode-mobile .quick-add {
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Snooze + bulk-modal option rows (date/snooze pickers) — tighten the
   generous stacked-row padding so more options fit above the keyboard. */
.ui-mode-mobile .snooze-option,
.ui-mode-mobile .bulk-modal-option-btn {
    padding: 0.55rem 0.75rem;
}
.ui-mode-mobile .snooze-options {
    gap: 0.35rem;
}

/* Modal chrome: trim header + content padding so date/snooze/compose
   modals reclaim ~24px of vertical room above the keyboard. */
.ui-mode-mobile .modal-header {
    padding: 0.6rem 0.9rem;
}
.ui-mode-mobile .modal-header h2, .ui-mode-mobile .modal-title {
    font-size: 1.05rem;
}
.ui-mode-mobile .modal-content {
    padding: 0.9rem;
}
.ui-mode-mobile .modal-content > .form-actions:last-child,
.ui-mode-mobile .modal-content form > .form-actions:last-child {
    margin-top: 0.9rem;
    padding-top: 0.5rem;
}

/* --- Modal → Bottom Sheet --- */
/* Lift the entire overlay above the mobile tab bar so bottom-sheet modals
   and their content aren't clipped behind it. */
.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: 0.75rem 1rem;
}

.ui-mode-mobile .modal-content {
    padding: 1rem;
}

/* Mobile uses different modal animations (slide up/down from bottom rather
   than fade-and-scale). @keyframes can't be scoped — defined globally under
   distinct names and applied via animation-name override below. */
@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;
}

/* --- Toast repositioning for mobile --- */
.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;
}

/* --- Task View: Card Reflow --- */
.ui-mode-mobile .task-table {
    border: none;
    box-shadow: none;
    background: transparent;
}

.ui-mode-mobile .task-header-row {
    display: none !important;
}

.ui-mode-mobile .task-row {
    display: flex !important;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.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-project,
.ui-mode-mobile .task-cell.task-due {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Show project and due inline */
.ui-mode-mobile .task-row .task-cell.task-project::before {
    content: none;
}

/* Hide priority letter (shown via left border color), recurrence, progress columns */
.ui-mode-mobile .task-row .task-cell:nth-child(3),
.ui-mode-mobile .task-cell.task-recurrence,
.ui-mode-mobile .task-cell.task-progress {
    display: none !important;
}

/* Task meta row: project + due side-by-side */
.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;
}

/* Show subtask progress inline if present */
.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;
}

/* --- Mobile Sort & Filter --- */
.ui-mode-mobile .mobile-sort-bar {
    display: flex;
}

.ui-mode-mobile .mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.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,0.1);
}

/* --- Events View: List Reflow --- */
.ui-mode-mobile .event-header-row {
    display: none !important;
}

.ui-mode-mobile .event-row-virtual {
    display: flex !important;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.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: 0.5rem 1rem;
    background: var(--bg-secondary);
    font-weight: 700;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    border-bottom: var(--border-width-sm) solid var(--border-color);
}

/* --- Emails: Tighter mobile layout --- */
.ui-mode-mobile .email-item {
    padding: 0.625rem 0.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;
}

/* --- Day Plan --- */
.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: 0.625rem 0.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: 0.25rem;
}

/* --- Weekly Review --- */
.ui-mode-mobile .weekly-review-content {
    padding: 0;
}

/* --- Monthly Review --- */
.ui-mode-mobile .monthly-review-content {
    padding: 0;
}

/* --- Review textareas: auto-grow friendly --- */
.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: 0.25rem;
}

.ui-mode-mobile .monthly-review-month-display {
    font-size: 1rem;
}

/* --- Day Summary Sheet --- */
.ui-mode-mobile .day-summary-sheet {
    padding: 0.5rem 0;
}

.ui-mode-mobile .day-summary-date {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.ui-mode-mobile .day-summary-stats {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ui-mode-mobile .day-summary-chip {
    padding: 0.25rem 0.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: 0.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: 0.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: 0.5rem 0 1rem;
}

.ui-mode-mobile .day-summary-go-btn {
    width: 100%;
    margin-top: 0.5rem;
}

/* --- Bulk Actions --- */
.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,0.15);
}

/* --- Pagination --- */
.ui-mode-mobile .pagination-controls {
    padding: 0.5rem;
}

.ui-mode-mobile .pagination-controls .btn {
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
}


/* ===================================================================
   60. Touch Device Hover Disable
   =================================================================== */

@media (hover: none) {
    .task-row:hover {
        background-color: transparent;
    }

    .task-row-clickable:hover {
        background: transparent;
    }

    .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: transparent;
        color: var(--text-primary);
    }

    .modal-close:hover {
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .month-heatmap-cell:hover {
        background: transparent;
        transform: none;
    }

    /* Row-action kebabs are hover-revealed on desktop; on touch always show them */
    .task-row .kebab-btn,
    .email-item .kebab-btn,
    .event-row-virtual .kebab-btn {
        opacity: 1;
    }

    /* No physical keyboard on touch — hide the `?` shortcuts entry points */
    .shortcut-hint-btn {
        display: none;
    }

    /* Stack the time-block picker and presets vertically; enforce 44px touch targets */
    .time-block-quick-options {
        grid-template-columns: 1fr;
    }
    .time-block-quick-btn,
    .duration-preset {
        min-height: 44px;
        padding: 0.75rem;
        font-size: 1rem;
    }
}

/* Touch-device body class (set by touch.js) — equivalent guards for browsers
   that report (hover: hover) but are still touch-first (e.g. some Chromebooks). */
body.is-touch .task-row .kebab-btn,
body.is-touch .email-item .kebab-btn,
body.is-touch .event-row-virtual .kebab-btn {
    opacity: 1;
}
body.is-touch .shortcut-hint-btn {
    display: none;
}

/* ===================================================================
   61. Kanban Board
   =================================================================== */

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 0;
    margin-left: auto;
}

.view-toggle-btn {
    padding: 0.35rem 0.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 */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.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: 0.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: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kanban-column.drag-over {
    background-color: var(--bg-tertiary);
}

/* Kanban Cards — marker class for kanban-specific scoping. Callsites compose
   `.card .kanban-card`; chrome + hover transform inherit from .card. Deltas:
   thinner border, square corners, tighter padding, grab cursor, priority
   left-border hook. */
.kanban-card {
    padding: 0.75rem;
    border-width: var(--border-width-sm);
    border-radius: 0;
    cursor: grab;
    border-left: 4px solid transparent;
}

.kanban-card.dragging { opacity: 0.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: 0.25rem; }
.kanban-card-meta { font-size: var(--font-size-sm); color: var(--text-secondary); display: flex; gap: 0.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: 0.5rem; }
.progress-bar-mini .progress-fill { height: 100%; background: var(--accent-green); border-radius: 2px; }

/* Kanban Responsive */
.ui-mode-mobile .kanban-board { grid-template-columns: 1fr; }
.ui-mode-mobile .kanban-column { max-height: none; }


/* ===================================================================
   62. Timer Widget (Floating Bottom Bar)
   =================================================================== */

.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, 0.1);
    padding: 0.5rem 1rem;
    transition: transform 0.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: 0.5rem;
}

/* ===================================================================
   63. Focus Timer (Pomodoro Overlay)
   =================================================================== */

.focus-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.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: 0.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: 0.9rem;
}

.focus-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ===================================================================
   64. Time Summary Panel (Day View)
   =================================================================== */

.time-summary-section {
    margin-bottom: 1rem;
}

.time-summary-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 0.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: 0.625rem;
    transition: transform 0.15s ease;
}

.time-summary-body {
    padding: 0.5rem;
    overflow: hidden;
    transition: max-height 0.2s ease;
    max-height: 500px;
}

.time-summary-body.collapsed {
    max-height: 0;
    padding: 0 0.5rem;
}

.time-summary-today {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.time-summary-today-label {
    font-weight: 600;
    font-size: 0.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: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.time-summary-project {
    margin-bottom: 0.5rem;
}

.time-summary-project-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    margin-bottom: 0.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: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.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;
}

/* ===================================================================
   65. Task Time Tracking UI
   =================================================================== */

/* Inline action buttons in day sidebar unscheduled tasks */
.unscheduled-task-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.unscheduled-task-actions .btn {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    min-height: auto;
    line-height: 1.4;
}

/* Compact time badge in task rows */
.task-time-badge {
    display: inline-block;
    font-family: var(--font-mono, monospace);
    font-size: 0.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: 0.05rem 0.35rem;
    margin-left: 0.375rem;
    vertical-align: middle;
    white-space: nowrap;
}

.task-time-badge.over-estimate {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

/* Play icon for started tasks — entry point into time tracking */
.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: 0.375rem;
    vertical-align: middle;
    cursor: pointer;
    opacity: 0.8;
    flex-shrink: 0;
}
.task-started-icon:hover {
    opacity: 1;
}

/* Pulsing indicator for running timer */
.task-timer-active {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent-red);
    border-radius: var(--radius-full);
    margin-left: 0.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: 0.4; transform: scale(0.8); }
}

/* Timer widget mobile adjustment */
.ui-mode-mobile .timer-widget {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
}
.ui-mode-mobile .focus-countdown {
    font-size: 3rem;
}


/* ===================================================================
   66. Timer Subview (Time tab pill)
   =================================================================== */

.timer-active-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.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: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color);
    margin-bottom: 0.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: 0.5rem;
}

.timer-focus-split {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.timer-focus-split-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-right: 0.25rem;
}

.timer-split-input {
    width: 3.5rem;
    padding: 0.25rem 0.375rem;
    font-size: 0.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: 0.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: 0.75rem 0.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: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
    font-size: 0.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: 0.75rem;
}

.timer-task-actions {
    display: flex;
    gap: 0.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;
}


/* ===================================================================
   67. Task Overview
   =================================================================== */

.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: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.task-overview-count {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.task-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.task-overview-stat {
    text-align: center;
    padding: 0.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: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.task-overview-heatmap-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
}

.task-overview-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-overview-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.task-overview-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.task-overview-subtask-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.task-overview-subtask {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.completed-text {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.task-overview-add-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.task-overview-add-form .form-input {
    flex: 1;
}

.task-overview-sessions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.task-overview-session {
    padding: 0.25rem 0;
    border-bottom: var(--border-width-sm) solid var(--border-color);
}

.task-overview-annotations {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.task-overview-annotation {
    padding: 0.5rem;
    background: var(--bg-secondary);
    border: var(--border-width-sm) solid var(--border-color);
}

.task-overview-annotation-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.task-overview-completion-list {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.task-overview-completion-item {
    padding: 0.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: 0.75rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent-green);
    transition: width 0.3s ease;
}

.progress-bar.over-estimate .progress-fill {
    background: var(--accent-red);
}


/* Task overview stats in mobile UI — 2 columns instead of 4. */
.ui-mode-mobile .task-overview-stats {
    grid-template-columns: repeat(2, 1fr);
}

/* ===================================================================
   68. Plan/Review Toggle Nudge Dot
   =================================================================== */

.toggle-nudge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--accent-red);
    border-radius: var(--radius-full);
    margin-left: 0.35rem;
    vertical-align: middle;
    animation: pulse-badge 2s infinite;
}

.view-toggle-btn {
    position: relative;
}

/* ===================================================================
   69. Finish & Review
   =================================================================== */

.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: 0.65rem 1.5rem;
}

.finish-review-modal-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.past-review-banner {
    padding: 0.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: 0.9rem;
}

.day-accomplished-inline {
    margin-top: 1.5rem;
}

.day-accomplished-inline:empty {
    display: none;
}

.day-accomplished-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* ===================================================================
   70. Calendar Views
   =================================================================== */

.events-calendar-container {
    padding: 0;
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.calendar-nav-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

/* Month Grid */
.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-header,
.cal-month-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.cal-month-day-header {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    padding: 0.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: 0.25rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.cal-month-cell:hover {
    background: var(--bg-secondary);
}

.cal-month-cell.other-month {
    opacity: 0.4;
}

.cal-month-cell.today {
    border-color: var(--accent-primary);
    border-width: 2px;
}

.cal-month-cell-header {
    margin-bottom: 0.15rem;
}

.cal-day-number {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
}

.cal-event-chip {
    font-size: 0.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: 0.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: 0.65rem;
    color: var(--text-secondary);
    padding: 1px 4px;
}

/* Month Day Detail */
.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: 0.75rem;
    padding: 0.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: 0.85rem;
}

/* Week Grid */
.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: 0.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: 0.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: 0.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: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    transform: translateY(-0.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: 0.7rem;
}

.cal-week-event:hover {
    opacity: 0.85;
}

.cal-week-event-title {
    font-weight: 600;
}

.cal-week-event-time {
    font-size: 0.65rem;
    opacity: 0.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); }

/* Calendar in mobile UI — single-day swipe carousel, denser timeline. */
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: 0.95rem;
    font-weight: 600;
}
.ui-mode-mobile .cal-event-chip {
    font-size: 0.65rem;
}
.ui-mode-mobile .cal-week-body {
    max-height: 60vh;
}

/* Single-day swipe carousel for week view */
.ui-mode-mobile .cal-mobile-day {
    display: flex;
    flex-direction: column;
    height: 70vh;
    user-select: none;
}
.ui-mode-mobile .cal-mobile-day-header {
    padding: 0.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: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.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);
}

/* Settings Page — Mobile */
.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: 0.75rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.ui-mode-mobile .settings-back { margin-bottom: 0; margin-right: 0.5rem; padding: 0.5rem; }
.ui-mode-mobile .settings-nav-items { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
.ui-mode-mobile .settings-nav-item { padding: 0.5rem 0.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; }


/* ============================================================
   Compose window (compose.html — standalone Tauri window)
   Scoped under body.compose-window so it does not leak to the
   main app shell.
   ============================================================ */

body.compose-window {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.compose-window .compose-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.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: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    font-size: 0.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: 0.6;
    pointer-events: none;
}