/* -----------------------------------------------------------------------
   Helm — dark-mode-friendly minimal stylesheet
   ----------------------------------------------------------------------- */

:root {
  --bg:        #1a1a1a;
  --surface:   #242424;
  --border:    #333;
  --text:      #e0e0e0;
  --muted:     #888;
  --accent:    #7aa2f7;
  --danger:    #f7768e;
  --success:   #9ece6a;
  --radius:    6px;
  --font:      system-ui, -apple-system, sans-serif;
  --nav-h:     42px;
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.35;
  min-height: 100vh;
}

/* ---- Nav ---- */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

nav .nav-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
  margin-right: 8px;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

nav a:hover, nav a.active { color: var(--text); }

nav .spacer { flex: 1; }

/* ---- Main ---- */
main {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ---- Login ---- */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 360px;
}

.login-box h1 {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  color: var(--accent);
}

.login-box label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
  margin-top: 1rem;
}

.login-box input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
}

.login-box input:focus {
  outline: none;
  border-color: var(--accent);
}

.login-box button {
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.6rem;
  background: var(--accent);
  color: #1a1a1a;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.95rem;
}

.login-box button:hover { opacity: 0.9; }

/* ---- Capture bar ---- */
.capture-wrap {
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
  background: var(--bg);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.capture-wrap input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
}

.capture-wrap input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---- Autocomplete dropdown ---- */
.capture-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 200;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.ac-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.ac-item:hover,
.ac-item.active { background: var(--border); }

.ac-proj { flex: 1; }
.ac-ctx  { font-size: 0.78rem; }

/* ---- Utilities ---- */
.error {
  color: var(--danger);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.placeholder {
  color: var(--muted);
  font-style: italic;
}

.hidden { display: none !important; }
.muted  { color: var(--muted); }

.badge {
  display: inline-block;
  background: var(--accent);
  color: #1a1a1a;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* ---- Collapsible sections (<details>/<summary>) ---- */
details > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details > summary::-webkit-details-marker { display: none; }

.section-header {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.section-header::before {
  content: '▶';
  font-size: 0.55em;
  opacity: 0.7;
  margin-right: 0.3rem;
}
details[open] > .section-header::before { content: '▼'; }

.section-body {
  padding: 0.3rem 0 0.15rem 0.75rem;
}

.todo-section { margin-bottom: 1.25rem; }

.empty-hint {
  font-size: 0.85rem;
  margin: 0.35rem 0;
}

/* ---- Context groups (nested inside Contexts section) ---- */
.ctx-group { margin-bottom: 0.4rem; }

.ctx-header {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  padding: 0.2rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.ctx-header::before {
  content: '▶';
  font-size: 0.55em;
  opacity: 0.5;
  flex-shrink: 0;
}
details[open] > .ctx-header::before { content: '▼'; }

.ctx-body {
  padding: 0.15rem 0 0.1rem 0.75rem;
}

/* ---- Projects ---- */
.project { margin-bottom: 0.05rem; }

.project-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.02rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.project-header::before {
  content: '▶';
  font-size: 0.55em;
  opacity: 0.5;
  flex-shrink: 0;
}
details[open] > .project-header::before { content: '▼'; }

.project-goal {
  font-weight: 400;
  font-size: 0.82em;
}

.project-body {
  padding: 0.1rem 0 0.1rem 1.25rem;
}
.proj-capture-form {
  margin-top: 0.4rem;
}
.proj-capture-input {
  width: 100%;
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg-input, var(--bg));
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}

/* ---- Tasks ---- */
.task {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
}
.task:hover .task-title {
  color: #9ece6a;
}

.task.done .task-title {
  text-decoration: line-through;
  color: var(--muted);
}

.checkbox {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.checkbox:hover   { color: var(--accent); }
.done-check       { color: var(--success); }
.done-check:hover { color: var(--muted); }

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

.task-delete {
  color: var(--muted);
  font-size: 1rem;
  padding: 0 0.2rem;
  opacity: 0;
  transition: opacity 0.1s;
}
.task:hover .task-delete { opacity: 1; }
.task-delete:hover        { color: var(--danger); }

.toggle-done-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.2rem 0;
  margin-top: 0.1rem;
}
.toggle-done-btn:hover { color: var(--text); }

/* ---- Inbox ---- */
.inbox-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.inbox-item:last-child { border-bottom: none; }

.inbox-text { font-size: 0.9rem; display: block; margin-bottom: 0.25rem; }

.clarify-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin: 0.4rem 0;
}

.clarify-radios {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
}

.clarify-panel { margin-bottom: 0.5rem; }

.clarify-panel select,
.clarify-panel input[type="text"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  margin-right: 0.4rem;
}
.clarify-panel select { min-width: 200px; }

.clarify-buttons { display: flex; gap: 0.4rem; margin-top: 0.6rem; }

/* ---- Per-section Waiting For sub-section ---- */
.waiting-subsection {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.3rem;
}
.waiting-header {
  font-size: 0.5rem;
  color: var(--muted);
  font-style: italic;
  padding: 0.1rem 0 0.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Drag-and-drop ---- */
.drag-handle {
  cursor: grab;
  color: var(--muted);
  opacity: 0;
  padding: 0 0.25rem 0 0;
  font-size: 1rem;
  user-select: none;
  flex-shrink: 0;
  transition: opacity 0.1s;
}
.task:hover .drag-handle,
.project-header:hover .drag-handle { opacity: 0.5; }
.drag-handle:hover { opacity: 1 !important; color: var(--text); }
.drag-handle:active { cursor: grabbing; }
.dragging { opacity: 0.35; }
.drop-before { border-top: 2px solid var(--accent); }
.drop-after  { border-bottom: 2px solid var(--accent); }

/* ---- Buttons ---- */
.btn-small {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}
.btn-small:hover     { border-color: var(--accent); color: var(--accent); }
.btn-primary         { background: var(--accent); border-color: var(--accent); color: #1a1a1a; font-weight: 600; }
.btn-primary:hover   { opacity: 0.9; }

.btn-add {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3rem 0;
}
.btn-add:hover { color: var(--accent); }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}

/* ---- Inline forms ---- */
.form-inline        { display: inline; }
.form-inline button { display: inline; }

.inline-new-form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.inline-new-form input[type="text"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}
.inline-new-form input:focus { outline: none; border-color: var(--accent); }

.new-project-area,
.new-waiting-area,
.new-context-area { margin-top: 0.6rem; }

/* ---- Rename (edit) button on context/project headers ---- */
.btn-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0 0.15rem;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.1s;
}
.ctx-header:hover .btn-edit,
.project-header:hover .btn-edit { opacity: 1; }
.btn-edit:hover { color: var(--accent); }

/* ---- Edit button on task rows ---- */
.btn-edit-task {
  font-size: 0.8rem;
  padding: 0 0.15rem;
  opacity: 0;
  transition: opacity 0.1s;
  margin-left: 0;
}
.task:hover .btn-edit-task { opacity: 1; }
.btn-edit-task:hover { color: var(--accent); }

/* ---- Delete context button ---- */
.btn-delete-ctx {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 0.15rem;
  opacity: 0;
  transition: opacity 0.1s;
}
.ctx-header:hover .btn-delete-ctx { opacity: 1; }
.btn-delete-ctx:hover { color: var(--danger); }

/* ---- Task edit inline form ---- */
.edit-task-form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.2rem 0 0.2rem 1.4rem;
  font-size: 0.85rem;
}
.edit-task-input-wrap {
  position: relative;
  flex: 1;
}
.edit-task-input-wrap input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}
.edit-task-input-wrap input:focus { outline: none; border-color: var(--accent); }

/* ---- Archive button on project headers ---- */
.btn-archive {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0 0.15rem;
  opacity: 0;
  transition: opacity 0.1s;
}
.project-header:hover .btn-archive { opacity: 1; }
.btn-archive:hover { color: var(--danger); }

/* ---- Archived projects section ---- */
.archived-list {
  margin-top: 0.2rem;
}
.archived-project-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.archived-project-row:last-child { border-bottom: none; }
.archived-project-name {
  color: var(--muted);
  flex-shrink: 0;
}

/* ---- Overdue propagation to project and context headers ---- */
.project-header.has-overdue .proj-name { color: var(--danger); }
.ctx-header.has-overdue > span:first-child { color: var(--danger); }

/* ---- Clear deadline button ---- */
.deadline-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s;
  line-height: 1;
  vertical-align: middle;
}
.task:hover .deadline-clear { opacity: 1; }
.deadline-clear:hover { color: var(--danger); }

/* ---- Deadline tag on tasks ---- */
.deadline-tag {
  font-size: 0.68rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.deadline-tag.past { color: var(--danger); border-color: var(--danger); }
.task-title.overdue { color: var(--danger); }
/* ---- Move-to-project button (inbox tasks) ---- */
.btn-move {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  padding: 0 0.2rem;
  opacity: 0;
  transition: opacity 0.1s;
}
.task:hover .btn-move { opacity: 1; }
.btn-move:hover        { color: var(--accent); }

/* ---- Overdue tasks summary section ---- */
.overdue-location {
  font-size: 0.78rem;
  white-space: nowrap;
}
.badge.badge-danger { background: var(--danger); color: var(--bg); }

/* ---- Move inline form ---- */
.move-form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.3rem 0 0.3rem 1.4rem;
  font-size: 0.85rem;
}
.move-form select {
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.25rem 0.4rem;
}

/* ---- Mobile / touch ---- */
@media (max-width: 640px) {
  main {
    padding: 0.75rem;
  }

  /* Show action buttons always on touch (no hover) */
  .task-delete,
  .btn-edit-task,
  .btn-move,
  .btn-edit,
  .btn-delete-ctx,
  .btn-archive,
  .deadline-clear {
    opacity: 1;
  }

  /* Drag-and-drop doesn't work on touch — hide handle */
  .drag-handle {
    display: none;
  }

  /* Larger tap targets for checkboxes and icon buttons */
  .checkbox {
    font-size: 1.2rem;
    padding: 0.1rem;
  }

  /* Clarify form: let select fill available width */
  .clarify-panel select {
    min-width: unset;
    width: 100%;
    margin-bottom: 0.4rem;
  }
  .clarify-radios {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Edit task form: remove deep indent on small screens */
  .edit-task-form {
    padding-left: 0;
  }
  .move-form {
    padding-left: 0;
  }
}