/* Tasks view (item #3455). Per-view stylesheet — the routed-view
   convention #3456 follows: one css/<view>.css per VIEWS entry, loaded from
   index.html after chat.css so it inherits the entry's token palette.
   Everything here is .mm-tasks*; the nav-row chrome stays in chat.css. */

.mm-tasks {
  box-sizing: border-box; height: 100%; overflow-y: auto;
  padding: 32px 36px 48px;
}
.mm-tasks-head {
  display: flex; align-items: center; gap: 12px;
  max-width: 860px; margin: 0 auto 6px;
}
.mm-tasks-title { font-size: 19px; font-weight: 700; margin: 0; flex: 1; }
.mm-tasks-head-actions { display: flex; align-items: center; gap: 8px; }
.mm-tasks-mine {
  font: inherit; font-size: 12px; font-weight: 650;
  color: var(--text-dim); background: var(--panel);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 12px; cursor: pointer;
}
.mm-tasks-mine:hover { border-color: var(--accent); color: var(--text); }
.mm-tasks-mine.on {
  color: var(--on-accent); background: var(--accent-fill);
  border-color: var(--accent-fill);
}

.mm-tasks-body { max-width: 860px; margin: 0 auto; }
.mm-tasks-state {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim); font-size: 13.5px; padding: 18px 2px;
}
.mm-tasks-retry {
  font: inherit; font-size: 12px; font-weight: 650;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 12px; cursor: pointer;
}
.mm-tasks-retry:hover { border-color: var(--accent); }

.mm-tasks-sec { margin: 14px 0 0; }
.mm-tasks-sec-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 2px; border-bottom: 1px solid var(--border-soft);
}
.mm-tasks-sec-title {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim); margin: 0;
}
.mm-tasks-planning {
  margin-left: auto; font-size: 12px; font-weight: 650; color: var(--accent);
  text-decoration: none;
}
.mm-tasks-planning:hover { text-decoration: underline; }

.mm-tasks-list { display: flex; flex-direction: column; }
.mm-tasks-empty { color: var(--text-dim); font-size: 13px; padding: 10px 2px; }
.mm-tasks-board-head {
  font-size: 11.5px; font-weight: 650; color: var(--text-dim);
  padding: 10px 2px 3px;
}

/* The row (#3644): id · title · one chip · one dot. The whole row is the
   click (the drawer opens in place), the title is the focusable keyboard
   path, and the chip is the only other action. */
.mm-task-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 4px; border-bottom: 1px solid var(--border-soft);
  font-size: 13px; cursor: pointer; border-radius: 6px;
}
.mm-task-row:hover { background: var(--panel-2); }
.mm-task-row:focus-within { background: var(--panel-2); }
.mm-task-id { flex: none; font-size: 11.5px; color: var(--text-dim); }
.mm-task-title {
  flex: 1; min-width: 0; color: var(--text); font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The title is a button (#3465): it opens the item reader in-app. Reset the
   button chrome so the row reads as one line; the focus ring is the one
   visible difference between hover and keyboard focus. */
button.mm-task-title {
  font: inherit; font-weight: 550; background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer; border-radius: 3px;
}
.mm-task-row:hover button.mm-task-title { color: var(--accent-ink); }
button.mm-task-title:focus-visible {
  outline: 0; box-shadow: 0 0 0 2px var(--focus);
}
/* The verb chip: Scope / Build / Approve first on a dispatchable row. A
   button on the desktop build (it starts a session), a span elsewhere. */
.mm-task-chip {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; border-radius: 999px; padding: 2px 9px;
  border: 1px solid var(--border); color: var(--text);
  background: var(--panel);
}
.mm-task-chip.accent { color: var(--accent-ink); border-color: var(--accent); }
.mm-task-chip.ok { color: var(--ok); border-color: var(--ok); }
.mm-task-chip.warn { color: var(--warn); border-color: var(--warn); }
button.mm-task-chip { font-family: inherit; cursor: pointer; }
button.mm-task-chip:hover { background: var(--panel-2); }
button.mm-task-chip:focus-visible {
  outline: 0; box-shadow: 0 0 0 2px var(--focus);
}
/* Horizon Now: the one urgency the row still shows. */
.mm-task-now {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger);
}
.mm-tasks-sec-count {
  font-size: 11.5px; font-weight: 650; color: var(--text-dim);
  margin-left: -4px;
}

.mm-tasks-more {
  align-self: flex-start; font: inherit; font-size: 12px; font-weight: 650;
  color: var(--text-dim); background: none; border: 0; cursor: pointer;
  padding: 8px 2px;
}
.mm-tasks-more:hover { color: var(--text); }