.goal-tracker > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.goal-tracker > * + * {
  margin-block-start: 1.5rem;
}
.goal-tracker__header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
}
.goal-tracker__title {
  font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem);
}
.goal-tracker__quarter {
  color: var(--spruce-base-color-muted);
  font-size: var(--spruce-font-size-sm);
}
.goal-tracker__goal {
  --goal-color: var(--spruce-alert-color-success);
  background-color: var(--spruce-base-color-surface);
  border: var(--spruce-border-width-base) solid var(--spruce-base-color-border);
  border-radius: var(--spruce-border-radius-lg);
  padding: 1.5rem;
}
.goal-tracker__goal > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.goal-tracker__goal > * + * {
  margin-block-start: 1rem;
}
.goal-tracker__goal--at-risk {
  --goal-color: var(--spruce-alert-color-warning);
}
.goal-tracker__goal--behind {
  --goal-color: var(--spruce-alert-color-danger);
}
.goal-tracker__goal-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.goal-tracker__goal-title {
  font-size: 1rem;
}
.goal-tracker__summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.goal-tracker__progress {
  accent-color: var(--goal-color);
  block-size: 0.6rem;
  flex: 1 1 12rem;
}
.goal-tracker__percent {
  color: var(--spruce-base-color-heading);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.goal-tracker__owner {
  color: var(--spruce-base-color-muted);
  font-size: var(--spruce-font-size-sm);
}
.goal-tracker__results {
  border-block-start: var(--spruce-border-width-base) solid var(--spruce-base-color-border);
  list-style: none;
  padding: 1rem 0 0;
}
.goal-tracker__results > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.goal-tracker__results > * + * {
  margin-block-start: 1rem;
}
.goal-tracker__result {
  align-items: baseline;
  display: grid;
  font-size: var(--spruce-font-size-sm);
  gap: 0.25rem 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
}
.goal-tracker__result-value {
  color: var(--spruce-base-color-heading);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.goal-tracker__result-value span {
  color: var(--spruce-base-color-muted);
  font-weight: 400;
}
.goal-tracker__bar {
  background-color: var(--spruce-base-color-surface-muted);
  block-size: 0.3rem;
  border-radius: var(--spruce-border-radius-pill);
  grid-column: 1/-1;
  overflow: hidden;
}
.goal-tracker__bar::before {
  background-color: var(--goal-color);
  block-size: 100%;
  border-radius: inherit;
  content: "";
  display: block;
  inline-size: var(--value);
}

.goal-tracker__progress::-webkit-progress-value {
  background-color: var(--goal-color);
}

.goal-tracker__progress::-moz-progress-bar {
  background-color: var(--goal-color);
}