/* CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ==========================================
     DESIGN TOKENS - HSL Color System
     Matches web app's shadcn/ui design system
     ========================================== */

  /* Base Colors (HSL values without hsl() wrapper for flexibility) */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  /* Card/Surface Colors */
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  /* Primary Action Color (Blue) */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;

  /* Secondary/Muted Colors */
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;

  /* Semantic Colors */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --success: 142 76% 36%;
  --success-foreground: 210 40% 98%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;

  /* UI Element Colors */
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;

  /* Layout Tokens */
  --radius: 0.5rem;
  --sidebar-width: 260px;
  --content-max-width: 720px;

  /* Legacy aliases for backward compatibility */
  --bg-primary: hsl(var(--background));
  --bg-secondary: hsl(var(--secondary));
  --bg-tertiary: hsl(var(--muted));
  --text-primary: hsl(var(--foreground));
  --text-secondary: hsl(var(--muted-foreground));
  --text-muted: hsl(var(--muted-foreground));

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Consolas, 'Liberation Mono', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* Dark mode */
.dark,
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --success: 142 76% 36%;
    --success-foreground: 210 40% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 0%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;

    /* Legacy aliases */
    --bg-primary: hsl(var(--background));
    --bg-secondary: hsl(var(--secondary));
    --bg-tertiary: hsl(var(--muted));
    --text-primary: hsl(var(--foreground));
    --text-secondary: hsl(var(--muted-foreground));
    --text-muted: hsl(var(--muted-foreground));
  }
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
}

#app {
  display: flex;
  height: 100%;
}

#sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  padding: var(--space-4);
  overflow-y: auto;
}

#content {
  flex: 1;
  padding: var(--space-6);
  overflow-y: auto;
}

/* Loading state */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
}

.loading::after {
  content: '';
  width: 24px;
  height: 24px;
  margin-left: var(--space-2);
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Block styles */
.block {
  position: relative;
}

.block-row {
  display: flex;
  align-items: flex-start;
  min-height: 1.5em;
  padding: var(--space-1) 0;
}

.block-bullet {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-sm);
}

.block-bullet[data-type=":todo"] {
  cursor: pointer;
}

.block-bullet[data-type=":todo"]:hover {
  color: var(--accent);
}

.block-bullet[data-type=":heading"] {
  width: 0;
}

.block-content {
  flex: 1;
  outline: none;
  word-wrap: break-word;
  white-space: pre-wrap;
  min-height: 1em;
  padding: 0 var(--space-1);
}

.block-content:empty::before {
  content: 'Type something...';
  color: var(--text-muted);
}

.block-content:focus {
  background: var(--bg-secondary);
  border-radius: 2px;
}

.context-badge {
  flex-shrink: 0;
  margin-left: var(--space-2);
  font-size: var(--font-size-sm);
  opacity: 0.8;
  user-select: none;
}

.block-children {
  /* Children container - blocks nest here */
}

/* Heading styles */
.block[data-type="heading"] .block-content {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

/* Block focus indicator */
.block.focused > .block-row {
  background: var(--accent-subtle);
  border-radius: 4px;
}

/* Drag handle */
.block-drag-handle {
  position: absolute;
  left: 4px;
  color: var(--text-muted);
  opacity: 0;
  cursor: grab;
  font-size: 10px;
  transition: opacity 0.2s;
  user-select: none;
}

.block-row:hover .block-drag-handle {
  opacity: 0.5;
}

.block-row[draggable="true"]:active .block-drag-handle {
  cursor: grabbing;
}

.block.dragging {
  opacity: 0.5;
}

.block.drop-indicator {
  position: relative;
}

.block.drop-indicator::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* Page view styles */
.page-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.page-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.page-icon {
  font-size: var(--font-size-2xl);
}

.page-title {
  flex: 1;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  outline: none;
  border: none;
  background: transparent;
}

.page-title:empty::before {
  content: 'Untitled';
  color: var(--text-muted);
}

.page-content {
  min-height: 200px;
}

.page-backlinks {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.empty-page {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-muted);
  cursor: pointer;
}

.empty-page:hover {
  background: var(--bg-secondary);
  border-radius: 8px;
}

.empty-page .hint {
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

/* Wiki-link styles */
.wiki-link {
  color: var(--accent);
  cursor: pointer;
  border-radius: 2px;
  padding: 0 2px;
}

.wiki-link:hover {
  background: var(--accent-subtle);
  text-decoration: underline;
}

.wiki-link.missing {
  color: var(--error);
  opacity: 0.7;
}

.wiki-link.missing:hover {
  opacity: 1;
}

/* Backlinks panel styles */
.backlinks-panel {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.backlinks-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.backlinks-empty {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.backlinks-list {
  list-style: none;
}

.backlink-item {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--bg-secondary);
  border-radius: 6px;
}

.backlink-page {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.backlink-page:hover {
  text-decoration: underline;
}

.backlink-icon {
  font-size: var(--font-size-sm);
}

.backlink-content {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border);
}

/* View common styles */
.view-header {
  margin-bottom: var(--space-6);
}

.view-header h1 {
  margin-bottom: var(--space-2);
}

.view-description {
  color: var(--text-secondary);
}

/* Inbox view styles */
.inbox-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.inbox-capture {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

/* Inbox input inherits from global input styles with some overrides */
.inbox-input {
  flex: 1;
  /* Global input styles apply - just override background for secondary feel */
  background-color: hsl(var(--secondary));
}

/* ==========================================
   BUTTON SYSTEM - Matches shadcn/ui
   ========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid transparent;

  /* Default size: h-10 px-4 py-2 */
  height: 2.5rem;
  padding: 0.5rem 1rem;
  min-width: 5rem;
}

/* Focus ring for accessibility */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Primary variant - filled blue */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.btn-primary:hover {
  background-color: hsl(var(--primary) / 0.9);
}

/* Secondary variant - subtle gray */
.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--secondary));
}

.btn-secondary:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

/* Outline variant - bordered */
.btn-outline {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--input));
}

.btn-outline:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Ghost variant - transparent until hover */
.btn-ghost {
  background-color: transparent;
  color: hsl(var(--foreground));
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Destructive variant - red/danger */
.btn-danger,
.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border-color: hsl(var(--destructive));
}

.btn-danger:hover,
.btn-destructive:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

/* Success variant */
.btn-success {
  background-color: hsl(var(--success));
  color: hsl(var(--success-foreground));
  border-color: hsl(var(--success));
}

.btn-success:hover {
  background-color: hsl(var(--success) / 0.9);
}

/* Size variants */
.btn-sm {
  height: 2.25rem;
  padding: 0.375rem 0.75rem;
  font-size: var(--font-size-xs);
  min-width: auto;
}

.btn-lg {
  height: 2.75rem;
  padding: 0.5rem 2rem;
  font-size: var(--font-size-base);
}

.btn-icon {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
  min-width: auto;
}

.btn-icon.btn-sm {
  height: 2rem;
  width: 2rem;
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inbox-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.inbox-content {
  flex: 1;
}

.inbox-actions {
  display: flex;
  gap: var(--space-1);
}

.btn-sm {
  padding: var(--space-1) var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
}

.btn-sm:hover {
  background: var(--bg-tertiary);
  opacity: 1;
}

.empty-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-muted);
}

.empty-state .hint {
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

.empty-hint {
  color: var(--text-muted);
  font-style: italic;
}

/* Projects view styles */
.projects-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.project-section {
  margin-bottom: var(--space-6);
}

.project-section h2 {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.project-list {
  display: grid;
  gap: var(--space-3);
}

.project-card {
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.project-card:hover {
  border-color: var(--accent);
}

.project-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.project-icon {
  font-size: var(--font-size-lg);
}

.project-title {
  font-weight: 600;
}

.project-outcome {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.project-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.project-area {
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
}

.progress-bar {
  flex: 1;
  max-width: 100px;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

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

/* Actions view styles */
.actions-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.context-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.context-tab {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.context-tab:hover {
  border-color: var(--accent);
}

.context-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.context-section {
  margin-bottom: var(--space-4);
}

.context-section h2,
.context-section h3 {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* Context group headers */
.context-group {
  margin-bottom: var(--space-6);
}

.context-group-header {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

/* Person context (agenda items) styling */
.context-section-person {
  background: var(--bg-secondary);
  padding: var(--space-3);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

.context-section-person h3 {
  color: var(--text-primary);
  font-weight: 500;
}

/* Special context (@waiting) styling */
.context-section-special {
  background: var(--bg-secondary);
  padding: var(--space-3);
  border-radius: 8px;
  border-left: 3px solid var(--warning, #f59e0b);
}

/* Person tab styling */
.context-tab.person-tab {
  border-color: var(--accent);
  color: var(--accent);
}

.context-tab.person-tab.active {
  background: var(--accent);
  color: white;
}

/* Empty state mini (for sections with no items) */
.empty-state-mini {
  padding: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.action-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-radius: 6px;
  cursor: pointer;
}

.action-item:hover {
  background: var(--bg-tertiary);
}

.action-checkbox {
  color: var(--text-muted);
}

.action-content {
  flex: 1;
}

.action-energy {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  text-transform: uppercase;
}

.action-energy[data-energy=":high"] {
  background: #fee2e2;
  color: #991b1b;
}

.action-energy[data-energy=":medium"] {
  background: #fef3c7;
  color: #92400e;
}

.action-energy[data-energy=":low"] {
  background: #d1fae5;
  color: #065f46;
}

/* Areas view styles */
.areas-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.area-card {
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.area-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.area-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.area-icon {
  font-size: var(--font-size-xl);
}

.area-title {
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.area-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.area-stats {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Today view styles */
.today-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.today-section {
  margin-bottom: var(--space-6);
}

.today-section h2 {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.today-section.overdue h2 {
  color: var(--error);
}

.today-section.completed-section {
  opacity: 0.7;
}

.action-item.overdue {
  border-left: 3px solid var(--error);
}

.action-item.completed {
  opacity: 0.6;
  text-decoration: line-through;
}

.action-context {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.action-type {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-subtle);
  color: var(--accent);
}

.action-due {
  font-size: var(--font-size-xs);
  color: var(--error);
}

/* Journal View */
.journal-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.journal-nav {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.journal-content {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--space-4);
  min-height: 400px;
}

.journal-content .block-tree {
  min-height: 300px;
}

.journal-content .empty-state {
  text-align: center;
  padding: var(--space-8);
  color: hsl(var(--muted-foreground));
}

.journal-footer {
  margin-top: var(--space-4);
  text-align: center;
}

.journal-footer .hint {
  font-size: var(--font-size-sm);
  color: hsl(var(--muted-foreground));
}

/* Scheduled View */
.scheduled-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

.scheduled-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.scheduled-controls label {
  font-weight: 600;
  color: var(--text-secondary);
}

.time-range-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: border-color 0.2s;
}

.time-range-select:hover {
  border-color: var(--accent);
}

.time-range-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.scheduled-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.scheduled-section {
  margin-bottom: var(--space-6);
}

.scheduled-section h2 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.scheduled-section.overdue h2 {
  color: var(--error);
}

.date-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-weight: normal;
  margin-left: var(--space-2);
}

/* ============================================
   Graph View
   ============================================ */

.graph-view {
  max-width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.graph-view .view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.graph-view .view-header-left {
  flex: 1;
}

.graph-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.graph-controls .toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.graph-controls .toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.graph-container {
  flex: 1;
  min-height: 400px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  overflow: hidden;
}

.graph-container canvas {
  display: block;
}

.graph-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ============================================
   Contacts View
   ============================================ */

.contacts-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

/* ============================================
   Clarify Modal
   ============================================ */

.clarify-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}

.clarify-modal {
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.clarify-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.clarify-header h2 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.btn-close {
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

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

.clarify-item-preview {
  padding: var(--space-3) var(--space-6);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.preview-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-1);
}

.preview-content {
  font-weight: 500;
  color: var(--text-primary);
}

/* Step Indicator */
.clarify-steps {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.step-indicator {
  display: flex;
  gap: var(--space-2);
}

.step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.step.active {
  color: var(--text-secondary);
}

.step.current {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 500;
}

.step-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
}

.step.current .step-number {
  background: var(--accent);
  color: white;
}

/* Question Step */
.clarify-content {
  padding: var(--space-6);
}

.clarify-question h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
}

.question-hint {
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

/* Option Buttons */
.option-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.option-buttons.vertical {
  grid-template-columns: 1fr;
}

.option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.option-btn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.option-btn.option-yes:hover {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.1);
}

.option-btn.option-no:hover,
.option-btn.option-danger:hover {
  border-color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

.option-icon {
  font-size: var(--font-size-2xl);
}

.option-label {
  font-weight: 600;
  color: var(--text-primary);
}

.option-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Keyboard Hint */
.keyboard-hint {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

/* Back Button */
.btn-back {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
  margin-top: var(--space-4);
}

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

/* Clarify Form */
.clarify-form h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-4);
}

/* ============================================
   Form Elements - shadcn/ui Style
   ============================================ */

.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: var(--space-2);
}

/* Base input styles matching shadcn/ui */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  display: flex;
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  height: auto;
  min-height: 5rem;
  resize: vertical;
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 1;
}

/* Focus states with ring - matches shadcn/ui */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.2);
}

/* Focus-visible for keyboard navigation */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: hsl(var(--muted));
}

/* Form group specific overrides for consistency */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Picker Buttons - Toggle button style matching shadcn/ui */
.context-buttons,
.energy-buttons,
.time-buttons,
.status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 0.75rem;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.picker-btn:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
}

.picker-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.picker-btn.active {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.picker-btn.active:hover {
  background-color: hsl(var(--primary) / 0.9);
}

/* Form Actions */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* ============================================
   Enhanced Inbox Styles
   ============================================ */

.inbox-content {
  cursor: pointer;
  flex: 1;
}

.inbox-content:hover {
  color: var(--accent);
}

.inbox-zero {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.inbox-zero-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.inbox-zero h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
  color: var(--success);
}

.inbox-hint {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-subtle);
  border-radius: 6px;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.inbox-hint kbd {
  background: var(--bg-primary);
}

/* ============================================
   Settings View
   ============================================ */

.settings-view {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-4);
}

.settings-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: 2px solid var(--border);
}

.settings-tab {
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: -2px;
  transition: all 0.2s;
}

.settings-tab:hover {
  color: var(--text-primary);
}

.settings-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.settings-content {
  /* Container for tab content */
}

.settings-section {
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.settings-section h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.settings-section h3 {
  font-size: var(--font-size-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
}

.settings-section > p {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.settings-section ul {
  margin-left: var(--space-6);
  color: var(--text-secondary);
}

.settings-section ul li {
  margin-bottom: var(--space-2);
}

/* Storage info card */
.storage-info-card {
  background: var(--bg-secondary);
  padding: var(--space-4);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.storage-info-card p {
  margin-bottom: var(--space-2);
}

.storage-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.setting-group {
  margin-bottom: var(--space-6);
}

.setting-group label {
  display: block;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: var(--space-2);
}

/* Checkbox styling */
.setting-group label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-right: var(--space-2);
  accent-color: hsl(var(--primary));
  cursor: pointer;
}

/* The base select styles are now handled globally above */
.setting-select {
  /* Uses global select styles, just ensure full width */
  width: 100%;
}

.setting-hint {
  font-size: var(--font-size-sm);
  color: hsl(var(--muted-foreground));
  margin-top: var(--space-2);
}

.sync-status-text {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: var(--space-4) 0;
  text-align: center;
}

.setting-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.setting-label {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.setting-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
}

.btn-danger {
  background: var(--error);
  color: white;
}

.btn-danger:hover {
  opacity: 0.9;
}

.warning {
  color: var(--error);
  font-weight: 500;
}

.backup-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.backup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.backup-date {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ============================================
   PHASE 8: POLISH & UX
   ============================================ */

/* Loading States */
.save-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 100;
}

.save-indicator.visible {
  opacity: 1;
}

.save-indicator.saving {
  color: var(--accent);
}

.save-indicator.saved {
  color: var(--success);
}

/* Mobile Bottom Tab Bar */
.mobile-tabs {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 0 0 env(safe-area-inset-bottom);
  z-index: 1000;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--space-2);
  position: relative;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all 0.2s;
  min-height: 56px;
  gap: 2px;
}

.tab-item:hover,
.tab-item:focus {
  color: var(--accent);
  background: var(--bg-tertiary);
}

.tab-item.active {
  color: var(--accent);
  font-weight: 600;
}

.tab-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.tab-label {
  font-size: var(--font-size-xs);
  line-height: 1;
}

.tab-badge {
  display: none;
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(12px);
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--error);
  color: white;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.tab-badge.visible {
  display: block;
}

/* Mobile Base - Sidebar/Tabs Toggle */
@media (max-width: 768px) {
  #app {
    flex-direction: column;
    padding-bottom: 56px; /* Space for tab bar */
  }

  #sidebar {
    display: none; /* Hide sidebar on mobile, use tab bar instead */
  }

  .mobile-tabs {
    display: flex;
  }

  /* Hide drag handles on mobile */
  .block-drag-handle {
    display: none;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply animations */
.page-view,
.inbox-view,
.projects-view,
.actions-view,
.areas-view,
.today-view {
  animation: fadeIn 0.3s ease;
}

.clarify-modal {
  animation: modalIn 0.3s ease;
}

.block {
  animation: fadeIn 0.2s ease;
}

.action-item,
.project-card,
.area-card,
.inbox-item {
  transition: transform 0.2s, box-shadow 0.2s;
}

.action-item:hover,
.project-card:hover,
.area-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Keyboard Shortcuts Modal */
.shortcuts-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease;
}

.shortcuts-modal {
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  animation: modalIn 0.3s ease;
}

.shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 1;
}

.shortcuts-header h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.shortcuts-content {
  padding: var(--space-6);
}

.shortcuts-section {
  margin-bottom: var(--space-6);
}

.shortcuts-section:last-child {
  margin-bottom: 0;
}

.shortcuts-section h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shortcut-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: 6px;
}

.shortcut-description {
  flex: 1;
  color: var(--text-primary);
}

.shortcut-keys {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.shortcut-key {
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  min-width: 24px;
  text-align: center;
}

.shortcut-plus {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* Enhanced Empty States */
.empty-state-enhanced {
  text-align: center;
  padding: var(--space-8);
  max-width: 400px;
  margin: 0 auto;
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state-enhanced h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.empty-state-enhanced p {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.empty-state-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.empty-state-btn {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  transition: all 0.2s;
}

.empty-state-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
}

.empty-state-btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.empty-state-btn.primary:hover {
  opacity: 0.9;
}


/* ============================================
   PHASE 5: WEEKLY REVIEW
   ============================================ */

.review-view {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-4);
  animation: fadeIn 0.3s ease;
}

.review-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.review-header h1 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
}

.review-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

/* Review Progress */
.review-progress {
  margin-bottom: var(--space-8);
}

.review-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.review-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 2px solid transparent;
  transition: all 0.2s;
}

.review-step.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.review-step.completed {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.1);
}

.step-icon {
  font-size: var(--font-size-xl);
}

.step-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: center;
  color: var(--text-secondary);
}

.review-step.active .step-title {
  color: var(--accent);
  font-weight: 600;
}

.review-step.completed .step-title {
  color: var(--success);
}

.progress-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

/* Review Content */
.review-content {
  margin-bottom: var(--space-6);
}

.step-section {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: var(--space-6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.step-section h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-3);
}

.step-section > p {
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.stat-icon {
  font-size: var(--font-size-2xl);
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--accent);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: center;
}

.review-tip {
  padding: var(--space-4);
  background: var(--accent-subtle);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.review-tip strong {
  color: var(--text-primary);
}

/* Review Checklist */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.checklist-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s;
}

.checklist-item:hover {
  border-color: var(--accent);
}

.checklist-item.completed {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.05);
}

.checkbox {
  font-size: var(--font-size-xl);
  color: var(--text-muted);
  flex-shrink: 0;
}

.checklist-item.completed .checkbox {
  color: var(--success);
}

.checklist-content {
  flex: 1;
}

.checklist-title {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

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

.checklist-link {
  font-size: var(--font-size-sm);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.checklist-link:hover {
  text-decoration: underline;
}

/* Issue List */
.issue-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.issue-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: all 0.2s;
}

.issue-item:hover {
  background: var(--bg-tertiary);
  color: var(--accent);
}

.issue-meta {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.issue-more {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Area Balance */
.area-balance {
  margin-bottom: var(--space-6);
}

.area-balance h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-4);
}

.balance-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.balance-item {
  padding: var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s;
}

.balance-item.neglected {
  border-color: var(--warning);
  background: rgba(245, 158, 11, 0.05);
}

.balance-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.balance-icon {
  font-size: var(--font-size-lg);
}

.balance-title {
  flex: 1;
  font-weight: 600;
}

.balance-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.balance-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

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

.balance-item.neglected .balance-fill {
  background: var(--warning);
}

.balance-warning {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--warning);
}

.review-alert {
  padding: var(--space-4);
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--warning);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.review-alert strong {
  color: var(--text-primary);
}

/* Review Navigation */
.review-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover {
  opacity: 0.9;
}


/* ========================================
   Search
   ======================================== */

.search-view {
  max-width: 900px;
  margin: 0 auto;
}

.search-controls {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  align-items: center;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
}

/* Search input - larger variant with prominent styling */
.search-input {
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1rem;
  padding-right: 3rem;
  font-size: var(--font-size-lg);
  border: 2px solid hsl(var(--input));
  border-radius: var(--radius);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.search-input:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.2);
}

.btn-clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  line-height: 1;
}

.btn-clear:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-secondary {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
}

.btn-secondary.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

/* Filter Panel */
.filter-panel {
  display: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.filter-panel.visible {
  display: flex;
  flex-direction: column;
}

.filter-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.filter-row label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: hsl(var(--muted-foreground));
  min-width: 150px;
}

/* Filter selects use global select styles with smaller height */
.filter-select {
  height: 2.25rem;
  /* Inherits all other styles from global select */
}

.filter-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-right: var(--space-2);
  cursor: pointer;
  accent-color: hsl(var(--primary));
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  transition: all 0.2s;
}

.btn-sm:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Search Results */
.search-results {
  min-height: 400px;
}

.results-summary {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border-radius: 6px;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.result-group {
  margin-bottom: var(--space-8);
}

.result-group-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.result-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s;
  cursor: pointer;
}

.result-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  transform: translateX(4px);
}

.result-item.completed {
  opacity: 0.6;
}

.result-item.completed .result-title {
  text-decoration: line-through;
}

.result-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

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

.result-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  margin-bottom: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-title mark {
  background: var(--warning);
  color: var(--text-primary);
  padding: 1px 3px;
  border-radius: 3px;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.result-snippet {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.result-context {
  color: var(--text-muted);
}

.result-context::before {
  content: "in ";
}

.badge {
  padding: 2px var(--space-2);
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

.badge-high {
  background: var(--error);
  color: white;
}

.badge-medium {
  background: var(--warning);
  color: white;
}

.badge-low {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.badge-active {
  background: var(--success);
  color: white;
}

.badge-someday {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.badge-completed {
  background: var(--success);
  color: white;
}

.badge-archived {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Empty State */
.empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
}


/* ==========================================
   Login Screen
   ========================================== */

/* Override #app layout when login screen is shown */
#app:has(.login-screen) {
  display: block;
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  padding: var(--space-4);
}

.login-container {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.login-logo {
  margin-bottom: var(--space-8);
}

.login-logo .logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--accent);
  color: white;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 16px;
  margin-bottom: var(--space-4);
}

.login-logo h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.login-logo .tagline {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.login-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error);
  border-radius: 8px;
  color: var(--error);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.login-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.login-card h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.login-card > p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-6);
}

.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.login-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-muted);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.login-btn .google-icon {
  flex-shrink: 0;
}

.login-btn .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.login-note {
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.login-footer {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.login-footer p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* ==========================================
   AI Settings
   ========================================== */

/* Setting inputs inherit from global input styles */
.setting-input {
  width: 100%;
  /* Using global input styles, just override font for mono if needed */
}

.api-key-input-wrapper {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.api-key-input-wrapper .setting-input {
  flex: 1;
  font-family: var(--font-mono);
}

/* Icon button - matches shadcn/ui icon button variant */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-size-lg);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-icon:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-color: hsl(var(--accent));
}

.btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.ai-test-result {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  transition: all 0.3s;
}

.ai-test-result.hidden {
  display: none;
}

.ai-test-result.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--success);
  color: var(--success);
}

.ai-test-result.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error);
  color: var(--error);
}

.ai-test-result small {
  display: block;
  margin-top: var(--space-1);
  opacity: 0.8;
}

.provider-list {
  display: grid;
  gap: var(--space-2);
}

.provider-item {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.provider-item strong {
  color: var(--text-primary);
}

.setting-hint.warning {
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
  padding: var(--space-2) var(--space-3);
  border-radius: 4px;
  margin-top: var(--space-2);
}

/* ==========================================
   AI Suggestion in Clarify Modal
   ========================================== */

.ai-suggestion-section {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ai-suggest-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.ai-suggestion {
  border-radius: 6px;
  overflow: hidden;
}

.ai-suggestion.actionable {
  border: 1px solid var(--success);
  background: rgba(34, 197, 94, 0.05);
}

.ai-suggestion.not-actionable {
  border: 1px solid var(--warning);
  background: rgba(245, 158, 11, 0.05);
}

.ai-suggestion-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.05);
  font-size: var(--font-size-sm);
}

.ai-icon {
  font-size: var(--font-size-lg);
}

.ai-suggestion-content {
  padding: var(--space-3);
}

.ai-suggestion-content p {
  margin: var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.ai-suggestion-content p strong {
  color: var(--text-primary);
}

.ai-reasoning {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.ai-apply-btn {
  width: calc(100% - var(--space-6));
  margin: var(--space-2) var(--space-3) var(--space-3);
}

.ai-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error);
  border-radius: 6px;
  color: var(--error);
  font-size: var(--font-size-sm);
}

/* ==========================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   ========================================== */

@media (max-width: 768px) {
  /* === Base Layout === */
  :root {
    --content-max-width: 100%;
  }

  #content {
    padding: var(--space-3);
  }

  /* === Page View === */
  .page-view {
    padding: var(--space-3);
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
  }

  .page-title {
    font-size: var(--font-size-xl);
    width: 100%;
  }

  .page-icon {
    font-size: var(--font-size-xl);
  }

  /* Blocks - larger touch targets */
  .block-row {
    padding: var(--space-2) 0;
    min-height: 44px;
  }

  .block-bullet {
    width: 32px;
    padding: var(--space-2);
    font-size: var(--font-size-base);
  }

  .block-content {
    font-size: var(--font-size-base);
    padding: var(--space-2);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .block-content:focus {
    background: var(--bg-secondary);
    border-radius: 6px;
  }

  /* Backlinks */
  .backlinks-panel {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
  }

  .backlink-item {
    padding: var(--space-3);
  }

  /* === Today View === */
  .today-view {
    padding: var(--space-3);
  }

  .today-section {
    margin-bottom: var(--space-4);
  }

  .today-section h2 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2);
  }

  /* === Scheduled View === */
  .scheduled-view {
    padding: var(--space-3);
  }

  .scheduled-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .scheduled-controls label {
    text-align: center;
  }

  .time-range-select {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--font-size-base);
  }

  .scheduled-section h2 {
    font-size: var(--font-size-base);
  }

  /* === Inbox View === */
  .inbox-view {
    padding: var(--space-3);
  }

  .inbox-capture {
    flex-direction: column;
    gap: var(--space-2);
  }

  .inbox-input {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: var(--space-3);
  }

  .inbox-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .inbox-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .inbox-actions .btn-sm {
    padding: var(--space-2) var(--space-3);
    min-height: 44px;
  }

  /* === Actions View === */
  .actions-view {
    padding: var(--space-3);
  }

  .context-tabs {
    gap: var(--space-1);
    margin-bottom: var(--space-3);
  }

  .context-tab {
    padding: var(--space-2);
    font-size: var(--font-size-xs);
    flex: 1;
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .action-item {
    padding: var(--space-3);
    min-height: 56px;
  }

  .action-checkbox {
    font-size: var(--font-size-lg);
    padding: var(--space-1);
  }

  .action-content {
    font-size: var(--font-size-base);
  }

  .action-energy {
    font-size: 10px;
  }

  /* === Projects View === */
  .projects-view {
    padding: var(--space-3);
  }

  .project-section h2 {
    font-size: var(--font-size-base);
  }

  .project-card {
    padding: var(--space-3);
  }

  .project-header {
    margin-bottom: var(--space-2);
  }

  .project-meta {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .progress-bar {
    max-width: none;
    flex: 1;
  }

  /* === Areas View === */
  .areas-view {
    padding: var(--space-3);
  }

  .areas-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .area-card {
    padding: var(--space-3);
  }

  .area-card:hover {
    transform: none; /* Disable hover lift on mobile */
  }

  /* === Clarify Modal === */
  .clarify-modal-overlay {
    padding: var(--space-2);
    align-items: flex-end;
  }

  .clarify-modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.3s ease;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .clarify-header {
    padding: var(--space-3) var(--space-4);
  }

  .clarify-header h2 {
    font-size: var(--font-size-base);
  }

  .clarify-item-preview {
    padding: var(--space-3) var(--space-4);
  }

  .clarify-steps {
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
  }

  .step-indicator {
    min-width: max-content;
  }

  .step {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
  }

  .step-number {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .clarify-content {
    padding: var(--space-4);
  }

  .clarify-question h3 {
    font-size: var(--font-size-lg);
  }

  .option-buttons {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .option-btn {
    padding: var(--space-4) var(--space-3);
    min-height: 80px;
  }

  .keyboard-hint {
    display: none; /* Hide keyboard hints on mobile */
  }

  /* Form elements in modal */
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px; /* Prevents iOS zoom */
    padding: var(--space-3);
    min-height: 48px;
  }

  .picker-btn {
    padding: var(--space-3);
    min-height: 44px;
    flex: 1;
  }

  .form-actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .form-actions button,
  .form-actions .btn {
    width: 100%;
    min-height: 48px;
  }

  /* === Settings View === */
  .settings-view {
    padding: var(--space-3);
  }

  .settings-tabs {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .settings-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    flex: 1;
    text-align: center;
    min-height: 44px;
  }

  .settings-section {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .settings-section h2 {
    font-size: var(--font-size-lg);
  }

  .setting-group label {
    font-size: var(--font-size-sm);
  }

  .setting-select,
  .setting-input {
    font-size: 16px; /* Prevents iOS zoom */
    padding: var(--space-3);
    min-height: 48px;
  }

  .setting-actions {
    flex-direction: column;
  }

  .setting-actions .btn {
    width: 100%;
    min-height: 48px;
  }

  .api-key-input-wrapper {
    flex-direction: column;
  }

  .btn-icon {
    width: 100%;
    min-height: 48px;
  }

  .provider-list {
    grid-template-columns: 1fr;
  }

  .backup-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .backup-item .btn-sm {
    width: 100%;
  }

  /* === Login Screen === */
  .login-screen {
    padding: var(--space-4);
  }

  .login-container {
    max-width: 100%;
  }

  .login-card {
    padding: var(--space-4);
  }

  .login-logo .logo-icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    border-radius: 12px;
  }

  .login-logo h1 {
    font-size: var(--font-size-xl);
  }

  .login-btn {
    min-height: 52px;
    font-size: var(--font-size-base);
  }

  /* === View Headers === */
  .view-header {
    margin-bottom: var(--space-4);
  }

  .view-header h1 {
    font-size: var(--font-size-xl);
  }

  .view-description {
    font-size: var(--font-size-sm);
  }

  /* === Empty States === */
  .empty-state,
  .empty-state-enhanced {
    padding: var(--space-6) var(--space-4);
  }

  .empty-state-icon {
    font-size: 3rem;
  }

  .empty-state-enhanced h3 {
    font-size: var(--font-size-lg);
  }

  .empty-state-actions {
    flex-direction: column;
  }

  .empty-state-btn {
    width: 100%;
    min-height: 48px;
  }

  /* === Search View === */
  .search-view {
    padding: var(--space-3);
  }

  .search-controls {
    flex-direction: column;
  }

  .search-input-wrapper {
    width: 100%;
  }

  .search-input {
    font-size: 16px; /* Prevents iOS zoom */
    padding: var(--space-3);
  }

  .btn-secondary {
    width: 100%;
    min-height: 48px;
  }

  .filter-panel {
    padding: var(--space-3);
  }

  .filter-row {
    flex-direction: column;
  }

  .filter-row label {
    width: 100%;
  }

  .filter-select {
    font-size: 16px;
    min-height: 44px;
  }

  .result-item {
    padding: var(--space-3);
  }

  .result-item:hover {
    transform: none;
  }

  .result-title {
    white-space: normal;
    font-size: var(--font-size-sm);
  }

  .result-meta {
    flex-wrap: wrap;
  }

  /* === Weekly Review === */
  .review-view {
    padding: var(--space-3);
  }

  .review-header h1 {
    font-size: var(--font-size-xl);
  }

  .review-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .review-step {
    padding: var(--space-2);
  }

  .step-icon {
    font-size: var(--font-size-lg);
  }

  .step-title {
    font-size: var(--font-size-xs);
  }

  .step-section {
    padding: var(--space-4);
  }

  .step-section h2 {
    font-size: var(--font-size-lg);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .stat-card {
    padding: var(--space-3);
  }

  .stat-value {
    font-size: var(--font-size-xl);
  }

  .stat-label {
    font-size: var(--font-size-xs);
  }

  .checklist-item {
    padding: var(--space-3);
  }

  .balance-item {
    padding: var(--space-3);
  }

  .review-navigation {
    flex-direction: column;
  }

  .review-navigation button {
    width: 100%;
    min-height: 48px;
  }

  /* === Shortcuts Modal === */
  .shortcuts-modal {
    max-width: 95%;
    max-height: 90vh;
  }

  .shortcuts-header,
  .shortcuts-content {
    padding: var(--space-4);
  }

  .shortcut-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .shortcut-keys {
    align-self: flex-end;
  }

  /* === General Touch Improvements === */
  /* All interactive elements should have minimum 44px touch target */
  button,
  .btn,
  .btn-sm,
  .picker-btn,
  .option-btn,
  .context-tab,
  a.tab-item,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
  }

  /* Disable hover effects that don't make sense on touch */
  .project-card:hover,
  .area-card:hover,
  .action-item:hover,
  .inbox-item:hover {
    transform: none;
    box-shadow: none;
  }

  /* Better tap feedback */
  .project-card:active,
  .area-card:active,
  .action-item:active,
  .inbox-item:active,
  .result-item:active,
  .btn:active,
  .tab-item:active {
    background: var(--bg-tertiary);
    transform: scale(0.98);
  }

  /* Prevent text selection on interactive elements */
  .btn,
  .picker-btn,
  .option-btn,
  .context-tab,
  .tab-item,
  .nav-item {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* === Extra small screens (phones < 375px) === */
@media (max-width: 375px) {
  :root {
    --font-size-base: 0.9375rem;
  }

  #content {
    padding: var(--space-2);
  }

  .page-view,
  .inbox-view,
  .actions-view,
  .projects-view,
  .areas-view,
  .today-view,
  .scheduled-view,
  .settings-view,
  .search-view,
  .review-view {
    padding: var(--space-2);
  }

  .context-tabs {
    gap: 2px;
  }

  .context-tab {
    padding: var(--space-1);
    font-size: 10px;
  }

  .review-steps {
    grid-template-columns: 1fr 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .areas-grid {
    gap: var(--space-2);
  }

  .clarify-modal {
    border-radius: 12px 12px 0 0;
  }

  .option-buttons {
    gap: var(--space-2);
  }

  .option-btn {
    padding: var(--space-3) var(--space-2);
    min-height: 70px;
  }
}

/* ============================================
   Slash Command Menu
   ============================================ */

.slash-command-menu {
  position: absolute;
  z-index: 100;
  min-width: 250px;
  max-width: 320px;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: var(--space-2);
  animation: slideIn 0.15s ease-out;
}

.slash-command-menu.hidden {
  display: none;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slash-menu-header {
  font-size: var(--font-size-xs);
  color: hsl(var(--muted-foreground));
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-1);
}

.slash-menu-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.slash-menu-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.1s ease;
}

.slash-menu-item:hover,
.slash-menu-item.selected {
  background: hsl(var(--accent));
}

.slash-menu-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: hsl(var(--muted-foreground));
}

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

.slash-menu-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.slash-menu-description {
  font-size: var(--font-size-xs);
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}

/* Date Picker for /schedule command */
.slash-date-picker {
  position: absolute;
  z-index: 101;
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: var(--space-3);
}

.slash-date-picker input[type="date"] {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.slash-date-picker input[type="date"]:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Journal Date Picker */
.journal-date-picker {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: var(--space-3);
}

.journal-date-picker input[type="date"] {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  min-width: 160px;
}

.journal-date-picker input[type="date"]:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Scheduled Badge (inline date indicator) */
.scheduled-badge {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: var(--space-2);
  white-space: nowrap;
}

/* Block References ((block-id)) */
.block-ref {
  color: hsl(var(--primary));
  cursor: pointer;
  border-radius: 2px;
  padding: 0 2px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.block-ref:hover {
  background: hsl(var(--primary) / 0.1);
  text-decoration-style: solid;
}

.block-ref.missing {
  color: hsl(var(--destructive));
  opacity: 0.7;
}

.block-ref.missing:hover {
  opacity: 1;
}

/* Block Reference Hover Card */
.block-ref-hover-card {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: var(--space-3);
  max-width: 320px;
  min-width: 200px;
}

.block-ref-hover-card .hover-card-page {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: var(--space-2);
}

.block-ref-hover-card .hover-card-content {
  font-size: var(--font-size-sm);
  color: hsl(var(--muted-foreground));
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
}

.block-ref-hover-card .hover-card-error {
  font-size: var(--font-size-sm);
  color: hsl(var(--destructive));
}

.block-ref-hover-card .hover-card-id {
  font-size: var(--font-size-xs);
  color: hsl(var(--muted-foreground));
  margin-top: var(--space-2);
  font-family: monospace;
}

/* Block Content Wrapper (for rich text preview/edit toggle) */
.block-content-wrapper {
  flex: 1;
  min-width: 0;
}

.block-content-preview {
  min-height: 1.4em;
  line-height: 1.4;
  cursor: text;
}