/* ---------- todo tray ----------
   The tray opens with a height animation instead of popping in: it lives in
   the bottom bar, and a one-frame reflow there shoves the input box down. */
.todo-tray {
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  padding: 0 4px;
  opacity: 0;
  transform: translateY(6px);
  transition: max-height 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              padding 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.28s ease,
              transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
              border-color 0.3s ease;
}

.todo-tray.show {
  max-height: 16rem;
  border-top-color: var(--border);
  padding: 10px 4px 8px;
  margin-bottom: 10px;
  opacity: 1;
  transform: translateY(0);
}

.todo-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.todo-name {
  font-weight: 700;
  color: var(--text);
  transition: color 0.3s ease;
}

.todo-score {
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.todo-list,
.todo-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.todo-list {
  margin-top: 10px;
}

.todo-group-label {
  color: var(--text);
  font-weight: 700;
  line-height: 1.55;
}

.todo-group + .todo-group {
  margin-top: 4px;
}

.todo-children {
  margin-left: 0.5ch;
  padding-left: 2ch;
}

.todo-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.55;
  transition: color 0.3s ease;
}

.todo-item::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: -2ch;
  top: -0.775em;
  width: 1.2ch;
  height: 1.55em;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.todo-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -2ch;
  top: 0.775em;
  bottom: -0.775em;
  border-left: 1px solid var(--border);
}

.todo-glyph {
  flex: none;
  width: 1ch;
  transition: color 0.25s ease;
}

.todo-item[data-status="pending"] {
  color: var(--text);
}


.todo-item[data-status="in_progress"] {
  color: var(--accent-purple);
}

.todo-item[data-status="in_progress"] .todo-glyph {
  color: var(--accent-purple);
}

.todo-item[data-status="completed"] {
  color: var(--accent-green);
}

.todo-item[data-status="completed"] .todo-label {
  text-decoration: line-through;
}

/* ---------- summary bullets ---------- */
.msg-bullets {
  list-style: none;
  margin-top: 8px;
}

.msg-bullets li {
  display: flex;
  gap: 8px;
  line-height: 1.6;
}

.msg-bullets .bullet {
  color: var(--text-muted);
  flex: none;
}

.msg-bullets .bold {
  font-weight: 700;
}

@media (max-width: 40rem) {

  .todo-title,
  .todo-group-label,
  .todo-item {
    font-size: 11.5px;
  }
}

body.is-card .todo-title,
body.is-card .todo-group-label,
body.is-card .todo-item {
  font-size: clamp(9px, 1.8vw, 13px);
}

@media (prefers-reduced-motion: reduce) {

  .todo-tray,
  .todo-item {
    transition: none;
  }
}