/* Task context system: the same visual language is used in Tasks and Route. */
#tasksView .taskcard,
#routeView .route-row,
#routeStepCard{
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,opacity .16s ease;
}

/* Retire older Blessing decorations. Blessing identity is now the green state + title icon. */
#tasksView .ll-blessing-badge,
#routeView .ll-blessing-badge,
.ll-task-context-pill.blessing{display:none!important}
#tasksView .ll-blessing-task,
#routeView .ll-blessing-task{background-image:none!important}

/* Normal incomplete task. */
#tasksView .ll-task-state-normal,
#routeView .ll-task-state-normal,
#routeStepCard.ll-task-state-normal{
  opacity:1!important;
  border-color:#29445e!important;
  box-shadow:none!important;
  background:linear-gradient(180deg,#0e1e2d,#0a1724)!important;
}

/* A task with numeric skill requirements already satisfied. */
#tasksView .ll-task-state-ready,
#routeView .ll-task-state-ready,
#routeStepCard.ll-task-state-ready{
  opacity:1!important;
  border-color:rgba(243,198,93,.82)!important;
  box-shadow:inset 3px 0 0 rgba(243,198,93,.72),0 0 0 1px rgba(243,198,93,.08)!important;
  background:linear-gradient(180deg,rgba(51,43,18,.74),rgba(27,25,15,.74))!important;
}

/* Blessing task. Region blocking and completion take precedence in JavaScript. */
#tasksView .ll-task-state-blessing,
#routeView .ll-task-state-blessing,
#routeStepCard.ll-task-state-blessing{
  opacity:1!important;
  border-color:rgba(85,217,138,.76)!important;
  box-shadow:inset 3px 0 0 rgba(85,217,138,.76),0 0 0 1px rgba(85,217,138,.08)!important;
  background:linear-gradient(180deg,rgba(15,48,34,.78),rgba(9,29,23,.78))!important;
}

/* Region unavailable. Numeric skill blocking alone does not make a task red. */
#tasksView .ll-task-state-blocked,
#routeView .ll-task-state-blocked,
#routeStepCard.ll-task-state-blocked{
  opacity:1!important;
  border-color:rgba(237,116,128,.78)!important;
  box-shadow:inset 3px 0 0 rgba(237,116,128,.72),0 0 0 1px rgba(237,116,128,.08)!important;
  background:linear-gradient(180deg,rgba(57,24,31,.78),rgba(33,16,22,.78))!important;
}

/* Completed is deliberately not another color state: it is visually crossed out. */
#tasksView .taskcard.ll-task-state-completed,
#routeView .route-row.ll-task-state-completed,
#routeStepCard.ll-task-state-completed{
  opacity:.58!important;
  border-color:#29445e!important;
  box-shadow:none!important;
  background:linear-gradient(180deg,#0b1722,#08121b)!important;
}
#tasksView .taskcard.ll-task-state-completed .task-title,
#routeView .route-row.ll-task-state-completed .task-title,
#routeView .route-row.ll-task-state-completed strong,
#routeStepCard.ll-task-state-completed .route-step-title{
  text-decoration:line-through!important;
  text-decoration-thickness:1.5px!important;
  text-decoration-color:rgba(197,212,227,.72)!important;
  color:#8ea4b9!important;
}

/* Blessing icon sits immediately before the task title everywhere. */
.ll-task-title-with-type{display:flex!important;align-items:center!important;gap:7px!important}
.ll-blessing-title-icon{display:inline-block;width:19px;height:19px;flex:0 0 19px;background-position:center;background-repeat:no-repeat;background-size:contain}
#routeView .route-row .ll-blessing-title-icon{width:17px;height:17px;flex-basis:17px}
#routeStepCard .ll-blessing-title-icon{width:23px;height:23px;flex-basis:23px}

.ll-task-context-markers,
.ll-route-task-markers{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:6px}
.ll-route-task-markers{margin-top:4px}
.ll-task-context-pill{
  display:inline-flex;align-items:center;gap:4px;padding:2px 6px;
  border:1px solid var(--line);border-radius:999px;
  font-size:9px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  background:#09141f;color:var(--muted)
}
.ll-task-context-pill.ready,
.ll-route-state-pill.ready{border-color:#755e26!important;color:#ffe3a0!important;background:#211b0c!important}
.ll-task-context-pill.blocked,
.ll-route-state-pill.blocked{border-color:#7b3d47!important;color:#ffc0c7!important;background:#271216!important}
.ll-task-context-pill.completed,
.ll-route-state-pill.completed{border-color:#40576d!important;color:#a8b7c6!important;background:#0b1722!important}

/* Keep state treatment identical in the route queue, including the selected row. */
#routeView .route-row.current.ll-task-state-ready{border-color:rgba(243,198,93,.96)!important}
#routeView .route-row.current.ll-task-state-blessing{border-color:rgba(85,217,138,.94)!important}
#routeView .route-row.current.ll-task-state-blocked{border-color:rgba(237,116,128,.94)!important}

@media(max-width:700px){
  .ll-task-context-markers,.ll-route-task-markers{gap:4px}
  .ll-blessing-title-icon{width:17px;height:17px;flex-basis:17px}
}