/* ═══════════════════════════════════════════════════════════════════════════
   RightNow — app.css
   Mobile-first, 390px primary width (iPhone 14 Pro)
   Dark warm theme. Energy-first. No guilt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom properties ──────────────────────────────────────────────────── */
:root {
  /* Background stack */
  --bg:              #FDFBF7;
  --surface:         #F2F0EA;
  --surface-raised:  #FFFFFF;
  --border:          #e0cdb9;
  --border-subtle:   #ECEAE6;

  /* Text */
  --text:            #2C3531;
  --text-secondary:  #7E8580;
  --text-muted:      #A8A49F;

  /* Accent */
  --accent:          #C49A3C;
  --accent-dim:      rgba(196, 154, 60, 0.12);

  /* ── Energy level colors ────────────────────────────────────────────────
     Used for: check-in option cards, header badge, task energy tags       */

  /* Fog */
  --fog-bg:    #CBDCDA;
  --fog-text:  #2C3531;
  --fog-icon:  #5E6561;

  /* Low */
  --low-bg:    #B8D0C3;
  --low-text:  #2C3531;
  --low-border: transparent;

  /* Medium */
  --med-bg:    #E9D2A3;
  --med-text:  #2C3531;
  --med-border: transparent;

  /* Fired */
  --fired-bg:   #EFA886;
  --fired-text: #2C3531;
  --fired-border: transparent;

  /* ── Necessity colors ───────────────────────────────────────────────── */
  --must-color:   #D97D6E;
  --should-color: #C49A3C;
  --want-color:   #6AA184;

  /* ── Action tokens ──────────────────────────────────────────────────── */
  --action-pill-bg: #E6E3DB;
  --action-icon:    #5E6561;

  /* ── Spacing scale ──────────────────────────────────────────────────── */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --header-h:   56px;
  --nav-h:      64px;
  --max-w:      430px;

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    22px;
  --t-xl:    28px;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-std:  200ms;
}


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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  /* Prevent horizontal scroll */
  overflow-x: hidden;
  max-width: var(--max-w);
  margin: 0 auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ── App shell ──────────────────────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
}


/* ── Header ─────────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: var(--sp-16);
  padding-right: var(--sp-16);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
}

.header-wordmark {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
}


/* ── Energy badge (header) ──────────────────────────────────────────────── */
.energy-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.1px;
  border: 1px solid transparent;
  transition: opacity var(--dur-fast);
  white-space: nowrap;
}

.energy-badge:active {
  opacity: 0.75;
}

.energy-badge .ti {
  font-size: 15px;
  line-height: 1;
}

/* States — set by JS */
.energy-badge.energy-none {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
}

.energy-badge.energy-fog {
  background: var(--fog-bg);
  color: var(--fog-text);
  border-color: transparent;
}

.energy-badge.energy-low {
  background: var(--low-bg);
  color: var(--low-text);
  border-color: var(--low-border);
}

.energy-badge.energy-medium {
  background: var(--med-bg);
  color: var(--med-text);
  border-color: var(--med-border);
}

.energy-badge.energy-fired {
  background: var(--fired-bg);
  color: var(--fired-text);
  border-color: var(--fired-border);
}


/* ── Main content area ──────────────────────────────────────────────────── */
.main {
  flex: 1;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ── Screens ────────────────────────────────────────────────────────────── */
.screen {
  display: none;
  min-height: 100%;
  padding: var(--sp-16);
}

.screen.active {
  display: block;
}


/* ── Bottom navigation ──────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  z-index: 50;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  height: var(--nav-h);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: color var(--dur-fast);
  position: relative;
}

.nav-btn .ti {
  font-size: 22px;
  line-height: 1;
}

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

.nav-btn.active {
  color: var(--accent);
}

/* Active indicator dot */
.nav-btn.active::after {
  content: '';
  position: absolute;
  bottom: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}


/* ── Placeholder screen content ─────────────────────────────────────────── */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--header-h) - var(--nav-h) - 40px);
  text-align: center;
  padding: var(--sp-32);
  gap: var(--sp-12);
}

.placeholder-icon {
  font-size: 52px;
  color: var(--text-muted);
  line-height: 1;
}

.placeholder-title {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.4px;
}

.placeholder-body {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  max-width: 220px;
  line-height: 1.55;
}


/* ── Check-in overlay ───────────────────────────────────────────────────── */
.checkin-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: none;
  flex-direction: column;
  /* iOS safe areas */
  padding: calc(var(--sp-24) + env(safe-area-inset-top, 0px))
           var(--sp-16)
           calc(var(--sp-24) + env(safe-area-inset-bottom, 0px));
}

.checkin-overlay.visible {
  display: flex;
}

.checkin-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
}

.checkin-header {
  padding-top: 44px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: var(--sp-8);
}

.checkin-title {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: var(--sp-8);
}

.checkin-sub {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 2 × 2 grid of energy options */
.checkin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
}

.checkin-option {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: var(--sp-16);
  border-radius: 18px;
  border: 1.5px solid transparent;
  min-height: 130px;
  max-height: 160px;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity  var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}

.checkin-option:active {
  transform: scale(0.96);
  opacity: 0.85;
}

.co-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: auto;
  padding-bottom: var(--sp-12);
}

.co-label {
  display: block;
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.co-desc {
  display: block;
  font-size: var(--t-sm);
  margin-top: var(--sp-2);
  font-weight: 400;
  opacity: 0.75;
}

/* ── Energy option card colors ── */
.checkin-option.energy-fog {
  background: var(--fog-bg);
  color: var(--fog-text);
  border-color: #B8CCCB;
}

.checkin-option.energy-fog .co-icon {
  color: var(--fog-icon);
}

.checkin-option.energy-low {
  background: var(--low-bg);
  color: var(--low-text);
  border-color: var(--low-border);
}

.checkin-option.energy-medium {
  background: var(--med-bg);
  color: var(--med-text);
  border-color: var(--med-border);
}

.checkin-option.energy-fired {
  background: var(--fired-bg);
  color: var(--fired-text);
  border-color: var(--fired-border);
}


/* ── Utility ────────────────────────────────────────────────────────────── */

/* Ensure [hidden] always wins regardless of display overrides in component CSS */
[hidden] { display: none !important; }

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


/* ── No horizontal overflow guard ───────────────────────────────────────── */
.screen,
.checkin-overlay,
.header,
.bottom-nav {
  max-width: 100%;
  overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3 — Task cards, screens, forms, import
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Screen titles ──────────────────────────────────────────────────────── */
.screen-title {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  padding: var(--sp-8) 0 var(--sp-16);
}


/* ── Task card ──────────────────────────────────────────────────────────── */
.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.task-card {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity  var(--dur-fast),
              background var(--dur-fast);
  will-change: transform, opacity;
}

.task-card.expanded {
  background: var(--surface-raised);
}

.task-card.task-completing {
  animation: slide-right 0.3s var(--ease-out) forwards;
}

.task-card.task-deleting {
  animation: slide-left 0.25s var(--ease-out) forwards;
}

@keyframes slide-right {
  to { transform: translateX(110%); opacity: 0; }
}

@keyframes slide-left {
  to { transform: translateX(-110%); opacity: 0; }
}

/* Left necessity stripe */
.task-stripe {
  width: 5px;
  flex-shrink: 0;
}

.task-stripe--must   { background: var(--must-color);   }
.task-stripe--should { background: var(--should-color); }
.task-stripe--want   { background: var(--want-color);   }

/* Body */
.task-body {
  flex: 1;
  align-content: center;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-6);
  min-width: 0;
}

.task-text {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: var(--sp-4);
  cursor: pointer;
  word-break: break-word;
}

.task-text:hover {
  color: var(--accent);
}

.task-why {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: var(--sp-8);
  font-style: italic;
}

/* Tags */
.task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid;
  line-height: 1.5;
  white-space: nowrap;
}

.tag--necessity.tag--must   { background: #F9EAE7; color: var(--must-color);   }
.tag--necessity.tag--should { background: #F7EFE2; color: var(--should-color); }
.tag--necessity.tag--want   { background: #EFF5F2; color: #436B55;             }

.tag--energy-tiny   { background: #E6E9E7; color: #5E6561; }
.tag--energy-low    { background: var(--low-bg);          color: var(--low-text);       }
.tag--energy-medium { background: var(--med-bg);          color: var(--med-text);       }
.tag--energy-high   { background: var(--fired-bg);        color: var(--fired-text);     }

.tag--category {
  background: #FFFFFF;
  color: #2C3531;
}

.tag--project {
  background: #604100;
  color: #fcfcf8;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Task actions (complete + delete buttons) */
.task-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8);
  flex-shrink: 0;
  background: var(--action-pill-bg);
  border-radius: 10px;
  margin: 6px 6px 6px 0;
}

.task-btn {
  width: 30px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--action-icon);
  font-size: 18px;
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}

.task-btn:active {
  opacity: 0.7;
}

.task-btn--done:hover,
.task-btn--done:focus-visible {
  background: rgba(96,192,122,0.15);
  color: var(--want-color);
}

.task-btn--delete:hover,
.task-btn--delete:focus-visible {
  background: rgba(224,90,78,0.15);
  color: var(--must-color);
}

.task-btn--done:active {
  background: var(--want-color);
  color: #FFFFFF;
  opacity: 1;
}


/* NOW card: checkbox */
.task-now-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  padding: 8px 4px 10px 10px;
  flex-shrink: 0;
  cursor: pointer;
}

.task-now-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--want-color);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

/* NOW card: chevron */
.task-now-chevron-btn {
  width: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14px;
  padding-right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.task-now-chevron-btn:hover,
.task-now-chevron-btn:focus-visible {
  color: var(--text-secondary);
  outline: none;
}

.task-card--now.expanded .task-now-chevron-btn .ti {
  display: inline-block;
  transform: rotate(180deg);
  transition: transform var(--dur-fast);
}

/* NOW card: collapsed title — single line, truncated */
.task-card--now .task-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}

/* NOW card: expanded title — wraps */
.task-card--now.expanded .task-text {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  margin-bottom: var(--sp-4);
}

/* NOW card: hide when collapsed */
.task-card--now .task-why,
.task-card--now .task-tags,
.task-card--now .task-btn--remove-now {
  display: none;
}

/* NOW card: show when expanded */
.task-card--now.expanded .task-why {
  display: block;
}

.task-card--now.expanded .task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.task-card--now.expanded .task-btn--remove-now {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  height: 32px;
  padding: 0 var(--sp-12);
  background: rgba(217, 125, 110, 0.1);
  border: 1px solid rgba(217, 125, 110, 0.25);
  border-radius: 8px;
  color: var(--must-color);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* NOW card: suppress old .task-actions */
.task-card--now .task-actions {
  display: none;
}

/* NOW card: completed state */
.task-card--now.task-done .task-text {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}

.task-card--now.task-done .task-body {
  opacity: 0.5;
}

/* Inline edit input */
.task-edit-input {
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--text);
  background: var(--surface-raised);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 4px 8px;
  width: 100%;
  margin-bottom: var(--sp-4);
  outline: none;
}

/* Swipe delete placeholder */
.task-placeholder {
  overflow: hidden;
  transition: height 0.2s ease;
}


/* ── Now screen ─────────────────────────────────────────────────────────── */
.now-header {
  padding: var(--sp-8) 0 var(--sp-12);
}

.now-title {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
}

.see-all-btn {
  display: block;
  width: 100%;
  margin-top: var(--sp-16);
  padding: var(--sp-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  transition: background var(--dur-fast);
}

.see-all-btn:active {
  background: var(--surface-raised);
}


/* ── Tasks screen ───────────────────────────────────────────────────────── */
.tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-8) 0 var(--sp-4);
}

.task-section {
  margin-bottom: var(--sp-24);
}

.task-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-8) 0 var(--sp-8);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--sp-8);
}

.task-section-title {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.task-section-count {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-raised);
  padding: 1px 8px;
  border-radius: 10px;
}

/* ── Category accordion ───────────────────────────────────────────────────── */

.category-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  min-height: 44px;
}

.category-name {
  flex: 1;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.category-count-badge {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
  min-width: 24px;
  text-align: center;
}

.category-chevron {
  font-size: 16px;
  color: var(--text-muted);
  transition: transform var(--dur-fast);
  flex-shrink: 0;
}

.category-task-list {
  display: none;
}

.category-section.expanded .category-task-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.category-section.expanded .category-chevron {
  transform: rotate(180deg);
}

.category-section.expanded .category-count-badge {
  display: none;
}

.category-section.expanded .category-header {
  border-bottom: none;
}

/* Sort Later section */
.task-section--dump .task-section-title {
  color: var(--accent);
}

.task-card--dump {
  flex-direction: column;
  border-color: var(--border);
}

.task-sort-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-12);
}

.task-sort-header .task-text {
  flex: 1;
  cursor: default;
  margin-bottom: 0;
}

.task-sort-header .task-text:hover {
  color: var(--text);
}

.task-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: 0 var(--sp-12) var(--sp-12);
}

.cat-assign-select {
  margin-top: var(--sp-8);
}

/* ── Category field (add/edit forms) ─────────────────────────────────────── */

.cat-field-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.add-cat-input-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}


/* ── Add screen ─────────────────────────────────────────────────────────── */
.add-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-20);
  gap: 0;
}

.add-tab {
  flex: 1;
  padding: var(--sp-12) var(--sp-8);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.1px;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.add-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.add-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Form fields */
.add-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.form-label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}

.form-hint {
  font-weight: 400;
  color: var(--text-muted);
}

.required-star {
  color: var(--must-color);
}

.form-textarea {
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-12);
  resize: none;
  outline: none;
  line-height: 1.5;
  transition: border-color var(--dur-fast);
}

.form-textarea:focus {
  border-color: var(--accent);
}

.form-input {
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-12);
  outline: none;
  transition: border-color var(--dur-fast);
  width: 100%;
}

.form-input:focus {
  border-color: var(--accent);
}

/* Selector rows (energy / necessity) */
.selector-row {
  display: flex;
  gap: var(--sp-8);
}

.selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.selector-btn {
  flex: 1;
  min-width: 0;
  padding: var(--sp-8) var(--sp-4);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}

.selector-grid .selector-btn {
  flex: 0 0 auto;
  padding: var(--sp-8) var(--sp-12);
}

.selector-btn[aria-pressed="true"] {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.selector-btn--must[aria-pressed="true"]   { background: rgba(224,90,78,0.12);  border-color: var(--must-color);   color: var(--must-color);   }
.selector-btn--should[aria-pressed="true"] { background: rgba(212,150,42,0.12); border-color: var(--should-color); color: var(--should-color); }
.selector-btn--want[aria-pressed="true"]   { background: rgba(96,192,122,0.12); border-color: var(--want-color);   color: var(--want-color);   }

.selector-btn[data-value="tiny"][aria-pressed="true"]   { background: #E6E9E7;         border-color: #5E6561;         color: #5E6561;           }
.selector-btn[data-value="low"][aria-pressed="true"]    { background: var(--low-bg);   border-color: var(--low-bg);   color: var(--low-text);   }
.selector-btn[data-value="medium"][aria-pressed="true"] { background: var(--med-bg);   border-color: var(--med-bg);   color: var(--med-text);   }
.selector-btn[data-value="high"][aria-pressed="true"]   { background: var(--fired-bg); border-color: var(--fired-bg); color: var(--fired-text); }

.selector-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Error and submit */
.form-error {
  font-size: var(--t-sm);
  color: var(--must-color);
  padding: var(--sp-8) var(--sp-12);
  background: rgba(224,90,78,0.1);
  border-radius: 8px;
  border: 1px solid rgba(224,90,78,0.2);
}

.submit-btn {
  width: 100%;
  padding: var(--sp-16);
  background: var(--accent);
  border: none;
  border-radius: 14px;
  color: #111010;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.2px;
  transition: opacity var(--dur-fast);
  margin-top: var(--sp-4);
}

.submit-btn:active {
  opacity: 0.8;
}

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

.submit-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ── CSV Import panel ───────────────────────────────────────────────────── */
.import-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.import-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-32) var(--sp-16);
  border: 2px dashed var(--border);
  border-radius: 16px;
  text-align: center;
}

.import-icon {
  font-size: 48px;
  color: var(--text-muted);
  line-height: 1;
}

.import-hint {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 260px;
}

.import-hint--sm {
  font-size: 11px;
  color: var(--text-muted);
}

.import-hint--warn {
  color: var(--accent);
}

/* Category reference chips (shown above upload button) */
.import-cat-reference {
  font-size: 11px;
  color: var(--text-muted);
  text-align: left;
  width: 100%;
  max-width: 300px;
}

.import-cat-ref-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sp-4);
  color: var(--text-secondary);
}

.import-cat-ref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.import-cat-ref-chip {
  display: inline-block;
  padding: 2px var(--sp-8);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Stats header chips */
.import-stats-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-12);
}

.import-stat {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-10);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

.import-stat--ok   { background: rgba(106,161,132,0.15); color: var(--want-color);   }
.import-stat--warn { background: rgba(212,150,42,0.12);  color: var(--should-color); }
.import-stat--err  { background: rgba(217,125,110,0.15); color: var(--must-color);   }
.import-stat--muted{ background: var(--surface-raised); color: var(--text-secondary);}

/* Section headers */
.import-section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--sp-8) 0;
}

.import-section-header--warn { color: var(--should-color); }
.import-section-header--ok   { color: var(--want-color);   }

/* Attention section */
.import-attention-section {
  margin-bottom: var(--sp-16);
}

.import-attention-row {
  padding: var(--sp-10) var(--sp-12);
  border-radius: 10px;
  margin-bottom: var(--sp-8);
  border: 1px solid var(--border);
}

.import-row--suggestion {
  border-color: rgba(212,150,42,0.35);
  background: rgba(212,150,42,0.06);
}

.import-row--none {
  border-color: rgba(224,90,78,0.35);
  background: rgba(224,90,78,0.06);
}

.import-attention-text {
  font-size: 13px;
  color: var(--text);
  margin: 0 0 var(--sp-8) 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-attention-mapping {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.import-attention-raw {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  flex-shrink: 0;
}

.import-attention-arrow {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.import-attention-select {
  flex: 1;
  min-width: 120px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-4) var(--sp-8);
  outline: none;
}

.import-attention-select:focus {
  border-color: var(--accent);
}

.import-suggestion-badge {
  font-size: 11px;
  color: var(--should-color);
  background: rgba(212,150,42,0.1);
  padding: 2px var(--sp-8);
  border-radius: 100px;
  flex-shrink: 0;
}

/* Matched section */
.import-matched-section {
  margin-bottom: var(--sp-16);
}

.import-table--compact td,
.import-table--compact th {
  font-size: 12px;
}

.import-cat-ok {
  color: var(--want-color);
}

.import-fuzzy-badge {
  display: inline-block;
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--surface-raised);
  padding: 1px var(--sp-4);
  border-radius: 100px;
  margin-left: var(--sp-4);
}

/* Live summary bar */
.import-live-summary {
  padding: var(--sp-10) var(--sp-12);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin: var(--sp-12) 0;
  background: var(--surface-raised);
  color: var(--text-secondary);
}

.import-live-summary--ok  { background: rgba(96,192,122,0.1);  color: var(--want-color);   }
.import-live-summary--warn{ background: rgba(212,150,42,0.1);  color: var(--should-color); }
.import-live-summary--err { background: rgba(224,90,78,0.1);   color: var(--must-color);   }

.upload-btn {
  display: inline-block;
  padding: var(--sp-12) var(--sp-24);
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast);
}

.upload-btn:hover,
.upload-btn:focus-within {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.import-summary {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  padding: var(--sp-8) 0;
}

.import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
}

.import-table th {
  text-align: left;
  padding: var(--sp-8) var(--sp-8);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.import-table td {
  padding: var(--sp-8) var(--sp-8);
  border-top: 1px solid var(--border-subtle);
  color: var(--text);
  vertical-align: top;
}

.import-row--incomplete td {
  color: var(--accent);
}

.import-more {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.import-actions {
  display: flex;
  gap: var(--sp-8);
}

.import-actions .selector-btn {
  flex: 0 0 auto;
  padding: var(--sp-12) var(--sp-20);
}

.import-actions .submit-btn {
  flex: 1;
  margin-top: 0;
}

.import-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-32) var(--sp-16);
  text-align: center;
}

.import-success .ti {
  font-size: 48px;
  color: var(--want-color);
}

.import-success p {
  font-size: var(--t-base);
  color: var(--text-secondary);
}

.import-success .submit-btn {
  width: auto;
  padding: var(--sp-12) var(--sp-32);
  margin-top: var(--sp-8);
}


/* ── Toast notification ─────────────────────────────────────────────────── */
.rn-toast {
  position: fixed;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-8) var(--sp-16);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-std), transform var(--dur-std) var(--ease-out);
  z-index: 200;
  pointer-events: none;
  max-width: calc(var(--max-w) - 32px);
  text-overflow: ellipsis;
  overflow: hidden;
}

.rn-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.rn-toast--error {
  background: rgba(224,90,78,0.15);
  border-color: rgba(224,90,78,0.3);
  color: var(--must-color);
}


/* ── Undo snackbar ──────────────────────────────────────────────────────── */
.rn-snackbar {
  position: fixed;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
  left: var(--sp-16);
  right: var(--sp-16);
  max-width: calc(var(--max-w) - 32px);
  margin: 0 auto;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--sp-12) var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  font-size: var(--t-sm);
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-std), transform var(--dur-std) var(--ease-out);
  z-index: 150;
}

.rn-snackbar.visible {
  opacity: 1;
  transform: translateY(0);
}

.snackbar-undo {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0 var(--sp-4);
  flex-shrink: 0;
}

.snackbar-undo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4 — Project layer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tier color tokens ──────────────────────────────────────────────────── */
:root {
  --tier-active-color:     #C49A3C;               /* amber — same as accent */
  --tier-active-bg:        rgba(196,154,60,0.12);
  --tier-queued-color:     #5B9BD5;               /* steel blue */
  --tier-queued-bg:        rgba(91,155,213,0.12);
  --tier-blocked-color:    #E05A4E;               /* red-orange */
  --tier-blocked-bg:       rgba(224,90,78,0.12);
  --tier-mothballed-color: #6B6865;               /* muted warm gray */
  --tier-mothballed-bg:    rgba(107,104,101,0.10);
  --tier-someday-color:    #9B7DC8;               /* soft purple */
  --tier-someday-bg:       rgba(155,125,200,0.12);
}

/* ── Tier icon colors (used across cards, badges, section headers) ──────── */
.tier-icon--active     { color: var(--tier-active-color);     }
.tier-icon--queued     { color: var(--tier-queued-color);     }
.tier-icon--blocked    { color: var(--tier-blocked-color);    }
.tier-icon--mothballed { color: var(--tier-mothballed-color); }
.tier-icon--someday    { color: var(--tier-someday-color);    }


/* ── Projects screen header ─────────────────────────────────────────────── */
.projects-header {
  padding: var(--sp-8) 0 var(--sp-4);
}


/* ── Tier section (collapsible) ─────────────────────────────────────────── */
.proj-section {
  margin-bottom: var(--sp-8);
}

.proj-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px var(--sp-4);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  color: var(--text-secondary);
  gap: var(--sp-8);
}

.proj-section-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.proj-section-left {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex: 1;
  min-width: 0;
}

.proj-section-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.proj-section-title {
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.proj-section-count {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-raised);
  padding: 1px 8px;
  border-radius: 10px;
}

.proj-section-chevron {
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--dur-fast);
}

.proj-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
}

.proj-list--hidden {
  display: none;
}


/* ── Project card ───────────────────────────────────────────────────────── */
.proj-card {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--dur-fast);
}

.proj-card:active {
  background: var(--surface-raised);
}

.proj-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Mothballed cards are visually quieter */
.proj-card--mothballed {
  opacity: 0.7;
}

.proj-card--someday {
  opacity: 0.6;
}

/* Left tier stripe */
.proj-stripe {
  width: 4px;
  flex-shrink: 0;
}

.proj-stripe--active     { background: var(--tier-active-color);     }
.proj-stripe--queued     { background: var(--tier-queued-color);      }
.proj-stripe--blocked    { background: var(--tier-blocked-color);     }
.proj-stripe--mothballed { background: var(--tier-mothballed-color);  }
.proj-stripe--someday    { background: var(--tier-someday-color);     }

.proj-card-body {
  flex: 1;
  padding: var(--sp-12);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.proj-card-name {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}

.proj-card-why {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  /* One line, ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-card-blocker {
  font-size: var(--t-sm);
  color: var(--tier-blocked-color);
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}

.proj-card-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-4);
}

/* Tier badge (card and detail) */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  border: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: opacity var(--dur-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.tier-badge:active  { opacity: 0.7; }

.tier-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tier-badge--active     { background: var(--tier-active-bg);     color: var(--tier-active-color);     }
.tier-badge--queued     { background: var(--tier-queued-bg);     color: var(--tier-queued-color);     }
.tier-badge--blocked    { background: var(--tier-blocked-bg);    color: var(--tier-blocked-color);    }
.tier-badge--mothballed { background: var(--tier-mothballed-bg); color: var(--tier-mothballed-color); }
.tier-badge--someday    { background: var(--tier-someday-bg);    color: var(--tier-someday-color);    }

.proj-task-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* New project button */
.new-project-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  width: 100%;
  margin-top: var(--sp-16);
  margin-bottom: var(--sp-32);
  padding: var(--sp-16);
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  color: var(--text-secondary);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.new-project-btn:active,
.new-project-btn:focus-visible {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}


/* ── Project detail panel (slides in from right) ────────────────────────── */
.project-detail-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  transform: translateX(100vw);
  transition: transform 0.25s var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: var(--max-w);
  margin: 0 auto;
  /* Pad for left/right on wide screens */
  left: max(0px, calc(50vw - var(--max-w) / 2));
  right: max(0px, calc(50vw - var(--max-w) / 2));
}

.project-detail-panel.visible {
  transform: translateX(0);
}

/* Sticky header inside detail panel */
.proj-detail-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: calc(var(--sp-16) + env(safe-area-inset-top, 0px)) var(--sp-16) var(--sp-16);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}

.proj-detail-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface);
  border: none;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 20px;
  flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.proj-detail-back:active,
.proj-detail-back:focus-visible {
  background: var(--accent-dim);
  color: var(--accent);
  outline: none;
}

.proj-detail-title {
  flex: 1;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.proj-detail-tier-btn {
  flex-shrink: 0;
}

/* Detail body */
.proj-detail-body {
  padding: var(--sp-16);
  padding-bottom: calc(var(--sp-32) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.proj-detail-why {
  font-size: var(--t-base);
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}

.proj-detail-blocker {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  padding: var(--sp-12);
  background: var(--tier-blocked-bg);
  border: 1px solid rgba(224,90,78,0.25);
  border-radius: 10px;
  font-size: var(--t-sm);
  color: var(--tier-blocked-color);
  line-height: 1.5;
}

.proj-detail-mothball-note {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-12);
  background: var(--tier-mothballed-bg);
  border: 1px solid rgba(107,104,101,0.2);
  border-radius: 10px;
  font-size: var(--t-sm);
  color: var(--tier-mothballed-color);
  line-height: 1.5;
}

.proj-detail-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--border-subtle);
}

.proj-detail-task-title {
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.proj-detail-task-count {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-raised);
  padding: 1px 8px;
  border-radius: 10px;
}

.proj-detail-no-tasks {
  font-size: var(--t-sm);
  color: var(--text-muted);
  text-align: center;
  padding: var(--sp-20) 0;
}

.proj-detail-loading {
  display: flex;
  justify-content: center;
  padding: var(--sp-48);
}

.proj-spin {
  font-size: 32px;
  color: var(--text-muted);
  animation: spin 1s linear infinite;
}

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

/* Add task mini-form in detail */
.proj-add-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-16);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: var(--sp-8);
}

.proj-add-label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.proj-add-input {
  font-size: var(--t-sm);
}

.proj-add-error {
  font-size: var(--t-sm);
  color: var(--must-color);
}

.proj-add-submit {
  margin-top: var(--sp-4);
}

.proj-detail-task-list {
  margin-top: var(--sp-8);
}


/* ── Bottom sheet (tier picker + create project) ────────────────────────── */
.tier-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 120;
  opacity: 0;
  transition: opacity var(--dur-std);
}

.tier-picker-backdrop.visible {
  opacity: 1;
}

.tier-picker-sheet,
.create-proj-sheet {
  position: fixed;
  left: max(0px, calc(50vw - var(--max-w) / 2));
  right: max(0px, calc(50vw - var(--max-w) / 2));
  bottom: 0;
  z-index: 130;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: var(--sp-20) var(--sp-16) calc(var(--sp-32) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  transform: translateY(100%);
  transition: transform 0.25s var(--ease-out);
  max-height: 80dvh;
  overflow-y: auto;
}

.tier-picker-sheet.visible,
.create-proj-sheet.visible {
  transform: translateY(0);
}

.sheet-title {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: var(--sp-4);
}

.sheet-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.sheet-option {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  padding: var(--sp-12) var(--sp-12);
  background: none;
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: var(--t-base);
  font-weight: 500;
  text-align: left;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.sheet-option:active,
.sheet-option:focus-visible {
  background: var(--surface-raised);
  outline: none;
}

.sheet-option--current {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.sheet-option-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.sheet-actions {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.sheet-actions .selector-btn {
  flex: 0 0 auto;
  padding: var(--sp-12) var(--sp-20);
}


/* ── Coaching banner ──────────────────────────────────────────────────────── */

.coaching-banner {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0 var(--sp-16);
  border-radius: 10px;
  border: 1px solid transparent;
  border-left-width: 3px;
  transition: max-height 300ms var(--ease-out), opacity 200ms ease,
              margin 300ms var(--ease-out), padding 300ms var(--ease-out);
  padding: 0 var(--sp-16);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
}

.coaching-banner--visible {
  max-height: 200px;
  opacity: 1;
  margin: var(--sp-8) var(--sp-16) 0;
  padding: var(--sp-12) var(--sp-16);
}

.coaching-banner--loading {
  background: var(--surface);
  border-color: var(--border);
  border-left-color: var(--border);
}

.coaching-banner--direct {
  background: var(--surface);
  border-color: var(--border);
  border-left-color: var(--accent);
}

.coaching-banner--sardonic {
  background: var(--surface);
  border-color: var(--border);
  border-left-color: var(--text-secondary);
}

.coaching-banner--inspirational {
  background: var(--surface);
  border-color: var(--border);
  border-left-color: var(--fired-text);
}

.coaching-text {
  flex: 1;
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

.coaching-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  margin-top: 1px;
  transition: color 120ms, background 120ms;
}

.coaching-dismiss:hover,
.coaching-dismiss:focus-visible {
  color: var(--text-secondary);
  background: var(--surface-raised);
  outline: none;
}

.coaching-loading-text {
  font-size: var(--t-base);
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.coaching-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: coaching-spin 0.7s linear infinite;
  flex-shrink: 0;
  margin-top: 3px;
}

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


/* ── Stuck indicator tag ─────────────────────────────────────────────────── */

.tag--stuck {
  background: rgba(196, 154, 60, 0.08);
  border: 1px solid rgba(196, 154, 60, 0.22);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: var(--t-xs);
  display: inline-flex;
  align-items: center;
}

.tag--stuck .ti {
  font-size: 11px;
}


/* ── Done for today button ───────────────────────────────────────────────── */

.done-for-today-btn {
  display: block;
  width: calc(100% - var(--sp-32));
  margin: var(--sp-24) auto var(--sp-8);
  padding: var(--sp-16);
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: var(--t-sm);
  font-family: var(--font);
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms, color 150ms;
}

.done-for-today-btn:hover,
.done-for-today-btn:focus-visible {
  border-color: var(--border);
  color: var(--text-secondary);
  outline: none;
}


/* ── Journal button (header) ─────────────────────────────────────────────── */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.journal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 17px;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}

.journal-btn:hover,
.journal-btn:focus-visible {
  background: var(--surface);
  color: var(--text);
  outline: none;
}

.journal-btn:active {
  opacity: 0.7;
}


/* ── Good Moment overlay ─────────────────────────────────────────────────── */

.moment-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: none;
  flex-direction: column;
  padding: calc(var(--sp-24) + env(safe-area-inset-top, 0px))
           0
           calc(var(--sp-24) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.moment-overlay.visible {
  display: flex;
}

.moment-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--sp-16);
}

.moment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 44px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: var(--sp-24);
  flex-shrink: 0;
}

.moment-title {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
}

.moment-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 18px;
  transition: color var(--dur-fast), background var(--dur-fast);
}

.moment-close:hover,
.moment-close:focus-visible {
  color: var(--text);
  background: var(--surface-raised);
  outline: none;
}

.moment-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  flex-shrink: 0;
  padding-bottom: var(--sp-32);
}

.moment-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--sp-16);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
  resize: none;
  min-height: 120px;
  transition: border-color var(--dur-fast);
}

.moment-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.moment-textarea::placeholder {
  color: var(--text-muted);
}

.moment-confirm {
  font-size: var(--t-sm);
  color: var(--want-color);
  padding: var(--sp-4) 0;
  line-height: 1.4;
}

.moment-error {
  font-size: var(--t-sm);
  color: var(--must-color);
  padding: var(--sp-4) 0;
}

/* Previous moments list */

.moment-list {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-24);
  padding-bottom: var(--sp-48);
}

.moment-list-heading {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-16);
}

.moment-list-hint {
  font-size: var(--t-sm);
  color: var(--text-muted);
  padding: var(--sp-8) 0;
}

.moment-item {
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

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

.moment-item-text {
  font-size: var(--t-base);
  color: var(--text);
  line-height: 1.5;
}

.moment-item-date {
  font-size: var(--t-xs);
  color: var(--text-muted);
}


/* ── Done screen ─────────────────────────────────────────────────────────── */

.done-screen-header {
  padding: var(--sp-20) var(--sp-16) var(--sp-4);
  flex-shrink: 0;
}

.done-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16) var(--sp-24);
}

.done-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.done-stat-number {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--text);
  line-height: 1;
}

.done-stat-label {
  font-size: var(--t-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.done-group {
  margin-bottom: var(--sp-8);
}

.done-group-header {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-16) var(--sp-16) var(--sp-8);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

.done-entry {
  padding: var(--sp-12) var(--sp-16);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-12);
  transition: opacity 0.25s ease;
}

.done-entry:last-child {
  border-bottom: none;
}

.done-entry--removing {
  opacity: 0;
  pointer-events: none;
}

.done-entry-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.done-entry-text {
  font-size: var(--t-base);
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
  line-height: 1.4;
}

.done-entry-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.done-time {
  font-size: var(--t-xs);
  color: var(--text-muted);
  margin-left: auto;
}

.done-undone-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.done-undone-btn:hover,
.done-undone-btn:focus-visible {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}


/* ── Deleted tasks section (Done screen) ─────────────────────────────────── */

.deleted-section {
  margin: var(--sp-24) 0 var(--sp-16);
  border-top: 1px solid var(--border-subtle);
}

.deleted-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-12) var(--sp-16);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--t-sm);
  text-align: left;
}

.deleted-section-toggle:hover,
.deleted-section-toggle:focus-visible {
  color: var(--text-secondary);
  outline: none;
}

.deleted-section-label {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.deleted-section-chevron {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.deleted-section-body {
  padding: 0 var(--sp-16) var(--sp-16);
}

.deleted-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--sp-16);
}

.deleted-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-10) var(--sp-12);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.3s ease;
  margin-bottom: 2px;
}

.deleted-entry:hover,
.deleted-entry:focus-visible {
  background: var(--surface);
  outline: none;
}

.deleted-entry--restoring {
  opacity: 0.4;
  pointer-events: none;
}

.deleted-entry-text {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.deleted-entry-date {
  font-size: var(--t-xs);
  color: var(--text-muted);
  opacity: 0.6;
}

.deleted-flush-wrap {
  margin-top: var(--sp-8);
}

.deleted-flush-btn {
  width: 100%;
  padding: var(--sp-10) var(--sp-16);
  background: none;
  border: 1px solid #5C1E1E;
  border-radius: 8px;
  color: #C0504A;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.deleted-flush-btn:hover,
.deleted-flush-btn:focus-visible {
  background: rgba(192, 80, 74, 0.08);
  outline: none;
}

.deleted-flush-confirm-msg {
  padding: var(--sp-12);
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid #5C1E1E;
}

.deleted-flush-confirm-msg p {
  margin: 0 0 var(--sp-12);
  font-size: var(--t-sm);
  color: var(--text-secondary);
}

.deleted-flush-confirm-actions {
  display: flex;
  gap: var(--sp-8);
}

.deleted-flush-confirm-btn {
  flex: 1;
  padding: var(--sp-8) var(--sp-12);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.deleted-flush-confirm-btn--cancel {
  background: var(--surface-raised);
  color: var(--text-secondary);
}

.deleted-flush-confirm-btn--cancel:hover {
  background: var(--border);
}

.deleted-flush-confirm-btn--confirm {
  background: rgba(192, 80, 74, 0.15);
  color: #C0504A;
  border-color: #5C1E1E;
}

.deleted-flush-confirm-btn--confirm:hover {
  background: rgba(192, 80, 74, 0.25);
}


/* ── Stuck nudge section ─────────────────────────────────────────────────── */

.stuck-section {
  margin: var(--sp-16) var(--sp-16) 0;
}

.stuck-section-header {
  margin-bottom: var(--sp-8);
}

.stuck-section-title {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stuck-nudge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 6px;
  padding: var(--sp-12) var(--sp-16);
  cursor: pointer;
  transition: background var(--dur-fast);
}

.stuck-nudge-card:hover,
.stuck-nudge-card:focus-visible {
  background: var(--surface-raised);
  outline: none;
}

.stuck-nudge-text {
  font-size: var(--t-base);
  color: var(--text-primary);
  margin: 0 0 var(--sp-8);
  line-height: 1.4;
}

.stuck-nudge-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.stuck-nudge-age {
  font-size: var(--t-xs);
  color: var(--accent);
}

.stuck-dismiss-btn {
  display: block;
  margin-top: var(--sp-6);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--t-xs);
  font-family: var(--font);
  cursor: pointer;
  padding: var(--sp-4) 0;
  transition: color var(--dur-fast);
}

.stuck-dismiss-btn:hover,
.stuck-dismiss-btn:focus-visible {
  color: var(--text-secondary);
  outline: none;
}


/* ── Comeback choice buttons ─────────────────────────────────────────────── */

.comeback-choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}

.comeback-choice-btn {
  display: block;
  width: 100%;
  padding: var(--sp-12) var(--sp-16);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: var(--t-sm);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.comeback-choice-btn:hover,
.comeback-choice-btn:focus-visible {
  background: rgba(0, 0, 0, 0.07);
  border-color: var(--border-subtle);
  outline: none;
}


/* ── Search overlay ──────────────────────────────────────────────────────── */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--bg);
  display: none;
  flex-direction: column;
  padding-top: calc(var(--sp-16) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom, 0px));
}

.search-overlay.visible {
  display: flex;
}

.search-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 var(--sp-16);
}

.search-header {
  flex-shrink: 0;
  padding-top: 44px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: var(--sp-16);
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 var(--sp-12);
  transition: border-color var(--dur-fast);
}

.search-input-wrap:focus-within {
  border-color: var(--accent);
}

.search-input-icon {
  color: var(--text-muted);
  font-size: 18px;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1;
  padding: var(--sp-14) 0;
}

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

.search-input::-webkit-search-cancel-button {
  display: none;
}

.search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  flex-shrink: 0;
  transition: color var(--dur-fast), background var(--dur-fast);
}

.search-close:hover,
.search-close:focus-visible {
  color: var(--text);
  background: var(--border);
  outline: none;
}

.search-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.search-hint {
  font-size: var(--t-sm);
  color: var(--text-muted);
  padding: var(--sp-16) 0;
  text-align: center;
}

.search-section {
  margin-bottom: var(--sp-24);
}

.search-section-title {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-8) 0 var(--sp-8);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--sp-4);
}

.search-result-row {
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--dur-fast);
  border-radius: 6px;
  padding-left: var(--sp-8);
  padding-right: var(--sp-8);
}

.search-result-row:hover,
.search-result-row:focus-visible {
  background: var(--surface);
  outline: none;
}

.search-result-row:last-child {
  border-bottom: none;
}

.search-result-label {
  font-size: var(--t-base);
  color: var(--text);
  line-height: 1.4;
  margin: 0 0 var(--sp-4);
}

.search-result-sub {
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 var(--sp-4);
}

.search-result-badge {
  display: inline-block;
  font-size: var(--t-xs);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: capitalize;
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.search-result-badge--must    { background: rgba(229,72,77,0.12);  color: var(--must-color);  border-color: rgba(229,72,77,0.25); }
.search-result-badge--should  { background: rgba(196,154,60,0.12); color: var(--accent);      border-color: rgba(196,154,60,0.25); }
.search-result-badge--active  { background: rgba(74,222,128,0.1);  color: #4ade80;            border-color: rgba(74,222,128,0.2); }

/* ── Task edit modal ────────────────────────────────────────────────────── */

.task-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.task-edit-inner {
  background: var(--surface);
  width: 100%;
  max-width: var(--max-w);
  min-height: 100%;
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.task-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 44px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-8);
}

.task-edit-title {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.task-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.form-select {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px var(--sp-12);
  font-size: var(--t-base);
  font-family: var(--font);
  appearance: none;
  -webkit-appearance: none;
}

.form-select:focus {
  outline: none;
  border-color: var(--accent);
}

.task-body[role="button"] {
  cursor: pointer;
  outline: none;
}

.task-body[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 10px;
}

.search-mark {
  background: rgba(196, 154, 60, 0.25);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 1px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Phase 10 — Task selection model
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Task picker overlay ──────────────────────────────────────────────────── */

.picker-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  pointer-events: none;
}

.picker-overlay.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.picker-inner {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-16);
  padding-top: 0;
  padding-bottom: 88px;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: var(--max-w);
}

.picker-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(44px + env(safe-area-inset-top));
  padding-top: calc(44px + env(safe-area-inset-top, 0px));
  padding-bottom: var(--sp-12);
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: var(--max-w);
}

.picker-title {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.picker-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

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

.picker-controls {
  padding-bottom: var(--sp-16);
}

.picker-show-all-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--t-sm);
  user-select: none;
}

.picker-show-all-cb {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

.picker-section {
  margin-bottom: var(--sp-20);
}

.picker-section-title {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 0 var(--sp-8);
}

.picker-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-12);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: var(--sp-8);
  background: var(--surface);
  border: 1px solid transparent;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.picker-item:hover,
.picker-item:focus-within {
  background: var(--surface-raised);
}

.picker-item--selected {
  background: rgba(45, 158, 107, 0.12);
  border-color: rgba(45, 158, 107, 0.55);
}

.picker-item--selected:hover,
.picker-item--selected:focus-within {
  background: rgba(45, 158, 107, 0.12);
  border-color: rgba(45, 158, 107, 0.55);
}

/* Picker: right-side action icon */
.picker-item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  padding-left: var(--sp-8);
}

/* Unselected: show plus, hide check */
.picker-icon--add {
  display: inline-block;
  color: var(--text-muted);
}

.picker-icon--done {
  display: none;
  color: #2D9E6B;
}

/* Selected: hide plus, show check */
.picker-item--selected .picker-icon--add {
  display: none;
}

.picker-item--selected .picker-icon--done {
  display: inline-block;
}

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

.picker-item-text {
  font-size: var(--t-base);
  color: var(--text);
  margin: 0 0 var(--sp-4);
  line-height: 1.4;
}

.picker-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.picker-confirm-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-12) var(--sp-16);
  padding-bottom: calc(var(--sp-12) + env(safe-area-inset-bottom));
  padding-bottom: calc(var(--sp-12) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
}

.picker-count {
  color: var(--text-secondary);
  font-size: var(--t-sm);
  flex-shrink: 0;
}

.picker-confirm-btn {
  padding: 10px 20px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: var(--t-base);
  font-family: var(--font);
  cursor: pointer;
  transition: opacity var(--dur-fast) ease;
}

.picker-confirm-btn.picker-confirm--empty {
  background: var(--surface);
  color: var(--text-secondary);
}

.picker-empty,
.picker-loading {
  color: var(--text-secondary);
  text-align: center;
  padding: var(--sp-32) 0;
  font-size: var(--t-sm);
  line-height: 1.6;
}

.picker-subhead {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  margin: var(--sp-4) 0 0;
  line-height: 1.5;
}

/* ── Leftover overlay confirm bar ─────────────────────────────────────────── */

#leftover-overlay .picker-confirm-bar {
  gap: var(--sp-8);
}
#leftover-overlay .selector-btn {
  flex: 0 0 auto;
  padding: 10px var(--sp-16);
}

/* ── Closing screen ───────────────────────────────────────────────────────── */

#closing-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 300;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-32);
  text-align: center;
}

#closing-screen.visible {
  display: flex;
}

.closing-wordmark {
  font-size: var(--t-sm);
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-32);
}

.closing-message {
  font-size: var(--t-lg);
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
  max-width: 280px;
  margin-bottom: var(--sp-48);
}

#close-app-btn {
  height: 52px;
  padding: 0 var(--sp-32);
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 14px;
  font-size: var(--t-base);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.closing-secondary {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--t-sm);
  text-decoration: underline;
  cursor: pointer;
  margin-top: var(--sp-16);
  font-family: inherit;
}

/* Hide nav and header when session is closed */
body.session-closed .header,
body.session-closed .bottom-nav {
  display: none !important;
}


/* ── Selection buttons on task cards ──────────────────────────────────────── */

.task-btn--select {
  font-size: 22px;
  color: var(--text-muted);
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.task-btn--select:hover {
  color: var(--text-secondary);
}

.task-btn--select.selected {
  color: #2D9E6B;
}

.task-btn--select.selected:hover,
.task-btn--select.selected:focus-visible {
  background: rgba(45, 158, 107, 0.12);
  color: #2D9E6B;
}

.task-card:has(.task-btn--select.selected) {
  background: rgba(45, 158, 107, 0.10);
  border-color: rgba(45, 158, 107, 0.50);
}

.task-card:has(.task-btn--select.selected):hover {
  background: rgba(45, 158, 107, 0.10);
  border-color: rgba(45, 158, 107, 0.50);
}

.task-btn--remove {
  color: var(--text-muted);
  transition: color var(--dur-fast) ease;
}

.task-btn--remove:hover {
  color: #e55;
}


/* ── All-done celebration ─────────────────────────────────────────────────── */

.all-done-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-48) var(--sp-24) var(--sp-32);
  gap: var(--sp-16);
}

.all-done-icon {
  font-size: 3.5rem;
  color: var(--accent);
  line-height: 1;
}

.all-done-title {
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.all-done-body {
  color: var(--text-secondary);
  font-size: var(--t-base);
  max-width: 280px;
  line-height: 1.5;
}

.all-done-state .submit-btn {
  width: 100%;
  max-width: 280px;
}


/* ── Now screen empty / pick-tasks state ──────────────────────────────────── */

.now-pick-btn {
  margin-top: var(--sp-20);
  width: 100%;
  max-width: 280px;
}


/* ── Tasks screen filter toggle ───────────────────────────────────────────── */

.tasks-show-all-btn {
  font-size: var(--t-xs);
  font-weight: 500;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.tasks-show-all-btn.active {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  border-color: var(--accent);
  color: var(--accent);
}


/* ── Energy-change prompt modal ───────────────────────────────────────────── */

.energy-change-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 400;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-16);
  padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom));
  padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.energy-change-modal.visible {
  opacity: 1;
}

.energy-change-inner {
  background: var(--surface-raised);
  border-radius: 16px;
  padding: var(--sp-24);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.energy-change-title {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.energy-change-body {
  color: var(--text-secondary);
  font-size: var(--t-base);
  margin: 0;
}

.energy-change-actions {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-4);
}

.energy-change-actions .selector-btn {
  flex: 1;
  text-align: center;
}

.energy-change-actions .submit-btn {
  flex: 1;
  padding: 10px var(--sp-12);
}


/* ── Phase 11: Recurring tasks ──────────────────────────────────────────────── */

/* Recurrence badge on task cards */
.tag--recurring {
  background: #E8EEF5;
  color: #4A627A;
  font-size: 10px;
}

/* Recurrence field wrapper */
.recurrence-field-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Day-of-week picker */
.dow-picker {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.dow-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: var(--t-sm);
  font-weight: 700;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.dow-btn[aria-pressed="true"] {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.dow-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Day-of-month picker */
.dom-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.dom-warning {
  font-size: var(--t-xs);
  color: var(--should-color);
}

/* Recurrence delete confirmation modal */
.recurrence-delete-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-16);
  padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.recurrence-delete-modal.visible {
  opacity: 1;
}

.recurrence-delete-inner {
  background: var(--surface-raised);
  border-radius: 16px;
  padding: var(--sp-24);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.recurrence-delete-title {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.recurrence-delete-body {
  color: var(--text-secondary);
  font-size: var(--t-base);
  margin: 0;
}

.recurrence-delete-actions {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-4);
}

.recurrence-delete-actions .selector-btn {
  flex: 1;
  text-align: center;
}

.recurrence-delete-series-btn[aria-pressed="false"] {
  color: var(--must-color);
  border-color: var(--must-color);
}

.recurrence-delete-cancel {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--t-sm);
  text-align: center;
  padding: var(--sp-4);
  cursor: pointer;
  width: 100%;
}

.recurrence-delete-cancel:hover {
  color: var(--text-secondary);
}


/* ── Phase 12: Category management overlay ──────────────────────────────────── */

.cat-manager-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cat-manager-overlay.visible {
  opacity: 1;
}

.cat-manager-inner {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(30px);
  transition: transform 0.25s var(--ease-out);
}

.cat-manager-overlay.visible .cat-manager-inner {
  transform: translateY(0);
}

.cat-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-20) var(--sp-20) var(--sp-12);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cat-manager-title {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.cat-manager-body {
  overflow-y: auto;
  padding: var(--sp-16) var(--sp-20);
  padding-bottom: calc(var(--sp-20) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.cat-manager-loading {
  color: var(--text-secondary);
  font-size: var(--t-sm);
  text-align: center;
  padding: var(--sp-24) 0;
}

/* Sections */
.cat-manager-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cat-manager-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.cat-manager-section-title {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.cat-manager-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-manager-empty {
  font-size: var(--t-sm);
  color: var(--text-muted);
  padding: var(--sp-12) 0;
}

/* Category rows */
.cat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  background: var(--surface-raised);
  border-radius: 10px;
  min-height: 44px;
}

.cat-row-name {
  flex: 1;
  font-size: var(--t-base);
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-system-badge {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.cat-task-count {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--border);
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 var(--sp-4);
  flex-shrink: 0;
}

/* Reorder buttons */
.cat-reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.cat-reorder-btn {
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  border-radius: 4px;
  transition: color var(--dur-fast), background var(--dur-fast);
}

.cat-reorder-btn:not(:disabled):hover {
  color: var(--text);
  background: var(--border);
}

.cat-reorder-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

/* Action buttons (rename / delete) */
.cat-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: var(--t-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
  flex-shrink: 0;
  cursor: pointer;
}

.cat-action-btn:hover {
  color: var(--text-secondary);
  background: var(--border);
}

.cat-action-btn--delete:hover {
  color: var(--must-color);
  background: rgba(224, 90, 78, 0.1);
}

.cat-action-btn--confirm {
  color: var(--want-color);
}

.cat-action-btn--confirm:hover {
  color: var(--want-color);
  background: rgba(96, 192, 122, 0.12);
}

.cat-action-btn--confirm-del {
  color: var(--must-color);
  width: auto;
  padding: 0 var(--sp-12);
}

/* Editing state */
.cat-row--editing {
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.cat-rename-input {
  flex: 1;
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: var(--sp-4) var(--sp-8);
  outline: none;
  min-width: 0;
}

.cat-rename-error {
  flex-basis: 100%;
  font-size: var(--t-xs);
  color: var(--must-color);
  margin-top: var(--sp-2);
}

/* Delete confirm state */
.cat-row--confirm {
  background: rgba(224, 90, 78, 0.08);
  border: 1px solid rgba(224, 90, 78, 0.2);
}

.cat-delete-msg {
  flex: 1;
  font-size: var(--t-sm);
  color: var(--text-secondary);
}

/* Add category section */
.cat-manager-add {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}

.cat-add-btn {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--sp-8) var(--sp-12);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.cat-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.cat-add-error {
  margin: 0;
}

/* Import: unknown category highlight */
.import-cat-unknown {
  color: var(--should-color);
  font-style: normal;
}


/* ── Settings overlay ─────────────────────────────────────────────────── */

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0);
  transition: background var(--dur-normal);
  pointer-events: none;
}

.settings-overlay.visible {
  background: rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.settings-inner {
  width: 100%;
  max-height: 50vh;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: var(--sp-20) var(--sp-16) calc(var(--sp-20) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--dur-normal) ease;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.settings-overlay.visible .settings-inner {
  transform: translateY(0);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-title {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.settings-close {
  background: var(--surface-raised);
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.settings-section-label {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4) 0;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-label {
  font-size: var(--t-base);
  color: var(--text);
}

/* Toggle switch */
.settings-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  flex-shrink: 0;
}

.settings-toggle--on {
  background: var(--accent);
  border-color: var(--accent);
}

.settings-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform var(--dur-fast), background var(--dur-fast);
}

.settings-toggle--on .settings-toggle-thumb {
  transform: translateX(20px);
  background: #FFFFFF;
}