/* Todo strip in the composer context stack (Figma 1236:32276): tip surface,
   status icons + secondary item labels. Its visible card aligns with the
   GoalBar and the Queue panel inside their shared dock column: 12px radius,
   36px collapsed row, 12px side padding, 14px tertiary leading glyph. */

.root {
  box-sizing: border-box;
  flex: none;
  overflow: hidden;
  margin: 0 auto;
  width: calc(
    100% -
    var(--dsh-composer-side-clearance) -
    var(--dsh-composer-side-clearance) -
    var(--dsh-composer-dock-inset) -
    var(--dsh-composer-dock-inset) -
    var(--dsh-composer-dock-inset) -
    var(--dsh-composer-dock-inset)
  );
  max-width: calc(
    var(--dsh-composer-card-max-width) -
    var(--dsh-composer-dock-inset) -
    var(--dsh-composer-dock-inset) -
    var(--dsh-composer-dock-inset) -
    var(--dsh-composer-dock-inset)
  );
  border: 1px solid var(--dsw-alias-border-l1);
  border-radius: 12px;
  background: var(--dsw-specific-tip);
  /* Elevated surface: `--dsw-specific-tip` is the same dark rung as the menu
     surface, and `.list` scrolls inside this card, so the thumb takes the l2
     elevation tokens. Declared here because the elevation belongs to the
     surface, and the custom properties inherit down to `.list` (see ui-theme
     styles/scrollbar.css for the rebinding contract). */
  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
}

.body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 12px;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.lead {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--dsw-alias-label-tertiary);
}

.title {
  flex: none;
  font-size: 13px;
  line-height: 24px;
  font-weight: 500;
  color: var(--dsw-alias-label-primary);
}

.progress {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--dsw-alias-label-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron {
  display: grid;
  flex: none;
  place-items: center;
  color: var(--dsw-alias-label-tertiary);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
}

.item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--dsw-alias-label-secondary);
}

.glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
}

.glyphCompleted {
  color: var(--dsw-alias-state-success-primary);
}

.glyphPending {
  color: var(--dsw-alias-label-caption);
}

.glyphProgress {
  color: var(--dsw-alias-state-business-primary);
  animation: todo-progress-spin 1s linear infinite;
}

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

/* Figma strip is single-line; long items ellipsize with no inline expand. */
.content {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
