/* A completed goal can remain in view, continue as a habit, or be archived. */
.goal-lifecycle {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 13px;
  padding: 19px 20px;
  margin: 4px 0 23px;
  border: 1px solid #dce5ce;
  border-radius: 16px;
  background: #f1f5e8;
  color: #536a41;
}
.goal-lifecycle .lifecycle-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border-radius: 12px;
  background: #e3edd5;
  color: #78935d;
}
.goal-lifecycle .lifecycle-icon .icon,
.goal-lifecycle .lifecycle-icon > svg { width: 23px; height: 23px; }
.goal-lifecycle > div:not(.lifecycle-icon):not(.lifecycle-actions) { flex: 1 1 190px; min-width: 0; }
.goal-lifecycle h2 { margin: 0 0 6px; font-size: 15px; font-weight: 750; letter-spacing: -.2px; line-height: 1.5; color: #526a3f; }
.goal-lifecycle p { font-size: 12px; line-height: 1.75; color: #839475; overflow-wrap: anywhere; }
.goal-lifecycle .lifecycle-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; padding-top: 2px; }
.lifecycle-actions :is(.primary, .secondary, .text-button) { min-height: 42px; padding: 10px 15px; font-size: 12px; line-height: 1.5; white-space: normal; }
.goal-lifecycle .primary { background: #77915b; box-shadow: none; }
.goal-lifecycle .primary:hover { background: #637e48; }
.goal-lifecycle .secondary { border-color: #cedabb; color: #738660; background: #ffffff80; }
.goal-lifecycle .secondary:hover { background: #f8fbf2; border-color: #b4c69c; }
.goal-lifecycle .text-button { color: #859773; }
.goal-lifecycle.completed { background: #edf6ec; border-color: #d7e8d3; }
.goal-lifecycle.completed .lifecycle-icon { color: #67a177; background: #dcefdc; }
.goal-lifecycle.completed h2 { color: #4f7853; }
.goal-lifecycle.completed p { color: #7a997b; }
.goal-lifecycle.archived { background: #f7f4eb; border-color: #e8e1cf; }
.goal-lifecycle.archived .lifecycle-icon { color: #a79874; background: #ede7d7; }
.goal-lifecycle.archived h2 { color: #7f765d; }
.goal-lifecycle.archived p { color: #a09780; }
.goal-lifecycle.archived .secondary { border-color: #ded5bf; color: #8d8164; }
.goal-lifecycle.archived .text-button { color: #a3977a; }
.goal-lifecycle button:focus-visible { outline-color: #a5ba88; }

.goal-kind-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #e0e7d5;
  border-radius: 7px;
  background: #f1f5e9;
  color: #7f936a;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.goal-card footer:has(.goal-kind-badge) { flex-wrap: wrap; row-gap: 8px; }
.goal-kind-note { display: block; margin-top: 8px; color: #8b9a7d; font-size: 11px; font-weight: 400; line-height: 1.75; overflow-wrap: anywhere; }
.completion-copy { padding: 8px 2px 5px; }
.completion-copy h3 { color: #547641; font-size: 19px; line-height: 1.5; font-weight: 750; }
.completion-copy p { margin-top: 10px; color: #899b7a; font-size: 13px; line-height: 1.85; }
.completion-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 24px; }
.completion-actions > button { flex: 1 1 180px; min-height: 46px; padding: 12px 15px; line-height: 1.5; font-size: 12px; white-space: normal; }
.completion-actions .primary { background: #77945a; box-shadow: none; }
.completion-actions .primary:hover { background: #647f48; }
.completion-actions .secondary { color: #81946c; border-color: #dce5cf; background: #fafcf6; }
.completion-actions button:focus-visible { outline-color: #a5ba88; }

html:is([data-task-size="large"], [data-task-size="xlarge"]) .goal-lifecycle h2 { font-size: 17px; }
html:is([data-task-size="large"], [data-task-size="xlarge"]) .goal-lifecycle p { font-size: 14px; }
html:is([data-task-size="large"], [data-task-size="xlarge"]) .lifecycle-actions :is(.primary, .secondary, .text-button) { min-height: 44px; font-size: 13px; }
@media (max-width: 700px) {
  .goal-lifecycle { padding: 17px 15px; gap: 10px; margin-bottom: 19px; border-radius: 15px; }
  .goal-lifecycle .lifecycle-icon { width: 35px; height: 35px; flex-basis: 35px; border-radius: 11px; }
  .goal-lifecycle .lifecycle-icon .icon,
  .goal-lifecycle .lifecycle-icon > svg { width: 21px; height: 21px; }
  .goal-lifecycle > div:not(.lifecycle-icon):not(.lifecycle-actions) { flex-basis: 160px; }
  .goal-lifecycle h2 { font-size: 14px; }
  .goal-lifecycle p { font-size: 12px; }
  .goal-lifecycle .lifecycle-actions { gap: 7px; padding-top: 4px; }
  .lifecycle-actions :is(.primary, .secondary, .text-button) { min-height: 44px; padding: 10px 12px; font-size: 11px; }
  .goal-kind-badge { font-size: 9px; padding: 4px 6px; }
  .completion-copy h3 { font-size: 17px; }
  .completion-copy p { font-size: 12px; }
  .completion-actions { gap: 9px; margin-top: 20px; }
  .completion-actions > button { flex-basis: 100%; font-size: 12px; }
}